- Implemented optimistic update when completing todos and groceries to avoid delays

components/pages/grocery/GroceryItem.tsx

@@ -1,12 +1,11 @@
 import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { AntDesign } from "@expo/vector-icons";
 import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
 import EditGroceryFrequency from "./EditGroceryFrequency";
 import EditGroceryItem from "./EditGroceryItem";
 import { ImageBackground, StyleSheet } from "react-native";
 import { IGrocery } from "@/hooks/firebase/types/groceryData";
-import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useGetUserById } from "@/hooks/firebase/useGetUserById";
 import { useDeleteGrocery } from "@/hooks/firebase/useDeleteGrocery";
@@ -15,10 +14,14 @@ const GroceryItem = ({
   item,
   handleItemApproved,
   onInputFocus,
+  approvedGroceries,
+  setApprovedGroceries
 }: {
   item: IGrocery;
   handleItemApproved: (id: string, changes: Partial<IGrocery>) => void;
   onInputFocus: (y: number) => void;
+  approvedGroceries?: Array<IGrocery>,
+  setApprovedGroceries?: Function
 }) => {
   const { updateGroceryItem } = useGroceryContext();
   const { mutateAsync: deleteGrocery } = useDeleteGrocery();
@@ -150,9 +153,11 @@ const GroceryItem = ({
                   borderRadius={50}
                   color="#fd1575"
                   hitSlop={20}
-                  onValueChange={() =>
+                  onValueChange={() => {
+                    const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
+                    setApprovedGroceries(updatedApprovedGroceries);
                     updateGroceryItem({ id: item.id, bought: !item.bought })
-                  }
+                  }}
                 />
               </View>
           )