♻ Move project source files to top level from src, update Sentry dependency (#630)
Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
This commit is contained in:
Esteban Maya
87
new-frontend/src/components/Items/AddItem.tsx
Normal file
87
new-frontend/src/components/Items/AddItem.tsx
Normal file
@@ -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;
|
||||
73
new-frontend/src/components/Items/EditItem.tsx
Normal file
73
new-frontend/src/components/Items/EditItem.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
|
||||
import { ApiError, ItemUpdate } from '../../client';
|
||||
import useCustomToast from '../../hooks/useCustomToast';
|
||||
import { useItemsStore } from '../../store/items-store';
|
||||
|
||||
interface EditItemProps {
|
||||
id: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
|
||||
const showToast = useCustomToast();
|
||||
const { editItem, items } = useItemsStore();
|
||||
const currentItem = items.find((item) => item.id === id);
|
||||
const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>({ defaultValues: { title: currentItem?.title, description: currentItem?.description } });
|
||||
|
||||
const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
|
||||
try {
|
||||
await editItem(id, data);
|
||||
showToast('Success!', 'Item updated successfully.', 'success');
|
||||
reset();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
const errDetail = (err as ApiError).body.detail;
|
||||
showToast('Something went wrong.', `${errDetail}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
reset();
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: 'sm', md: 'md' }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Edit Item</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor='title'>Title</FormLabel>
|
||||
<Input id='title' {...register('title')} type='text' />
|
||||
</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={onCancel}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditItem;
|
||||
Reference in New Issue
Block a user