Add category management screen

src/screens/ManageProductsScreen.tsx

@@ -8,24 +8,37 @@ import {
   InputAdornment,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import { useMemo, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { ProductRow } from '../components/ProductRow';
-import { useProducts } from '../hooks/dataHooks';
+import { useCategories, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 
-const categories = ['Drinks', 'Snacks', 'Dairy', 'Confectionery'];
-
 export const ManageProductsScreen = () => {
   const db = useDatabase();
   const products = useProducts();
+  const categories = useCategories();
   const [search, setSearch] = useState('');
   const [name, setName] = useState('');
-  const [category, setCategory] = useState(categories[0]);
+  const [category, setCategory] = useState('');
   const [unitType, setUnitType] = useState('unit');
   const [bulkName, setBulkName] = useState('case');
   const [unitsPerBulk, setUnitsPerBulk] = useState(6);
 
+  const categoryOptions = useMemo(() => {
+    const categoryNames = categories.map((item) => item.name);
+    const productCategories = products.map((product) => product.category);
+    return Array.from(new Set([...categoryNames, ...productCategories]));
+  }, [categories, products]);
+
+  useEffect(() => {
+    if (categoryOptions.length === 0) return;
+    if (!categoryOptions.includes(category)) {
+      setCategory(categoryOptions[0]);
+    }
+  }, [category, categoryOptions]);
+
   const filtered = useMemo(
     () =>
       products.filter((p) =>
@@ -35,7 +48,7 @@ export const ManageProductsScreen = () => {
   );
 
   const addProduct = async () => {
-    if (!name) return;
+    if (!name || !category) return;
     await db.products.add({
       id: uuidv4(),
       name,
@@ -73,6 +86,9 @@ export const ManageProductsScreen = () => {
         Manage Products
       </Typography>
       <Stack spacing={2}>
+        <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+          Edit Categories
+        </Button>
         <TextField
           placeholder="Search"
           value={search}
@@ -82,8 +98,14 @@ export const ManageProductsScreen = () => {
         <Stack spacing={1}>
           <Typography variant="subtitle1">Add Product</Typography>
           <TextField label="Name" value={name} onChange={(event) => setName(event.target.value)} />
-          <TextField select label="Category" value={category} onChange={(event) => setCategory(event.target.value)}>
-            {categories.map((cat) => (
+          <TextField
+            select
+            label="Category"
+            value={category}
+            onChange={(event) => setCategory(event.target.value)}
+            disabled={categoryOptions.length === 0}
+          >
+            {categoryOptions.map((cat) => (
               <MenuItem key={cat} value={cat}>
                 {cat}
               </MenuItem>
@@ -97,7 +119,7 @@ export const ManageProductsScreen = () => {
             value={unitsPerBulk}
             onChange={(event) => setUnitsPerBulk(Number(event.target.value))}
           />
-          <Button variant="contained" onClick={addProduct} disabled={!name}>
+          <Button variant="contained" onClick={addProduct} disabled={!name || !category}>
             Save Product
           </Button>
         </Stack>
@@ -105,7 +127,7 @@ export const ManageProductsScreen = () => {
           <ProductRow
             key={product.id}
             product={product}
-            categories={categories}
+            categories={categoryOptions}
             onSave={updateProduct}
             onDelete={deleteProduct}
           />