cally/components/pages/todos/ToDosList.tsx

import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import ToDoItem from "./ToDoItem";
import {
  addDays,
  format,
  isToday,
  isTomorrow,
  isWithinInterval,
} from "date-fns";
import { AntDesign } from "@expo/vector-icons";
import { IToDo } from "@/hooks/firebase/types/todoData";

const groupToDosByDate = (toDos: IToDo[]) => {
  let sortedTodos = toDos.sort((a, b) => a.date - b.date);
  return sortedTodos.reduce((groups, toDo) => {
    let dateKey;

    const isNext7Days = (date: Date) => {
      const today = new Date();
      return isWithinInterval(date, { start: today, end: addDays(today, 7) });
    };

    const isNext30Days = (date: Date) => {
      const today = new Date();
      return isWithinInterval(date, { start: today, end: addDays(today, 30) });
    };

    if (toDo.date === null) {
      dateKey = "No Date";
    } else if (isToday(toDo.date)) {
      dateKey = "Today";
    } else if (isTomorrow(toDo.date)) {
      dateKey = "Tomorrow";
    } else if (isNext7Days(toDo.date)) {
      dateKey = "Next 7 Days";
    } else if (isNext30Days(toDo.date)) {
      dateKey = "Next 30 Days";
    } else {
      dateKey = format(toDo.date, "EEE MMM dd");
    }

    if (!groups[dateKey]) {
      groups[dateKey] = [];
    }

    groups[dateKey].push(toDo);
    return groups;
  }, {} as { [key: string]: IToDo[] });
};

const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
  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"
  );

  return (
    <View marginB-402>
      {noDateToDos.length > 0 && (
        <View key="No Date">
          <View row spread paddingH-19 marginB-12>
            <Text
              text70
              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 isSettings={isSettings} 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),
        ];

        return (
          <View key={dateKey}>
            <TouchableOpacity
              onPress={() => toggleExpand(dateKey)}
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
                paddingHorizontal: 0,
                marginBottom: 4,
                marginTop: 15,
              }}
            >
              <Text
                style={{
                  fontFamily: "Manrope_700Bold",
                  fontSize: 15,
                  color: "#484848",
                }}
              >
                {dateKey}
              </Text>
              {!isExpanded && (
                <AntDesign name="caretright" size={24} color="#fd1575" />
              )}
              {isExpanded && (
                <AntDesign name="caretdown" size={24} color="#fd1575" />
              )}
            </TouchableOpacity>

            {isExpanded &&
              sortedToDos.map((item) => (
                <ToDoItem isSettings={isSettings} key={item.id} item={item} />
              ))}
          </View>
        );
      })}
    </View>
  );
};

export default ToDosList;