Function Item

frontend/src/app/Inventory/Item.tsx:23–122

({ item, updateItem, fetchItems })

}

const Item: React.FC<ItemProps> = ({ item, updateItem, fetchItems }) => {
    const app = React.useContext(AppContext);
    const firstRender = React.useRef(true);
    const [copy, setCopy] = React.useState<ItemType>(item);
    const [catId, setCatId] = React.useState<number | string>(item.categoryId);
    const [wUnit, setWUnit] = React.useState<any>(item.weight_unit);
    const [editVisible, setEditVisible] = React.useState<boolean>(false);

    React.useEffect(() => {
        if (!firstRender.current) {
            handleSave();
        }
        firstRender.current = false;
    }, [catId, wUnit]);

    function update(key: string, value: any) {
        const i = Object.assign({}, { ...copy, [key]: value });
        setCopy(i);
    }

    function handleSave() {
        if (!copy.name || isEqual(copy, item)) return;
        const newCategory = !app.categories.map(c => c.id).includes(copy.categoryId);
        updateItem({ ...copy, newCategory })
            .then(newItem => {
                setCopy(newItem);
                alertSuccess({ message: 'Item Updated.', duration: 2 });
                if (newCategory) {
                    app.fetchUser();
                }
            })
            .catch(() => alertWarn({ message: 'Error updating item.' }));
    }

    const categoryValue = categorySelectValue(app.categories, copy.categoryId);
    const { product_name, name, weight_unit, weight } = copy;
    return (
        <>
            <Grid>
                <div>
                    <Input value={name || ''}
                           onChange={v => update('name', v)}
                           onBlur={handleSave}
                           style={inlineStyles}/>
                </div>
                <div>
                    <Input value={product_name || ''}
                           placeholder="product name"
                           onChange={v => update('product_name', v)}
                           onBlur={handleSave}
                           style={inlineStyles}/>
                </div>
                <div>
                    <SelectCreatable
                        options={categoryOptions(app.categories)}
                        value={categoryValue}
                        onChange={(option: Option) => {
                            update('categoryId', option.value);