Function EditForm

frontend/src/app/components/EditItem/index.tsx:13–109

(
    {
        deleteItem,
        categoryValue,
        categories,
        fetchItems,
        updateItem,
        onCancel,
        visible,
        onClose,
        onOk,
        record
    })

import { ButtonGroup, ModalTitle } from "./styles";

const EditForm: React.FC<FormSpecs.Props> = (
    {
        deleteItem,
        categoryValue,
        categories,
        fetchItems,
        updateItem,
        onCancel,
        visible,
        onClose,
        onOk,
        record
    }) => {
    const handleDelete = () => {
        deleteItem(record.id).then(() => {
            onClose();
            fetchItems();
        });
    };

    const renderFooter = () => (
        <ButtonGroup>
            <div>
                <Popconfirm title="Are you sure you want to delete this item?"
                            okText="Delete"
                            placement="bottom"
                            onConfirm={handleDelete}>
                    <Button type="danger">
                        Delete
                    </Button>
                </Popconfirm>
            </div>
            <div>
                <Button onClick={onCancel}>
                    Cancel
                </Button>
                <Button type="primary" onClick={onOk}>
                    Save Changes
                </Button>
            </div>
        </ButtonGroup>
    );

    const { product_name, name, weight_unit, weight, product_url } = record;
    return (
        <Modal
            title={<ModalTitle>Edit Item</ModalTitle>}
            visible={visible}
            onCancel={onCancel}
            footer={renderFooter()}
        >
            <Input label="Item Type"
                   placeholder="Backpack, Compass, etc..."
                   value={name}
                   onChange={v => updateItem('name', v)}
            />

            <SelectCreatable