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,40 +88,45 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
       >
         <Divider />
 
-        <List.Section>
+        <Text
-          {frequenciesFiltered.map((frequency) => {
+          style={{
-            return (
+            fontWeight: "bold",
-              <List.Accordion
+            fontSize: 22,
-                expanded={accordionExpanded[frequency]}
+            textAlign: "center",
-                onPress={() => {
+            marginTop: 20,
-                  setAccordionExpanded((old) => {
+          }}
-                    return {
+        >
-                      ...old,
+          {selectedDate.toLocaleDateString("en-US", {
-                      [frequency]: !old[frequency],
+            weekday: "long",
-                    }
+            year: "numeric",
-                  })
+            month: "long",
-                }}
+            day: "numeric",
-                key={frequency}
+          })}
-                title={capitalize(frequency)}
+        </Text>
-                titleStyle={[
-                  {
-                    fontSize: 26,
-                  },
-                ]}
-              >
-                {habitsTracker.habitsHistory[frequency]
-                  .filter((habitItem) => {
-                    const startDate = new Date(habitItem.habit.startDate)
-                    startDate.setHours(0, 0, 0, 0)
 
-                    return (
+        {frequenciesFiltered.length > 0 ? (
-                      startDate <= selectedDate &&
+          <List.Section>
-                      (habitItem.habit.endDate == null ||
+            {frequenciesFiltered.map((frequency) => {
-                        (habitItem.habit.endDate != null &&
+              return (
-                          habitItem.habit.endDate >= selectedDate))
+                <List.Accordion
-                    )
+                  expanded={accordionExpanded[frequency]}
-                  })
+                  onPress={() => {
-                  .map((item) => {
+                    setAccordionExpanded((old) => {
+                      return {
+                        ...old,
+                        [frequency]: !old[frequency],
+                      }
+                    })
+                  }}
+                  key={frequency}
+                  title={capitalize(frequency)}
+                  titleStyle={[
+                    {
+                      fontSize: 26,
+                    },
+                  ]}
+                >
+                  {habitsHistoriesByFrequency[frequency].map((item) => {
                     return (
                       <HabitCard
                         habitHistory={item}
@@ -112,10 +136,21 @@ export const HabitsList: React.FC<HabitsListProps> = (props) => {
                       />
                     )
                   })}
-              </List.Accordion>
+                </List.Accordion>
-            )
+              )
-          })}
+            })}
-        </List.Section>
+          </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}
           />
         )
       }}