feat/redux

src/components/App/App.tsx

@@ -2,20 +2,25 @@ import Header from 'src/components/Header/Header';
 import { Outlet, useNavigate } from 'react-router-dom';
 import SideBar from 'src/components/SideBar/SideBar';
 import 'src/components/App/App.scss';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { initialCards, cardsList } from 'src/services/mock';
 import { initialCardsProps, RegisterDataProps } from 'src/services/types';
 import * as Api from 'src/services/utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { setLoggedIn, SliceProps } from 'src/store/features/slice/slice';
 
 export interface DroppedCard {
   id: string;
   cellId: string;
 }
 
 export default function App() {
-  const [loggedIn, setLoggedIn] = useState(false);
-  console.log('loggedIn: ', loggedIn);
   const navigate = useNavigate();
+  const loggedIn = useSelector((state: SliceProps) => state.loggedIn)
+  const dispatch = useDispatch();
+
+
+  console.log('loggedIn: ', loggedIn);
 
   // const [members, setMembers] = useState('')
   // console.log('members: ', members);
@@ -35,10 +40,9 @@ export default function App() {
     // setLoading(true);
     Api.registration({ email, password })
       .then((data) => {
-        if (data.token) {
-          console.log('токен получил: ', data.access);
+        if (data.access) {
           localStorage.setItem('token', data.access);
-          setLoggedIn(true);
+          dispatch(setLoggedIn(true));
           navigate('/');
         }
       })
@@ -188,21 +192,32 @@ export default function App() {
     });
   };
 
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      dispatch(setLoggedIn(true));
+    }
+  }, [dispatch]);
+
   return (
     <div>
       <Header onDragStart={handleDragStart} droppedCards={droppedCards} />
-      <div className='conteiner'>
-        <SideBar />
-        <Outlet
-          context={{
-            handleRegister,
-            allowDrop,
-            handleDrop,
-            handleDragStart,
-            cards,
-          }}
-        />
-      </div>
+      {loggedIn ? (
+        <div className='container'>
+          <SideBar />
+          <Outlet
+            context={{
+              handleRegister,
+              allowDrop,
+              handleDrop,
+              handleDragStart,
+              cards,
+            }}
+          />
+        </div>
+      ) : (
+        <Outlet context={{ handleRegister }} /> 
+         )}
     </div>
   );
 }

src/components/SideBar/SideBar.module.scss

@@ -1,7 +1,7 @@
 .sideBar {
   border: $border-white;
   border-radius: $border-radius-xl;
-  margin: 56px 66px;
+  margin: 56px 48px;
   padding: 24px;
   width: 316px;
   height: 388px;

src/pages/NotFound/NotFound.module.scss

@@ -1,10 +1,30 @@
 .notFound {
-  width: 100%;
   @include flex-column-center;
+  width: 100%;
 }
 
 .title {
   @include mp-null;
-  @include use-font(38px, 46px, 500);
+  @include use-font(38px, 45.6px, 500);
   margin: 164px auto 56px;
 }
+
+.text {
+  @include mp-null;
+  @include use-font(24px, 28.8px, 500);
+  margin-bottom: 48px;
+}
+
+.button {
+  @include use-font;
+  border-radius: $border-radius-s!important;
+  border: none;
+  outline: none;
+  padding: 10.5px 16px;
+  width: 181px;
+  height: 40px;
+  box-shadow: $items-shadow;
+  background: $button;
+  color: $main-white;
+  text-align: center;
+}

src/pages/NotFound/NotFound.tsx

@@ -1,9 +1,15 @@
+import { Button } from 'antd/es/radio';
+import { Link } from 'react-router-dom';
 import styles from 'src/pages/NotFound/NotFound.module.scss';
 
 export default function NotFound() {
   return (
     <div className={styles.notFound}>
-      <p className={styles.title}>Страница не найдена</p>
+      <p className={styles.title}>404 Ошибка</p>
+      <p className={styles.text}>Страница, которую вы ищете, не существует</p>
+      <Link to='./' className={styles.link}>
+        <Button className={styles.button}>На главную</Button>
+      </Link>
     </div>
   );
 }

src/pages/Registration/Registration.module.scss

@@ -21,10 +21,12 @@
 }
 
 .button {
+  @include use-font;
+  color: $main-white;
   border-radius: $border-radius-s;
   border: none;
   outline: none;
-  padding: 0px 16px;
+  padding: 0 16px;
   width: 181px;
   height: 40px;
   box-shadow: $items-shadow;

src/pages/Registration/Registration.tsx

@@ -11,9 +11,7 @@ export default function Registration() {
   const { handleRegister } = useOutletContext<RegistrationProps>();
 
   const [email, setEmail] = useState<string>('');
-  console.log('email: ', email);
   const [password, setPassword] = useState<string>('');
-  console.log('password: ', password);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -40,7 +38,7 @@ export default function Registration() {
           onChange={(e) => setPassword(e.target.value)}
           placeholder='Введите пароль'
         ></Input>
-        <Button type='primary' htmlType='submit' className={styles.button}>Войти</Button>
+        <Button htmlType='submit' className={styles.button}>Войти</Button>
       </form>
     </div>
   );

src/services/utils.tsx

@@ -1,5 +1,5 @@
 import { RegisterDataProps } from './types';
-export const BASE_URL = '127.0.0.1:8000/api'
+export const BASE_URL = 'https://gazprom.hopto.org/api'
 const TOKEN = localStorage.getItem('token');
 console.log('TOKEN: ', TOKEN);
 

src/store/api.ts

@@ -0,0 +1,26 @@
+type RequestOptionsType = RequestInit & {
+  headers: Record<string, string>
+}
+
+export const BASE_URL = 'https://sagaart5.hopto.org/api/v1'
+
+export const checkResponse = (response: Response) => {
+  if (response.ok) {
+    return response.json()
+  }
+  return response
+    .json()
+    .then(response => Promise.reject(`Ошибка ${response.status}`))
+}
+
+const request = (endpoint: string, options?: RequestOptionsType) =>
+  fetch(`${BASE_URL}${endpoint}`, options).then(checkResponse)
+
+export const getEventsData = async () => await request('/events')
+export const getArtsData = async (limit?: number) =>
+  await request(`/arts${limit ? `/?limit=${limit}` : ''}`)
+export const getPopularArts = async () => await request('/arts/most_popular')
+export const getArtById = async (id: number) => await request(`/arts/${id}`)
+export const getSearchFields = async () =>
+  await request('/arts/art_search_fields')
+

src/store/features/slice/slice.ts

@@ -1,27 +1,26 @@
 import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 export interface SliceProps {
-  currentPage: number;
-
+  loggedIn: boolean;
 }
 
 const initialState: SliceProps = {
-  currentPage: 1,
+  loggedIn: false,
 };
 
 export const slice = createSlice({
-  name: 'picture',
+  name: 'gazprom',
   initialState,
   reducers: {
-    setCurrentPage: (state, action: PayloadAction<number>) => {
-      state.currentPage = action.payload;
+    setLoggedIn: (state, action: PayloadAction<boolean>) => {
+      state.loggedIn = action.payload;
     },
 
   }
 });
 
 export const {
-  setCurrentPage,
+  setLoggedIn,
 
 } = slice.actions;
 

src/ui/FilterList/FilterList.tsx

@@ -17,7 +17,6 @@ export default function FilterList({
   positions,
   city,
 }: FilterListProps) {
-  console.log('employesRout: ', employesRout);
 
   return (
     <ul