fix Grocery page, add Reminders context

components/pages/reminders/remindersList.tsx

@@ -6,14 +6,9 @@ import ButtonOutlined from "@/components/ui/ButtonOutlined";
 import AntDesign from "@expo/vector-icons/AntDesign";
 import Feather from "@expo/vector-icons/Feather";
 import { ScrollView } from "react-native-gesture-handler";
+import { IReminder, useRemindersContext } from "@/contexts/RemindersContext";
+
 
-interface Reminder {
-  title: string;
-  date: Date;
-  done: boolean;
-  isAutoRepeat: boolean;
-  remindIn: string;
-}
 
 const dateTimeDisplay = (date: Date) => {
   const day = String(date.getDate()).padStart(2, "0");
@@ -32,33 +27,12 @@ const dateTimeDisplay = (date: Date) => {
 };
 
 const RemindersList = () => {
+  const {reminders, addReminder, updateReminder} = useRemindersContext();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  const [reminders, setReminders] = useState<Reminder[]>([
-    {
-      title: "Shaving Time",
-      date: new Date(2023, 1, 30, 9, 30),
-      done: true,
-      isAutoRepeat: true,
-      remindIn: "just-in-time",
-    },
-    {
-      title: "Gonna get a food order",
-      date: new Date(2023, 1, 27),
-      done: false,
-      isAutoRepeat: true,
-      remindIn: "just-in-time",
-    },
-  ]);
-
   const handleModalClose = () => {
     setIsModalVisible(false);
   };
-
-  const addReminder = (newReminder: Reminder) => {
-    setReminders([...reminders, newReminder]);
-  };
-
   return (
     <ScrollView
       showsVerticalScrollIndicator={false}
@@ -103,10 +77,7 @@ const RemindersList = () => {
                 color="#f68d50"
                 value={reminder.done}
                 onValueChange={() => {
-                  const updatedReminders = reminders.map((item, i) =>
-                    i === index ? { ...item, done: !item.done } : item
-                  );
-                  setReminders(updatedReminders);
+                  updateReminder(reminder.id, {done: !reminder.done})
                 }}
               />
             </View>