From 431a8b27f2b7e4029eee688950b2dda9761ab5e3 Mon Sep 17 00:00:00 2001 From: RustamRu Date: Sun, 19 Jan 2025 17:40:29 +0300 Subject: [PATCH] feat: apply new order view api --- locales/en.json | 3 +- locales/ru.json | 3 +- .../order-view/details/order-details.tsx | 22 +++-- src/pages/order-view/helper.tsx | 40 --------- src/pages/order-view/index.tsx | 87 +++++++++++-------- 5 files changed, 69 insertions(+), 86 deletions(-) delete mode 100644 src/pages/order-view/helper.tsx diff --git a/locales/en.json b/locales/en.json index f0aa8f5..22ad871 100644 --- a/locales/en.json +++ b/locales/en.json @@ -42,8 +42,7 @@ "dry-wash.order-create.create-order-query.success.title": "The order is successfully created", "dry-wash.order-create.create-order-query.error.title": "Failed to create an order", "dry-wash.order-view.title": "Your order", - "dry-wash.order-view.error.title": "Error", - "dry-wash.order-view.fetch.error": "Failed to fetch the details of order #{{number}}", + "dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order #{{number}}", "dry-wash.order-view.details.title": "Order #{{number}}", "dry-wash.order-view.details.owner": "Owner", "dry-wash.order-view.details.car": "Car", diff --git a/locales/ru.json b/locales/ru.json index 368d3e4..6ff912a 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -81,8 +81,7 @@ "dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан", "dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ", "dry-wash.order-view.title": "Ваш заказ", - "dry-wash.order-view.error.title": "Ошибка", - "dry-wash.order-view.fetch.error": "Не удалось загрузить детали заказа №{{number}}", + "dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа №{{number}}", "dry-wash.order-view.details.title": "Заказ №{{number}}", "dry-wash.order-view.details.owner": "Владелец", "dry-wash.order-view.details.car": "Автомобиль", diff --git a/src/components/order-view/details/order-details.tsx b/src/components/order-view/details/order-details.tsx index 515c567..5343fdf 100644 --- a/src/components/order-view/details/order-details.tsx +++ b/src/components/order-view/details/order-details.tsx @@ -17,7 +17,19 @@ import { carBodySelectOptions } from '../../order-form/form/car-body/helper'; import { OrderStatus } from './status'; -type OrderDetailsProps = Order.View; +type OrderDetailsProps = Pick< + Order.View, + | 'id' + | 'status' + | 'phone' + | 'carNumber' + | 'carBody' + | 'carColor' + | 'location' + | 'startWashTime' + | 'endWashTime' + | 'created' +>; export const OrderDetails: FC = ({ id, @@ -27,8 +39,8 @@ export const OrderDetails: FC = ({ carBody, carColor, location, - datetimeBegin, - datetimeEnd, + startWashTime, + endWashTime, }) => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.order-view.details', @@ -75,8 +87,8 @@ export const OrderDetails: FC = ({ { label: t('datetime-range'), value: [ - formatDatetime(datetimeBegin), - formatDatetime(datetimeEnd), + formatDatetime(startWashTime), + formatDatetime(endWashTime), ].join(' - '), }, ].map(({ label, value }, i) => ( diff --git a/src/pages/order-view/helper.tsx b/src/pages/order-view/helper.tsx deleted file mode 100644 index 13f9513..0000000 --- a/src/pages/order-view/helper.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { LandingService } from '../../api/landing'; -import { Order } from '../../models/landing'; -import { FetchOrderQueryResponse } from '../../models/api'; - -export const useFetchOrderDetails = ({ - orderId, -}: { - orderId: Order.View['id']; -}) => { - const { fetchOrder } = LandingService(); - - const [data, setData] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(null); - - useEffect(() => { - const fetchData = async () => { - setIsLoading(true); - - try { - const data = await fetchOrder(orderId); - setData(data.body); - } catch (error) { - setError(error.message); - } finally { - setIsLoading(false); - } - }; - - fetchData(); - }, []); - - return { - isLoading, - data, - error, - }; -}; diff --git a/src/pages/order-view/index.tsx b/src/pages/order-view/index.tsx index 5ac4bd0..c2b007d 100644 --- a/src/pages/order-view/index.tsx +++ b/src/pages/order-view/index.tsx @@ -1,36 +1,32 @@ -import React, { FC, useEffect } from 'react'; -import { HStack, Spinner, useToast } from '@chakra-ui/react'; +import React, { FC } from 'react'; +import { Alert, AlertDescription, AlertIcon, AlertTitle, HStack, Spinner } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; import { Container, Heading, VStack } from '@chakra-ui/react'; import { useParams } from 'react-router-dom'; -import { LandingThemeProvider } from '../../containers'; +import { + LandingThemeProvider, + withLandingThemeProvider, +} from '../../containers'; import { OrderDetails } from '../../components/order-view'; - -import { useFetchOrderDetails } from './helper'; +import { Order } from '../../models/landing'; +import { useGetOrderQuery } from '../../api'; const Page: FC = () => { const { t } = useTranslation('~', { keyPrefix: 'dry-wash.order-view', }); - const { orderId } = useParams(); - - const { isLoading, data, error } = useFetchOrderDetails({ orderId }); - - const toast = useToast(); - useEffect(() => { - if (error) { - toast({ - title: t('error.title'), - description: t('fetch.error'), - status: 'error', - duration: 5000, - isClosable: true, - position: 'bottom-right', - }); - } - }, [error]); + const { orderId } = useParams(); + const { + isLoading, + isSuccess, + data: { body: order } = {}, + isError, + error, + } = useGetOrderQuery({ + orderId, + }); return ( @@ -51,20 +47,37 @@ const Page: FC = () => { ) : ( - data && ( - - ) + <> + <> + {isSuccess && ( + + )} + + <> + {isError && ( + + + + {t('get-order-query.error.title', { + number: orderId, + })} + + {error.data?.error} + + )} + + )} @@ -72,4 +85,4 @@ const Page: FC = () => { ); }; -export default Page; +export default withLandingThemeProvider(Page);