diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 5671d9c..b666c82 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -2,10 +2,12 @@ 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; @@ -13,9 +15,12 @@ export interface DroppedCard { } 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 (
-
- - -
+ {loggedIn ? ( +
+ + +
+ ) : ( + + )}
); } diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss index 0fbc1e6..aa8c438 100644 --- a/src/components/SideBar/SideBar.module.scss +++ b/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; diff --git a/src/pages/NotFound/NotFound.module.scss b/src/pages/NotFound/NotFound.module.scss index 99f7a53..42668ed 100644 --- a/src/pages/NotFound/NotFound.module.scss +++ b/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; +} diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx index 7a56c16..3a91f6e 100644 --- a/src/pages/NotFound/NotFound.tsx +++ b/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 (
-

Страница не найдена

+

404 Ошибка

+

Страница, которую вы ищете, не существует

+ + +
); } diff --git a/src/pages/Registration/Registration.module.scss b/src/pages/Registration/Registration.module.scss index 09b9f80..4c3cb27 100644 --- a/src/pages/Registration/Registration.module.scss +++ b/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; diff --git a/src/pages/Registration/Registration.tsx b/src/pages/Registration/Registration.tsx index 48d83e6..538f64e 100644 --- a/src/pages/Registration/Registration.tsx +++ b/src/pages/Registration/Registration.tsx @@ -11,9 +11,7 @@ export default function Registration() { const { handleRegister } = useOutletContext(); const [email, setEmail] = useState(''); - console.log('email: ', email); const [password, setPassword] = useState(''); - console.log('password: ', password); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); @@ -40,7 +38,7 @@ export default function Registration() { onChange={(e) => setPassword(e.target.value)} placeholder='Введите пароль' > - + ); diff --git a/src/services/utils.tsx b/src/services/utils.tsx index c90ccc6..a7c699a 100644 --- a/src/services/utils.tsx +++ b/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); diff --git a/src/store/api.ts b/src/store/api.ts new file mode 100644 index 0000000..5d44c81 --- /dev/null +++ b/src/store/api.ts @@ -0,0 +1,26 @@ +type RequestOptionsType = RequestInit & { + headers: Record +} + +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') + diff --git a/src/store/features/slice/slice.ts b/src/store/features/slice/slice.ts index c6a47e7..f1b8c0f 100644 --- a/src/store/features/slice/slice.ts +++ b/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) => { - state.currentPage = action.payload; + setLoggedIn: (state, action: PayloadAction) => { + state.loggedIn = action.payload; }, } }); export const { - setCurrentPage, + setLoggedIn, } = slice.actions; diff --git a/src/ui/FilterList/FilterList.tsx b/src/ui/FilterList/FilterList.tsx index 65501f5..2be504a 100644 --- a/src/ui/FilterList/FilterList.tsx +++ b/src/ui/FilterList/FilterList.tsx @@ -17,7 +17,6 @@ export default function FilterList({ positions, city, }: FilterListProps) { - console.log('employesRout: ', employesRout); return (