feat: integrate add ticket modal

ainunns · Mar 10, 2024 · 4352d75 · 4352d75
1 parent 5016c4a
commit 4352d75
Show file tree

Hide file tree

Showing 5 changed files with 272 additions and 83 deletions.
diff --git a/src/app/board/container/modal/AddTicketModal.tsx b/src/app/board/container/modal/AddTicketModal.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { AddTicketFormType } from '@/app/board/hooks/mutation';
+import {
+  AddTicketFormType,
+  useAddTicketMutation,
+} from '@/app/board/hooks/mutation';
 import Button from '@/components/buttons/Button';
 import DatePicker from '@/components/forms/DatePicker';
 import Input from '@/components/forms/Input';
@@ -35,14 +38,22 @@ export default function AddTicketModal({
       description: '',
       dueDate: new Date(),
       tags: [],
-      status: status,
+      status,
     },
   });
 
   const { handleSubmit } = methods;
 
+  const { handleAdd, isPending } = useAddTicketMutation({
+    refetch,
+    setOpen,
+  });
+
   const onSubmit = (data: AddTicketFormType) => {
-    console.log(data);
+    handleAdd({
+      ...data,
+      status: status.toLowerCase(),
+    });
   };
 
   return (
@@ -90,32 +101,33 @@ export default function AddTicketModal({
               />
               <SelectInput
                 id='tags'
-                label='Tag'
-                placeholder='Tambah Tag'
+                label='Tags'
+                options={SELECT_OPTIONS.tags}
+                isMulti={true}
+                placeholder='Tambah tag'
                 validation={{
                   required: 'Tag tidak boleh kosong',
                 }}
-              >
-                {SELECT_OPTIONS.tags.map((tag) => (
-                  <option key={tag.label} value={tag.value}>
-                    {tag.label}
-                  </option>
-                ))}
-              </SelectInput>
+              />
+              <div className='mt-5 flex justify-end gap-3'>
+                <Button
+                  variant='outline'
+                  className='text-success-500'
+                  onClick={() => setOpen(false)}
+                >
+                  Batal
+                </Button>
+                <Button
+                  type='submit'
+                  variant='success'
+                  className='border-none text-typo-primary'
+                  isLoading={isPending}
+                >
+                  Simpan
+                </Button>
+              </div>
             </form>
           </FormProvider>
-          <div className='mt-5 flex justify-end gap-3'>
-            <Button
-              variant='outline'
-              className='text-success-500'
-              onClick={() => setOpen(false)}
-            >
-              Batal
-            </Button>
-            <Button variant='success' className='border-none text-typo-primary'>
-              Simpan
-            </Button>
-          </div>
         </Modal.Section>
       </Modal>
     </>

diff --git a/src/app/board/hooks/mutation.ts b/src/app/board/hooks/mutation.ts
@@ -41,4 +41,27 @@ export type AddTicketFormType = {
 
 type AddTicketMutationType = {
   refetch: () => void;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const useAddTicketMutation = ({
+  refetch,
+  setOpen,
+}: AddTicketMutationType) => {
+  const { mutateAsync: handleAdd, isPending } = useMutationToast<
+    void,
+    AddTicketFormType
+  >(
+    useMutation({
+      mutationFn: async (data) => {
+        await api.post('/task', data);
+      },
+      onSuccess: () => {
+        showToast('Ticket berhasil ditambahkan', SUCCESS_TOAST);
+        refetch();
+        setOpen(false);
+      },
+    }),
+  );
+  return { handleAdd, isPending };
 };
diff --git a/src/components/forms/Input.tsx b/src/components/forms/Input.tsx
@@ -107,7 +107,7 @@ export default function Input({
               readOnly && 'cursor-not-allowed',
               error
                 ? 'border-none ring-1 ring-inset ring-danger-500 focus:ring-danger-500 '
-                : 'focus:ring-typo-primary',
+                : 'focus:ring-primary-500',
               prefix && 'rounded-l-none rounded-r-md',
               suffix && 'rounded-l-md rounded-r-none',
               prefix && suffix && 'rounded-none',