locales/en.json

@@ -39,7 +39,6 @@
   "dry-wash.order-create.car-body-select.options.sports-car" : "Sports-car",
   "dry-wash.order-create.car-body-select.options.other": "Other",
   "dry-wash.order-create.form.submit-button.label": "Submit",
-  "dry-wash.order-create.order-creation-title": "Creating order ...",
   "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",

locales/ru.json

@@ -88,7 +88,6 @@
   "dry-wash.order-create.car-body-select.options.sports-car": "Спорткар",
   "dry-wash.order-create.car-body-select.options.other": "Другой",
   "dry-wash.order-create.form.submit-button.label": "Отправить",
-  "dry-wash.order-create.order-creation-title": "Создаем заказ ...",
   "dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
   "dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
   "dry-wash.order-view.title": "Ваш заказ",

src/__data__/service/landing.api.ts

@@ -1,23 +1,14 @@
-import { GetOrder, CreateOrder } from "../../models/api";
+import { GetOrder } from "../../models/api";
 
 import { api } from "./api";
 import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
 
 export const landingApi = api.injectEndpoints({
-  endpoints: ({ mutation, query }) => ({
+  endpoints: ({ query }) => ({
     getOrder: query<GetOrder.Response, GetOrder.Params>({
       query: ({ orderId }) => `/order/${orderId}`,
       transformResponse: extractBodyFromResponse<GetOrder.Response>,
       transformErrorResponse: extractErrorMessageFromResponse,
-    }),
+    })
-    createOrder: mutation<CreateOrder.Response, CreateOrder.Params>({
-      query: ({ body }) => ({
-        url: `/order/create`,
-        params: { body },
-        method: 'POST'
-      }),
-      transformResponse: extractBodyFromResponse<CreateOrder.Response>,
-      transformErrorResponse: extractErrorMessageFromResponse,
-    }),
   })
 });

src/api/index.ts

@@ -0,0 +1 @@
+export * from './landing';

src/api/landing.tsx

@@ -0,0 +1,65 @@
+import { getConfigValue } from '@brojs/cli';
+import { useState } from 'react';
+
+import { CreateOrder } from '../models/api';
+
+import { QueryState, Trigger } from './types';
+
+enum LandingEndpoints {
+  ORDER_CREATE = '/order/create',
+}
+
+const endpoint = getConfigValue('dry-wash.api');
+
+const useCreateOrderMutation = <D extends CreateOrder.Response>(): [
+  Trigger<CreateOrder.Params, QueryState<D>['data']>,
+  QueryState<D>,
+] => {
+  const [isLoading, setIsLoading] = useState<QueryState<D>['isLoading']>(false);
+  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']>();
+
+  const createOrder = async ({ body }: CreateOrder.Params) => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(
+        `${endpoint}${LandingEndpoints.ORDER_CREATE}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(body),
+        },
+      );
+
+      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);
+
+      return dataResponseObject;
+    } catch (error) {
+      setIsError(true);
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return [createOrder, { isLoading, isSuccess, data, isError, error }];
+};
+
+export { useCreateOrderMutation };

src/api/types.ts

@@ -0,0 +1,22 @@
+export type QueryData<D> = {
+  success: true;
+  body: D;
+};
+
+export type QueryErrorData = {
+  success: false;
+  error: string;
+};
+
+export type QueryState<D> = {
+  isLoading: boolean;
+  isSuccess: boolean;
+  data: QueryData<D>;
+  isError: boolean;
+  error: {
+    status: number;
+    data: QueryErrorData;
+  };
+};
+
+export type Trigger<P, D> = (params: P) => Promise<D>;

src/assets/animation/index.ts

@@ -1 +0,0 @@
-export { default as OrderCreationAnimation } from './order-creation.json';

src/models/api/common.ts

@@ -5,8 +5,6 @@ type SuccessResponse<Body> = {
 
 export type ErrorMessage = string;
 
-export const isErrorMessage = (error: unknown): error is ErrorMessage => typeof error === 'string';
-
 type ErrorResponse = {
   success: false;
   message: ErrorMessage;

src/pages/order-create/helper.ts

@@ -1,13 +1,7 @@
 import dayjs from "dayjs";
-import { useToast } from "@chakra-ui/react";
-import { useNavigate } from "react-router-dom";
-import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 
 import { Order } from "../../models/landing";
 import { OrderFormValues } from "../../components/order-form";
-import { isErrorMessage } from "../../models/api";
-import { URLs } from '../../__data__/urls';
 
 const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
 
@@ -32,40 +26,4 @@ export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocat
       end: dayjs(availableDatetimeEnd).toISOString(),
     }
   };
-};
+};
-
-export const useHandleCreateOrderMutationResponse = (query: {
-  isSuccess: boolean;
-  data?: {
-    id: Parameters<typeof URLs.orderView.getUrl>[0];
-  };
-  isError: boolean;
-  error?: unknown;
-}) => {
-  const toast = useToast();
-  const navigate = useNavigate();
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.create-order-query',
-  });
-
-  useEffect(() => {
-    if (query.isError) {
-      toast({
-        status: 'error',
-        title: t('error.title'),
-        description: isErrorMessage(query.error) ? query.error : undefined,
-      });
-    }
-  }, [query.isError]);
-
-  useEffect(() => {
-    if (query.isSuccess) {
-      const orderId = query.data.id;
-      navigate({ pathname: URLs.orderView.getUrl(orderId) });
-      toast({
-        status: 'success',
-        title: t('success.title'),
-      });
-    }
-  }, [query.isSuccess]);
-};

src/pages/order-create/index.tsx

@@ -1,29 +1,41 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Heading, VStack } from '@chakra-ui/react';
+import { Container, Heading, useToast, VStack } from '@chakra-ui/react';
-import { Player as LottiePlayer } from '@lottiefiles/react-lottie-player';
+import { useNavigate } from 'react-router-dom';
 
 import { withLandingThemeProvider } from '../../containers';
 import { OrderForm, OrderFormProps } from '../../components/order-form';
-import { landingApi } from '../../__data__/service/landing.api';
+import { useCreateOrderMutation } from '../../api';
-import { OrderCreationAnimation } from '../../assets/animation';
+import { URLs } from '../../__data__/urls';
 
-import {
+import { formatFormValues } from './helper';
-  formatFormValues,
-  useHandleCreateOrderMutationResponse,
-} from './helper';
 
 const Page: FC = () => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-create',
   });
 
-  const [createOrder, createOrderMutation] =
+  const [createOrder, createOrderMutation] = useCreateOrderMutation();
-    landingApi.useCreateOrderMutation();
+
-  useHandleCreateOrderMutationResponse(createOrderMutation);
+  const toast = useToast();
+  const navigate = useNavigate();
 
   const onOrderFormSubmit: OrderFormProps['onSubmit'] = (values) => {
-    createOrder({ body: formatFormValues(values) });
+    createOrder({ body: formatFormValues(values) })
+      .then(({ body: { id: orderId } }) => {
+        navigate({ pathname: URLs.orderView.getUrl(orderId) });
+        toast({
+          status: 'success',
+          title: t('create-order-query.success.title'),
+        });
+      })
+      .catch(({ error: errorMessage }) => {
+        toast({
+          status: 'error',
+          title: t('create-order-query.error.title'),
+          description: errorMessage,
+        });
+      });
   };
 
   return (
@@ -36,24 +48,13 @@ const Page: FC = () => {
       centerContent
     >
       <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-        {createOrderMutation.isUninitialized ? (
+        <Heading textAlign='center' mt={4}>
-          <>
+          {t('title')}
-            <Heading textAlign='center' mt={4}>
+        </Heading>
-              {t('title')}
+        <OrderForm
-            </Heading>
+          onSubmit={onOrderFormSubmit}
-            <OrderForm
+          loading={createOrderMutation.isLoading}
-              onSubmit={onOrderFormSubmit}
+        />
-              loading={createOrderMutation.isLoading}
-            />
-          </>
-        ) : (
-          <>
-            <LottiePlayer autoplay loop src={OrderCreationAnimation} />
-            <Heading textAlign='center' mt={4}>
-              {t('order-creation-title')}
-            </Heading>
-          </>
-        )}
       </VStack>
     </Container>
   );

src/pages/order-view/index.tsx

@@ -19,7 +19,7 @@ import {
 import { OrderDetails } from '../../components/order-view';
 import { Order } from '../../models/landing';
 import { landingApi } from '../../__data__/service/landing.api';
-import { isErrorMessage } from '../../models/api';
+import { ErrorMessage } from '../../models/api';
 import { FEATURE } from '../../__data__/features';
 
 const Page: FC = () => {
@@ -45,7 +45,7 @@ const Page: FC = () => {
       }
       : undefined,
   );
-  const errorMessage = isErrorMessage(error) ? error : undefined;
+  const errorMessage = error as ErrorMessage;
 
   return (
     <LandingThemeProvider>
@@ -91,9 +91,7 @@ const Page: FC = () => {
                       <AlertTitle>
                         {t('get-order-query.error.title')}
                       </AlertTitle>
-                      {errorMessage && (
+                      <AlertDescription>{errorMessage}</AlertDescription>
-                        <AlertDescription>{errorMessage}</AlertDescription>
-                      )}
                     </Box>
                   </Alert>
                 )}

stubs/api/admin.js

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

stubs/api/index.js

@@ -87,15 +87,7 @@ router.get('/order/:orderId', ({ params }, res) => {
 });
 
 router.post('/order/create', (req, res) => {
-  const stubName = STUBS.orderCreate;
+  res.status(200).send({ success: true, body: { ok: true } });
-
-  res
-    .status(/error/.test(stubName) ? 500 : 200)
-    .send(
-      /^error$/.test(stubName)
-        ? commonError
-        : require(`../json/landing-order-create/${stubName}.json`),
-    );
 });
 
 router.use('/admin', require('./admin'));

stubs/json/landing-order-create/error.json

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

stubs/json/landing-order-create/success.json

@@ -1,6 +0,0 @@
-{
-  "success": true,
-  "body": {
-      "id": "id1"
-  }
-}