Merge pull request #15 from GooDeene/master

src/components/empty-main/empty-main.tsx

@@ -1,11 +1,16 @@
-function EmptyMain() : JSX.Element {
+import {CityName} from '../../const.ts';
+
+type EmptyMainProps = {
+  cityName: CityName;
+}
+
+function EmptyMain({cityName}: EmptyMainProps): JSX.Element {
   return (
     <div className="cities__places-container cities__places-container--empty container">
       <section className="cities__no-places">
         <div className="cities__status-wrapper tabs__content">
           <b className="cities__status">No places to stay available</b>
-          <p className="cities__status-description">We could not find any property available at the moment in
-            Dusseldorf
+          <p className="cities__status-description">We could not find any property available at the moment in {cityName}
           </p>
         </div>
       </section>

src/hooks/pages/use-offer-page.ts

@@ -34,5 +34,5 @@ export function useOfferPage() {
     }
   }, [id, dispatch]);
 
-  return {currentOffer, nearbyPoints, nearbyOffers};
+  return {currentOffer, nearbyPoints, nearbyOffers: nearbyOffers.length >= 3 ? nearbyOffers.slice(0, 3) : nearbyOffers};
 }

src/pages/login-page/login-page.tsx

@@ -1,20 +1,18 @@
 import Header from '../../components/header/header.tsx';
 import {AppRoute} from '../../const.ts';
-import {useNavigate} from 'react-router-dom';
+import {Navigate} from 'react-router-dom';
 import {getRandomCity} from '../../utils.ts';
 import {useAuthorization} from '../../hooks/services/use-authorization.ts';
 import LoginForm from '../../components/login-form/login-form.tsx';
 import LocationCityTab from '../../components/cities-tabs/location-city-tab.tsx';
 import {ReactNode} from 'react';
 
 function LoginPage(): ReactNode {
-  const navigate = useNavigate();
   const isAuthorized = useAuthorization();
   const randomCity = getRandomCity();
 
   if (isAuthorized) {
-    navigate(AppRoute.Main);
-    return null;
+    return <Navigate to={AppRoute.Main} />;
   }
 
   return (

src/pages/main-page/main-page.tsx

@@ -17,7 +17,7 @@ function MainPage(): JSX.Element {
         <CitiesTabs/>
 
         <div className="cities">
-          {offersIsEmpty && <EmptyMain/>}
+          {offersIsEmpty && <EmptyMain cityName={activeCity.name}/>}
           {!offersIsEmpty &&
             <div className="cities__places-container container">
               <OfferCardList cityName={activeCity.name} offers={offersByCity} offersCount={offersByCity.length}

src/pages/not-found-page/not-found-page.css

@@ -1,8 +1,24 @@
 .page--not-found{
   display: flex;
-  flex-direction: column;
   align-items: center;
   font-size: 40px;
+  height: 100vh;
+  width: 100vw;
+}
+
+.page--not-found__left-section,
+.page--not-found__right-section {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.page--not-found__right-section {
+  margin-left: -12px;
+  width: calc(50% + 12px);
 }
 
 .page--not-found__to-main-button{
@@ -11,8 +27,17 @@
   border-radius: 10px;
   color: white;
   background-color: #4481c3;
-  transform: skew(-15deg);
+  transform: skew(-6.5deg);
   &:hover{
-    opacity: .6;
+    opacity: .75;
   }
 }
+.page--not-found__image {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background-image: url('public/img/no-places.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+}

src/pages/not-found-page/not-found-page.tsx

@@ -4,12 +4,17 @@ import './not-found-page.css';
 
 function NotFoundPage(): JSX.Element {
   return (
-    <div className='page page--gray page--not-found'>
-      <p>Error 404. Page not found</p>
-      <Link to={AppRoute.Main}>
-        <button className='page--not-found__to-main-button'>На главную</button>
-      </Link>
-    </div>
+    <main className='page page--not-found'>
+      <section className='page--not-found__left-section cities__no-places'>
+        <p>Error 404, page not found</p>
+        <Link to={AppRoute.Main}>
+          <button className='page--not-found__to-main-button'>На главную</button>
+        </Link>
+      </section>
+      <section className='page--not-found__right-section'>
+        <div className='page--not-found__image'></div>
+      </section>
+    </main>
   );
 }
 

src/services/api.ts

@@ -1,7 +1,7 @@
 import axios, {AxiosError, AxiosInstance, InternalAxiosRequestConfig} from 'axios';
 import {getToken} from './token.ts';
 import {toast} from 'react-toastify';
-import {DetailMessageType, shouldDisplayError} from './error-handle.ts';
+import {DetailMessageType, SERVER_MINIMAL_ERROR_CODE, shouldDisplayError} from './error-handle.ts';
 
 const BACKEND_URL = 'https://14.design.htmlacademy.pro/six-cities';
 const REQUEST_TIMEOUT = 5000;
@@ -29,15 +29,21 @@ export const createAPI = (): AxiosInstance => {
     (response) => response,
     (error: AxiosError<DetailMessageType>) => {
       if (error.response && shouldDisplayError(error.response)) {
-        if (error.response.data.details.length) {
-          const messages = (error.response.data.details);
-          messages.map((property) => {
+
+        if (error.response.status >= SERVER_MINIMAL_ERROR_CODE) {
+
+          toast.error('Ой-ой! Ошибка соединения с сервером. Сервер не доступен!');
+
+        } else if (error.response.data.details.length) {
+          error.response.data.details.map((property) => {
             property.messages.map((message) => {
 
               toast.warning(message);
+
             });
           });
         } else if (error.response.data.message) {
+
           const detailMessage = (error.response.data);
           toast.warn(detailMessage.message);
         }

src/services/error-handle.ts

@@ -1,6 +1,8 @@
 import {StatusCodes} from 'http-status-codes';
 import {AxiosResponse} from 'axios';
 
+export const SERVER_MINIMAL_ERROR_CODE = 500;
+
 export type DetailMessageType = {
   errorType: string;
   message: string;
@@ -13,8 +15,8 @@ export type DetailMessageType = {
 
 const StatusCodeMapping: Record<number, boolean> = {
   [StatusCodes.BAD_REQUEST]: true,
-  [StatusCodes.UNAUTHORIZED]: true,
-  [StatusCodes.NOT_FOUND]: true
+  [StatusCodes.NOT_FOUND]: true,
 };
 
-export const shouldDisplayError = (response: AxiosResponse) => StatusCodeMapping[response.status];
+export const shouldDisplayError = (response: AxiosResponse) =>
+  response.status >= SERVER_MINIMAL_ERROR_CODE ? true : StatusCodeMapping[response.status];