feat: (client) store user info into localstorage (foyzulkarim#35)

aninda052 · Sep 17, 2023 · 6edd50d · 6edd50d
1 parent 5ae6675
commit 6edd50d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/client/src/layouts/dashboard/header/AccountPopover.js b/client/src/layouts/dashboard/header/AccountPopover.js
@@ -1,5 +1,5 @@
 // react
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 // @mui
@@ -9,6 +9,9 @@ import { Box, Divider, Typography, Stack, MenuItem, Avatar, IconButton, Popover
 // mocks_
 import account from '../../../_mock/account';
 
+// Context
+import { SetAlertContext } from "../../../contexts/AlertContext";
+
 // other
 import axios from 'axios';
 
@@ -37,6 +40,7 @@ const MENU_OPTIONS = [
 
 export default function AccountPopover() {
   const [open, setOpen] = useState(null);
+  const setAlertContext = useContext(SetAlertContext);
   const navigate = useNavigate();
 
   const handleOpen = (event) => {
@@ -58,10 +62,12 @@ export default function AccountPopover() {
       }
     )
     .then(function (response){
+      localStorage.removeItem("name");
+      localStorage.removeItem("email");
       navigate('/login')
     })
     .catch(function (error){
-      console.log(error)
+      setAlertContext({type:'error', message: error.response.data.message});
     });
 
   };
@@ -109,10 +115,10 @@ export default function AccountPopover() {
       >
         <Box sx={{ my: 1.5, px: 2.5 }}>
           <Typography variant="subtitle2" noWrap>
-            {account.displayName}
+            {localStorage.getItem('name')}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            {account.email}
+            {localStorage.getItem('email')}
           </Typography>
         </Box>
 

diff --git a/client/src/sections/auth/LoginForm.js b/client/src/sections/auth/LoginForm.js
@@ -27,10 +27,6 @@ export default function LoginForm() {
   const navigate = useNavigate();
 
   const [showPassword, setShowPassword] = useState(false);
-
-  // const [alertMessage, setAlertMessage] = useState(null);
-  // const [alertType, setAlertType] = useState('success');
-
   const [loginData, setloginData] = useState({
     email: '',
     password: ''
@@ -40,7 +36,6 @@ export default function LoginForm() {
 
   const handleSubmit = async () => {
 
-
     await axios.post(`${API_SERVER}/api/login`,
       loginData,
       {
@@ -51,7 +46,11 @@ export default function LoginForm() {
       }
     )
     .then(function (response){
+      console.log(response.data.user.name)
+      localStorage.setItem("name", response.data.user.name);
+      localStorage.setItem("email", response.data.user.email);
       setAlertContext({type:'success', message: 'Login Successful'});
+
       setTimeout(() => navigate('/videos'), 1000);
     })
     .catch(function (error){
@@ -61,7 +60,6 @@ export default function LoginForm() {
   };
 
   const handleInput =  (event) => {
-
     setloginData({
       ...loginData,
       [event.target.name]: event.target.value
@@ -70,7 +68,6 @@ export default function LoginForm() {
   };
 
 
-
   return (
     <>