fix groceries, todo, calendar

components/pages/grocery/EditGroceryItem.tsx

@@ -1,28 +1,60 @@
-import { View, Text } from 'react-native'
-import React from 'react'
-import { TextField } from 'react-native-ui-lib'
-import CategoryDropdown from './CategoryDropdown'
-import { GroceryCategory } from '@/contexts/GroceryContext'
+import { View, Text } from "react-native";
+import React, { useEffect, useState } from "react";
+import { TextField } from "react-native-ui-lib";
+import {
+  GroceryCategory,
+  IGrocery,
+  useGroceryContext,
+} from "@/contexts/GroceryContext";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
-const EditGroceryItem = (props: {title: string, setTitle: (value: string) => void, setCategory: (category: GroceryCategory) => void}) => {
-  return (
-    <View
-          style={{
-            backgroundColor: "white",
-            width: "100%",
-            borderRadius: 25,
-            padding: 15,
-          }}
-        >
-          <TextField
-            placeholder="Grocery"
-            value={props.title}
-            onChangeText={(value) => props.setTitle(value)}
-            maxLength={25}
-          />
-          <CategoryDropdown setSelectedCategory={props.setCategory} />
-        </View>
-  )
+interface IEditGrocery {
+  id?: number;
+  title: string;
+  setTitle: (value: string) => void;
+  setCategory?: (category: GroceryCategory) => void;
+  category: GroceryCategory;
+  setSubmit?: (value: boolean) => void;
+  updateCategory?: (id: number, changes: Partial<IGrocery>) => void;
+  closeEdit?: (value: boolean) => void;
 }
 
-export default EditGroceryItem
+const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
+  const { fuzzyMatchGroceryCategory } = useGroceryContext();
+
+  useEffect(() => {
+    if (editGrocery.setCategory)
+      editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
+  }, [editGrocery.title]);
+
+  return (
+      <View
+        style={{
+          backgroundColor: "white",
+          width: "100%",
+          borderRadius: 25,
+          padding: 15,
+        }}
+      >
+        <TextField
+          placeholder="Grocery"
+          value={editGrocery.title}
+          onChangeText={(value) => {
+            editGrocery.setTitle(value);
+          }}
+          onSubmitEditing={() => {
+            if (editGrocery.setSubmit) editGrocery.setSubmit(true);
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+            if (editGrocery.updateCategory && editGrocery.id)
+              editGrocery.updateCategory(editGrocery.id, {
+                category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title
+              });
+          }}
+          maxLength={25}
+        />
+        <Text>{editGrocery.category}</Text>
+      </View>
+  );
+};
+
+export default EditGroceryItem;

components/pages/grocery/GroceryItem.tsx

@@ -17,6 +17,7 @@ import {
 import EditGroceryFrequency from "./EditGroceryFrequency";
 import { TextInput } from "react-native";
 import EditGroceryItem from "./EditGroceryItem";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 const GroceryItem = ({
   item,
@@ -31,6 +32,7 @@ const GroceryItem = ({
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
   const [newTitle, setNewTitle] = useState<string>("");
+  const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
 
   const handleTitleChange = (newTitle: string) => {
     updateGroceryItem(item.id, { title: newTitle });
@@ -46,6 +48,7 @@ const GroceryItem = ({
 
   return (
     <ListItem
+      key={item.id}
       style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
       backgroundColor="white"
       centerV
@@ -63,49 +66,24 @@ const GroceryItem = ({
         }}
       />
       <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
-        {/* <View
-          height={50}
-          width={50}
-          style={{ borderRadius: 15 }}
-          backgroundColor="#e6f1ed"
-          marginR-10
-          children={
-            <MaterialCommunityIcons
-              name={iconMapping[item.category]}
-              size={50}
-              color="orange"
-            />
-          }
-        />*/}
         {!isEditingTitle ? (
           <View>
             <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
               <Text text70BL>{item.title}</Text>
             </TouchableOpacity>
-           { /*
-            <TextInput
-              value={item.title}
-              onChangeText={handleTitleChange}
-              onBlur={() => {
-                setIsEditingTitle(false);
-                console.log(groceries);
-              }}
-              autoFocus
-              style={{
-                fontSize: 16,
-                padding: 0,
-                margin: 0,
-                fontWeight: "bold",
-              }}
-            />
-            */}
           </View>
         ) : (
-          <EditGroceryItem
-            title={item.title}
-            setTitle={handleTitleChange}
-            setCategory={handleCategoryChange}
-          />
+            <EditGroceryItem
+              editGrocery={{
+                id: item.id,
+                title: newTitle,
+                setTitle: setNewTitle,
+                category:category,
+                updateCategory: updateGroceryItem,
+                closeEdit: setIsEditingTitle,
+                setCategory: setCategory,
+              }}
+            />
         )}
       </ListItem.Part>
       <ListItem.Part right containerStyle={{ paddingEnd: 20 }}>

components/pages/grocery/GroceryList.tsx

@@ -31,6 +31,7 @@ const GroceryList = () => {
     GroceryCategory.Bakery
   );
   const [title, setTitle] = useState<string>("");
+  const [submit, setSubmitted] = useState<boolean>(false);
 
   // Group approved groceries by category
   const approvedGroceriesByCategory = approvedGroceries.reduce(
@@ -46,19 +47,27 @@ const GroceryList = () => {
   );
 
   useEffect(() => {
-    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);
+    if(submit){
+      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);
+        setSubmitted(false);
+        setTitle("");
+      }
     }
+  }, [submit]);
+
+  useEffect(() => {
+    /**/
   }, [category]);
 
   useEffect(() => {
@@ -67,7 +76,7 @@ const GroceryList = () => {
   }, [groceries]);
 
   return (
-    <View marginH-20>
+    <View marginH-20 marginB-20>
       <HeaderTemplate
         message={"Welcome to your grocery list"}
         isWelcome={false}
@@ -101,8 +110,8 @@ const GroceryList = () => {
             </Text>
           </View>
           <Button
-          backgroundColor='transparent'
-          paddingH-10
+            backgroundColor="transparent"
+            paddingH-10
             iconSource={() => (
               <MaterialIcons name="person-add-alt" size={24} color="gray" />
             )}
@@ -157,7 +166,15 @@ const GroceryList = () => {
         </View>
       </View>
       {isAddingGrocery && (
-        <EditGroceryItem title={title} setTitle={setTitle} setCategory={setCategory} />
+        <EditGroceryItem
+          editGrocery={{
+            title: title,
+            setCategory: setCategory,
+            category: category,
+            setTitle: setTitle,
+            setSubmit: setSubmitted
+          }}
+        />
       )}
 
       {/* Render Approved Groceries Grouped by Category */}