Premium
}
-
+
diff --git a/src/components/favorites-list/favorites-list.tsx b/src/components/favorites-list/favorites-list.tsx
index 1251c2d..dc92f87 100644
--- a/src/components/favorites-list/favorites-list.tsx
+++ b/src/components/favorites-list/favorites-list.tsx
@@ -7,15 +7,14 @@ type FavoritesListProps = {
export function FavoritesList({offers} : FavoritesListProps) {
const groupedOffers = offers.reduce((acc, offer) => {
- if (offer.isFavorite) {
- const cityName = offer.city.name;
+ const cityName = offer.city.name;
- if (!acc[cityName]) {
- acc[cityName] = [];
- }
-
- acc[cityName].push(offer);
+ if (!acc[cityName]) {
+ acc[cityName] = [];
}
+
+ acc[cityName].push(offer);
+
return acc;
}, {} as Record);
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..38d6ac5
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,62 @@
+import {useAppDispatch, useAppSelector} from '../../hooks';
+import {Link, useLocation} from 'react-router-dom';
+import {AppRoute} from '../../const.ts';
+import {logoutAction} from '../../store/api-actions.ts';
+
+export function Header() {
+ const dispatch = useAppDispatch();
+ const userData = useAppSelector((state) => state.userData);
+ const favoriteOffers = useAppSelector((state) => state.favoriteOffers);
+ const location = useLocation();
+
+ const isLoginPage = location.pathname === AppRoute.Login as string;
+
+ return (
+
+
+ );
+}
diff --git a/src/components/history-route/history-route.tsx b/src/components/history-route/history-route.tsx
new file mode 100644
index 0000000..58e52df
--- /dev/null
+++ b/src/components/history-route/history-route.tsx
@@ -0,0 +1,33 @@
+import React, {useState, useLayoutEffect} from 'react';
+import {Router} from 'react-router-dom';
+import type {BrowserHistory} from 'history';
+
+export interface HistoryRouterProps {
+ history: BrowserHistory;
+ basename?: string;
+ children?: React.ReactNode;
+}
+
+export function HistoryRouter({
+ basename,
+ children,
+ history,
+}: HistoryRouterProps) {
+ const [state, setState] = useState({
+ action: history.action,
+ location: history.location,
+ });
+
+ useLayoutEffect(() => history.listen(setState), [history]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/login-form/login-form.tsx b/src/components/login-form/login-form.tsx
new file mode 100644
index 0000000..cb68719
--- /dev/null
+++ b/src/components/login-form/login-form.tsx
@@ -0,0 +1,64 @@
+import {FormEvent, useRef} from 'react';
+import {useAppDispatch} from '../../hooks';
+import {loginAction} from '../../store/api-actions.ts';
+import {showCustomToast} from '../custom-toast/custom-toast.tsx';
+
+const validatePassword = (password: string): boolean => {
+ const hasLetter = /[a-zA-Z]/.test(password);
+ const hasNumber = /\d/.test(password);
+ const hasNoSpaces = !/\s/.test(password);
+
+ return hasLetter && hasNumber && hasNoSpaces;
+};
+
+export function LoginForm() {
+ const loginFormRef = useRef(null);
+
+ const dispatch = useAppDispatch();
+
+ const handleSubmit = (evt: FormEvent) => {
+ evt.preventDefault();
+
+ if (!loginFormRef.current) {
+ return;
+ }
+
+ const formData = new FormData(loginFormRef.current);
+ const email = formData.get('email') as string;
+ const password = formData.get('password') as string;
+
+ if (!validatePassword(password)) {
+ showCustomToast('Password must contain at least one letter, one number, and no spaces.');
+ return;
+ }
+
+ if (email && password) {
+ dispatch(loginAction({
+ email,
+ password
+ }));
+ }
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/components/private-login-route/private-login-route.tsx b/src/components/private-login-route/private-login-route.tsx
new file mode 100644
index 0000000..2b6b587
--- /dev/null
+++ b/src/components/private-login-route/private-login-route.tsx
@@ -0,0 +1,17 @@
+import {Navigate} from 'react-router-dom';
+import {AppRoute, AuthorizationStatus} from '../../const';
+import {useAppSelector} from '../../hooks';
+
+type PrivateLoginRouteProps = {
+ children: JSX.Element;
+}
+
+export function PrivateLoginRoute({children}: PrivateLoginRouteProps): JSX.Element {
+ const authorizationStatus = useAppSelector((state) => state.authorizationStatus);
+
+ return (
+ authorizationStatus !== AuthorizationStatus.Auth
+ ? children
+ :
+
diff --git a/src/pages/favorites-page/favorites-page.tsx b/src/pages/favorites-page/favorites-page.tsx
index a3f598c..e6f07d0 100644
--- a/src/pages/favorites-page/favorites-page.tsx
+++ b/src/pages/favorites-page/favorites-page.tsx
@@ -1,49 +1,23 @@
import {Helmet} from 'react-helmet-async';
import {FavoritesList} from '../../components/favorites-list/favorites-list.tsx';
import {useAppSelector} from '../../hooks';
+import {Header} from '../../components/header/header.tsx';
export function FavoritesPage() : JSX.Element {
- const offers = useAppSelector((state) => state.offers);
+ const favoriteOffers = useAppSelector((state) => state.favoriteOffers);
return (
Favorites - 6 cities
-
-
+
diff --git a/src/pages/login-page/login-page.tsx b/src/pages/login-page/login-page.tsx
index 22c7f25..193cfcd 100644
--- a/src/pages/login-page/login-page.tsx
+++ b/src/pages/login-page/login-page.tsx
@@ -1,4 +1,6 @@
import {Helmet} from 'react-helmet-async';
+import {LoginForm} from '../../components/login-form/login-form.tsx';
+import {Header} from '../../components/header/header.tsx';
export function LoginPage() : JSX.Element {
return (
@@ -6,34 +8,11 @@ export function LoginPage() : JSX.Element {
Log In - 6 cities
-
-
+
+
+
+
+
+
+ 
+
+
+ {!isLoginPage && (
+
+ )}
+
+
+ Sign in
+ +
-
-
-
-
-
- 
-
-
-
-
-
- Saved listing
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Sign in
- -
diff --git a/src/pages/main-page/main-page.tsx b/src/pages/main-page/main-page.tsx
index a930735..80ab7ba 100644
--- a/src/pages/main-page/main-page.tsx
+++ b/src/pages/main-page/main-page.tsx
@@ -9,6 +9,7 @@ import {setCity} from '../../store/action.ts';
import {useMemo, useState} from 'react';
import {SortingOption} from '../../types/sorting-option.ts';
import {SortingOptions} from '../../components/sorting-options/sorting-options.tsx';
+import {Header} from '../../components/header/header.tsx';
function getPlacesText(count: number): string {
if (count === 1) {
@@ -64,33 +65,7 @@ export function MainPage(): JSX.Element {
6 cities
-
-
+
= {
+ [StatusCodes.BAD_REQUEST]: true,
+ [StatusCodes.UNAUTHORIZED]: true,
+ [StatusCodes.NOT_FOUND]: true
+};
+
+const shouldDisplayError = (response: AxiosResponse) => StatusCodeMapping[response.status];
const BACKEND_URL = 'https://14.design.htmlacademy.pro/six-cities';
const REQUEST_TIMEOUT = 5000;
-export const createAPI = (): AxiosInstance => axios.create({
- baseURL: BACKEND_URL,
- timeout: REQUEST_TIMEOUT,
-});
+export const createAPI = (): AxiosInstance => {
+ const api = axios.create({
+ baseURL: BACKEND_URL,
+ timeout: REQUEST_TIMEOUT,
+ });
+
+ api.interceptors.request.use(
+ (config: InternalAxiosRequestConfig) => {
+ const token = getToken();
+
+ if (token && config.headers) {
+ config.headers['x-token'] = token;
+ }
+
+ return config;
+ },
+ );
+
+ api.interceptors.response.use(
+ (response) => response,
+ (error: AxiosError) => {
+ if (error.response && shouldDisplayError(error.response)) {
+ const detailMessage = (error.response.data);
+
+ showCustomToast(detailMessage.message);
+ }
+
+ throw error;
+ }
+ );
+
+ return api;
+};
diff --git a/src/services/token.ts b/src/services/token.ts
new file mode 100644
index 0000000..df439d4
--- /dev/null
+++ b/src/services/token.ts
@@ -0,0 +1,16 @@
+const AUTH_TOKEN_KEY_NAME = 'six-cities-token';
+
+export type Token = string;
+
+export const getToken = (): Token => {
+ const token = localStorage.getItem(AUTH_TOKEN_KEY_NAME);
+ return token ?? '';
+};
+
+export const saveToken = (token: Token): void => {
+ localStorage.setItem(AUTH_TOKEN_KEY_NAME, token);
+};
+
+export const dropToken = (): void => {
+ localStorage.removeItem(AUTH_TOKEN_KEY_NAME);
+};
diff --git a/src/store/action.ts b/src/store/action.ts
index 6176f11..19de4fe 100644
--- a/src/store/action.ts
+++ b/src/store/action.ts
@@ -1,8 +1,18 @@
import { createAction } from '@reduxjs/toolkit';
import {Offer} from '../types/offer.ts';
+import {AppRoute, AuthorizationStatus} from '../const.ts';
+import {UserData} from '../types/user.ts';
export const setCity = createAction('city/setCity');
export const setOffers = createAction('offers/setOffers');
-export const setOffersDataLoadingStatus = createAction('data/setOffersDataLoadingStatus');
+export const setDataLoadingStatus = createAction('data/setDataLoadingStatus');
+
+export const requireAuthorization = createAction('user/requireAuthorization');
+
+export const setUserData = createAction('user/setUserData');
+
+export const setFavoriteOffers = createAction('user/setFavoriteOffers');
+
+export const redirectToRoute = createAction('auth/redirectToRoute');
diff --git a/src/store/api-actions.ts b/src/store/api-actions.ts
index ccc0ad7..31a3e55 100644
--- a/src/store/api-actions.ts
+++ b/src/store/api-actions.ts
@@ -2,19 +2,90 @@ import {AxiosInstance} from 'axios';
import {AppDispatch, State} from '../types/state.ts';
import {createAsyncThunk} from '@reduxjs/toolkit';
import {Offer} from '../types/offer.ts';
-import {APIRoute} from '../const.ts';
-import {setOffers, setOffersDataLoadingStatus} from './action.ts';
+import {APIRoute, AppRoute, AuthorizationStatus} from '../const.ts';
+import {
+ redirectToRoute,
+ requireAuthorization,
+ setOffers,
+ setDataLoadingStatus,
+ setUserData,
+ setFavoriteOffers
+} from './action.ts';
+import {dropToken, saveToken} from '../services/token.ts';
+import {AuthData, UserData} from '../types/user.ts';
export const fetchOffersAction = createAsyncThunk(
- 'data/fetchQuestions',
+ 'data/fetchOffers',
async (_arg, {dispatch, extra: api}) => {
- dispatch(setOffersDataLoadingStatus(true));
+ dispatch(setDataLoadingStatus(true));
const {data} = await api.get(APIRoute.Offers);
- dispatch(setOffersDataLoadingStatus(false));
+ dispatch(setDataLoadingStatus(false));
dispatch(setOffers(data));
},
);
+
+export const fetchFavoriteOffersAction = createAsyncThunk(
+ 'data/fetchFavoriteOffers',
+ async (_arg, {dispatch, extra: api}) => {
+ const {data} = await api.get(APIRoute.Favorite);
+ dispatch(setFavoriteOffers(data));
+ },
+);
+
+export const checkAuthAction = createAsyncThunk(
+ 'user/checkAuth',
+ async (_arg, {dispatch, extra: api}) => {
+ try {
+ const response = await api.get(APIRoute.Login);
+ dispatch(requireAuthorization(AuthorizationStatus.Auth));
+ dispatch(setUserData(response.data));
+ dispatch(fetchFavoriteOffersAction());
+ } catch (error) {
+ dispatch(requireAuthorization(AuthorizationStatus.NoAuth));
+ }
+ },
+);
+
+export const loginAction = createAsyncThunk(
+ 'user/login',
+ async ({email, password}, {dispatch, extra: api}) => {
+ const response = await api.post(APIRoute.Login, {email, password});
+ saveToken(response.data.token);
+ dispatch(requireAuthorization(AuthorizationStatus.Auth));
+ dispatch(setUserData(response.data));
+ dispatch(fetchOffersAction());
+ dispatch(fetchFavoriteOffersAction());
+ dispatch(redirectToRoute(AppRoute.Main));
+ },
+);
+
+export const logoutAction = createAsyncThunk(
+ 'user/logout',
+ async (_arg, {dispatch, extra: api}) => {
+ await api.delete(APIRoute.Logout);
+ dropToken();
+ dispatch(requireAuthorization(AuthorizationStatus.NoAuth));
+ dispatch(setUserData(null));
+ dispatch(setFavoriteOffers([]));
+ },
+);
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ef91d2..e75099b 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,7 @@
import { configureStore } from '@reduxjs/toolkit';
import { reducer } from './reducer';
import {createAPI} from '../services/api';
+import {redirect} from './middlewares/redirect.ts';
export const api = createAPI();
@@ -11,5 +12,5 @@ export const store = configureStore({
thunk: {
extraArgument: api,
},
- }),
+ }).concat(redirect),
});
diff --git a/src/store/middlewares/redirect.ts b/src/store/middlewares/redirect.ts
new file mode 100644
index 0000000..902f42a
--- /dev/null
+++ b/src/store/middlewares/redirect.ts
@@ -0,0 +1,17 @@
+import {PayloadAction} from '@reduxjs/toolkit';
+import {browserHistory} from '../../browser-history';
+import {Middleware} from 'redux';
+import {reducer} from '../reducer';
+
+type Reducer = ReturnType;
+
+export const redirect: Middleware =
+ () =>
+ (next) =>
+ (action: PayloadAction) => {
+ if (action.type === 'auth/redirectToRoute') {
+ browserHistory.push(action.payload);
+ }
+
+ return next(action);
+ };
diff --git a/src/store/reducer.ts b/src/store/reducer.ts
index fd51a3d..25c8347 100644
--- a/src/store/reducer.ts
+++ b/src/store/reducer.ts
@@ -1,17 +1,25 @@
import { createReducer } from '@reduxjs/toolkit';
-import {setCity, setOffers, setOffersDataLoadingStatus} from './action';
+import {requireAuthorization, setCity, setOffers, setDataLoadingStatus, setUserData, setFavoriteOffers} from './action';
import {Offer} from '../types/offer.ts';
+import {AuthorizationStatus} from '../const.ts';
+import {UserData} from '../types/user.ts';
type InitialState = {
activeCity: string;
offers: Offer[];
- isOffersDataLoading: boolean;
+ favoriteOffers: Offer[];
+ isDataLoading: boolean;
+ authorizationStatus: AuthorizationStatus;
+ userData: UserData | null;
}
const initialState: InitialState = {
activeCity: 'Paris',
offers: [],
- isOffersDataLoading: false
+ favoriteOffers: [],
+ isDataLoading: false,
+ authorizationStatus: AuthorizationStatus.Unknown,
+ userData: null,
};
export const reducer = createReducer(initialState, (builder) => {
@@ -22,7 +30,16 @@ export const reducer = createReducer(initialState, (builder) => {
.addCase(setOffers, (state, action) => {
state.offers = action.payload;
})
- .addCase(setOffersDataLoadingStatus, (state, action) => {
- state.isOffersDataLoading = action.payload;
+ .addCase(setFavoriteOffers, (state, action) => {
+ state.favoriteOffers = action.payload;
+ })
+ .addCase(setDataLoadingStatus, (state, action) => {
+ state.isDataLoading = action.payload;
+ })
+ .addCase(requireAuthorization, (state, action) => {
+ state.authorizationStatus = action.payload;
+ })
+ .addCase(setUserData, (state, action) => {
+ state.userData = action.payload;
});
});
diff --git a/src/types/user.ts b/src/types/user.ts
index 9a1670e..2b5d4bf 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -3,3 +3,16 @@ export type User = {
avatarUrl: string;
isPro: boolean;
}
+
+export type UserData = {
+ name: string;
+ avatarUrl: string;
+ isPro: boolean;
+ email: string;
+ token: string;
+}
+
+export type AuthData = {
+ email: string;
+ password: string;
+}
-
-
-
-
-
-
-
-
-
-
-
-