From a95f9cd15088739616fb888c278157fe31060b64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?= =?UTF-8?q?=D0=9C=D0=B5=D0=B4=D0=B2=D0=B5=D0=B4=D0=B5=D0=B2=D1=81=D0=BA?= =?UTF-8?q?=D0=B8=D0=B9?= Date: Sat, 1 Jun 2024 15:56:26 +0500 Subject: [PATCH 1/3] change 404 page, fix login redirect bug, fix empty main: city name --- src/components/empty-main/empty-main.tsx | 11 ++++++-- src/pages/login-page/login-page.tsx | 6 ++-- src/pages/main-page/main-page.tsx | 2 +- src/pages/not-found-page/not-found-page.css | 31 +++++++++++++++++++-- src/pages/not-found-page/not-found-page.tsx | 17 +++++++---- 5 files changed, 50 insertions(+), 17 deletions(-) diff --git a/src/components/empty-main/empty-main.tsx b/src/components/empty-main/empty-main.tsx index 8d39d77..86aae9e 100644 --- a/src/components/empty-main/empty-main.tsx +++ b/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 (
No places to stay available -

We could not find any property available at the moment in - Dusseldorf +

We could not find any property available at the moment in {cityName}

diff --git a/src/pages/login-page/login-page.tsx b/src/pages/login-page/login-page.tsx index 896f1f2..c6f9499 100644 --- a/src/pages/login-page/login-page.tsx +++ b/src/pages/login-page/login-page.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,13 +8,11 @@ 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 ; } return ( diff --git a/src/pages/main-page/main-page.tsx b/src/pages/main-page/main-page.tsx index 85b3af8..1d77139 100644 --- a/src/pages/main-page/main-page.tsx +++ b/src/pages/main-page/main-page.tsx @@ -17,7 +17,7 @@ function MainPage(): JSX.Element {
- {offersIsEmpty && } + {offersIsEmpty && } {!offersIsEmpty &&
-

Error 404. Page not found

- - - -
+
+
+

Error 404, page not found

+ + + +
+
+
+
+
); } From fa3e6a0b5f3ad3975de071b70a5571b3620dd6fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?= =?UTF-8?q?=D0=9C=D0=B5=D0=B4=D0=B2=D0=B5=D0=B4=D0=B5=D0=B2=D1=81=D0=BA?= =?UTF-8?q?=D0=B8=D0=B9?= Date: Sat, 1 Jun 2024 16:28:07 +0500 Subject: [PATCH 2/3] some fixes --- src/hooks/pages/use-offer-page.ts | 2 +- src/services/error-handle.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/pages/use-offer-page.ts b/src/hooks/pages/use-offer-page.ts index 2a6d3ab..806fc50 100644 --- a/src/hooks/pages/use-offer-page.ts +++ b/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}; } diff --git a/src/services/error-handle.ts b/src/services/error-handle.ts index bef6b2b..47ce190 100644 --- a/src/services/error-handle.ts +++ b/src/services/error-handle.ts @@ -13,7 +13,7 @@ export type DetailMessageType = { const StatusCodeMapping: Record = { [StatusCodes.BAD_REQUEST]: true, - [StatusCodes.UNAUTHORIZED]: true, + [StatusCodes.UNAUTHORIZED]: false, [StatusCodes.NOT_FOUND]: true }; From 051ac0bfd4f9bf5df95d2e2dc11f12e28278a9bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20?= =?UTF-8?q?=D0=9C=D0=B5=D0=B4=D0=B2=D0=B5=D0=B4=D0=B5=D0=B2=D1=81=D0=BA?= =?UTF-8?q?=D0=B8=D0=B9?= Date: Tue, 4 Jun 2024 00:36:37 +0500 Subject: [PATCH 3/3] some fixes --- src/pages/not-found-page/not-found-page.css | 2 +- src/services/api.ts | 14 ++++++++++---- src/services/error-handle.ts | 8 +++++--- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/pages/not-found-page/not-found-page.css b/src/pages/not-found-page/not-found-page.css index 68544bc..94af68a 100644 --- a/src/pages/not-found-page/not-found-page.css +++ b/src/pages/not-found-page/not-found-page.css @@ -37,7 +37,7 @@ display: flex; justify-content: center; width: 100%; - background-image: url('../../../public/img/no-places.png'); + background-image: url('public/img/no-places.png'); background-size: cover; background-repeat: no-repeat; } diff --git a/src/services/api.ts b/src/services/api.ts index 6876df0..10fff25 100644 --- a/src/services/api.ts +++ b/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) => { 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); } diff --git a/src/services/error-handle.ts b/src/services/error-handle.ts index 47ce190..95cb593 100644 --- a/src/services/error-handle.ts +++ b/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 = { [StatusCodes.BAD_REQUEST]: true, - [StatusCodes.UNAUTHORIZED]: false, - [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];