fear: change requests to RTK query

2025-02-02 11:59:27 +03:00 · 2025-02-02 11:59:27 +03:00 · 93657ccd20
commit 93657ccd20
parent e3d316c418
13 changed files with 180 additions and 252 deletions
--- a/src/data/service/api.ts
+++ b/src/data/service/api.ts
@ -1,34 +1,52 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { getConfigValue } from '@brojs/cli';
+import dayjs from 'dayjs';

 import { Master } from '../../models/api/master';
+import { OrderProps } from '../../components/OrderItem/OrderItem';

-type SuccessResponse<Body> = {
-  success: true;
-  body: Body;
-};
+import { extractBodyFromResponse } from './utils';

-type ErrorResponse = {
-  success: false;
-  message: string;
-};
+export type UpdateMasterPayload = Required<Pick<Master, 'id'>> &
+  Partial<Omit<Master, 'id'>>;

-type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
+type UpdateOrderProps = Required<Pick<OrderProps, 'id'>> &
+  Partial<Pick<OrderProps, 'status' | 'notes'>> & {
+    master?: string;
+  };

 export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: getConfigValue('dry-wash.api') }),
-  tagTypes: ['Masters'],
+  tagTypes: ['Masters', 'Orders'],
  endpoints: (builder) => ({
    getMasters: builder.query<Master[], void>({
      query: () => ({ url: '/arm/masters' }),
-      transformResponse: (response: BaseResponse<Master[]>) => {
-        if (response.success) {
-          return response.body;
-        }
-      },
+      transformResponse: extractBodyFromResponse<Master[]>,
      providesTags: ['Masters'],
    }),
+    updateOrders: builder.mutation<void, UpdateOrderProps>({
+      query: ({ id, status, notes, master }) => ({
+        url: `/order/${id}`,
+        method: 'PATCH',
+        body: { status, notes, master },
+      }),
+      invalidatesTags: ['Orders'],
+    }),
+    getOrders: builder.query<OrderProps[], { date: Date }>({
+      query: ({ date }) => {
+        const startDate = dayjs(date).startOf('day').toISOString();
+        const endDate = dayjs(date).endOf('day').toISOString();
+        return {
+          url: '/arm/orders',
+          method: 'POST',
+          body: { startDate, endDate },
+        };
+      },
+      transformResponse: extractBodyFromResponse<OrderProps[]>,
+      providesTags: ['Orders'],
+    }),
+
    addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
      query: (master) => ({
        url: '/arm/masters',
@ -37,5 +55,29 @@ export const api = createApi({
      }),
      invalidatesTags: ['Masters'],
    }),
+    deleteMaster: builder.mutation<void, { id: string }>({
+      query: ({ id }) => ({
+        url: `/arm/masters/${id}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: ['Masters'],
+    }),
+    updateMaster: builder.mutation<void, UpdateMasterPayload>({
+      query: ({ id, name, phone }) => ({
+        url: `/arm/masters/${id}`,
+        method: 'PATCH',
+        body: { name, phone },
+      }),
+      invalidatesTags: ['Masters'],
+    }),
  }),
 });
+
+export const {
+  useGetMastersQuery,
+  useAddMasterMutation,
+  useDeleteMasterMutation,
+  useUpdateMasterMutation,
+  useGetOrdersQuery,
+  useUpdateOrdersMutation,
+} = api;
--- a/src/data/service/utils.ts
+++ b/src/data/service/utils.ts
@ -0,0 +1,21 @@
+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;
+  }
+};
--- a/src/api/arm.ts
+++ b/src/api/arm.ts
@ -1,139 +0,0 @@
-import { getConfigValue } from '@brojs/cli';
-import dayjs from 'dayjs';
-
-enum ArmEndpoints {
-  ORDERS = '/arm/orders',
-  MASTERS = '/arm/masters',
-}
-
-const armService = () => {
-  const endpoint = getConfigValue('dry-wash.api');
-
-  const fetchOrders = async ({ date }: { date: Date }) => {
-    const startDate = dayjs(date).startOf('day').toISOString();
-    const endDate = dayjs(date).endOf('day').toISOString();
-
-    const response = await fetch(`${endpoint}${ArmEndpoints.ORDERS}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ startDate, endDate }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch orders: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  const fetchMasters = async () => {
-    const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}`);
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch masters: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  const addMaster = async ({
-    name,
-    phone,
-  }: {
-    name: string;
-    phone: string;
-  }) => {
-    const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ name, phone }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch masters: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  const deleteMaster = async ({ id }: { id: string }) => {
-    const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, {
-      method: 'DELETE',
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch masters: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  const updateOrders = async ({
-    id,
-    status,
-    notes,
-    masterId,
-  }: {
-    id: string;
-    status?: string;
-    notes?: string;
-    masterId?: string;
-  }) => {
-    const body = JSON.stringify({ status, notes, masterId });
-
-    const response = await fetch(`${endpoint}/order/${id}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body,
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch update masters: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  const updateMaster = async ({
-    id,
-    name,
-    phone,
-  }: {
-    id: string;
-    name?: string;
-    phone?: string;
-  }) => {
-    const body = JSON.stringify({ name, phone });
-
-    const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body,
-    });
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch update masters: ${response.status}`);
-    }
-
-    return await response.json();
-  };
-
-  return {
-    fetchOrders,
-    fetchMasters,
-    addMaster,
-    deleteMaster,
-    updateMaster,
-    updateOrders,
-  };
-};
-
-export { armService, ArmEndpoints };
--- a/src/components/Editable/Editable.tsx
+++ b/src/components/Editable/Editable.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
  Editable,
  EditableInput,
@ -14,22 +14,18 @@ import {
 import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';

+import { useUpdateMasterMutation } from '../../__data__/service/api';
+
 interface EditableWrapperProps {
  value: string;
-  onSubmit: ({
-    id,
-    name,
-    phone,
-  }: {
-    id: string;
-    name?: string;
-    phone?: string;
-  }) => Promise<unknown>;
  as: 'phone' | 'name';
  id: string;
 }

-const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => {
+const EditableWrapper = ({ value, as, id }: EditableWrapperProps) => {
+  const [updateMaster, { isError, isSuccess, error }] =
+    useUpdateMasterMutation();
+
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master.editable',
  });
@ -40,11 +36,13 @@ const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => {
  const handleSubmit = async (newValue: string) => {
    if (currentValue === newValue) return;

-    try {
-      await onSubmit({ id, [as]: newValue });
+    await updateMaster({ id, [as]: newValue });

    setCurrentValue(newValue);
+  };

+  useEffect(() => {
+    if (isSuccess) {
      toast({
        title: 'Успешно!',
        description: 'Данные обновлены.',
@ -53,7 +51,11 @@ const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => {
        isClosable: true,
        position: 'top-right',
      });
-    } catch (error) {
+    }
+  }, [isSuccess]);
+
+  useEffect(() => {
+    if (isError) {
      toast({
        title: 'Ошибка!',
        description: 'Не удалось обновить данные.',
@ -64,7 +66,7 @@ const EditableWrapper = ({ value, onSubmit, as, id }: EditableWrapperProps) => {
      });
      console.error('Ошибка при обновлении данных:', error);
    }
-  };
+  }, [isError, error]);

  function EditableControls() {
    const {
--- a/src/components/MasterActionsMenu/MasterActionsMenu.tsx
+++ b/src/components/MasterActionsMenu/MasterActionsMenu.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
  Menu,
  MenuButton,
@ -10,7 +10,7 @@ import {
 import { EditIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';

-import { armService } from '../../api/arm';
+import { useDeleteMasterMutation } from '../../__data__/service/api';

 interface MasterActionsMenu {
  id: string;
@ -21,12 +21,17 @@ const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
    keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
  });

-  const { deleteMaster } = armService();
+  const [deleteMaster, { isSuccess, isError, error, isLoading }] =
+    useDeleteMasterMutation();
+
  const toast = useToast();

  const handleClickDelete = async () => {
-    try {
    await deleteMaster({ id });
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
      toast({
        title: 'Мастер удалён.',
        description: `Мастер с ID "${id}" успешно удалён.`,
@ -35,7 +40,11 @@ const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
        isClosable: true,
        position: 'top-right',
      });
-    } catch (error) {
+    }
+  }, [isSuccess]);
+
+  useEffect(() => {
+    if (isError) {
      toast({
        title: 'Ошибка удаления мастера.',
        description: 'Не удалось удалить мастера. Попробуйте ещё раз.',
@ -46,13 +55,15 @@ const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
      });
      console.error(error);
    }
-  };
+  }, [isError]);

  return (
    <Menu>
      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
      <MenuList>
-        <MenuItem onClick={handleClickDelete}>{t('delete')}</MenuItem>
+        <MenuItem onClick={handleClickDelete} isDisabled={isLoading}>
+          {t('delete')}
+        </MenuItem>
      </MenuList>
    </Menu>
  );
--- a/src/components/MasterDrawer/MasterDrawer.tsx
+++ b/src/components/MasterDrawer/MasterDrawer.tsx
@ -18,10 +18,10 @@ import {
 import { useTranslation } from 'react-i18next';
 import { PhoneIcon } from '@chakra-ui/icons';

-import { api } from '../../__data__/service/api';
+import { useAddMasterMutation } from '../../__data__/service/api';

 const MasterDrawer = ({ isOpen, onClose }) => {
-  const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
+  const [addMaster, { error, isSuccess }] = useAddMasterMutation();
  const toast = useToast();

  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
--- a/src/components/MasterItem/MasterItem.tsx
+++ b/src/components/MasterItem/MasterItem.tsx
@ -5,10 +5,8 @@ import { useTranslation } from 'react-i18next';
 import MasterActionsMenu from '../MasterActionsMenu';
 import { getTimeSlot } from '../../lib';
 import EditableWrapper from '../Editable/Editable';
-import { armService } from '../../api/arm';

 const MasterItem = ({ name, phone, id, schedule }) => {
-  const { updateMaster } = armService();
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master',
  });
@ -16,12 +14,7 @@ const MasterItem = ({ name, phone, id, schedule }) => {
  return (
    <Tr>
      <Td>
-        <EditableWrapper
-          id={id}
-          as={'name'}
-          value={name}
-          onSubmit={updateMaster}
-        />
+        <EditableWrapper id={id} as={'name'} value={name} />
      </Td>
      <Td>
        {schedule?.length > 0 ? (
@ -37,12 +30,7 @@ const MasterItem = ({ name, phone, id, schedule }) => {
        )}
      </Td>
      <Td>
-        <EditableWrapper
-          id={id}
-          as={'phone'}
-          value={phone}
-          onSubmit={updateMaster}
-        />
+        <EditableWrapper id={id} as={'phone'} value={phone} />
      </Td>
      <Td>
        <MasterActionsMenu id={id} />
--- a/src/components/Masters/Masters.tsx
+++ b/src/components/Masters/Masters.tsx
@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';

 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
-import { api } from '../../__data__/service/api';
+import { useGetMastersQuery } from '../../__data__/service/api';

 const TABLE_HEADERS = [
  'name' as const,
@ -35,12 +35,7 @@ const Masters = () => {
    keyPrefix: 'dry-wash.arm.master',
  });

-  const {
-    data: masters,
-    error,
-    isLoading,
-    isSuccess,
-  } = api.useGetMastersQuery();
+  const { data: masters, error, isLoading, isSuccess } = useGetMastersQuery();

  useEffect(() => {
    if (error) {
--- a/src/components/OrderItem/OrderItem.tsx
+++ b/src/components/OrderItem/OrderItem.tsx
@ -5,7 +5,7 @@ import dayjs from 'dayjs';

 import { getTimeSlot } from '../../lib';
 import { Master } from '../../models/api/master';
-import { armService } from '../../api/arm';
+import { useUpdateOrdersMutation } from '../../__data__/service/api';

 const statuses = [
  'pending' as const,
@ -54,8 +54,7 @@ const OrderItem = ({
  allMasters,
  id,
 }: OrderProps) => {
-  const { updateOrders } = armService();
-
+  const [updateOrders] = useUpdateOrdersMutation();
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.order',
  });
@ -72,16 +71,16 @@ const OrderItem = ({

    if (selectedMaster) {
      setMaster(masterName);
-      updateOrders({ id, masterId: selectedMaster.id });
+      updateOrders({ id, master: selectedMaster.id });
    } else {
      console.error('Master not found');
    }
  };

  const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => {
-    const status = e.target.value;
+    const status = e.target.value as OrderProps['status'];
    updateOrders({ id, status });
-    setStatus(e.target.value as OrderProps['status']);
+    setStatus(status);
  };

  return (
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@ -17,9 +17,11 @@ import dayjs from 'dayjs';

 import OrderItem from '../OrderItem';
 import { OrderProps } from '../OrderItem/OrderItem';
-import { armService } from '../../api/arm';
 import DateNavigator from '../DateNavigator';
-import { Master } from '../../models/api/master';
+import {
+  useGetMastersQuery,
+  useGetOrdersQuery,
+} from '../../__data__/service/api';

 const TABLE_HEADERS = [
  'carNumber' as const,
@ -34,47 +36,41 @@ const Orders = () => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.order',
  });
-
-  const { fetchOrders } = armService();
-  const { fetchMasters } = armService();
-
  const toast = useToast();

-  const [orders, setOrders] = useState<OrderProps[]>([]);
-  const [allMasters, setAllMasters] = useState<Master[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
  const [currentDate, setCurrentDate] = useState(new Date());
+  const {
+    data: orders,
+    isLoading: isOrdersLoading,
+    isSuccess: isOrdersSuccess,
+    isError: isOrdersError,
+    error: ordersError,
+  } = useGetOrdersQuery({ date: currentDate });
+
+  const {
+    data: masters,
+    isLoading: isMastersLoading,
+    isSuccess: isMastersSuccess,
+    isError: isMastersError,
+    error: mastersError,
+  } = useGetMastersQuery();
+
+  const isLoading = isOrdersLoading || isMastersLoading;
+  const isSuccess = isOrdersSuccess && isMastersSuccess;
+  const isError = isOrdersError || isMastersError;

  useEffect(() => {
-    const loadData = async () => {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const [ordersData, mastersData] = await Promise.all([
-          fetchOrders({ date: currentDate }),
-          fetchMasters(),
-        ]);
-
-        setOrders(ordersData.body);
-        setAllMasters(mastersData.body);
-      } catch (err) {
-        setError(err.message);
+    if (isError) {
      toast({
        title: t('error.title'),
+        // description: errorMessage,
        status: 'error',
        duration: 5000,
        isClosable: true,
        position: 'bottom-right',
      });
-      } finally {
-        setLoading(false);
    }
-    };
-
-    loadData();
-  }, [currentDate, toast, t]);
+  }, [isError, ordersError, mastersError, toast, t]);

  return (
    <Box p='8'>
@ -103,25 +99,24 @@ const Orders = () => {
          </Tr>
        </Thead>
        <Tbody>
-          {loading && (
+          {isLoading && (
            <Tr>
              <Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
                <Spinner size='lg' />
              </Td>
            </Tr>
          )}
-          {!loading && orders.length === 0 && !error && (
+          {isSuccess && orders.length === 0 && (
            <Tr>
              <Td colSpan={TABLE_HEADERS.length}>
                <Text>{t('table.empty')}</Text>
              </Td>
            </Tr>
          )}
-          {!loading &&
-            !error &&
+          {isSuccess &&
            orders.map((order, index) => (
              <OrderItem
-                allMasters={allMasters}
+                allMasters={masters}
                key={index}
                {...order}
                status={order.status as OrderProps['status']}
--- a/src/models/api/common.ts
+++ b/src/models/api/common.ts
@ -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;
--- a/src/models/api/index.ts
+++ b/src/models/api/index.ts
@ -1 +1,2 @@
+export * from './common';
 export * from './order';
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@ -53,7 +53,7 @@ router.delete('/arm/masters/:id', (req, res) => {
    );
 });

-router.patch('/orders/:id', (req, res) => {
+router.patch('/order/:id', (req, res) => {
  res
    .status(/error/.test(STUBS.orders) ? 500 : 200)
    .send(