updated notification configuration and zustand implemented

Author: Kshitij Raj

package.json

@@ -18,26 +18,29 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/roboto": "^4.5.8",
+    "@kshitijraj09/sharedlib_mf": "1.0.9",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.127",
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "axios": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.10.0",
-    "styled-components": "^5.3.9",
     "react-timeago": "^7.2.0",
     "socket.io-client": "^4.7.2",
-    "@kshitijraj09/sharedlib_mf": "1.0.7"
+    "styled-components": "^5.3.9",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@types/react": "^18.2.0",
+    "@types/react-timeago": "^4.1.5",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "dotenv-webpack": "^8.0.1",
@@ -47,7 +50,6 @@
     "typescript": "^5.0.4",
     "webpack": "^5.78.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.2",
-    "@types/react-timeago": "^4.1.5"
+    "webpack-dev-server": "^4.13.2"
   }
 }

src/Socket/SocketInit.tsx

@@ -1,7 +1,8 @@
 import React, { memo, useEffect } from "react";
 import { Socket, io } from "socket.io-client";
 import { getUserInfoFromStorage } from "../util";
-import { WindowEvents } from "Sharedlib/eventservice";
+import { WindowEvents } from "@kshitijraj09/sharedlib_mf";
+import useNotificationStore from "../zustand-config/notificationStore";
 
 declare global {
    interface Window {
@@ -13,10 +14,10 @@ const SOCKETIOENDPOINT = process.env.APIBASEURL;
 let socket: Socket = io(SOCKETIOENDPOINT, {
    autoConnect: false
 });
-const eventName = 'messageNotification' as typeof WindowEvents.messageNotification;
-const SocketInit = () => {
+const eventName: WindowEvents = 'messageNotification';
+const useSocketInit = () => {
+   const { increaseNotifications , fetchNotifications } = useNotificationStore();
    const handleSocketConnection = () => {
-      console.log('socket init called');
       if (!socket.connected) {
          const userInfo = JSON.parse(getUserInfoFromStorage());
          socket.connect();
@@ -32,8 +33,9 @@ const SocketInit = () => {
 
    useEffect(() => {
       handleSocketConnection();
+      fetchNotifications();
       socket.on('message-notification', (notification) => {
-         console.log('hello notification', notification)
+         increaseNotifications(notification);
          import("Sharedlib/eventservice").
          then((event) => {
             setTimeout(() => event.default.fire(eventName, { detail: notification }), 100);     
@@ -46,7 +48,7 @@ const SocketInit = () => {
       }
    }, [])
 
-   return (<></>)
+   return {}
 }
 
-export const MemoizedSocketInit = memo(SocketInit);
+export default useSocketInit;

src/apis/apiconstants.ts

@@ -16,4 +16,7 @@ export const unfollowUserAPIUrl = `${followApiRoute}/unfollowuser`;
 
 //People API constants
 export const peopleApiRoute = '/user';
-export const getUserDetailsAPIUrl = `${peopleApiRoute}/getUserDetails`;
+export const getUserDetailsAPIUrl = `${peopleApiRoute}/getUserDetails`;
+
+//Notification API constants
+export const notificationApiRoute = '/notification';

src/apis/getNotifications.ts

@@ -0,0 +1,11 @@
+import { notificationApiRoute } from "./apiconstants";
+import { axiosInstance } from "./axiosInstance";
+
+export const getNotificationsAPI = async () => {
+    try {
+        const { data } = await axiosInstance.get(notificationApiRoute);       
+        return data;
+    } catch (response ) {
+        console.log(response);
+    }
+}

src/apis/getUserDetails.ts

@@ -3,9 +3,9 @@ import { axiosInstance } from "./axiosInstance";
 
 export const getUserDetailsApi = async () => {
     try {
-       const { data } = await axiosInstance.get(getUserDetailsAPIUrl);
-       return data;
-    } catch (error) {
-        console.log(error);
+        const { data } = await axiosInstance.get(getUserDetailsAPIUrl);
+        return data;
+    } catch (response ) {
+        console.log(response);
     }
 }

src/components/AuthRoute/AuthRoute.tsx

@@ -1,50 +1,34 @@
 import React, {useEffect, useState, Suspense} from "react";
 import {SideMenuBar} from "../Homepage/SideMenuBar";
 import {useLocation, useNavigate} from "react-router-dom";
-import { getAccessToken } from "../../util";
+import { getAccessToken, getCurrentPage, getUserDetailsHelper } from "../../util";
 import Loader from "../Loaders";
-import { MemoizedSocketInit as SocketInit } from "../../Socket/SocketInit";
-import { getUserDetailsApi } from "../../apis/getUserDetails";
-import { WindowEvents } from "Sharedlib/eventservice";
-
 type AuthRouteProps = {
    Component: React.ComponentType;
 };
 
 export const AuthRoute = ({Component}: AuthRouteProps) => {
    const navigate = useNavigate();
    const [isAuthenticated, setIsAuthticated] = useState(false);
-   const [selectedPage, setSelectedPage] = useState<string>('')
-   const eventName = 'currentUser' as typeof WindowEvents.currentUser;
-   const {pathname} = useLocation();
-   console.log('process.env.APIBASEURL', process.env.APIBASEURL, pathname);
+   const [selectedPage, setSelectedPage] = useState<string>(() => getCurrentPage());
+   const { pathname } = useLocation();
+   console.log('process.env.APIBASEURL', process.env.APIBASEURL);
 
    useEffect(() => {
       const userToken = getAccessToken();
-      if (!userToken) {
+      if (!userToken) {        
          navigate("/");
       }
-      if (pathname.includes('homepage')) {
+      setIsAuthticated(true);
+      if (isAuthenticated && selectedPage.includes('homepage')) {
          getUserDetailsHelper();
       }
-      setIsAuthticated(true);
    }, [isAuthenticated, selectedPage]);
 
    useEffect(() => {
-      const pathsplit = pathname.split('/')
-      const currentPath = pathsplit[pathsplit.length - 1];
-      setSelectedPage(currentPath);
-   }, [pathname])
+      setSelectedPage(getCurrentPage());
+   }, [pathname]);
 
-   const getUserDetailsHelper = async() => {
-      let userInfo = await getUserDetailsApi();
-      import("Sharedlib/eventservice").
-         then((event) => {
-            setTimeout(() => event.default.fire(eventName, { detail: userInfo }), 100);      
-         }).catch(error => {
-            console.error('Error occured in event', error);
-         })
-   }
    return (
       <div>
          {isAuthenticated && (
@@ -54,7 +38,6 @@ export const AuthRoute = ({Component}: AuthRouteProps) => {
                      <Component />
                   </Suspense>
                </SideMenuBar>
-               <SocketInit />
             </>
          )}
       </div>

src/components/Homepage/SideMenuBar.tsx

@@ -31,6 +31,9 @@ import { getUserInfoFromStorage } from "../../util";
 import { PageEnum } from "../../typesdeclarations/type";
 import useNotificationProvider from "../../customHook/useNotificationProvider";
 import { NotificationType, WindowEvents } from "@kshitijraj09/sharedlib_mf";
+import useNotificationStore from "../../zustand-config/notificationStore";
+import useSocketInit from "../../Socket/SocketInit";
+
 
 const drawerWidth = 200;
 type SideMenuBarPropsType = {
@@ -63,7 +66,14 @@ const styles = () => ({
    active: {
       background: "#f4f4f4",
    },
-
+   linkTab: {
+      "& span": {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100px"
+      }
+   }
 });
 
 const DrawerHeader = styled("div")(({ theme }) => ({
@@ -74,19 +84,22 @@ const DrawerHeader = styled("div")(({ theme }) => ({
    justifyContent: "flex-start",
 }));
 
+const updateNotification: WindowEvents = 'updateNotification';
+
 export const SideMenuBar = ({
    children,
    setIsAuthenticated,
 }: SideMenuBarPropsType) => {
+   useSocketInit();
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    const location = useLocation();
    const { name: currentUserName, avatar: currentuserAvatar } = JSON.parse(getUserInfoFromStorage());
    const classes = styles();
-
    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-   const messageNotification = 'messageNotification' as WindowEvents.messageNotification;
-   const { outputStack: notificationStack } = useNotificationProvider<NotificationType>(messageNotification);
-   
+
+   useNotificationProvider<NotificationType>(updateNotification); //custom hook for notifications
+   const { notifications } = useNotificationStore(); //Zustand store
+
    const menuItems = [
       {
          text: PageEnum.Posts,
@@ -99,14 +112,14 @@ export const SideMenuBar = ({
          path: "/people",
       },
       {
-         text: PageEnum.Account,
+         text: `Hi, ${currentUserName}`,
          icon: <AccountCircleIcon />,
          path: "/account",
       },
       {
          text: PageEnum.Messenger,
          icon: (
-            <Badge color="primary" badgeContent={notificationStack.length}>
+            <Badge color="primary" badgeContent={notifications.length}>
                <TextsmsOutlinedIcon />
             </Badge>
          ),
@@ -189,8 +202,8 @@ export const SideMenuBar = ({
                            >
                            <ListItemIcon>{item.icon}</ListItemIcon>
                            <ListItemText
-                              primary={item.text}
-                                 sx={{ fontSize: "20px" }}
+                                 primary={item.text}
+                                 sx={classes.linkTab}
                            />
                         </ListItemButton>
                      )}

src/components/Login/LoginForm.tsx

@@ -1,20 +1,17 @@
 import React, {useState, useEffect} from "react";
-import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
-import CssBaseline from "@mui/material/CssBaseline";
-import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
-import MuiLink from "@mui/material/Link";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
+import {
+   Avatar, CssBaseline,
+   TextField, FormControlLabel,
+   Checkbox, Link as MuiLink,
+   Grid, Box, Typography,
+   Container
+} from "@mui/material";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
 import {isUserIdExistPropType} from "../../typesdeclarations/type";
 import {loginApi} from "./apis/loginApi";
 import {useNavigate} from "react-router-dom";
 import { EventEmitter, setAccessToken, setUserInfoInStorage } from "../../util";
+import { LoadingButton } from "@mui/lab";
 
 const styles = () => ({
    GridItem: {
@@ -38,10 +35,11 @@ export const LoginForm = ({
 }: isUserIdExistPropType) => {
 
    const [loginError,setLoginError] = useState<loginErrorInterface>({email:"",password:""});
-
+   const [isLoading, setIsLoading] = useState(false);
    const navigate = useNavigate();
    const classes = styles();
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+      setIsLoading(true);
       event.preventDefault();
       const formData = new FormData(event.currentTarget);
       const formdata = {
@@ -58,7 +56,9 @@ export const LoginForm = ({
             avatar: data.avatar
          });
          navigate("/homepage");
+         return;
       }
+      setIsLoading(false);
    };
 
    useEffect(() => {
@@ -121,13 +121,16 @@ export const LoginForm = ({
                   control={<Checkbox value='remember' color='primary' />}
                   label='Remember me'
                />
-               <Button
+               <LoadingButton
                   type='submit'
                   fullWidth
                   variant='contained'
-                  sx={{mt: 3, mb: 2}}>
+                  sx={{ mt: 3, mb: 2 }}
+                  loading={isLoading}
+                  loadingPosition="center"
+               >
                   Sign In
-               </Button>
+               </LoadingButton>
                <Grid container>
                   {
                      // To be implemented in future