feat: add a name and phone change from the Masters (#62)

src/components/MasterItem/MasterItem.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 
 import MasterActionsMenu from '../MasterActionsMenu';
 import { getTimeSlot } from '../../lib';
+import EditableWrapper from '../Editable/Editable';
+import { armService } from '../../api/arm';
 
 export interface Schedule {
   id: string;
@@ -18,20 +21,41 @@ export type MasterProps = {
 };
 
 const MasterItem = ({ name, phone, id, schedule }) => {
+  const { updateMaster } = armService();
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.master',
+  });
+
   return (
     <Tr>
-      <Td>{name}</Td>
       <Td>
-        <Stack direction='row'>
-          {schedule?.map(({ startWashTime, endWashTime }, index) => (
-            <Badge colorScheme={'green'} key={index}>
-              {getTimeSlot(startWashTime, endWashTime)}
-            </Badge>
-          ))}
-        </Stack>
+        <EditableWrapper
+          id={id}
+          as={'name'}
+          value={name}
+          onSubmit={updateMaster}
+        />
       </Td>
       <Td>
-        <Link href='tel:'>{phone}</Link>
+        {schedule?.length > 0 ? (
+          <Stack direction='row'>
+            {schedule?.map(({ startWashTime, endWashTime }, index: number) => (
+              <Badge colorScheme={'green'} key={index}>
+                {getTimeSlot(startWashTime, endWashTime)}
+              </Badge>
+            ))}
+          </Stack>
+        ) : (
+          <Text color='gray.500'>{t('schedule.empty')}</Text>
+        )}
+      </Td>
+      <Td>
+        <EditableWrapper
+          id={id}
+          as={'phone'}
+          value={phone}
+          onSubmit={updateMaster}
+        />
       </Td>
       <Td>
         <MasterActionsMenu id={id} />