Merge pull request #15 from mgmman/module9-task1

htmlacademy-univer-javascript-3 · Dec 11, 2024 · b29ed1b · b29ed1b
2 parents a896a43 + 4c03d8b
commit b29ed1b
Show file tree

Hide file tree

Showing 40 changed files with 570 additions and 88 deletions.
diff --git a/src/Pages/login-page/login-page-right-section.tsx b/src/Pages/login-page/login-page-right-section.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import { changeCity } from '../../store/offers/offers.slice.ts';
 import { CITIES } from '../../consts/cities.ts';
 import { useAppDispatch } from '../../store/store.ts';
@@ -13,7 +13,7 @@ function LoginPageRightSectionImpl() {
       <div className="locations__item">
         <Link
           className="locations__item-link"
-          to={AppRoutes.MainPage}
+          to={AppRoute.MainPage}
           onClick={() => dispatch(changeCity(city))}
         >
           <span>{city.name}</span>

diff --git a/src/Pages/login-page/login-page.tsx b/src/Pages/login-page/login-page.tsx
@@ -25,7 +25,6 @@ export function LoginPage(): React.JSX.Element {
     loginInfo.email &&
     validateEmail(loginInfo.email) &&
     loginInfo.password &&
-    loginInfo.password.length > 3 &&
     loginInfo.password.match(/[a-zA-z]/g) &&
     loginInfo.password.match(/[0-9]/g);
   return (

diff --git a/src/Pages/not-found-page/not-found-page.tsx b/src/Pages/not-found-page/not-found-page.tsx
@@ -1,19 +1,19 @@
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
-import {AppRoutes} from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 
 export function NotFoundPage(): React.JSX.Element {
   return (
-    <main className='not-found-page'>
+    <main className="not-found-page">
       <Helmet>
         <title>404 - not found</title>
       </Helmet>
       <h1>404 - Page Not Found</h1>
-      <p className='not-found-page__title'>
+      <p className="not-found-page__title">
         The page you are looking for might have been removed or is temporarily
         unavailable.
       </p>
-      <Link to={AppRoutes.MainPage} className='not-found-page__link'>
+      <Link to={AppRoute.MainPage} className="not-found-page__link">
         back to main page
       </Link>
     </main>

diff --git a/src/Pages/offer-page/offer-page.tsx b/src/Pages/offer-page/offer-page.tsx
@@ -13,7 +13,7 @@ import { OfferGallery } from '../../components/offer/offer-gallery.tsx';
 import { BookmarkButton } from '../../components/bookmark-button.tsx';
 import { store, useAppSelector } from '../../store/store.ts';
 import { Spinner } from '../../components/spinner/Spinner.tsx';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import {
   fetchNearbyOffers,
   fetchOffer,
@@ -38,7 +38,7 @@ export function OfferPage(): React.JSX.Element {
   const currentOffer = useAppSelector(getCurrentOffer);
   const currentReviews = useAppSelector(getCurrentReviews);
   if (currentOffer === undefined) {
-    return <Navigate to={AppRoutes.NotFoundPage} />;
+    return <Navigate to={AppRoute.NotFoundPage} />;
   }
   return (
     <div className="page">

diff --git a/src/api/api.ts b/src/api/api.ts
@@ -1,8 +1,13 @@
-import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+} from 'axios';
 import { getToken } from '../utils/token-utils.ts';
+import { toast } from 'react-toastify';
 
 const BACKEND_URL = 'https://14.design.htmlacademy.pro/six-cities';
-const REQUEST_TIMEOUT = 5000;
+const REQUEST_TIMEOUT = 3000;
 
 export const createAPI = (): AxiosInstance => {
   const api = axios.create({
@@ -20,5 +25,22 @@ export const createAPI = (): AxiosInstance => {
     return config;
   });
 
+  api.interceptors.response.use(
+    (response) => response,
+    (error: AxiosError) => {
+      if (
+        error &&
+        (error.code === 'ECONNABORTED' || error.code === 'ERR_NETWORK')
+      ) {
+        toast.error(
+          'Сервер недоступен, проверте подключение к интернету или повторите попытку позже',
+          {
+            toastId: 'server-unreachable',
+          },
+        );
+      }
+    },
+  );
+
   return api;
 };
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -8,7 +8,7 @@ import {
   AuthorizationWrapperForAuthorizedOnly,
   AuthorizationWrapperForUnauthorizedOnly,
 } from './authorization-wrapper.tsx';
-import { AppRoutes } from '../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../dataTypes/enums/app-route.ts';
 import { HelmetProvider } from 'react-helmet-async';
 import { Provider } from 'react-redux';
 import { store } from '../store/store.ts';
@@ -19,28 +19,28 @@ export function App(): React.JSX.Element {
       <HelmetProvider>
         <BrowserRouter>
           <Routes>
-            <Route path={AppRoutes.MainPage} element={<MainPage />} />
+            <Route path={AppRoute.MainPage} element={<MainPage />} />
             <Route
-              path={AppRoutes.Login}
+              path={AppRoute.Login}
               element={
                 <AuthorizationWrapperForUnauthorizedOnly
-                  fallbackUrl={AppRoutes.MainPage}
+                  fallbackUrl={AppRoute.MainPage}
                 >
                   <LoginPage />
                 </AuthorizationWrapperForUnauthorizedOnly>
               }
             />
             <Route
-              path={AppRoutes.Favorites}
+              path={AppRoute.Favorites}
               element={
                 <AuthorizationWrapperForAuthorizedOnly
-                  fallbackUrl={AppRoutes.Login}
+                  fallbackUrl={AppRoute.Login}
                 >
                   <FavoritesPage />
                 </AuthorizationWrapperForAuthorizedOnly>
               }
             />
-            <Route path={`${AppRoutes.Offer}/:id`} element={<OfferPage />} />
+            <Route path={`${AppRoute.Offer}/:id`} element={<OfferPage />} />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </BrowserRouter>

diff --git a/src/components/authorization-wrapper.tsx b/src/components/authorization-wrapper.tsx
@@ -1,11 +1,11 @@
 import { Navigate } from 'react-router-dom';
 import { useAppSelector } from '../store/store.ts';
-import { AppRoutes } from '../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../dataTypes/enums/app-route.ts';
 import { getIsAuthorized } from '../store/user/user.selectors.ts';
 
 interface AuthorizationWrapperProps {
   children: React.JSX.Element;
-  fallbackUrl: AppRoutes;
+  fallbackUrl: AppRoute;
 }
 
 export function AuthorizationWrapperForAuthorizedOnly({

diff --git a/src/components/bookmark-button.tsx b/src/components/bookmark-button.tsx
@@ -4,7 +4,7 @@ import { bookmarkOffer } from '../store/async-actions.ts';
 import { Offer } from '../dataTypes/offer.ts';
 import { getIsAuthorized } from '../store/user/user.selectors.ts';
 import { useNavigate } from 'react-router-dom';
-import { AppRoutes } from '../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../dataTypes/enums/app-route.ts';
 
 interface BookmarkButtonProps {
   size: 'big' | 'small';
@@ -45,7 +45,7 @@ export function BookmarkButton({
           );
           setIsFavoriteReactive(!isFavoriteReactive);
         } else {
-          navigate(AppRoutes.Login);
+          navigate(AppRoute.Login);
         }
       }}
     >

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -1,11 +1,11 @@
 import { Link } from 'react-router-dom';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import { memo } from 'react';
 
 function FooterImpl() {
   return (
     <footer className="footer container">
-      <Link className="footer__logo-link" to={AppRoutes.MainPage}>
+      <Link className="footer__logo-link" to={AppRoute.MainPage}>
         <img
           className="footer__logo"
           src="img/logo.svg"

diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import { useAppSelector } from '../../store/store.ts';
 import { memo } from 'react';
 import { UserInfo } from './user-info.tsx';
@@ -16,7 +16,7 @@ function HeaderImpl({ dontShowUserInfo }: HeaderProps) {
       <div className="container">
         <div className="header__wrapper">
           <div className="header__left">
-            <Link className="header__logo-link" to={AppRoutes.MainPage}>
+            <Link className="header__logo-link" to={AppRoute.MainPage}>
               <img
                 className="header__logo"
                 src="img/logo.svg"
@@ -35,7 +35,7 @@ function HeaderImpl({ dontShowUserInfo }: HeaderProps) {
                   <li className="header__nav-item user">
                     <Link
                       className="header__nav-link header__nav-link--profile"
-                      to={AppRoutes.Login}
+                      to={AppRoute.Login}
                     >
                       <div className="header__avatar-wrapper user__avatar-wrapper"></div>
                       <span className="header__login">Sign in</span>

diff --git a/src/components/layout/user-info.tsx b/src/components/layout/user-info.tsx
@@ -1,5 +1,5 @@
 import { Link, useNavigate } from 'react-router-dom';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import { useAppDispatch, useAppSelector } from '../../store/store.ts';
 import { logout } from '../../store/async-actions.ts';
 import { memo } from 'react';
@@ -15,15 +15,15 @@ function UserInfoImpl() {
   const handleLogout = () => {
     dispatch(logout());
     dispatch(setFavoriteOffers([]));
-    navigate(AppRoutes.MainPage);
+    navigate(AppRoute.MainPage);
   };
   return (
     <nav className="header__nav">
       <ul className="header__nav-list">
         <li className="header__nav-item user">
           <Link
             className="header__nav-link header__nav-link--profile"
-            to={AppRoutes.Favorites}
+            to={AppRoute.Favorites}
           >
             <div className="header__avatar-wrapper user__avatar-wrapper">
               {userInfo?.avatarUrl && (

diff --git a/src/components/offer/offer-card.tsx b/src/components/offer/offer-card.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
+import { AppRoute } from '../../dataTypes/enums/app-route.ts';
 import cn from 'classnames';
 import { Rating } from '../rating.tsx';
 import { BookmarkButton } from '../bookmark-button.tsx';
@@ -54,7 +54,7 @@ export function OfferCardImpl({
           { 'near-places__image-wrapper': !isOnMainPage },
         )}
       >
-        <Link to={`${AppRoutes.Offer}/${id}`}>
+        <Link to={`${AppRoute.Offer}/${id}`}>
           <img
             className="place-card__image"
             src={previewImage}
@@ -79,7 +79,7 @@ export function OfferCardImpl({
         </div>
         <Rating rating={rating} usePlace="place-card" />
         <h2 className="place-card__name">
-          <Link to={`${AppRoutes.Offer}/${id}`}>{title}</Link>
+          <Link to={`${AppRoute.Offer}/${id}`}>{title}</Link>
         </h2>
         <p className="place-card__type">{capitalize(type)}</p>
       </div>

diff --git a/src/components/reviews/review-component.tsx b/src/components/reviews/review-component.tsx
@@ -1,5 +1,6 @@
 import { getFirstName } from '../../utils/username-utils.ts';
 import { Rating } from '../rating.tsx';
+import { formatDate } from '../../utils/date-utils.ts';
 
 interface ReviewProps {
   comment: string;
@@ -34,7 +35,7 @@ export function ReviewComponent({
         <Rating rating={rating} usePlace="reviews" />
         <p className="reviews__text">{comment}</p>
         <time className="reviews__time" dateTime={date.toDateString()}>
-          {date.toLocaleDateString('en-US', {})}
+          {formatDate(date)}
         </time>
       </div>
     </li>

diff --git a/src/components/reviews/review-form.tsx b/src/components/reviews/review-form.tsx
@@ -24,9 +24,13 @@ export function ReviewForm(): React.JSX.Element {
   const offerId = useAppSelector(getCurrentOffer)!.id;
   const reviewPostingStatus = useAppSelector(getReviewPostingStatus);
   useEffect(() => {
-    if (reviewPostingStatus === ReviewStatus.Success) {
+    let isMounted = true;
+    if (isMounted && reviewPostingStatus === ReviewStatus.Success) {
       setReview({ comment: '', rating: undefined });
     }
+    return () => {
+      isMounted = false;
+    };
   }, [reviewPostingStatus]);
   const onRatingChange: React.ChangeEventHandler<HTMLInputElement> = (
     event,

diff --git a/src/components/reviews/reviews-list.tsx b/src/components/reviews/reviews-list.tsx
@@ -1,16 +1,18 @@
 import { Review } from '../../dataTypes/review.ts';
 import { ReviewComponent } from './review-component.tsx';
+import { useAppSelector } from '../../store/store.ts';
+import { getReviewsCount } from '../../store/current-offer/current-offer.selectors.ts';
 
 interface ReviewsListProps {
   reviews: Review[];
 }
 
 export function ReviewsList({ reviews }: ReviewsListProps): React.JSX.Element {
+  const reviewsCount = useAppSelector(getReviewsCount);
   return (
     <>
       <h2 className="reviews__title">
-        Reviews &middot;{' '}
-        <span className="reviews__amount">{reviews.length}</span>
+        Reviews &middot; <span className="reviews__amount">{reviewsCount}</span>
       </h2>
       <ul className="reviews__list">
         {reviews.map((review: Review) => (

diff --git a/src/components/reviews/reviews.tsx b/src/components/reviews/reviews.tsx
@@ -4,6 +4,7 @@ import { Review } from '../../dataTypes/review.ts';
 import { useAppSelector } from '../../store/store.ts';
 import { useMemo } from 'react';
 import { getIsAuthorized } from '../../store/user/user.selectors.ts';
+import { MAX_REVIEWS_COUNT } from '../../consts/reviews.ts';
 
 interface ReviewsProps {
   reviews: Review[];
@@ -12,9 +13,11 @@ interface ReviewsProps {
 export function Reviews({ reviews }: ReviewsProps): React.JSX.Element {
   const sortedReviews = useMemo(
     () =>
-      reviews.toSorted(
-        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
-      ),
+      reviews
+        .toSorted(
+          (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+        )
+        .slice(0, MAX_REVIEWS_COUNT),
     [reviews],
   );
   const isAuthorized = useAppSelector(getIsAuthorized);

diff --git a/src/consts/cities.ts b/src/consts/cities.ts
@@ -61,4 +61,4 @@ export const CITIES: City[] = [
   AMSTERDAM,
   HAMBURG,
   DUSSELDORF,
-];
+] as const;
diff --git a/src/dataTypes/enums/api-routes.ts → src/dataTypes/enums/api-route.ts b/src/dataTypes/enums/api-routes.ts → src/dataTypes/enums/api-route.ts
@@ -1,4 +1,4 @@
-export enum ApiRoutes {
+export enum ApiRoute {
   Offers = '/offers',
   Login = '/login',
   Logout = '/logout',

diff --git a/src/dataTypes/enums/app-routes.ts → src/dataTypes/enums/app-route.ts b/src/dataTypes/enums/app-routes.ts → src/dataTypes/enums/app-route.ts
@@ -1,4 +1,4 @@
-export enum AppRoutes {
+export enum AppRoute {
   MainPage = '/',
   Login = '/login',
   Offer = '/offer',

diff --git a/src/dataTypes/enums/name-spaces.ts → src/dataTypes/enums/name-space.ts b/src/dataTypes/enums/name-spaces.ts → src/dataTypes/enums/name-space.ts
@@ -1,4 +1,4 @@
-export enum NameSpaces {
+export enum NameSpace {
   Offers = 'Offers',
   CurrentOffer = 'CurrentOffer',
   User = 'User',