fix request message

backend/app.js

@@ -53,7 +53,6 @@ const getOneUser = async (userName) => {
 app.post('/login', async (req, res) => {
     try {
         const {userName,password} = req.body;
-        console.log(userName,password)
         if (!isValidUserName(userName)){
             return res.status(400).json({message: 'Invalid username'})
         }

frontend/src/components/loginForm/LoginForm.js

@@ -1,4 +1,3 @@
-
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Container from '@mui/material/Container';
@@ -19,14 +18,12 @@ export const LoginForm = () => {
                 onSubmit={(e) => {
                     e.preventDefault();
                     dispatch(getUserData())
-            }
-                }
+                }}
                 sx={{
                     marginTop: 40,
                     display: 'flex',
                     flexDirection: 'column',
-                }}
-                >
+                }}>
                 <TextField
                         margin="normal"
                         required
@@ -37,8 +34,7 @@ export const LoginForm = () => {
                         autoComplete="email"
                         autoFocus
                         value={userName}
-                        onChange={e => dispatch(setUserName({userName: e.target.value}))}
-                />
+                        onChange={e => dispatch(setUserName({userName: e.target.value}))}/>
                 <TextField
                         margin="normal"
                         required
@@ -50,19 +46,16 @@ export const LoginForm = () => {
                         autoComplete="current-password"
                         value={password}
                         onChange={e => 
-                            
                             dispatch(setUserPassword({password: e.target.value}))
-                        }
-                />
+                        }/>
                 <Modal/>
                 <Button 
                     type="submit"
                     variant="contained"
-                    fullWidth
-                   >Login
-                    
+                    fullWidth>
+                        Login
                 </Button>
             </Box>
         </Container>
     )
-}
+};

frontend/src/components/loginForm/utils/handleSubmit.js

@@ -1,27 +0,0 @@
-// import { isValidPayload } from './validations/isValidPayload';
-// import { isValidUserName } from './validations/isValidUserName';
-// import { sendForm } from './sendForm';
-
-
-// export const handleSubmit = async (e, userName , password) => {
-//     console.log(userName,password)
-//     const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';//add on handlesubmit
-//     e.preventDefault();
-
-//     if(isValidPayload(userName,password) && isValidUserName(userName)){
-//         const data = await sendForm(POST_URL, userName, password);
-//         const token = data.token;
-//        if(token){
-//            localStorage.setItem('token', token); 
-//           // dispatch(storeToken(token))
-//        }
-//         // setTextModal(data.message)
-//         // setDisplay('block')
-       
-//         console.log(userName,password)
-//    } 
-// //    else {
-// //       //  setTextModal('too short or using special symbols')
-// //        // setDisplay('block')
-// //     }   
-// }

frontend/src/components/loginForm/utils/sendForm.js

@@ -1,12 +1,12 @@
-export const sendForm = async (POST_URL, userData) => {
-    console.log('sendform', userData)
-        const response = await fetch(POST_URL, {
-            method: 'POST',
-            body: JSON.stringify(userData),
-            headers: {
-                'Content-Type': 'application/json'
-            }
-});
+export const sendForm = async (POST_URL, userData) => { 
+        const response = await fetch(POST_URL, 
+                        {
+                            method: 'POST',
+                            body: JSON.stringify(userData),
+                            headers: {
+                                'Content-Type': 'application/json'
+                        }
+                    });
         const json = await response.json();
         return json;
 }

frontend/src/components/modalMessage/Modal.js

@@ -1,15 +1,20 @@
 import Alert from '@mui/material/Alert';
-import { useSelector } from 'react-redux';
-
+import { useSelector, useDispatch } from 'react-redux';
+import { deleteResponseMessage } from '../../reducers/userDataReducer';
 
 export const Modal = () => {
     
-    const text = useSelector(state=> state.userDataReducer.responseMessage)
-
+    let text = useSelector(state=> state.userDataReducer.responseMessage)
+    const dispatch =useDispatch();
+    if (text){
+            setTimeout(() => {
+               dispatch(deleteResponseMessage())
+                }, 2500)
+    }
+    
     return <Alert 
                 severity="error"
-                sx={{display: (text ? 'block':'none' )}}
-            >
+                sx={{display: (text ? 'block':'none' )}}>
             {text}
             </Alert>
-}
+};

frontend/src/reducers/socketReducer.js

@@ -1,22 +1,22 @@
-const initialState = {
-    socket: null
-  }
+// const initialState = {
+//     socket: null
+//   }
   
-const socketReducer = (state = initialState, action) => {
-    switch (action.type){
-    case 'SET_SOCKET':  
-        return {...state, 
-            socket:
-              action.socket
-            };
-    case 'REMOVE_SOCKET':  
-        return {...state, 
-            socket: 
-              initialState.socket
-            };
-    default:
-      return state
-    }
-  };
+// const socketReducer = (state = initialState, action) => {
+//     switch (action.type){
+//     case 'SET_SOCKET':  
+//         return {...state, 
+//             socket:
+//               action.socket
+//             };
+//     case 'REMOVE_SOCKET':  
+//         return {...state, 
+//             socket: 
+//               initialState.socket
+//             };
+//     default:
+//       return state
+//     }
+//   };
 
- export default socketReducer;
+//  export default socketReducer;

frontend/src/reducers/tokenReducer.js

@@ -1,22 +0,0 @@
-const initialState = {
-    token: ''
-  }
-  
-const tokenReducer = (state = initialState, action) => {
-    switch (action.type){
-    case 'SET_TOKEN':  
-        return {...state, 
-            token:
-              action.token
-            };
-    case 'REMOVE_TOKEN':  
-        return {...state, 
-            token: 
-              initialState.token
-            };
-    default:
-      return state
-    }
-  };
-
- export default tokenReducer;

frontend/src/reducers/userDataReducer.js

@@ -12,7 +12,6 @@ const initialState = {
     responseMessage: ''
 }
 
-
 const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';
 
 export const getUserData = createAsyncThunk(
@@ -38,7 +37,8 @@ const getUserDataSlice = createSlice({
     reducers: {
         setUserName: (state, action) => {state.userName = action.payload.userName},
         setUserPassword: (state, action) => {state.password = action.payload.password},
-        removeToken: (state, action) => {state.token = ''}
+        removeToken: state => {state.token = ''},
+        deleteResponseMessage: state => {state.responseMessage = ''}
     },
     extraReducers: (builder) => { 
        builder
@@ -52,11 +52,13 @@ const getUserDataSlice = createSlice({
                 state.responseMessage = action.payload.message
                 localStorage.setItem('token', action.payload.token)
             }
-            console.log('fulfilled',action.payload, action.payload.message)
           })
-           .addCase(getUserData.rejected, (state) => {
+           .addCase(getUserData.rejected, (state, action) => {
                state.userLoadingStatus = 'error';
-               console.log('rejected', state)
+               if(action.payload?.message){
+                state.responseMessage = action.payload.message
+            } 
+            state.responseMessage = 'Something went wrong...'
           })
         }
 });
@@ -68,5 +70,6 @@ export default userDataReducer;
 export const {
     setUserName,
     setUserPassword,
-    removeToken
+    removeToken,
+    deleteResponseMessage
 } = actions;

frontend/src/store.js

@@ -1,4 +1,3 @@
-import tokenReducer from './reducers/tokenReducer';
 import socketReducer from './reducers/socketReducer';
 import userDataReducer from './reducers/userDataReducer';
 
@@ -6,7 +5,7 @@ import { configureStore } from '@reduxjs/toolkit'
 
 
 export  const store = configureStore({
-    reducer: {tokenReducer, socketReducer, userDataReducer},
+    reducer: {socketReducer, userDataReducer},
     middleware: getDefaultMiddleware => getDefaultMiddleware(),
     devTools: process.env.NODE_ENV !== 'production',
 })