♻ Move project source files to top level from src, update Sentry dependency (#630)

Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>

new-frontend/src/components/Items/AddItem.tsx

@@ -0,0 +1,87 @@
+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 { ApiError, ItemCreate } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
+
+interface AddItemProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<ItemCreate>({
+        mode: 'onBlur',
+        criteriaMode: 'all',
+        defaultValues: {
+            title: '',
+            description: '',
+        },
+    });
+    const { addItem } = useItemsStore();
+
+    const onSubmit: SubmitHandler<ItemCreate> = async (data) => {
+        try {
+            await addItem(data);
+            showToast('Success!', 'Item created successfully.', 'success');
+            reset();
+            onClose();
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+    };
+
+    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;