add To Dos

components/pages/todos/ToDoItem.tsx

@@ -0,0 +1,36 @@
+import { View, Text, Checkbox } from "react-native-ui-lib";
+import React from "react";
+import { IToDo } from "@/contexts/ToDosContext";
+import { Ionicons } from "@expo/vector-icons";
+
+const ToDoItem = (props: { item: IToDo }) => {
+  return (
+    <View centerV backgroundColor="white" padding-15 paddingH-45>
+      <View centerV backgroundColor="white" row spread>
+        <Text text70>{props.item.title}</Text>
+        <Checkbox value={props.item.done} />
+      </View>
+      <View centerH paddingV-5>
+        <View centerV height={1} width={"100%"} backgroundColor="#e7e7e7" centerH />
+      </View>
+      <View centerH row spread>
+        {props.item.points && props.item.points > 0 ? (
+          <View centerV row>
+            <Ionicons name="gift-outline" size={20} color="#46a80a" />
+            <Text color="#46a80a">{props.item.points} points</Text>
+          </View>
+        ) : (
+          <View />
+        )}
+        <View
+          height={25}
+          width={25}
+          backgroundColor="red"
+          style={{ borderRadius: 50 }}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ToDoItem;

components/pages/todos/ToDosList.tsx

@@ -0,0 +1,51 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
+import ToDoItem from "./ToDoItem";
+import { format, isToday, isTomorrow } from "date-fns";
+import { ScrollView } from "react-native-gesture-handler";
+
+const groupToDosByDate = (toDos: IToDo[]) => {
+    return toDos.reduce((groups, toDo) => {
+      const dateKey = isToday(toDo.date)
+        ? "Today • " + format(toDo.date, "EEE MMM dd")
+        : isTomorrow(toDo.date)
+        ? "Tomorrow • " + format(toDo.date, "EEE MMM dd")
+        : format(toDo.date, "EEE MMM dd");
+  
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+  
+      groups[dateKey].push(toDo);
+      return groups;
+    }, {} as { [key: string]: IToDo[] });
+  };
+
+const ToDosList = () => {
+  const { toDos } = useToDosContext();
+  const groupedToDos = groupToDosByDate(toDos);
+
+  return (
+    <View>
+      {Object.keys(groupedToDos).map((dateKey) => (
+        <View key={dateKey}>
+          <Text text70 style={{ fontWeight: "bold", marginVertical: 8, paddingHorizontal: 20}}>
+            {dateKey}
+          </Text>
+          {groupedToDos[dateKey].map((item) => (
+            <ToDoItem key={item.id} item={item} />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default ToDosList;
+
+/*const groupToDosByDate = (toDos: IToDo[]) => {
+    return toDos.reduce((groups, toDo) => {
+        const dateKey 
+    })
+}*/

components/shared/HeaderTemplate.tsx

@@ -0,0 +1,18 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { useAuthContext } from "@/contexts/AuthContext";
+
+const HeaderTemplate = (props: { message: string }) => {
+  const { user, profileData } = useAuthContext();
+  return (
+    <View row centerV padding-25>
+      <View backgroundColor="pink" height={65} width={65} style={{borderRadius: 22}} marginR-20 />
+      <View>
+        <Text text70L>Welcome, {user?.email}!</Text>
+        <Text text70BL>{props.message}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default HeaderTemplate;