changes to groceries, todos

components/pages/grocery/GroceryItem.tsx

@@ -9,9 +9,14 @@ import React, { useEffect, useState } from "react";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";
 import { ListItem } from "react-native-ui-lib";
-import { IGrocery, useGroceryContext } from "@/contexts/GroceryContext";
+import {
+  GroceryCategory,
+  IGrocery,
+  useGroceryContext,
+} from "@/contexts/GroceryContext";
 import EditGroceryFrequency from "./EditGroceryFrequency";
 import { TextInput } from "react-native";
+import EditGroceryItem from "./EditGroceryItem";
 
 const GroceryItem = ({
   item,
@@ -20,8 +25,7 @@ const GroceryItem = ({
   item: IGrocery;
   handleItemApproved: (id: number, changes: Partial<IGrocery>) => void;
 }) => {
-  const { updateGroceryItem, groceries } =
-    useGroceryContext();
+  const { updateGroceryItem, groceries } = useGroceryContext();
 
   const { profileType } = useAuthContext();
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
@@ -32,16 +36,20 @@ const GroceryItem = ({
     updateGroceryItem(item.id, { title: newTitle });
   };
 
+  const handleCategoryChange = (newCategory: GroceryCategory) => {
+    updateGroceryItem(item.id, { category: newCategory });
+  };
+
   useEffect(() => {
     setNewTitle(item.title);
   }, []);
 
   return (
     <ListItem
-    style={{borderRadius: 50, marginVertical: 5, height: 55}}
-    backgroundColor="white"
-    centerV
-    padding-0
+      style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
+      backgroundColor="white"
+      centerV
+      padding-0
       onPress={() => {
         setOpenFreqEdit(true);
       }}
@@ -55,7 +63,7 @@ const GroceryItem = ({
         }}
       />
       <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
-       {/* <View
+        {/* <View
           height={50}
           width={50}
           style={{ borderRadius: 15 }}
@@ -69,12 +77,12 @@ const GroceryItem = ({
             />
           }
         />*/}
-        <View>
-          {!isEditingTitle ? (
+        {!isEditingTitle ? (
+          <View>
             <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
               <Text text70BL>{item.title}</Text>
             </TouchableOpacity>
-          ) : (
+           { /*
             <TextInput
               value={item.title}
               onChangeText={handleTitleChange}
@@ -90,8 +98,15 @@ const GroceryItem = ({
                 fontWeight: "bold",
               }}
             />
-          )}
-        </View>
+            */}
+          </View>
+        ) : (
+          <EditGroceryItem
+            title={item.title}
+            setTitle={handleTitleChange}
+            setCategory={handleCategoryChange}
+          />
+        )}
       </ListItem.Part>
       <ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
         {!item.approved ? (