fix Grocery page, add Reminders context

components/pages/grocery/AddGroceryItem.tsx

@@ -48,8 +48,7 @@ const AddGroceryItem = () => {
       paddingH-25
       style={{
         position: "absolute",
-        bottom: -300,
-        right: 0,
+        bottom: 20,
         width: "100%",
         height: 60,
       }}
@@ -78,8 +77,8 @@ const AddGroceryItem = () => {
           <Button
             color="white"
             backgroundColor="#81a861"
-            label="Finish shopping"
-            text70BL
+            label="finish shopping"
+            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) =>
-                    i === index ? { ...item, done: !item.done } : item
-                  );
-                  setReminders(updatedReminders);
+                  updateReminder(reminder.id, {done: !reminder.done})
                 }}
               />
             </View>