feat: add fetch for multi-stub (#59)

src/components/MasterDrawer/MasterDrawer.tsx

@@ -11,15 +11,47 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerOverlay,
+  useToast,
+  InputGroup,
+  InputLeftElement,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import { armService } from '../../api/arm';
+import { PhoneIcon } from '@chakra-ui/icons';
 
 const MasterDrawer = ({ isOpen, onClose }) => {
+  const { addMaster } = armService();
+  const toast = useToast();
+
   const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
 
-  const handleSave = () => {
-    console.log(`Сохранение мастера: ${newMaster}`);
-    onClose();
+  const handleSave = async () => {
+    if (newMaster.name.trim() === '' || newMaster.phone.trim() === '') {
+      return;
+    }
+
+    try {
+      await addMaster(newMaster);
+      toast({
+        title: 'Мастер создан.',
+        description: `Мастер "${newMaster.name}" успешно добавлен.`,
+        status: 'success',
+        duration: 5000,
+        isClosable: true,
+        position: 'top-right',
+      });
+      onClose();
+    } catch (error) {
+      toast({
+        title: 'Ошибка при создании мастера.',
+        description: 'Не удалось добавить мастера. Попробуйте еще раз.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top-right',
+      });
+      console.error(error);
+    }
   };
 
   const { t } = useTranslation('~', {
@@ -36,6 +68,7 @@ const MasterDrawer = ({ isOpen, onClose }) => {
           <FormControl mb='4'>
             <FormLabel>{t('inputName.label')}</FormLabel>
             <Input
+              // isInvalid
               value={newMaster.name}
               onChange={(e) =>
                 setNewMaster({ ...newMaster, name: e.target.value })
@@ -44,14 +77,21 @@ const MasterDrawer = ({ isOpen, onClose }) => {
             />
           </FormControl>
           <FormControl>
-            <FormLabel> {t('inputPhone.label')}</FormLabel>
-            <Input
-              value={newMaster.phone}
-              onChange={(e) =>
-                setNewMaster({ ...newMaster, phone: e.target.value })
-              }
-              placeholder={t('inputPhone.placeholder')}
-            />
+            <FormLabel>{t('inputPhone.label')}</FormLabel>
+
+            <InputGroup>
+              <InputLeftElement pointerEvents='none'>
+                <PhoneIcon color='gray.300' />
+              </InputLeftElement>
+              <Input
+                // isInvalid
+                value={newMaster.phone}
+                onChange={(e) =>
+                  setNewMaster({ ...newMaster, phone: e.target.value })
+                }
+                placeholder={t('inputPhone.placeholder')}
+              />
+            </InputGroup>
           </FormControl>
         </DrawerBody>
         <DrawerFooter>