fix: handle empty habits list for a selected date

domain/entities/HabitsTracker.ts

@@ -76,4 +76,24 @@ export class HabitsTracker implements HabitsTrackerData {
       return habitHistory.habit.id === id
     })
   }
+
+  public getHabitsHistoriesByDate({
+    selectedDate,
+    frequency,
+  }: {
+    selectedDate: Date
+    frequency: GoalFrequency
+  }): HabitHistory[] {
+    return this.habitsHistory[frequency].filter((habitItem) => {
+      const startDate = new Date(habitItem.habit.startDate)
+      startDate.setHours(0, 0, 0, 0)
+
+      return (
+        startDate <= selectedDate &&
+        (habitItem.habit.endDate == null ||
+          (habitItem.habit.endDate != null &&
+            habitItem.habit.endDate >= selectedDate))
+      )
+    })
+  }
 }

presentation/react-native/components/HabitsMainPage/HabitsList.tsx

@@ -1,9 +1,10 @@
 import LottieView from "lottie-react-native"
 import { useRef, useState } from "react"
 import { Dimensions, ScrollView, View } from "react-native"
-import { Divider, List } from "react-native-paper"
+import { Divider, List, Text } from "react-native-paper"
 
-import type { GoalFrequency } from "@/domain/entities/Goal"
+import { GOAL_FREQUENCIES, type GoalFrequency } from "@/domain/entities/Goal"
+import type { HabitHistory } from "@/domain/entities/HabitHistory"
 import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
 import { capitalize } from "@/utils/strings"
 import confettiJSON from "../../../assets/confetti.json"
@@ -12,11 +13,10 @@ import { HabitCard } from "./HabitCard"
 export interface HabitsListProps {
   habitsTracker: HabitsTracker
   selectedDate: Date
-  frequenciesFiltered: GoalFrequency[]
 }
 
 export const HabitsList: React.FC<HabitsListProps> = (props) => {
-  const { habitsTracker, selectedDate, frequenciesFiltered } = props
+  const { habitsTracker, selectedDate } = props
 
   const [accordionExpanded, setAccordionExpanded] = useState<{
     [key in GoalFrequency]: boolean
@@ -28,6 +28,25 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
 
   const confettiRef = useRef<LottieView | null>(null)
 
+  const habitsHistoriesByFrequency: Record<GoalFrequency, HabitHistory[]> = {
+    daily: habitsTracker.getHabitsHistoriesByDate({
+      selectedDate,
+      frequency: "daily",
+    }),
+    weekly: habitsTracker.getHabitsHistoriesByDate({
+      selectedDate,
+      frequency: "weekly",
+    }),
+    monthly: habitsTracker.getHabitsHistoriesByDate({
+      selectedDate,
+      frequency: "monthly",
+    }),
+  }
+
+  const frequenciesFiltered = GOAL_FREQUENCIES.filter((frequency) => {
+    return habitsHistoriesByFrequency[frequency].length > 0
+  })
+
   return (
     <>
       <View
@@ -69,6 +88,23 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
       >
         <Divider />
 
+        <Text
+          style={{
+            fontWeight: "bold",
+            fontSize: 22,
+            textAlign: "center",
+            marginTop: 20,
+          }}
+        >
+          {selectedDate.toLocaleDateString("en-US", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </Text>
+
+        {frequenciesFiltered.length > 0 ? (
           <List.Section>
             {frequenciesFiltered.map((frequency) => {
               return (
@@ -90,19 +126,7 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
                     },
                   ]}
                 >
-                {habitsTracker.habitsHistory[frequency]
-                  .filter((habitItem) => {
-                    const startDate = new Date(habitItem.habit.startDate)
-                    startDate.setHours(0, 0, 0, 0)
-
-                    return (
-                      startDate <= selectedDate &&
-                      (habitItem.habit.endDate == null ||
-                        (habitItem.habit.endDate != null &&
-                          habitItem.habit.endDate >= selectedDate))
-                    )
-                  })
-                  .map((item) => {
+                  {habitsHistoriesByFrequency[frequency].map((item) => {
                     return (
                       <HabitCard
                         habitHistory={item}
@@ -116,6 +140,17 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
               )
             })}
           </List.Section>
+        ) : (
+          <View
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              marginVertical: 6,
+            }}
+          >
+            <Text variant="titleLarge">No habits for this date</Text>
+          </View>
+        )}
       </ScrollView>
     </>
   )

presentation/react-native/components/HabitsMainPage/HabitsMainPage.tsx

@@ -45,7 +45,6 @@ export const HabitsMainPage: React.FC<HabitsMainPageProps> = (props) => {
           <HabitsList
             habitsTracker={habitsTracker}
             selectedDate={selectedDate}
-            frequenciesFiltered={frequenciesFiltered}
           />
         )
       }}