mock add new reminder

components/pages/reminders/addReminderModal.tsx

@@ -20,7 +20,15 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 interface ReminderModalProps {
   visible: boolean;
   onClose: () => void;
-  /*onSave: (reminderText: string) => void;*/
+  onSave: (newReminder: Reminder) => void;
+}
+
+interface Reminder {
+  title: string;
+  date: Date;
+  done: boolean;
+  isAutoRepeat: boolean;
+  remindIn: string;
 }
 
 interface reminderOptions {
@@ -29,7 +37,7 @@ interface reminderOptions {
 }
 
 const AddReminderModal = (props: ReminderModalProps) => {
-  const { visible, onClose /*, onSave*/ } = props;
+  const { visible, onClose , onSave } = props;
   const [reminderTitle, setReminderTitle] = useState<string>("");
   const [time, setTime] = useState(new Date());
   const [autoRepeat, setAutoRepeat] = useState<boolean>(false);
@@ -45,6 +53,18 @@ const AddReminderModal = (props: ReminderModalProps) => {
     { label: "Remind me 1 day before", value: "1-day-before" },
   ];
 
+  const handleSave = () => {
+    const newReminder: Reminder = {
+      title: reminderTitle,
+      date: time,
+      done: false,
+      isAutoRepeat: autoRepeat,
+      remindIn: reminder
+    };
+    onSave(newReminder);
+    onClose(); 
+  };
+
   const handleDateTimeChange = (selectedTime: Date) => {
     setTime(selectedTime);
   };
@@ -78,13 +98,17 @@ const AddReminderModal = (props: ReminderModalProps) => {
           <View style={styles.iconTitle}>
             <View
               style={{
-                height: 25,
-                width: 25,
+                height: 27,
+                width: 27,
                 marginRight: 10,
                 borderRadius: 50,
                 backgroundColor: "#fcf4eb",
+                alignItems: "center",
+                justifyContent: "center",
               }}
-            />
+            >
+              <Feather name="scissors" size={14} color="black" />
+            </View>
             <TextField
               value={reminderTitle}
               onChangeText={(text) => setReminderTitle(text)}
@@ -97,35 +121,39 @@ const AddReminderModal = (props: ReminderModalProps) => {
         <View style={styles.inner}>
           <Text text70>Reminder Time</Text>
           <View style={styles.inputsBetween}>
-            <Feather name="calendar" size={20} color="black" />
             <DateTimePicker
               migrateDialog
               value={time}
               mode="date"
+              leadingAccessory={
+                <View>
+                  <Feather name="calendar" size={20} color="black" />
+                  <View style={{ marginRight: "75%" }} />
+                </View>
+              }
               onChange={handleDateTimeChange}
               text70
             />
           </View>
           <TouchableOpacity>
             <View style={styles.inputsBetween}>
-              <AntDesign name="clockcircleo" size={20} color="black" />
               <DateTimePicker
                 migrateDialog
                 value={time}
                 mode="time"
                 is24Hour={false}
                 onChange={handleDateTimeChange}
+                leadingAccessory={
+                  <View>
+                    <AntDesign name="clockcircleo" size={20} color="black" />
+                    <View style={{ marginRight: "70%" }} />
+                  </View>
+                }
                 text70
               />
             </View>
           </TouchableOpacity>
           <View style={styles.inputsStart}>
-            <Feather
-              name="bell"
-              size={19}
-              color="black"
-              style={{ marginRight: 7 }}
-            />
             <Picker
               text70
               value={reminder}
@@ -133,10 +161,18 @@ const AddReminderModal = (props: ReminderModalProps) => {
               useDialog
               fieldType="form"
               placeholder="Select a reminder"
+              leadingAccessory={
+                <Feather
+                  name="bell"
+                  size={19}
+                  color="black"
+                  style={{ marginRight: 7 }}
+                />
+              }
               trailingAccessory={
                 <Feather
                   name="chevron-down"
-                  style={{ marginLeft: "auto" }}
+                  style={{ marginLeft: "25%" }}
                   size={22}
                   color="black"
                 />
@@ -183,14 +219,15 @@ const AddReminderModal = (props: ReminderModalProps) => {
             <Button
               label="Cancel"
               style={styles.button}
-              color='black'
+              color="black"
+              onPress={onClose}
             />
             <Button
               label="Save"
               borderRadius={5}
               backgroundColor="#00c87e"
-              style={{width: '49%'}}
-              
+              style={{ width: "49%" }}
+              onPress={handleSave}
             />
           </View>
         </View>
@@ -214,7 +251,7 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     padding: 0,
     marginHorizontal: 0,
-    width:'49%'
+    width: "49%",
   },
   inner: {
     paddingHorizontal: 20,

components/pages/reminders/remindersList.tsx

@@ -3,36 +3,72 @@ import { StyleSheet } from "react-native";
 import { Button, Card, Checkbox, Text, View } from "react-native-ui-lib";
 import AddReminderModal from "./addReminderModal";
 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";
 
 interface Reminder {
   title: string;
-  date: string;
-  time: string;
+  date: Date;
   done: boolean;
+  isAutoRepeat: boolean;
+  remindIn: string;
 }
 
+const dateTimeDisplay = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+
+  return (
+    <Text text80>
+      {`${day}/${month}/${year}`}{" "}
+      <AntDesign name="star" size={14} color="lightgray" />{" "}
+      {`${hours}:${minutes}`}
+    </Text>
+  );
+};
+
 const RemindersList = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
+
   const [reminders, setReminders] = useState<Reminder[]>([
     {
       title: "Shaving Time",
-      date: "26/02/2023",
-      time: "09:30",
+      date: new Date(2023, 1, 30, 9, 30),
       done: true,
+      isAutoRepeat: true,
+      remindIn: "just-in-time",
     },
     {
       title: "Gonna get a food order",
-      date: "27/02/2023",
-      time: "10:30",
+      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 (
-    <View style={styles.listContainer}>
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+      style={styles.listContainer}
+    >
       <AddReminderModal
         visible={isModalVisible}
-        onClose={() => setIsModalVisible(false)}
+        onClose={handleModalClose}
+        onSave={addReminder}
       />
       <View
         style={{
@@ -54,12 +90,12 @@ const RemindersList = () => {
           <Card key={index} style={{ marginBottom: 10, padding: 15 }}>
             <View style={styles.card} row>
               <View row>
-                <View style={styles.icon} />
+                <View style={styles.icon}>
+                  <Feather name="scissors" size={24} color="black" />
+                </View>
                 <View>
                   <Text text70BL>{reminder.title}</Text>
-                  <Text text80>
-                    {reminder.date} {reminder.time}
-                  </Text>
+                  {dateTimeDisplay(reminder.date)}
                 </View>
               </View>
               <Checkbox
@@ -77,7 +113,7 @@ const RemindersList = () => {
           </Card>
         ))}
       </View>
-    </View>
+    </ScrollView>
   );
 };
 
@@ -90,6 +126,7 @@ const styles = StyleSheet.create({
     marginLeft: "8%",
     marginTop: "4%",
     marginRight: "4%",
+    maxHeight: '71%'
   },
   button: {
     backgroundColor: "white",
@@ -113,6 +150,8 @@ const styles = StyleSheet.create({
     height: 45,
     width: 45,
     backgroundColor: "#fcf4eb",
+    alignItems: "center",
+    justifyContent: "center",
     marginRight: 10,
   },
 });