Добро пожаловать, или посторонним вход воспрещён (часть 1)

package.json

@@ -20,7 +20,8 @@
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-redux": "8.1.3",
-    "react-router-dom": "6.16.0"
+    "react-router-dom": "6.16.0",
+    "react-toastify": "^10.0.6"
   },
   "devDependencies": {
     "@jedmao/redux-mock-store": "3.0.5",

src/browser-history.ts

@@ -0,0 +1,3 @@
+import {createBrowserHistory} from 'history';
+
+export const browserHistory = createBrowserHistory();

src/components/app/app.tsx

@@ -1,57 +1,61 @@
 import {MainPage} from '../../pages/main-page/main-page';
-import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import {Route, Routes} from 'react-router-dom';
 import {HelmetProvider} from 'react-helmet-async';
 import {AppRoute} from '../../const.ts';
 import {LoginPage} from '../../pages/login-page/login-page.tsx';
 import {PrivateRoute} from '../private-route/private-route.tsx';
 import {OfferPage} from '../../pages/offer-page/offer-page.tsx';
 import {NotFoundPage} from '../../pages/404-not-found-page/not-found-page.tsx';
-import {AuthorizationStatus} from '../../const.ts';
 import {FavoritesPage} from '../../pages/favorites-page/favorites-page.tsx';
 import {useAppSelector} from '../../hooks';
 import {Spinner} from '../spinner/spinner.tsx';
+import {HistoryRouter} from '../history-route/history-route.tsx';
+import {browserHistory} from '../../browser-history.ts';
+import {PrivateLoginRoute} from '../private-login-route/private-login-route.tsx';
 
-export function App() : JSX.Element {
-  const isOffersDataLoading = useAppSelector((state) => state.isOffersDataLoading);
+export function App(): JSX.Element {
+  const isOffersDataLoading = useAppSelector((state) => state.isDataLoading);
 
   if (isOffersDataLoading) {
     return (
-      <Spinner />
+      <Spinner/>
     );
   }
 
   return (
     <HelmetProvider>
-      <BrowserRouter>
+      <HistoryRouter history={browserHistory}>
         <Routes>
           <Route
             path={AppRoute.Main}
-            element={<MainPage />}
+            element={<MainPage/>}
           />
           <Route
             path={AppRoute.Login}
-            element={<LoginPage />}
+            element={
+              <PrivateLoginRoute>
+                <LoginPage/>
+              </PrivateLoginRoute>
+            }
           />
           <Route
             path={AppRoute.Favorites}
             element={
-              <PrivateRoute
-                authorizationStatus={AuthorizationStatus.Auth}
-              >
-                <FavoritesPage />
+              <PrivateRoute>
+                <FavoritesPage/>
               </PrivateRoute>
             }
           />
           <Route
             path={AppRoute.OfferWithId}
-            element={<OfferPage />}
+            element={<OfferPage/>}
           />
           <Route
             path="*"
-            element={<NotFoundPage />}
+            element={<NotFoundPage/>}
           />
         </Routes>
-      </BrowserRouter>
+      </HistoryRouter>
     </HelmetProvider>
   );
 }

src/components/custom-toast/custom-toast.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const CustomToast: React.FC<{ message: string }> = ({ message }) => (
+  <div style={{ fontSize: '14px', padding: '8px' }}>
+    {message}
+  </div>
+);
+
+export const showCustomToast = (message: string) => {
+  toast(<CustomToast message={message} />);
+};
+
+export function CustomToastContainer() {
+  return (
+    <ToastContainer
+      position="bottom-right"
+      autoClose={3000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+    />
+  );
+}

src/components/favorite-card/favorite-card.tsx

@@ -8,14 +8,14 @@ type FavoriteCardProps = {
 
 export function FavoriteCard({offer}: FavoriteCardProps): JSX.Element {
   return (
-    <article className={'favorite__card place-card'}>
+    <article className={'favorites__card place-card'}>
       {offer.isPremium &&
         <div className="place-card__mark">
           <span>Premium</span>
         </div>}
-      <div className={'favorite__image-wrapper place-card__image-wrapper'}>
+      <div className={'favorites__image-wrapper place-card__image-wrapper'}>
         <a href="#">
-          <img className="place-card__image" src={offer.previewImage} width="260" height="200" alt="Place image"/>
+          <img className="place-card__image" src={offer.previewImage} width="150" height="110" alt="Place image"/>
         </a>
       </div>
       <div className={'favorites__card-info place-card__info'}>

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<string, Offer[]>);
 

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 (
+    <header className="header">
+      <div className="container">
+        <div className="header__wrapper">
+          <div className="header__left">
+            <a className="header__logo-link header__logo-link--active">
+              <img className="header__logo" src="/img/logo.svg" alt="6 cities logo" width="81" height="41"/>
+            </a>
+          </div>
+          {!isLoginPage && (
+            <nav className="header__nav">
+              <ul className="header__nav-list">
+                <li className="header__nav-item user">
+                  {userData ?
+                    <Link to={AppRoute.Favorites} className="header__nav-link header__nav-link--profile">
+                      <div className="header__avatar-wrapper user__avatar-wrapper">
+                        <img className="user__avatar" src={userData.avatarUrl} alt="avatar" />
+                      </div>
+                      <span className="header__user-name user__name">{userData.email}</span>
+                      <span className="header__favorite-count">{favoriteOffers.length}</span>
+                    </Link>
+                    :
+                    <Link to={AppRoute.Login} className="header__nav-link header__nav-link--profile">
+                      <div className="header__avatar-wrapper user__avatar-wrapper">
+                      </div>
+                      <span className="header__login">Sign in</span>
+                    </Link>}
+                </li>
+                {userData &&
+                  <li className="header__nav-item">
+                    <Link
+                      className="header__nav-link"
+                      to={AppRoute.Main}
+                      onClick={(evt) =>{
+                        evt.preventDefault();
+                        dispatch(logoutAction());
+                      }}
+                    >
+                      <span className="header__signout">Sign out</span>
+                    </Link>
+                  </li>}
+              </ul>
+            </nav>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

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 (
+    <Router
+      basename={basename}
+      location={state.location}
+      navigationType={state.action}
+      navigator={history}
+    >
+      {children}
+    </Router>
+  );
+}

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<HTMLFormElement>(null);
+
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = (evt: FormEvent<HTMLFormElement>) => {
+    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 (
+    <section className="login">
+      <h1 className="login__title">Sign in</h1>
+      <form
+        ref={loginFormRef}
+        className="login__form form"
+        action=""
+        onSubmit={handleSubmit}
+      >
+        <div className="login__input-wrapper form__input-wrapper">
+          <label className="visually-hidden">E-mail</label>
+          <input className="login__input form__input" type="email" name="email" placeholder="Email" required/>
+        </div>
+        <div className="login__input-wrapper form__input-wrapper">
+          <label className="visually-hidden">Password</label>
+          <input className="login__input form__input" type="password" name="password" placeholder="Password" required/>
+        </div>
+        <button className="login__submit form__submit button" type="submit">Sign in</button>
+      </form>
+    </section>
+  );
+}