cleanup

frontend/src/components/ShoppingEventForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Shop, Product, ShoppingEventCreate, ProductInEvent } from '../types';
 import { shopApi, productApi, shoppingEventApi } from '../services/api';
@@ -30,50 +30,13 @@ const ShoppingEventForm: React.FC = () => {
   });
   const [autoCalculate, setAutoCalculate] = useState<boolean>(true);
 
-  useEffect(() => {
-    fetchShops();
-    fetchProducts();
-    if (isEditMode && id) {
-      fetchShoppingEvent(parseInt(id));
-    }
-  }, [id, isEditMode]);
-
   // Calculate total amount from selected products
   const calculateTotal = (products: ProductInEvent[]): number => {
     const total = products.reduce((total, item) => total + (item.amount * item.price), 0);
     return Math.round(total * 100) / 100; // Round to 2 decimal places to avoid floating-point errors
   };
 
-  // Update total amount whenever selectedProducts changes
-  useEffect(() => {
-    if (autoCalculate) {
-      const calculatedTotal = calculateTotal(selectedProducts);
-      setFormData(prev => ({
-        ...prev,
-        total_amount: calculatedTotal > 0 ? calculatedTotal : undefined
-      }));
-    }
-  }, [selectedProducts, autoCalculate]);
-
-  const fetchShops = async () => {
-    try {
-      const response = await shopApi.getAll();
-      setShops(response.data);
-    } catch (error) {
-      console.error('Error fetching shops:', error);
-    }
-  };
-
-  const fetchProducts = async () => {
-    try {
-      const response = await productApi.getAll();
-      setProducts(response.data);
-    } catch (error) {
-      console.error('Error fetching products:', error);
-    }
-  };
-
-  const fetchShoppingEvent = async (eventId: number) => {
+  const fetchShoppingEvent = useCallback(async (eventId: number) => {
     try {
       setLoadingEvent(true);
       const response = await shoppingEventApi.getById(eventId);
@@ -116,6 +79,43 @@ const ShoppingEventForm: React.FC = () => {
     } finally {
       setLoadingEvent(false);
     }
+  }, []);
+
+  useEffect(() => {
+    fetchShops();
+    fetchProducts();
+    if (isEditMode && id) {
+      fetchShoppingEvent(parseInt(id));
+    }
+  }, [id, isEditMode, fetchShoppingEvent]);
+
+  // Update total amount whenever selectedProducts changes
+  useEffect(() => {
+    if (autoCalculate) {
+      const calculatedTotal = calculateTotal(selectedProducts);
+      setFormData(prev => ({
+        ...prev,
+        total_amount: calculatedTotal > 0 ? calculatedTotal : undefined
+      }));
+    }
+  }, [selectedProducts, autoCalculate]);
+
+  const fetchShops = async () => {
+    try {
+      const response = await shopApi.getAll();
+      setShops(response.data);
+    } catch (error) {
+      console.error('Error fetching shops:', error);
+    }
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const response = await productApi.getAll();
+      setProducts(response.data);
+    } catch (error) {
+      console.error('Error fetching products:', error);
+    }
   };
 
   const addProductToEvent = () => {
@@ -283,7 +283,7 @@ const ShoppingEventForm: React.FC = () => {
                     <option value={0}>Select a product</option>
                     {products.map(product => (
                       <option key={product.id} value={product.id}>
-                        {product.name}{product.organic ? '🌱' : ''} ({product.category}) {product.weight ? `${product.weight}${product.weight_unit}` : product.weight_unit}
+                        {product.name}{product.organic ? '🌱' : ''} ({product.grocery.category}) {product.weight ? `${product.weight}${product.weight_unit}` : product.weight_unit}
                       </option>
                     ))}
                   </select>