doc: update Navbar component and Navbar function

src/components/Navbar/Navbar.jsx

@@ -1,29 +1,49 @@
 import { useState, useEffect, useContext } from 'react';
-import { AppBar, IconButton, Toolbar, Drawer, Button, Avatar, useMediaQuery } from "@mui/material";
-import { Menu, AccountCircle, Brightness4, Brightness7 } from "@mui/icons-material";
-import { useTheme } from "@mui/material/styles";
+import { AppBar, IconButton, Toolbar, Drawer, Button, Avatar, useMediaQuery } from '@mui/material';
+import { Menu, AccountCircle, Brightness4, Brightness7 } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import useStyles from './styles';
 import { Search, Sidebar } from '../index';
-import { ColorModeContext } from "../../utils/ToggleColorMode";
+import { setUser } from '../../features/auth';
+import { fetchToken, createSessionId, moviesApi } from '../../utils/index';
+import { ColorModeContext } from '../../utils/ToggleColorMode';
 
 function Navbar() {
     const classes = useStyles();
     const isMobile = useMediaQuery('(max-width:600px)');
     const theme = useTheme();
-
-    const [ mobileOpen, setMobileOpen ] = useState(false);
+    const dispatch = useDispatch();
+    const { isAuthenticated, user } = useSelector((state) => state.user);
+    const [mobileOpen, setMobileOpen] = useState(false);
 
     const colorMode = useContext(ColorModeContext);
 
     const token = localStorage.getItem('request_token');
     const sessionIdFromLocalStorage = localStorage.getItem('session_id');
 
-    return(
+    useEffect(() => {
+        const logInUser = async () => {
+            if (token) {
+                if (sessionIdFromLocalStorage) {
+                    const { data: userData } = await moviesApi.get(`/account?session_id=${sessionIdFromLocalStorage}`);
+                    dispatch(setUser(userData));
+                } else {
+                    const sessionId = await createSessionId();
+                    const { data: userData } = await moviesApi.get(`/account?session_id=${sessionId}`);
+                    dispatch(setUser(userData));
+                }
+            }
+        };
+
+        logInUser();
+    }, [token]);
+
+    return (
         <>
-            <AppBar position={'fixed'}>
+            <AppBar position="fixed">
                 <Toolbar className={classes.toolbar}>
                     {isMobile && (
                         <IconButton
@@ -32,18 +52,40 @@ function Navbar() {
                             style={{ outline: 'none' }}
                             onClick={() => setMobileOpen((prevMobileOpen) => !prevMobileOpen)}
                             className={classes.menuButton}
-                            >
+                        >
                             <Menu />
                         </IconButton>
                     )}
                     <IconButton
-                        color={'inherit'}
-                        sx={{ ml: 1}}
+                        color="inherit"
+                        sx={{ ml: 1 }}
                         onClick={colorMode.toggleColorMode}
                     >
                         {theme.palette.mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
                     </IconButton>
                     {!isMobile && <Search />}
+                    <div>
+                        {!isAuthenticated ? (
+                            <Button color="inherit" onClick={fetchToken}>
+                                Login &nbsp; <AccountCircle />
+                            </Button>
+                        ) : (
+                            <Button
+                                color="inherit"
+                                component={Link}
+                                to={`/profile/${user.id}`}
+                                className={classes.linkButton}
+                            >
+                                {!isMobile && <>My Movies &nbsp;</>}
+                                <Avatar
+                                    style={{ width: 30, height: 30 }}
+                                    alt="Profile"
+                                    src={`https://www.themoviedb.org/t/p/w64_and_h64_face${user?.avatar?.tmdb?.avatar?.avatar_path}`}
+                                />
+                            </Button>
+                        )}
+                    </div>
+                    {isMobile && <Search />}
                 </Toolbar>
             </AppBar>
             <div>
@@ -67,7 +109,7 @@ function Navbar() {
                 </nav>
             </div>
         </>
-    )
+    );
 }
 
-export default Navbar;
+export default Navbar;