Function Inventory

frontend/src/app/Inventory/index.tsx:21–98

({ getItems, updateItem })

import { PageTitle, PageDescription, PageWrapper } from "styles/common";

const Inventory: React.FC<InventorySpecs.Props> = ({ getItems, updateItem }) => {
    const [items, setItems] = React.useState<ItemType[]>([]);
    const [filterText, setFilterText] = React.useState<string>('');
    const [categories, setCategories] = React.useState<Category[]>([]);
    const [loading, setLoading] = React.useState<boolean>(true);
    const { dispatch } = useSidebar();

    React.useEffect(() => {
        fetchItems();
        dispatch({ type: 'setTitle', value: 'Add Item' });
        dispatch({ type: 'setContent', value: SidebarContent() });

        return function cleanup() {
            dispatch({ type: 'reset' })
        }
    }, []);

    function fetchItems() {
        getItems()
            .then(items => {
                const categories = getCategories(items);
                const rowItems = Object.assign([], items.map(i => ({ ...i, refresh: fetchItems })));
                setItems(rowItems);
                setCategories(categories);
                setLoading(false);
            })
            .catch(err => console.warn(err));
    }

    function renderTables() {
        const tables = categories.map(cat => {
            let catItems = items.filter(i => i.categoryId === cat.id);
            catItems = searchItems(catItems, filterText);

            if (!catItems.length) return null;
            return <Table key={cat.id} category={cat} items={catItems} fetchItems={fetchItems} updateItem={updateItem}/>
        });

        return <div style={{ minWidth: '100%', overflowX: "scroll" }}>{tables}</div>;
    }

    const renderEmptyList = () => (
        <MessageArea>
            Get started by adding your inventory.
        </MessageArea>
    );

    const SidebarContent = () => <ItemForm onSubmit={fetchItems}/>;

    const InventoryTable = !!categories.length ? renderTables() : renderEmptyList();
    return (
        <DocumentTitle title={`Packstack | Inventory`}>
            <PageWrapper>
                <PageTitle>
                    <h1>Inventory</h1>
                </PageTitle>
                <PageDescription>
                    <p>