diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 91ea5bb..4863374 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/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 ( <> - + {isMobile && ( setMobileOpen((prevMobileOpen) => !prevMobileOpen)} className={classes.menuButton} - > + > )} {theme.palette.mode === 'dark' ? : } {!isMobile && } +
+ {!isAuthenticated ? ( + + ) : ( + + )} +
+ {isMobile && }
@@ -67,7 +109,7 @@ function Navbar() {
- ) + ); } -export default Navbar; \ No newline at end of file +export default Navbar;