add To Dos

app/(auth)/todos/index.tsx

@@ -1,7 +1,20 @@
-import {View} from "react-native-ui-lib";
+import ToDoItem from "@/components/pages/todos/ToDoItem";
+import ToDosList from "@/components/pages/todos/ToDosList";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
+import { ScrollView } from "react-native-gesture-handler";
+import { View } from "react-native-ui-lib";
 
 export default function Screen() {
-    return (
+  return (
-        <View/>
+    <ToDosContextProvider>
-    )
+      <ScrollView>
-}
+        <View backgroundColor="white">
+          <HeaderTemplate message="Here are your To Do's" />
+          <ToDosList />
+        </View>
+      </ScrollView>
+    </ToDosContextProvider>
+  );
+}

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;

contexts/ToDosContext.tsx

@@ -0,0 +1,59 @@
+import { createContext, FC, ReactNode, useContext, useState } from "react";
+export interface IToDo {
+  id: number;
+  title: string;
+  done: boolean;
+  date: Date;
+  points?: number;
+}
+interface IToDosContext {
+  toDos: IToDo[];
+  updateToDo: (id: number, changes: Partial<IToDo>) => void;
+}
+
+const ToDosContext = createContext<IToDosContext>(undefined!);
+
+export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [toDos, setToDos] = useState<IToDo[]>([
+    { id: 0, title: "Pay: Credit card", done: false, date: new Date() },
+    { id: 1, title: "Monthly Log story", done: false, date: new Date() },
+    { id: 2, title: "Write: Arcade Highlights", done: false, date: new Date() },
+    {
+      id: 3,
+      title: "Dressup: Cat",
+      done: false,
+      date: new Date(Date.now() + 86400000),
+      points: 40,
+    },
+    {
+      id: 4,
+      title: "Trim: Nails",
+      done: false,
+      date: new Date(Date.now() + 86400000),
+    },
+    {
+      id: 5,
+      title: "Monthly Log",
+      done: false,
+      date: new Date(Date.now() + 2 * 86400000),
+    },
+    {
+      id: 6,
+      title: "Do it",
+      done: false,
+      date: new Date(Date.now() + 3 * 86400000),
+    },
+  ]);
+
+  const updateToDo = (id: number, changes: Partial<IToDo>) => {};
+
+  return (
+    <ToDosContext.Provider value={{ toDos, updateToDo }}>
+      {children}
+    </ToDosContext.Provider>
+  );
+};
+
+export const useToDosContext = () => useContext(ToDosContext)!;

package-lock.json

@@ -18,6 +18,7 @@
         "@react-native-firebase/functions": "^20.4.0",
         "@react-navigation/drawer": "^6.7.2",
         "@react-navigation/native": "^6.0.2",
+        "date-fns": "^3.6.0",
         "expo": "~51.0.24",
         "expo-build-properties": "~0.12.4",
         "expo-constants": "~16.0.2",
@@ -10562,19 +10563,13 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.30.0",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
       "funding": {
-        "type": "opencollective",
+        "type": "github",
-        "url": "https://opencollective.com/date-fns"
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/dayjs": {
@@ -19598,6 +19593,22 @@
         "color-string": "^1.6.0"
       }
     },
+    "node_modules/react-native-ui-lib/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/react-native-ui-lib/node_modules/semver": {
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "@react-native-firebase/functions": "^20.4.0",
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.0.2",
+    "date-fns": "^3.6.0",
     "expo": "~51.0.24",
     "expo-build-properties": "~0.12.4",
     "expo-constants": "~16.0.2",

yarn.lock

@@ -4640,6 +4640,11 @@ date-fns@^2.29.3:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 dayjs@^1.11.10, dayjs@^1.8.15:
   version "1.11.13"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"