barkman/barkmanui/src/features/inventory/EditItem.tsx

import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
import { useForm } from '@mantine/form';
import {useParams} from "react-router";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts";
import {useEffect} from "react";

type EditableInventoryItem = Omit<InventoryItem, 'id'>;

function EditItem() {
    const params = useParams();

    const form = useForm<EditableInventoryItem>({
        mode: 'uncontrolled',
        initialValues: {
            name: "",
            brand: "",
            status: "",
            serialNumber: "",
            rentalPrice: 0,
            replacementCost: 0,
            notes: "",
        },

        validate: {
        },
    });

    const { isPending, error, data, isFetching } = useQuery({
        queryKey: ['inventory', params.itemId],
        queryFn: async (): Promise<InventoryItem> => {
            const response = await fetch(
                import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
            )

            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)

            return await response.json()
        },
    });

    const queryClient = useQueryClient();

    const updateItem = useMutation({
        mutationFn: async (values: EditableInventoryItem) => {

            // await <call the api, do the things>
            const result = await fetch(import.meta.env.VITE_API_URL + '/inventory/' + params.itemId, {
                method: 'PUT',
                body: JSON.stringify(values),
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (!result.ok) {
                throw new Error('Failed to update inventory item');
            }

            // invalidate the queries so they pull updated information
            // this is a prefix, so it covers both the query that pulls a list, and also `['inventory', itemId]` in this file
            await queryClient.invalidateQueries({
                queryKey: ['inventory']
            });
        }
    })

    useEffect(() => {
        if (data) {
            // Even if query.data changes, form will be initialized only once
            form.initialize(data);
        }
    }, [data]);

    if (isPending) return 'Loading...'

    if (error) return 'An error has occurred: ' + error.message

    return (
        <form onSubmit={form.onSubmit(async (values) => await
            updateItem.mutateAsync(values))}>
            <div>{isFetching ? 'Updating...' : ''}</div>
            <Text>ID: {data.id}</Text>
            <TextInput withAsterisk key={form.key('brand')} size="md" label="Brand"
                       placeholder="Brand" {...form.getInputProps('brand')}/>
            <TextInput withAsterisk key={form.key('name')} size="md" label="Name"
                       placeholder="Name" {...form.getInputProps('name')}/>
            <TextInput size="md" key={form.key('status')} label="Status"
                       placeholder="Status" {...form.getInputProps('status')}/>
            <TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
                       placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
            <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
                         placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
            <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
                         placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
            <Textarea label="Notes" key={form.key('notes')} placeholder="Notes" {...form.getInputProps('notes')}/>

            <Group justify="flex-end" mt="md">
                <Button type="submit">Submit</Button>
            </Group>
        </form>
    );
}

export default EditItem;