🚚 Move new-frontend to frontend (#652)

2024-03-08 19:23:54 +01:00
parent 3b44537361
commit 9d703df254
97 changed files with 8 additions and 8 deletions
--- a/frontend/src/components/Items/AddItem.tsx
+++ b/frontend/src/components/Items/AddItem.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+
+import { ApiError, ItemCreate, ItemsService } from '../../client'
+import useCustomToast from '../../hooks/useCustomToast'
+
+interface AddItemProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
+  const queryClient = useQueryClient()
+  const showToast = useCustomToast()
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<ItemCreate>({
+    mode: 'onBlur',
+    criteriaMode: 'all',
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+  })
+
+  const addItem = async (data: ItemCreate) => {
+    await ItemsService.createItem({ requestBody: data })
+  }
+
+  const mutation = useMutation(addItem, {
+    onSuccess: () => {
+      showToast('Success!', 'Item created successfully.', 'success')
+      reset()
+      onClose()
+    },
+    onError: (err: ApiError) => {
+      const errDetail = err.body.detail
+      showToast('Something went wrong.', `${errDetail}`, 'error')
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries('items')
+    },
+  })
+
+  const onSubmit: SubmitHandler<ItemCreate> = (data) => {
+    mutation.mutate(data)
+  }
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        size={{ base: 'sm', md: 'md' }}
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader>Add Item</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <FormControl isRequired isInvalid={!!errors.title}>
+              <FormLabel htmlFor="title">Title</FormLabel>
+              <Input
+                id="title"
+                {...register('title', {
+                  required: 'Title is required.',
+                })}
+                placeholder="Title"
+                type="text"
+              />
+              {errors.title && (
+                <FormErrorMessage>{errors.title.message}</FormErrorMessage>
+              )}
+            </FormControl>
+            <FormControl mt={4}>
+              <FormLabel htmlFor="description">Description</FormLabel>
+              <Input
+                id="description"
+                {...register('description')}
+                placeholder="Description"
+                type="text"
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter gap={3}>
+            <Button
+              bg="ui.main"
+              color="white"
+              _hover={{ opacity: 0.8 }}
+              type="submit"
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default AddItem