dry_wash_inc/dry-wash-pl
dry_wash_inc/dry-wash-pl
3
1
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: use RTK Query to get order deails (#73)

Browse Source
This commit is contained in:
RustamRu 2025-01-26 19:20:36 +03:00
parent e3d316c418
commit 45c4ca16c8
17 changed files with 126 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en.json
View File

@ -42,7 +42,7 @@
"dry-wash.order-create.create-order-query.success.title": "The order is successfully created", "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-create.create-order-query.error.title": "Failed to create an order",
"dry-wash.order-view.title": "Your order", "dry-wash.order-view.title": "Your order",
"dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order #{{number}}", "dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order",
"dry-wash.order-view.details.title": "Order #{{number}}", "dry-wash.order-view.details.title": "Order #{{number}}",
"dry-wash.order-view.details.owner": "Owner", "dry-wash.order-view.details.owner": "Owner",
"dry-wash.order-view.details.car": "Car", "dry-wash.order-view.details.car": "Car",

2
locales/ru.json
View File

@ -82,7 +82,7 @@
"dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан", "dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
"dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ", "dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
"dry-wash.order-view.title": "Ваш заказ", "dry-wash.order-view.title": "Ваш заказ",
"dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа №{{number}}", "dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа",
"dry-wash.order-view.details.title": "Заказ №{{number}}", "dry-wash.order-view.details.title": "Заказ №{{number}}",
"dry-wash.order-view.details.owner": "Владелец", "dry-wash.order-view.details.owner": "Владелец",
"dry-wash.order-view.details.car": "Автомобиль", "dry-wash.order-view.details.car": "Автомобиль",

18
src/__data__/service/api.ts
View File

@ -3,17 +3,7 @@ import { getConfigValue } from '@brojs/cli';
import { Master } from '../../models/api/master'; import { Master } from '../../models/api/master';
type SuccessResponse<Body> = { import { extractBodyFromResponse } from './utils';
success: true;
body: Body;
};
type ErrorResponse = {
success: false;
message: string;
};
type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
export const api = createApi({ export const api = createApi({
reducerPath: 'api', reducerPath: 'api',
@ -22,11 +12,7 @@ export const api = createApi({
endpoints: (builder) => ({ endpoints: (builder) => ({
getMasters: builder.query<Master[], void>({ getMasters: builder.query<Master[], void>({
query: () => ({ url: '/arm/masters' }), query: () => ({ url: '/arm/masters' }),
transformResponse: (response: BaseResponse<Master[]>) => { transformResponse: extractBodyFromResponse<Master[]>,
if (response.success) {
return response.body;
}
},
providesTags: ['Masters'], providesTags: ['Masters'],
}), }),
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({ addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({

14
src/__data__/service/landing.api.ts Normal file
View File

@ -0,0 +1,14 @@
import { GetOrder } from "../../models/api";
import { api } from "./api";
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
export const landingApi = api.injectEndpoints({
endpoints: ({ query }) => ({
getOrder: query<GetOrder.Response, GetOrder.Params>({
query: ({ orderId }) => `/order/${orderId}`,
transformResponse: extractBodyFromResponse<GetOrder.Response>,
transformErrorResponse: extractErrorMessageFromResponse,
})
})
});

15
src/__data__/service/utils.ts Normal file
View File

@ -0,0 +1,15 @@
import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
import { BaseResponse } from "../../models/api";
export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
if (response.success) {
return response.body;
}
};
export const extractErrorMessageFromResponse = ({ data }: FetchBaseQueryError) => {
if (typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
return data.message;
}
};

48
src/api/landing.tsx
View File

@ -1,12 +1,11 @@
import { getConfigValue } from '@brojs/cli'; import { getConfigValue } from '@brojs/cli';
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { CreateOrder, GetOrder } from '../models/api'; import { CreateOrder } from '../models/api';
import { QueryState, Trigger } from './types'; import { QueryState, Trigger } from './types';
enum LandingEndpoints { enum LandingEndpoints {
ORDER = '/order',
ORDER_CREATE = '/order/create', ORDER_CREATE = '/order/create',
} }
@ -63,45 +62,4 @@ const useCreateOrderMutation = <D extends CreateOrder.Response>(): [
return [createOrder, { isLoading, isSuccess, data, isError, error }]; return [createOrder, { isLoading, isSuccess, data, isError, error }];
}; };
const useGetOrderQuery = <D extends GetOrder.Response>({ export { useCreateOrderMutation };
orderId,
}: GetOrder.Params): QueryState<D> => {
const [isLoading, setIsLoading] = useState<QueryState<D>['isLoading']>(true);
const [isSuccess, setIsSuccess] = useState<QueryState<D>['isSuccess']>();
const [data, setData] = useState<QueryState<D>['data']>();
const [isError, setIsError] = useState<QueryState<D>['isError']>();
const [error, setError] = useState<QueryState<D>['error']>();
useEffect(() => {
(async () => {
try {
const response = await fetch(
`${endpoint}${LandingEndpoints.ORDER}/${orderId}`,
);
if (!response.ok) {
const errorResponseObject =
(await response.json()) as QueryState<D>['error'];
setIsError(true);
setError(errorResponseObject);
throw errorResponseObject;
}
const dataResponseObject =
(await response.json()) as QueryState<D>['data'];
setIsSuccess(true);
setData(dataResponseObject);
} catch (error) {
setIsError(true);
setError(error);
throw error;
} finally {
setIsLoading(false);
}
})();
}, []);
return { isLoading, isSuccess, data, isError, error };
};
export { useCreateOrderMutation, useGetOrderQuery };

6
src/components/order-view/details/order-details.tsx
View File

@ -19,7 +19,7 @@ import { OrderStatus } from './status';
type OrderDetailsProps = Pick< type OrderDetailsProps = Pick<
Order.View, Order.View,
| 'id' | 'orderNumber'
| 'status' | 'status'
| 'phone' | 'phone'
| 'carNumber' | 'carNumber'
@ -32,7 +32,7 @@ type OrderDetailsProps = Pick<
>; >;
export const OrderDetails: FC<OrderDetailsProps> = ({ export const OrderDetails: FC<OrderDetailsProps> = ({
id, orderNumber,
status, status,
phone, phone,
carNumber, carNumber,
@ -58,7 +58,7 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
gap={2} gap={2}
> >
<Heading as='h2' size='lg'> <Heading as='h2' size='lg'>
{t('title', { number: id })} {t('title', { number: orderNumber })}
</Heading> </Heading>
<OrderStatus value={status} /> <OrderStatus value={status} />
</HStack> </HStack>

12
src/components/order-view/details/status/order-status.tsx
View File

@ -15,19 +15,19 @@ const getPropsByStatus = (
colorScheme: 'red', colorScheme: 'red',
children: t('canceled'), children: t('canceled'),
}; };
case 'progress':
return {
colorScheme: 'yellow',
children: t('progress'),
};
case 'pending': case 'pending':
return { return {
colorScheme: 'yellow', colorScheme: 'yellow',
children: t('pending'), children: t('pending'),
}; };
case 'progress':
return {
colorScheme: 'orange',
children: t('progress'),
};
case 'working': case 'working':
return { return {
colorScheme: 'yellow', colorScheme: 'orange',
children: t('working'), children: t('working'),
}; };
case 'complete': case 'complete':

13
src/models/api/common.ts Normal file
View File

@ -0,0 +1,13 @@
type SuccessResponse<Body> = {
success: true;
body: Body;
};
export type ErrorMessage = string;
type ErrorResponse = {
success: false;
message: ErrorMessage;
};
export type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;

1
src/models/api/index.ts
View File

@ -1 +1,2 @@
export * from './common';
export * from './order'; export * from './order';

17
src/models/api/order.ts
View File

@ -1,6 +1,16 @@
/* eslint-disable @typescript-eslint/no-namespace */ /* eslint-disable @typescript-eslint/no-namespace */
import { Order } from "../landing"; import { Order } from "../landing";
import { ErrorMessage } from "./common";
export namespace GetOrder {
export type Response = Order.View;
export type Params = {
orderId: Order.Id
};
export type Error = ErrorMessage;
}
export namespace CreateOrder { export namespace CreateOrder {
export type Response = { export type Response = {
id: Order.Id id: Order.Id
@ -9,10 +19,3 @@ export namespace CreateOrder {
body: Order.Create body: Order.Create
}; };
}; };
export namespace GetOrder {
export type Response = Order.View;
export type Params = {
orderId: Order.Id
};
};

3
src/models/landing/order.ts
View File

@ -26,6 +26,8 @@ export type Create = {
} }
}; };
export type Number = string;
export type View = { export type View = {
phone: Customer.PhoneNumber; phone: Customer.PhoneNumber;
carNumber: Car.RegistrationNumber; carNumber: Car.RegistrationNumber;
@ -34,6 +36,7 @@ export type View = {
location: Washing.Location; location: Washing.Location;
startWashTime: Washing.AvailableBeginDateTime; startWashTime: Washing.AvailableBeginDateTime;
endWashTime: Washing.AvailableEndDateTime; endWashTime: Washing.AvailableEndDateTime;
orderNumber: Number,
status: Status, status: Status,
notes: string; notes: string;
created: IsoDate; created: IsoDate;

34
src/pages/order-view/index.tsx
View File

@ -1,5 +1,13 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { Alert, AlertDescription, AlertIcon, AlertTitle, HStack, Spinner } from '@chakra-ui/react'; import {
Alert,
AlertDescription,
AlertIcon,
AlertTitle,
Box,
HStack,
Spinner,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Container, Heading, VStack } from '@chakra-ui/react'; import { Container, Heading, VStack } from '@chakra-ui/react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@ -10,7 +18,8 @@ import {
} from '../../containers'; } from '../../containers';
import { OrderDetails } from '../../components/order-view'; import { OrderDetails } from '../../components/order-view';
import { Order } from '../../models/landing'; import { Order } from '../../models/landing';
import { useGetOrderQuery } from '../../api'; import { landingApi } from '../../__data__/service/landing.api';
import { ErrorMessage } from '../../models/api';
const Page: FC = () => { const Page: FC = () => {
const { t } = useTranslation('~', { const { t } = useTranslation('~', {
@ -21,12 +30,15 @@ const Page: FC = () => {
const { const {
isLoading, isLoading,
isSuccess, isSuccess,
data: { body: order } = {}, data: order,
isError, isError,
error, error,
} = useGetOrderQuery({ } = landingApi.useGetOrderQuery(
{
orderId, orderId,
}); },
);
const errorMessage = error as ErrorMessage;
return ( return (
<LandingThemeProvider> <LandingThemeProvider>
@ -51,7 +63,7 @@ const Page: FC = () => {
<> <>
{isSuccess && ( {isSuccess && (
<OrderDetails <OrderDetails
id={order.id} orderNumber={order.orderNumber}
status={order.status} status={order.status}
phone={order.phone} phone={order.phone}
carNumber={order.carNumber} carNumber={order.carNumber}
@ -66,14 +78,14 @@ const Page: FC = () => {
</> </>
<> <>
{isError && ( {isError && (
<Alert status='error'> <Alert status='error' alignItems='flex-start'>
<AlertIcon /> <AlertIcon />
<Box>
<AlertTitle> <AlertTitle>
{t('get-order-query.error.title', { {t('get-order-query.error.title')}
number: orderId,
})}
</AlertTitle> </AlertTitle>
<AlertDescription>{error.data?.error}</AlertDescription> <AlertDescription>{errorMessage}</AlertDescription>
</Box>
</Alert> </Alert>
)} )}
</> </>

5
stubs/api/admin.js
View File

@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-require-imports */ /* eslint-disable @typescript-eslint/no-require-imports */
const router = require('express').Router(); const router = require('express').Router();
const STUBS = { masters: 'success', orders: 'success', orderView: 'success' }; const STUBS = { masters: 'success', orders: 'success', orderView: 'success-pending' };
router.get('/set/:name/:value', (req, res) => { router.get('/set/:name/:value', (req, res) => {
const { name, value } = req.params; const { name, value } = req.params;
@ -28,7 +28,8 @@ router.get('/', (req, res) => {
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Лендинг - Детали заказа</legend> <legend>Лендинг - Детали заказа</legend>
${generateRadioInput('orderView', 'success')} ${generateRadioInput('orderView', 'success-pending')}
${generateRadioInput('orderView', 'success-working')}
${generateRadioInput('orderView', 'error')} ${generateRadioInput('orderView', 'error')}
</fieldset> </fieldset>
</div>`); </div>`);

4
stubs/json/landing-order-view/id1-error.json Normal file
View File

@ -0,0 +1,4 @@
{
"success": false,
"message": "Не удалось загрузить детали заказа"
}

5
stubs/json/landing-order-view/1-success.json → stubs/json/landing-order-view/id1-success-pending.json
View File

@ -8,10 +8,11 @@
"startWashTime": "2025-01-19T14:03:00.000Z", "startWashTime": "2025-01-19T14:03:00.000Z",
"endWashTime": "2025-01-19T14:03:00.000Z", "endWashTime": "2025-01-19T14:03:00.000Z",
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо", "location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
"status": "progress", "orderNumber": "1",
"status": "pending",
"notes": "", "notes": "",
"created": "2025-01-19T14:04:02.985Z", "created": "2025-01-19T14:04:02.985Z",
"updated": "2025-01-19T14:04:02.987Z", "updated": "2025-01-19T14:04:02.987Z",
"id": "678d06527d78ec30be2679d8" "id": "id1"
} }
} }

18
stubs/json/landing-order-view/id1-success-working.json Normal file
View File

@ -0,0 +1,18 @@
{
"success": true,
"body": {
"phone": "+79876543210",
"carNumber": "А123АА16",
"carBody": 2,
"carColor": "#ffffff",
"startWashTime": "2025-01-19T14:03:00.000Z",
"endWashTime": "2025-01-19T14:03:00.000Z",
"location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",
"orderNumber": "1",
"status": "working",
"notes": "",
"created": "2025-01-19T14:04:02.985Z",
"updated": "2025-01-19T14:04:02.987Z",
"id": "id1"
}
}