fix Grocery page, add Reminders context

app/(auth)/grocery/index.tsx

@@ -1,22 +1,23 @@
 import { ScrollView } from "react-native";
-import { Button, Text, View } from "react-native-ui-lib";
+import { Button, FloatingButton, Text, View } from "react-native-ui-lib";
 import Octicons from "@expo/vector-icons/Octicons";
 import GroceryList from "@/components/pages/grocery/GroceryList";
 import AddGroceryItem from "@/components/pages/grocery/AddGroceryItem";
 import { useAuthContext } from "@/contexts/AuthContext";
-import { GroceryProvider } from "@/contexts/GroceryContext";
+import { GroceryProvider, useGroceryContext } from "@/contexts/GroceryContext";
 import TopDisplay from "@/components/pages/grocery/TopDisplay";
+import React from "react";
 
 export default function Screen() {
   return (
     <GroceryProvider>
       <View>
-        <AddGroceryItem />
         <TopDisplay />
         <View>
           <GroceryList />
         </View>
       </View>
+        <AddGroceryItem />
     </GroceryProvider>
   );
 }

app/(auth)/reminders/index.tsx

@@ -1,24 +1,27 @@
 import { Card, Text, View } from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import RemindersList from "@/components/pages/reminders/remindersList";
+import { RemindersProvider } from "@/contexts/RemindersContext";
 export default function Screen() {
   return (
-    <View height={"100%"} backgroundColor="#fdf8f5">
+    <RemindersProvider>
-      <View style={styles.banner} height={"27%"} flexS>
+      <View height={"100%"} backgroundColor="#fdf8f5">
-        <View style={styles.greetingContainer}>
+        <View style={styles.banner} height={"27%"} flexS>
-          <Text text70L color="white">
+          <View style={styles.greetingContainer}>
-            Good Morning,
+            <Text text70L color="white">
-          </Text>
+              Good Morning,
-          <Text color="white" text30BL>
+            </Text>
-            Hello Ryanae!
+            <Text color="white" text30BL>
-          </Text>
+              Hello Ryanae!
-        </View>
+            </Text>
-        <View centerV style={styles.footerContainer}>
+          </View>
-          <Text text30>😇</Text>
+          <View centerV style={styles.footerContainer}>
+            <Text text30>😇</Text>
+          </View>
         </View>
+        <RemindersList />
       </View>
-      <RemindersList />
+    </RemindersProvider>
-    </View>
   );
 }
 

components/pages/grocery/AddGroceryItem.tsx

@@ -48,8 +48,7 @@ const AddGroceryItem = () => {
       paddingH-25
       style={{
         position: "absolute",
-        bottom: -300,
+        bottom: 20,
-        right: 0,
         width: "100%",
         height: 60,
       }}
@@ -78,8 +77,8 @@ const AddGroceryItem = () => {
           <Button
             color="white"
             backgroundColor="#81a861"
-            label="Finish shopping"
+            label="finish shopping"
-            text70BL
+            text60L
             style={styles.finishShopBtn}
             enableShadow
             onPress={() => setIsShopping(false)}

components/pages/grocery/GroceryItem.tsx

@@ -38,7 +38,8 @@ const GroceryItem = ({
 
   return (
     <ListItem
-      backgroundColor="white"
+    backgroundColor="white"
+    padding-3
       onPress={() => {
         setOpenFreqEdit(true);
       }}

components/pages/grocery/GroceryList.tsx

@@ -13,6 +13,15 @@ const GroceryList = () => {
   return (
     <View>
       <FlatList
+        ItemSeparatorComponent={() => (
+          <View
+            style={{
+              height: 1.5,
+              backgroundColor: "#e0e0e0",
+              marginHorizontal: 15,
+            }}
+          />
+        )}
         data={groceries}
         renderItem={({ item }) => (
           <GroceryItem item={item} handleItemApproved={updateGroceryItem} />

components/pages/reminders/addReminderModal.tsx

@@ -90,7 +90,7 @@ const AddReminderModal = (props: ReminderModalProps) => {
           >
             <Text text70>Profiles</Text>
             <ButtonOutlined
-              title={"+ Add"}
+              title={"+ Tag"}
               size={Button.sizes.xSmall}
               onPress={() => {}}
             />

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) =>
+                  updateReminder(reminder.id, {done: !reminder.done})
-                    i === index ? { ...item, done: !item.done } : item
-                  );
-                  setReminders(updatedReminders);
                 }}
               />
             </View>

contexts/RemindersContext.tsx

@@ -0,0 +1,67 @@
+import { View, Text } from "react-native";
+import React, { createContext, useContext, useState } from "react";
+export interface IReminder {
+  id: number;
+  title: string;
+  date: Date;
+  done: boolean;
+  isAutoRepeat: boolean;
+  remindIn: string;
+}
+interface IRemindersContext {
+  reminders: IReminder[];
+  updateReminder: (id: number, changes: Partial<IReminder>) => void;
+  addReminder: (changes: Omit<IReminder, "id">) => void;
+}
+const RemindersContext = createContext<IRemindersContext | undefined>(
+  undefined
+);
+export const RemindersProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [reminders, setReminders] = useState<IReminder[]>([
+    {
+      id: 0,
+      title: "Shaving Time",
+      date: new Date(2023, 1, 30, 9, 30),
+      done: true,
+      isAutoRepeat: true,
+      remindIn: "just-in-time",
+    },
+    {
+      id: 1,
+      title: "Gonna get a food order",
+      date: new Date(2023, 1, 27),
+      done: false,
+      isAutoRepeat: true,
+      remindIn: "just-in-time",
+    },
+  ]);
+  const updateReminder = (id: number, changes: Partial<IReminder>) => {
+    setReminders((prevReminder) =>
+      prevReminder.map((reminder) =>
+        reminder.id === id ? { ...reminder, ...changes } : reminder
+      )
+    );
+  };
+  const addReminder = (newReminder: Omit<IReminder, "id">) => {
+    const newId =
+      reminders.length > 0 ? reminders[reminders.length - 1].id + 1 : 1;
+
+    const reminderWithId: IReminder = {
+      ...newReminder,
+      id: newId,
+    };
+
+    setReminders([...reminders, reminderWithId]);
+  };
+  return (
+    <RemindersContext.Provider
+      value={{ reminders, updateReminder, addReminder }}
+    >
+      {children}
+    </RemindersContext.Provider>
+  );
+};
+
+export const useRemindersContext = () => useContext(RemindersContext)!;