регистрация/вход сделаны с помощью useContext - хука

data.json

@@ -92,6 +92,10 @@
       "userId": 1,
       "movieId": 6,
       "id": 17
+    },
+    {
+      "movieId": 1,
+      "id": 18
     }
   ],
   "viewed": [
@@ -119,6 +123,14 @@
       "userId": 1,
       "movieId": 5,
       "id": 7
+    },
+    {
+      "movieId": 1,
+      "id": 8
+    },
+    {
+      "movieId": 1,
+      "id": 9
     }
   ],
   "movies": [

src/App.jsx

@@ -7,15 +7,33 @@ import './App.css';
 // import Catalog from './pages/Catalog';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
+import { useState } from 'react';
+import { CurrentUserContext } from './contexts/CurrentUserContext';
+
 
 export const App = ({ routes }) => {
+
+  const [currentUser, setCurrentUser] = useState(null);
+
   return (
     <>
-      <Navigation routes={routes}></Navigation>
+
+      <CurrentUserContext.Provider value={{
+        currentUser,
+        setCurrentUser,
+      }}>
+        <Navigation routes={routes}></Navigation>
+        <main className='w-100 flex-fill d-flex justify-content-center p-0 m-0'>
+          <Outlet />
+        </main>
+        <Footer />
+      </CurrentUserContext.Provider>
+
+      {/* <Navigation routes={routes}></Navigation>
       <main className='w-100 flex-fill d-flex justify-content-center p-0 m-0'>
         <Outlet />
       </main>
-      <Footer />
+      <Footer /> */}
     </>
   );
 };

src/components/cardFilm/CardFilm.jsx

@@ -1,19 +1,24 @@
 import PropTypes from 'prop-types';
 import './CardFilm.css';
 import { Link } from 'react-router-dom/dist';
-import { useCurrentUser } from '../../users/hooks/UsersHook';
 import ViewedMoviesApiService from '../movies/service/ViewedMoviesApiService';
 import { HeartFill, Heart, EyeFill, Eye } from 'react-bootstrap-icons';
 import FavoriteMoviesApiService from '../movies/service/FavoriteMoviesApiService';
 
+import { useContext } from 'react';
+import { CurrentUserContext } from '../../contexts/CurrentUserContext';
+
 const CardFilm = ({ movie, refreshFunc }) => {
-	const user = useCurrentUser();
+
+	const { currentUser } = useContext(
+		CurrentUserContext
+	);
 
 	const toggleFavorite = async () => {
-		const favs = await FavoriteMoviesApiService.getAll(`?userId=${user.id}&movieId=${movie.id}`);
+		const favs = await FavoriteMoviesApiService.getAll(`?userId=${currentUser}&movieId=${movie.id}`);
 		if (favs.length == 0) {
 			await FavoriteMoviesApiService.create({
-				userId: user.id,
+				userId: currentUser,
 				movieId: movie.id,
 			});
 		} else {
@@ -23,10 +28,10 @@ const CardFilm = ({ movie, refreshFunc }) => {
 	};
 
 	const toggleViewed = async () => {
-		const viewed = await ViewedMoviesApiService.getAll(`?userId=${user.id}&movieId=${movie.id}`);
+		const viewed = await ViewedMoviesApiService.getAll(`?userId=${currentUser}&movieId=${movie.id}`);
 		if (viewed.length == 0) {
 			await ViewedMoviesApiService.create({
-				userId: user.id,
+				userId: currentUser,
 				movieId: movie.id
 			});
 		}
@@ -44,10 +49,10 @@ const CardFilm = ({ movie, refreshFunc }) => {
 				</Link>
 				<div className="icons mt-3 w-50 d-flex justify-content-center mt-1 mb-1">
 					{
-						movie.isFavorite && user ? <HeartFill className='my-icon-heartFill me-3' onClick={toggleFavorite} /> : <Heart className='my-icon-heart me-3' onClick={toggleFavorite} />
+						movie.isFavorite && currentUser ? <HeartFill className='my-icon-heartFill me-3' onClick={toggleFavorite} /> : <Heart className='my-icon-heart me-3' onClick={toggleFavorite} />
 					}
 					{
-						movie.isViewed && user ? <EyeFill className='my-icon-eyeFill' onClick={toggleViewed} /> : <Eye className='my-icon-eye' onClick={toggleViewed} />
+						movie.isViewed && currentUser ? <EyeFill className='my-icon-eyeFill' onClick={toggleViewed} /> : <Eye className='my-icon-eye' onClick={toggleViewed} />
 					}
 				</div>
 				<div className="film-name text-light text-center w-100 d-flex justify-content-center align-items-center">

src/components/navigation/Navigation.jsx

@@ -2,17 +2,24 @@ import PropTypes from 'prop-types';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 import { Link, useLocation } from 'react-router-dom';
 import './Navigation.css';
-import { useCurrentUser } from '../../users/hooks/UsersHook';
+import { useContext } from 'react';
+import { CurrentUserContext } from '../../contexts/CurrentUserContext';
+
+
 
 const Navigation = ({ routes }) => {
-	const location = useLocation();
+	const location = useLocation()
+	const { currentUser } = useContext(CurrentUserContext);
 
 	const indexPageLink = routes.filter((route) => route.index === false).shift();
 	let pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
-	const user = useCurrentUser();
-	if (user) {
+
+
+	// const user = useCurrentUser();
+
+	if (currentUser) {
 		pages = pages.filter((route) => route.authored == null || route.authored == true);
-		if (!user.isAdmin) {
+		if (!currentUser.isAdmin) {
 			pages = pages.filter((route) => route.onlyAdmin == false);
 		}
 	}
@@ -41,7 +48,7 @@ const Navigation = ({ routes }) => {
 
 						</Nav>
 					</Navbar.Collapse>{
-						user != null ? <Nav.Link disabled className='active d-none d-lg-block' as={Link} to='/lk'>Привет, {user.username}!</Nav.Link> : ""
+						currentUser != null ? <Nav.Link disabled className='active d-none d-lg-block' as={Link} to='/lk'>Привет, {currentUser.username}!</Nav.Link> : ""
 					}
 					{/* {
 						user != null ? <div className='d-none d-md-block'>Привет, {user.username}!</div> : ""

src/contexts/CurrentUserContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const CurrentUserContext = createContext(null);

src/pages/Admin.jsx

@@ -1,16 +1,26 @@
 import '../pagescss/Admin.css';
 import Movies from '../components/movies/adminTable/Movies';
-import { useCurrentUser } from '../users/hooks/UsersHook';
+import { useContext, useEffect } from 'react';
+import { CurrentUserContext } from '../contexts/CurrentUserContext';
+import { useNavigate } from 'react-router-dom';
 
 const Admin = () => {
-	const user = useCurrentUser();
 
-	if (user == null) {
-		window.location.pathname = '/into';
-	}
-	if (user.isAdmin == false) {
-		window.location.pathname = '/';
-	}
+	const navigate = useNavigate();
+	const { currentUser } = useContext(CurrentUserContext);
+
+
+	useEffect(() => {
+		if (!currentUser) {
+			navigate('/into');
+		}
+		console.log(currentUser);
+		if (!currentUser.isAdmin) {
+			navigate('/');
+		}
+	},);
+
+
 	return (
 		<div className="container-fluid flex-fill d-flex flex-column px-1 px-md-2" id='main'>
 			<Movies></Movies>

src/pages/Catalog.jsx

@@ -8,9 +8,10 @@ import RowFilms from '../components/RowFilms/RowFilms';
 import { splitByRows } from '../components/utils/funcs';
 import { useMovie } from '../components/movies/hooks/MoviesHook';
 import { useMovieIdFilter } from '../components/movies/hooks/MoviesFilterHook';
-import { useCurrentUser } from '../users/hooks/UsersHook';
 import useFavoriteMovies from '../components/movies/hooks/FavoriteMoviesHook';
 import useViewedMovies from '../components/movies/hooks/ViewedMoviesHook';
+import { useContext } from 'react';
+import { CurrentUserContext } from '../contexts/CurrentUserContext';
 
 const Catalog = () => {
 
@@ -20,9 +21,10 @@ const Catalog = () => {
 
 	let { movies, handleMoviesChange } = useMovies(currentFilter);
 
-	const user = useCurrentUser();
-	let { favoriteFilms, refreshMovies } = useFavoriteMovies(user.id);
-	let { viewedFilms, refreshViewMovies } = useViewedMovies(user.id);
+	const { currentUser } = useContext(CurrentUserContext);
+
+	let { favoriteFilms, refreshMovies } = useFavoriteMovies(currentUser.id);
+	let { viewedFilms, refreshViewMovies } = useViewedMovies(currentUser.id);
 
 	favoriteFilms = favoriteFilms.map((m) => m.id);
 	viewedFilms = viewedFilms.map((m) => m.id);

src/pages/Into.jsx

@@ -1,9 +1,13 @@
 import '../pagescss/Into.css';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import UsersApiService from '../users/service/UsersApiService';
+import { useNavigate } from 'react-router-dom';
+import { CurrentUserContext } from '../contexts/CurrentUserContext';
 
 const Into = () => {
 
+	const { setCurrentUser } = useContext(CurrentUserContext);
+
 	const [inputFields, setInputFields] = useState({
 		username: "",
 		password: ""
@@ -12,6 +16,8 @@ const Into = () => {
 	const [errors, setErrors] = useState({});
 	const [submitting, setSubmitting] = useState(false);
 
+	const navig = useNavigate();
+
 	const validateValues = (inputValues) => {
 		let errors = {};
 		if (inputValues.username.length <= 0) {
@@ -33,7 +39,6 @@ const Into = () => {
 		setSubmitting(true);
 	};
 
-	// const navig = useNavigate();
 
 	const finishSubmit = async () => {
 		console.log(inputFields);
@@ -43,9 +48,11 @@ const Into = () => {
 			alert("Неверные логин или пароль!");
 		}
 		else if (data.length == 1) {
-			localStorage.setItem('userId', data.pop().id.toString());
-			// navig('/lk');
-			window.location.pathname = '/lk'
+
+			setCurrentUser(data.pop());
+
+			navig('/lk');
+			// window.location.pathname = '/lk'
 
 		}
 		else {

src/pages/Lk.jsx

@@ -3,14 +3,23 @@ import useFavoriteMovies from "../components/movies/hooks/FavoriteMoviesHook";
 import RowFilms from "../components/RowFilms/RowFilms";
 import "../pagescss/Lk.css"
 import { splitByRows } from "../components/utils/funcs";
-import { useCurrentUser } from "../users/hooks/UsersHook";
+
+import { CurrentUserContext } from "../contexts/CurrentUserContext";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 
 const Lk = () => {
 
-	const user = useCurrentUser();
 
-	let { favoriteFilms, refreshMovies } = useFavoriteMovies(user.id);
-	let { viewedFilms, refreshViewMovies } = useViewedMovies(user.id);
+	const { currentUser } = useContext(CurrentUserContext);
+	const navigate = useNavigate();
+
+	if (!currentUser) {
+		navigate('/into');
+	}
+
+	let { favoriteFilms, refreshMovies } = useFavoriteMovies(currentUser.id);
+	let { viewedFilms, refreshViewMovies } = useViewedMovies(currentUser.id);
 
 	const favids = favoriteFilms.map((m) => m.id);
 	const viewids = viewedFilms.map((m) => m.id);
@@ -31,9 +40,7 @@ const Lk = () => {
 		}
 	}
 
-	if (!user) {
-		window.location.pathname = '/into';
-	}
+
 
 	let favoriteFilmsByRow = splitByRows(favoriteFilms, 3);
 

src/pages/Logout.jsx

@@ -1,11 +1,14 @@
+import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import { CurrentUserContext } from "../contexts/CurrentUserContext";
 
 const Logout = () => {
 
     const navig = useNavigate();
+    const { setCurrentUser } = useContext(CurrentUserContext);
 
     setTimeout(() => {
-        localStorage.removeItem('userId');
+        setCurrentUser(null);
         navig("/")
         // window.location.pathname = '/';
     }, 500);