Function PackForm

frontend/src/app/PackForm/PackForm.tsx:26–257

({ history, packId, getPack, exportItems, getItems, createPack, updatePack, user })

import { PageTitle, Controls, Box, Grid } from "styles/common";

const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exportItems, getItems, createPack, updatePack, user }) => {
    const [loading, setLoading] = React.useState<boolean>(true);
    const [inventory, setInventory] = React.useState<Item[]>([]);
    const [packItems, setPackItems] = React.useState<PackItem[]>([]);
    const [packData, setPackData] = React.useState<Pack | null>(null);
    const { dispatch } = useSidebar();

    React.useEffect(() => {
        setLoading(true);
        async function fetchData(id: number) {
            await getData(id);
        }
        getItems()
            .then(items => setInventory(items))
            .catch(() => alertError({ message: 'Unable to retrieve inventory' }));

        if (!packId) {
            setLoading(false);
        } else {
            fetchData(packId);
        }
    }, [packId]);

    async function getData(id: number) {
        try {
            const pack = await getPack(id);
            const { items, userId, title } = pack;
            if (user && user.id !== userId) {
                history.push(getPackPath(id, title));
                return;
            }
            setPackData(pack);
            setPackItems(items);
            setLoading(false);
        } catch (e) {
            alertError({ message: 'Unable to retrieve pack information.' })
        }
    }

    const addItem = (item: Item) => {
        const items = Object.assign([], [...packItems, { ...item, packItem: { notes: '', quantity: 1, worn: false } }]);
        setPackItems(items);
    };

    const removeItem = (itemId: number) => {
        const items = packItems.filter(i => i.id !== itemId);
        setPackItems(items);
    };

    const updateItem = (itemId: number, field: string, value: string | number | boolean) => {
        const items: PackItem[] = Object.assign([], packItems);
        const idx = items.findIndex(item => item.id === itemId);
        items[idx].packItem[field] = value;
        setPackItems(items);
    };

    const SidebarContent = () => (
        <InventorySidebar items={inventory}