changes to groceries, todos

components/pages/grocery/GroceryList.tsx

@@ -1,38 +1,69 @@
 import { FlatList } from "react-native";
 import React, { useEffect, useState } from "react";
-import {
-  View,
-  Text,
-  ListItem,
-  Button,
-  TextField,
-  Picker,
-} from "react-native-ui-lib";
-import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
-import { useAuthContext } from "@/contexts/AuthContext";
-import AntDesign from "@expo/vector-icons/AntDesign";
-import AddGroceryItem from "./AddGroceryItem";
+import { View, Text, ListItem, Button, TextField } from "react-native-ui-lib";
 import GroceryItem from "./GroceryItem";
 import {
-  GroceryCategory,
   IGrocery,
+  GroceryCategory,
+  GroceryFrequency,
   useGroceryContext,
 } from "@/contexts/GroceryContext";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import CategoryDropdown from "./CategoryDropdown";
+import { MaterialIcons } from "@expo/vector-icons";
+import EditGroceryItem from "./EditGroceryItem";
 
 const GroceryList = () => {
-  const { groceries, updateGroceryItem, isAddingGrocery } = useGroceryContext();
+  const {
+    groceries,
+    updateGroceryItem,
+    isAddingGrocery,
+    setIsAddingGrocery,
+    addGrocery,
+  } = useGroceryContext();
   const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
-    groceries.filter((item) => item.approved == true)
+    groceries.filter((item) => item.approved === true)
   );
   const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
-    groceries.filter((item) => item.approved != true)
+    groceries.filter((item) => item.approved !== true)
+  );
+  const [category, setCategory] = useState<GroceryCategory>(
+    GroceryCategory.Bakery
+  );
+  const [title, setTitle] = useState<string>("");
+
+  // Group approved groceries by category
+  const approvedGroceriesByCategory = approvedGroceries.reduce(
+    (groups: any, item: IGrocery) => {
+      const category = item.category || "Uncategorized";
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(item);
+      return groups;
+    },
+    {}
   );
 
   useEffect(() => {
-    setapprovedGroceries(groceries.filter((item) => item.approved == true));
-    setPendingGroceries(groceries.filter((item) => item.approved != true));
+    if (title?.length > 2 && title?.length <= 25) {
+      addGrocery({
+        id: 0,
+        title: title,
+        category: category,
+        approved: false,
+        recurring: false,
+        frequency: GroceryFrequency.Never,
+        bought: false,
+      });
+
+      setIsAddingGrocery(false);
+    }
+  }, [category]);
+
+  useEffect(() => {
+    setapprovedGroceries(groceries.filter((item) => item.approved === true));
+    setPendingGroceries(groceries.filter((item) => item.approved !== true));
   }, [groceries]);
 
   return (
@@ -49,7 +80,7 @@ const GroceryList = () => {
           >
             <Text text70BL color="#46a80a">
               {approvedGroceries.length} list{" "}
-              {approvedGroceries.length == 1 ? (
+              {approvedGroceries.length === 1 ? (
                 <Text text70BL color="#46a80a">
                   item
                 </Text>
@@ -69,6 +100,13 @@ const GroceryList = () => {
               {pendingGroceries.length} pending
             </Text>
           </View>
+          <Button
+          backgroundColor='transparent'
+          paddingH-10
+            iconSource={() => (
+              <MaterialIcons name="person-add-alt" size={24} color="gray" />
+            )}
+          />
         </View>
       </HeaderTemplate>
 
@@ -119,25 +157,36 @@ const GroceryList = () => {
         </View>
       </View>
       {isAddingGrocery && (
-        <View
-          style={{
-            backgroundColor: "white",
-            width: "100%",
-            borderRadius: 25,
-            padding: 15,
-          }}
-        >
-          <TextField placeholder="Grocery" maxLength={25} />
-          <CategoryDropdown />
-        </View>
+        <EditGroceryItem title={title} setTitle={setTitle} setCategory={setCategory} />
       )}
+
+      {/* Render Approved Groceries Grouped by Category */}
       {approvedGroceries.length > 0 ? (
         <FlatList
-          data={approvedGroceries}
-          renderItem={({ item }) => (
-            <GroceryItem item={item} handleItemApproved={updateGroceryItem} />
+          data={Object.keys(approvedGroceriesByCategory)}
+          renderItem={({ item: category }) => (
+            <View key={category}>
+              {/* Render Category Header */}
+              <Text
+                text70M
+                style={{ marginVertical: 10, paddingHorizontal: 15 }}
+                color="#666"
+              >
+                {category}
+              </Text>
+              {/* Render Grocery Items for this Category */}
+              {approvedGroceriesByCategory[category].map(
+                (grocery: IGrocery) => (
+                  <GroceryItem
+                    key={grocery.id}
+                    item={grocery}
+                    handleItemApproved={updateGroceryItem}
+                  />
+                )
+              )}
+            </View>
           )}
-          keyExtractor={(item) => item.id.toString()}
+          keyExtractor={(category) => category}
         />
       ) : (
         <Text>No approved items.</Text>