todos collapse

app/(auth)/_layout.tsx

@@ -90,7 +90,7 @@ export default function TabLayout() {
                 />*/}
                 <DrawerButton
                   color="#8005eb"
-                  title={"To Dos"}
+                  title={"To Do's"}
                   bgColor={"#f3e6fd"}
                   pressFunc={() => props.navigation.navigate("todos")}
                   icon={
@@ -197,7 +197,7 @@ export default function TabLayout() {
         name="todos"
         options={{
           drawerLabel: "To-Do",
-          title: "To-Do",
+          title: "To-Do's",
         }}
       />
     </Drawer>

components/pages/todos/AddChore.tsx

@@ -44,7 +44,7 @@ const AddChore = () => {
         >
           <AntDesign name="plus" size={24} color="white" />
           <Text white text60R marginL-10>
-            Add to do
+            Add To Do
           </Text>
         </Button>
       </View>

components/pages/todos/ToDosList.tsx

@@ -1,8 +1,10 @@
-import { View, Text } from "react-native-ui-lib";
+import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
-import React from "react";
+import React, { useState } from "react";
 import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
-import { format, isToday, isTomorrow } from "date-fns"; 
+import { format, isToday, isTomorrow } from "date-fns";
+import DropModalIcon from "@/assets/svgs/DropModalIcon";
+import { AntDesign } from "@expo/vector-icons";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
   return toDos.reduce((groups, toDo) => {
@@ -31,23 +33,53 @@ const ToDosList = () => {
   const { toDos } = useToDosContext();
   const groupedToDos = groupToDosByDate(toDos);
 
+  const [expandedGroups, setExpandedGroups] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const [expandNoDate, setExpandNoDate] = useState<boolean>(true);
+
+  const toggleExpand = (dateKey: string) => {
+    setExpandedGroups((prev) => ({
+      ...prev,
+      [dateKey]: !prev[dateKey],
+    }));
+  };
+
   const noDateToDos = groupedToDos["No Date"] || [];
-  const datedToDos = Object.keys(groupedToDos).filter((key) => key !== "No Date");
+  const datedToDos = Object.keys(groupedToDos).filter(
+    (key) => key !== "No Date"
+  );
 
   return (
-    <View marginB-140>
+    <View marginB-402>
-
       {noDateToDos.length > 0 && (
         <View key="No Date">
-          {noDateToDos
+          <View row spread paddingH-19 marginB-12>
-            .sort((a, b) => Number(a.done) - Number(b.done))
+            <Text
-            .map((item) => (
+              text70
-              <ToDoItem key={item.id} item={item} />
+              style={{
-            ))}
+                fontWeight: "bold",
+              }}
+            >
+              Unscheduled
+            </Text>
+            {!expandNoDate && (
+                <AntDesign name="caretright" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
+              )}
+              {expandNoDate && (
+                <AntDesign name="caretdown" size={24} color="#fd1575" onPress={() => {setExpandNoDate(!expandNoDate)}}/>
+              )}
+          </View>
+          {expandNoDate &&
+            noDateToDos
+              .sort((a, b) => Number(a.done) - Number(b.done))
+              .map((item) => <ToDoItem key={item.id} item={item} />)}
         </View>
       )}
 
       {datedToDos.map((dateKey) => {
+        const isExpanded = expandedGroups[dateKey] || false;
         const sortedToDos = [
           ...groupedToDos[dateKey].filter((toDo) => !toDo.done),
           ...groupedToDos[dateKey].filter((toDo) => toDo.done),
@@ -55,19 +87,34 @@ const ToDosList = () => {
 
         return (
           <View key={dateKey}>
-            <Text
+            <TouchableOpacity
-              text70
+              onPress={() => toggleExpand(dateKey)}
               style={{
-                fontWeight: "bold",
+                flexDirection: "row",
-                marginVertical: 8,
+                justifyContent: "space-between",
+                alignItems: "center",
                 paddingHorizontal: 20,
+                marginVertical: 8,
               }}
             >
-              {dateKey}
+              <Text
-            </Text>
+                text70
-            {sortedToDos.map((item) => (
+                style={{
-              <ToDoItem key={item.id} item={item} />
+                  fontWeight: "bold",
-            ))}
+                }}
+              >
+                {dateKey}
+              </Text>
+              {!isExpanded && (
+                <AntDesign name="caretright" size={24} color="#fd1575" />
+              )}
+              {isExpanded && (
+                <AntDesign name="caretdown" size={24} color="#fd1575" />
+              )}
+            </TouchableOpacity>
+
+            {isExpanded &&
+              sortedToDos.map((item) => <ToDoItem key={item.id} item={item} />)}
           </View>
         );
       })}