fear: change requests to RTK query

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);
+    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 {

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 });
+    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>
   );

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} />

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) {

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 (

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);
-        toast({
-          title: t('error.title'),
-          status: 'error',
-          duration: 5000,
-          isClosable: true,
-          position: 'bottom-right',
-        });
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadData();
-  }, [currentDate, toast, t]);
+    if (isError) {
+      toast({
+        title: t('error.title'),
+        // description: errorMessage,
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'bottom-right',
+      });
+    }
+  }, [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']}