Merge pull request #3 from sarda10v/admin-panel

code-review
sarda10v · Mar 24, 2024 · 7a98a12 · 7a98a12
2 parents e61536b + 24e51f3
commit 7a98a12
Show file tree

Hide file tree

Showing 28 changed files with 516 additions and 312 deletions.
diff --git a/front-cinema/src/AppRoutes.jsx b/front-cinema/src/AppRoutes.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Cinema from "./components/Cinema/Cinema";
+import { Cinema } from "./components/Cinema/Cinema";
 import { Route, Routes } from "react-router-dom";
 import CinemaSpecific from "./components/CinemaSpecific/CinemaSpecific";
 import Admin from "./pages/Admin";
@@ -8,6 +8,7 @@ const AppRoutes = () => {
   return (
     <Routes>
       <Route path="/" element={<Cinema />} />
+      <Route path="/liked" element={<Cinema />} />
       <Route path="/admin" element={<Admin />} />
       <Route path="/cinema/:id" element={<CinemaSpecific />} />
     </Routes>

diff --git a/front-cinema/src/components/Cinema/Cinema.jsx b/front-cinema/src/components/Cinema/Cinema.jsx
@@ -1,109 +1,64 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { fetchCinema } from "../../features/cinemaSlice";
-import CinemaCard from "../CinemaCard/CinemaCard";
-import SignUpModal from "../Sing/SignUpModal";
-import SignInModal from "../Sing/SignInModal";
-import cls from "./Cinema.module.css";
-import avatarIcon from "../../assets/avatar.jpg";
 import { fetchUsers } from "../../features/usersSlice";
-import Loader from "../../widgets/Loader/Loader";
-import useSearchCinema from '../../hooks/use-search-cinema'
-import { Avatar } from "../../widgets/Avatar";
-// import { Title } from "../../widgets/Title";
-import { Logo } from "../../widgets/Logo";
-import { Input } from "../../widgets/Input";
+
+import { useSearchCinema } from "../utils/utils";
+import { Header } from "../Header/Header";
 // import { Pagination } from "../../widgets/Pagination";
-import { Icon } from "../../widgets/Icon";
+import { logout } from "../../features/applicationSlice";
+import { Modal } from "../../widgets/Modal/ui/Modal";
 
-const Cinema = () => {
-  const cinema = useSelector((state) => state.cinema.cinema);
-  const loader = useSelector((state) => state.cinema.loader);
-  const token = useSelector((state) => state.application.token);
-  const login = useSelector((state) => state.application);
-  const users = useSelector((state) => state.users.users);
+import CinemaCard from "../CinemaCard/CinemaCard";
+import Loader from "../../widgets/Loader/Loader";
+import cls from "./Cinema.module.css";
 
+export const Cinema = () => {
   const dispatch = useDispatch();
-
-  const userName = users.filter((user) => user._id === login.id);
-
-  // !! ФИЛЬТР ПО ВСЕМ КЛЮЧАМ ФИЛЬМА
+  const [page, setPage] = useState(1);
   const [value, setValue] = useState("");
+  const [modal, setModal] = useState(false);
+  const [auths, setAuths] = useState(false);
+  const [logins, setLogins] = useState(false);
 
-
+  const { cinema, loader } = useSelector((state) => state.cinema);
   const filteredCinema = useSearchCinema(cinema, value);
 
-  // !! МОДАЛКА ДЛЯ ВЫБОРА: АВТОРИЗАЦИЯ/РЕГИСТРАЦИЯ/ВЫХОД
-  const [modal, setModal] = useState(false);
   const handleOpenModalHeader = () => {
-    setModal(true);
-  };
-  const handleCloseModalHeader = () => {
-    setModal(false);
-  };
-
-  // !! МОДАЛКА ДЛЯ РЕГИСТРАЦИИ
-  const [auths, setAuths] = useState(false);
-  const handleOpenModalAuth = () => {
-    setModal(false);
-    setLogins(false);
-    setAuths(true);
+    setModal(!modal);
   };
-
-  // !! МОДАЛКА ДЛЯ АВТОРИЗАЦИИ
-  const [logins, setLogins] = useState(false);
   const handleOpenModalLogin = () => {
     setModal(false);
     setAuths(false);
     setLogins(true);
   };
-
-  // !! ВЫХОД ИЗ АККАУНТА
   const handleOpenModalExit = () => {
-    localStorage.clear(); // для очистки localStorage
-    window.location.reload(); // для перезагрузки страницы
+    dispatch(logout());
+    setModal(false);
+  };
+  const handleCloseModal = (e) => {
+    if (e.target.classList.contains(cls.wrapperModal)) {
+      setAuths(false);
+      setLogins(false);
+    }
   };
 
-  const [page, setPage] = useState(1);
   useEffect(() => {
     dispatch(fetchCinema(page));
     dispatch(fetchUsers());
   }, [dispatch, page]);
 
   return (
-    <div className={cls.mainWrapperCinema}>
+    <div className={cls.wrapper}>
       <div className={cls.card}>
-        <header className={cls.header}>
-          <Logo title="CINEMA" />
-          <Input value={value} setValue={setValue} />
-
-          <div className={cls.icons}>
-            {/* <Title text={userName.map((i) => i.login)} /> */}
-
-            <Avatar
-              url={token ? avatarIcon : null}
-              handleOpenModal={handleOpenModalHeader}
-            />
-
-            {!modal ? null : ( // !! модалка для выбора авторизация/регистрация/выход
-              <div className={cls.modalHeaderAuth}>
-                <div className={cls.closeModalAuthBtn}>
-                  <Icon
-                    name="close-circle-outline"
-                    onClick={handleCloseModalHeader}
-                  />
-                </div>
-                {!token ? (
-                  <div className={cls.modalAuthBtnHover}>
-                    <div onClick={handleOpenModalAuth}>Регистрация</div>
-                    <div onClick={handleOpenModalLogin}>Авторизация</div>
-                  </div>
-                ) : null}
-                {token ? <div onClick={handleOpenModalExit}>Выйти</div> : null}
-              </div>
-            )}
-          </div>
-        </header>
+        <Header
+          value={value}
+          setValue={setValue}
+          modal={modal}
+          handleOpenModalLogin={handleOpenModalLogin}
+          handleOpenModalHeader={handleOpenModalHeader}
+          handleOpenModalExit={handleOpenModalExit}
+        />
         <div className={cls.cardContent}>
           {!filteredCinema.length || loader ? (
             <Loader />
@@ -113,22 +68,15 @@ const Cinema = () => {
             })
           )}
         </div>
-        {/* ПАГИНАЦИЯ */}
         {/* <Pagination page={page} setPage={setPage} /> */}
-
-        {auths ? ( // !! модалка для регистрации
-          <div className={cls.authModal}>
-            <SignUpModal setAuths={setAuths} setLogins={setLogins} />
-          </div>
-        ) : null}
-        {logins ? ( // !! модалка для авторизации
-          <div className={cls.loginModal}>
-            <SignInModal setLogins={setLogins} setAuths={setAuths} />
-          </div>
-        ) : null}
+        <Modal
+          auths={auths}
+          logins={logins}
+          setAuths={setAuths}
+          setLogins={setLogins}
+          handleCloseModal={handleCloseModal}
+        />
       </div>
     </div>
   );
 };
-
-export default Cinema;
diff --git a/front-cinema/src/components/Cinema/Cinema.module.css b/front-cinema/src/components/Cinema/Cinema.module.css
@@ -1,28 +1,17 @@
-/*!! CINEMA */
-.mainWrapperCinema {
+.wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .card {
   width: 100%;
-  background-color: #011522 !important;
+  background-color: var(--color-darkblue) !important;
   height: 100vh;
   z-index: 1;
-  color: white;
+  color: var(--color-white);
 }
 
-.header {
-  width: 100%;
-  height: 60px;
-  margin: auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  border: 1px solid blue;
-}
 .tools h4 {
   font-weight: 700;
   font-size: 30px;
@@ -46,104 +35,30 @@
   cursor: pointer;
   display: flex;
   gap: 5px;
-  position: relative;
+  position: var(--position-relative);
 }
 
 .cardContent {
   width: 100%;
-  height: calc(100vh - 60px);
-  margin: auto;
+  margin-top: 60px;
   flex-wrap: wrap-reverse;
   display: flex;
-  background-color: #011522;
+  background-color: var(--color-darkblue);
   overflow: auto; /*скрол*/
   justify-content: center;
-  border: 1px solid red;
 }
+
 .card_content::-webkit-scrollbar,
 .modal-content::-webkit-scrollbar {
   width: 7px; /* ширина всей полосы прокрутки */
 }
 .card_content::-webkit-scrollbar-track,
 .modal-content::-webkit-scrollbar-track {
-  background: #011522; /* цвет зоны отслеживания */
+  background: var(--color-darkblue); /* цвет зоны отслеживания */
 }
 .card_content::-webkit-scrollbar-thumb,
 .modal-content::-webkit-scrollbar-thumb {
-  background-color: #4f4f4f; /* цвет бегунка */
+  background-color: var(--color-gray); /* цвет бегунка */
   border-radius: 20px; /* округлось бегунка */
 }
-/* !! MODAL AUTH/CONFIG */
-.modalHeaderAuth {
-  width: 150px;
-  max-height: 150px;
-  background-color: #011522;
-  position: absolute;
-  border: 1px solid #fff;
-  border-radius: 8px;
-  z-index: 9999;
-  top: 10px;
-  right: 10px;
-  font-size: 20px;
-  text-align: center;
-  padding: 10px;
-}
-.modalHeaderAuth div {
-  width: 100%;
-  transition: 250ms;
-}
-.modalAuthBtnHover div:hover {
-  background-color: #fff;
-  color: black;
-}
-.closeModalAuthBtn {
-  display: flex;
-  justify-content: flex-end;
-}
 
-.authModal,
-.loginModal {
-  position: absolute;
-  left: 35%;
-  top: 25%;
-  z-index: 9999;
-}
-
-.avatarWrapper {
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-}
-.avatarWrapper img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.userName {
-  font-size: 18px;
-  text-align: center;
-  align-items: center;
-  display: flex;
-}
-/* для откр. модалки при наведении */
-/* .icons {
-  position: relative;
-  }
- 
-  .popapInform {
-    display: none;
-    padding: 10px;
-    background:#011522;
-    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
-    border: 1px solid white;
-  }
- 
-.icons:hover .popapInform {
-  display: block;
-  position: absolute;
-  top: 100%;
-  right: 0%;
-  z-index: 9999;
-  min-width: 250px;
-  border-radius: 12px;
-} */
diff --git a/front-cinema/src/components/CinemaCard/CinemaCard.jsx b/front-cinema/src/components/CinemaCard/CinemaCard.jsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import CinemaModal from "../CinemaModal/CinemaModal";
-import styles from "./CinemaCard.module.css";
+import cls from "./CinemaCard.module.css";
 
 const CinemaCard = ({ item }) => {
   const [lgShow, setLgShow] = useState(false);
 
   return (
-    <div className={styles.cardCinema} key={item._id}>
+    <div className={cls.cardCinema} key={item._id}>
       <img
         onClick={() => setLgShow(true)}
         src={`http://localhost:4000/image/cinema/${item.image}`}

diff --git a/front-cinema/src/components/CinemaCard/CinemaCard.module.css b/front-cinema/src/components/CinemaCard/CinemaCard.module.css
@@ -3,8 +3,9 @@
   width: 14%;
   margin: 10px;
   transition: all 300ms;
-  position: relative;
+  position: var(--position-relative);
 }
+
 .cardCinema img {
   width: 100%;
   height: 100%;