feat: add RTK for master

src/components/Masters/Masters.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
   Box,
   Heading,
@@ -19,8 +19,7 @@ import { useTranslation } from 'react-i18next';
 
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
-import { armService } from '../../api/arm';
-import { MasterProps } from '../MasterItem/MasterItem';
+import { api } from '../../__data__/service/api';
 
 const TABLE_HEADERS = [
   'name' as const,
@@ -36,35 +35,23 @@ const Masters = () => {
     keyPrefix: 'dry-wash.arm.master',
   });
 
-  const [masters, setMasters] = useState<MasterProps[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const { fetchMasters } = armService();
+  const {
+    data: masters,
+    error,
+    isLoading,
+    isSuccess,
+  } = api.useGetMastersQuery();
 
   useEffect(() => {
-    const loadMasters = async () => {
-      setLoading(true);
-
-      try {
-        const data = await fetchMasters();
-        setMasters(data.body);
-      } catch (err) {
-        setError(err.message);
-        toast({
-          title: t('error.title'),
-          status: 'error',
-          duration: 5000,
-          isClosable: true,
-          position: 'bottom-right',
-        });
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadMasters();
-  }, [toast, t]);
+    if (error) {
+      toast({
+        title: t('error.title'),
+        status: 'error',
+        isClosable: true,
+        position: 'bottom-right',
+      });
+    }
+  }, [error]);
 
   return (
     <Box p='8'>
@@ -83,22 +70,21 @@ const Masters = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {loading && (
+          {isLoading && (
             <Tr>
               <Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
                 <Spinner size='lg' />
               </Td>
             </Tr>
           )}
-          {!loading && masters.length === 0 && !error && (
+          {isSuccess && masters.length === 0 && (
             <Tr>
               <Td colSpan={TABLE_HEADERS.length}>
                 <Text>{t('table.empty')}</Text>
               </Td>
             </Tr>
           )}
-          {!loading &&
-            !error &&
+          {isSuccess &&
             masters.map((master, index) => (
               <MasterItem key={index} {...master} />
             ))}