adding replace usercontext with redux

advanced-computer-lab-2023 · Jan 1, 2024 · d1b7594 · d1b7594
1 parent eb8e8aa
commit d1b7594
Show file tree

Hide file tree

Showing 53 changed files with 338 additions and 202 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -13,6 +13,7 @@
     "@mui/system": "^5.8.6",
     "@mui/utils": "^5.8.6",
     "@mui/x-date-pickers": "^6.16.1",
+    "@reduxjs/toolkit": "^2.0.1",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.10",
     "@tabler/icons": "^1.72.0",
@@ -39,7 +40,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.1.3",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,4 +1,4 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
@@ -9,7 +9,6 @@ import Routes from 'routes';
 // defaultTheme
 import themes from 'themes';
 import { useEffect, useState } from 'react';
-import { useUserContext } from 'hooks/useUserContext';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -18,13 +17,15 @@ import { authenticationAxios } from './utils/AxiosConfig';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { showFailureAlert } from './utils/swal';
+import { dispatchUser } from 'store/user/configUserStore';
 
 
 // ==============================|| APP ||============================== //
 
 const App = () => {
 	const customization = useSelector((state) => state.customization);
-	const { dispatch, user } = useUserContext();
+	const { user } = useSelector(state => state.user);
+	const dispatch = useDispatch();
 	const navigate = useNavigate();
 	const [isLoading, setIsLoading] = useState(true);
 	const location = useLocation();
@@ -34,10 +35,11 @@ const App = () => {
 			console.log({ ckeckData: userCheck.data });
 			if(!user)
 				{
-					await dispatch({ auth: true, payload: userCheck.data });
+					await dispatch(dispatchUser({ user: userCheck.data }));
 					setIsLoading(false);
 				}
 			if(location.pathname == '/login/login3' || location.pathname == '/login/register/register3'){
+				console.log('formward ',{ user });
 				navigate(`/${userCheck.data.type}`);
 				setIsLoading(false);
 			}
@@ -48,7 +50,7 @@ const App = () => {
 			navigate('/login/login3');
 			setIsLoading(false);
 		}
-			await dispatch({ auth: false, payload: null });
+			await dispatch(dispatchUser({ user: null }));
 			setIsLoading(false);
 		});
 
@@ -60,7 +62,7 @@ const App = () => {
 				<CssBaseline />
 				<LocalizationProvider dateAdapter={AdapterDateFns}>
 				{isLoading && <Loader />}
-				{!isLoading && <Routes />}
+				{!isLoading &&<Routes />}
 				</LocalizationProvider>
 			</ThemeProvider>
 		</DndProvider>

diff --git a/client/src/contexts/ChatContext.js b/client/src/contexts/ChatContext.js
@@ -7,9 +7,9 @@ import {
     PHARMACIST_TYPE_ENUM,
     PHARMACY_MONGO_ID,
 } from '../utils/Constants.js';
-import { useUserContext } from 'hooks/useUserContext.js';
 import { chatExist } from 'utils/ChatUtils.js';
 import { isEqual } from 'lodash';
+import { useSelector } from 'react-redux';
 const ChatContext = createContext();
 
 var socket;
@@ -21,20 +21,18 @@ export const ChatContextProvider = ({ children }) => {
     const [chatMessages, setChatMessages] = useState([]);
     const [newMessage, setNewMessage] = useState('');
 
-    const { user } = useUserContext();
-    const userId = user.id,
-        userType = user.type;
+    const { user } = useSelector(state => state.user);
 
     const updateChat = (updatedChat, messageId, type) => {
         if(type === 0) {
-            if(updatedChat.users[0].id === userId) {
+            if(updatedChat.users[0].id === user.id) {
                 updatedChat.users[0].unseen++;
             } else {
                 updatedChat.users[1].unseen++;
             }
         }
         if(type === 1) {
-            if(updatedChat.users[0].id === userId) {
+            if(updatedChat.users[0].id === user.id) {
                 updatedChat.users[1].unseen++;
             } else {
                 updatedChat.users[0].unseen++;
@@ -65,20 +63,20 @@ export const ChatContextProvider = ({ children }) => {
         socket = io.connect(COMMUNICATION_BASE_URL);
         socket.emit(
             'setup',
-            userType === PHARMACIST_TYPE_ENUM ? PHARMACY_MONGO_ID : userId
+            user.type === PHARMACIST_TYPE_ENUM ? PHARMACY_MONGO_ID : user.id
         );
     }, []);
 
     useEffect(() => {
         const fetchData = async () => {
             try {
                 const response = await communicationAxios.get(
-                    `/chat/${userId}`
+                    `/chat/${user.id}`
                 );
                 if (
-                    userType === PATIENT_TYPE_ENUM &&
-                    !chatExist(response.data, userId, PHARMACY_MONGO_ID) &&
-                    !chatExist(response.data, PHARMACY_MONGO_ID, userId)
+                    user.type === PATIENT_TYPE_ENUM &&
+                    !chatExist(response.data, user.id, PHARMACY_MONGO_ID) &&
+                    !chatExist(response.data, PHARMACY_MONGO_ID, user.id)
                 ) {
                     const res = await communicationAxios.post('/chat', {
                         chat: {
@@ -88,7 +86,7 @@ export const ChatContextProvider = ({ children }) => {
                                     id: PHARMACY_MONGO_ID,
                                     userType: PHARMACIST_TYPE_ENUM,
                                 },
-                                { id: userId, userType: PATIENT_TYPE_ENUM },
+                                { id: user.id, userType: PATIENT_TYPE_ENUM },
                             ],
                         },
                     });
@@ -109,7 +107,7 @@ export const ChatContextProvider = ({ children }) => {
             chats.map(chat => {
                 if(chat && chat.users) {
                     chat.users.map(user => {
-                        if(user.id === userId) {
+                        if(user.id === user.id) {
                             tot += user.unseen;
                         }
                     });
@@ -128,13 +126,13 @@ export const ChatContextProvider = ({ children }) => {
             updateChat(data.selectedChat, data.message._id, 0);
             if (selectedChat && selectedChat._id === data.room) {
                 selectedChat.users.map(user => {
-                    if(user.id === userId) {
+                    if(user.id === user.id) {
                         user.unseen = 0;
                     }
                     return user;
                 });
                 socket.emit('message_seen', {
-                    sender: userId,
+                    sender: user.id,
                     chat: selectedChat,
                 });
                 setChatMessages((prevMessages) => [

diff --git a/client/src/contexts/VideoChatContext.js b/client/src/contexts/VideoChatContext.js
@@ -2,14 +2,14 @@ import React, { createContext, useState, useRef, useEffect } from 'react';
 import { io } from 'socket.io-client';
 import Peer from 'simple-peer';
 import { COMMUNICATION_BASE_URL } from '../utils/Constants';
-import { useUserContext } from '../hooks/useUserContext';
+import { useSelector } from 'react-redux';
 
 const SocketContext = createContext();
 
 const socket = io(COMMUNICATION_BASE_URL);
 
 const ContextProvider = ({ children }) => {
-    const { user } = useUserContext();
+    const { user } = useSelector(state => state.user);
     const [callAccepted, setCallAccepted] = useState(false);
     const [callEnded, setCallEnded] = useState(false);
     const [stream, setStream] = useState();

diff --git a/client/src/hooks/AuthGuard.js b/client/src/hooks/AuthGuard.js
@@ -1,11 +1,11 @@
 import { Route, useHistory } from 'react-router-dom';
-import { useUserContext } from '../hooks/useUserContext';
 import Loading from '../components/Loading';
 import { useEffect, Suspense } from 'react';
 import { GUEST_ACCESS } from './Constants';
+import useSelector from 'react-redux';
 
 const AuthGuard = ({ component: Component, Auth, isLazy, ...rest }) => {
-  const { user } = useUserContext();
+  const { user } = useSelector(state => state.user);
   const history = useHistory();
   const isRoute = true; // Dummy data
 

diff --git a/client/src/index.js b/client/src/index.js
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import App from 'App';
 import { store } from 'store';
 import 'assets/scss/style.scss';
-import { UserContextProvider } from './contexts/UserContext';
 import { PaymentProvider } from './contexts/PaymentContext';
 import { BrowserRouter } from 'react-router-dom';
 
@@ -14,11 +13,9 @@ const root = createRoot(container); // createRoot(container!) if you use TypeScr
 root.render(
   <Provider store={store}>
     <BrowserRouter>
-      <UserContextProvider>
-        <PaymentProvider>
-          <App />
-        </PaymentProvider>
-      </UserContextProvider>
+      <PaymentProvider>
+        <App />
+      </PaymentProvider>
     </BrowserRouter>
   </Provider>
 );