From d596b37be5c8f60fb5966ab5cef9d5664460fbc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Mon, 20 May 2024 12:23:17 +0200
Subject: [PATCH] fix: handle empty habits list for a selected date

---
 domain/entities/HabitsTracker.ts              |  20 +++
 .../components/HabitsMainPage/HabitsList.tsx  | 117 ++++++++++++------
 .../HabitsMainPage/HabitsMainPage.tsx         |   1 -
 3 files changed, 96 insertions(+), 42 deletions(-)

diff --git a/domain/entities/HabitsTracker.ts b/domain/entities/HabitsTracker.ts
index e8b75ae..e7e62d9 100644
--- a/domain/entities/HabitsTracker.ts
+++ b/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))
+      )
+    })
+  }
 }
diff --git a/presentation/react-native/components/HabitsMainPage/HabitsList.tsx b/presentation/react-native/components/HabitsMainPage/HabitsList.tsx
index 20738f3..28abb12 100644
--- a/presentation/react-native/components/HabitsMainPage/HabitsList.tsx
+++ b/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>
-          {frequenciesFiltered.map((frequency) => {
-            return (
-              <List.Accordion
-                expanded={accordionExpanded[frequency]}
-                onPress={() => {
-                  setAccordionExpanded((old) => {
-                    return {
-                      ...old,
-                      [frequency]: !old[frequency],
-                    }
-                  })
-                }}
-                key={frequency}
-                title={capitalize(frequency)}
-                titleStyle={[
-                  {
-                    fontSize: 26,
-                  },
-                ]}
-              >
-                {habitsTracker.habitsHistory[frequency]
-                  .filter((habitItem) => {
-                    const startDate = new Date(habitItem.habit.startDate)
-                    startDate.setHours(0, 0, 0, 0)
+        <Text
+          style={{
+            fontWeight: "bold",
+            fontSize: 22,
+            textAlign: "center",
+            marginTop: 20,
+          }}
+        >
+          {selectedDate.toLocaleDateString("en-US", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </Text>
 
-                    return (
-                      startDate <= selectedDate &&
-                      (habitItem.habit.endDate == null ||
-                        (habitItem.habit.endDate != null &&
-                          habitItem.habit.endDate >= selectedDate))
-                    )
-                  })
-                  .map((item) => {
+        {frequenciesFiltered.length > 0 ? (
+          <List.Section>
+            {frequenciesFiltered.map((frequency) => {
+              return (
+                <List.Accordion
+                  expanded={accordionExpanded[frequency]}
+                  onPress={() => {
+                    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.Section>
+                </List.Accordion>
+              )
+            })}
+          </List.Section>
+        ) : (
+          <View
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              marginVertical: 6,
+            }}
+          >
+            <Text variant="titleLarge">No habits for this date</Text>
+          </View>
+        )}
       </ScrollView>
     </>
   )
diff --git a/presentation/react-native/components/HabitsMainPage/HabitsMainPage.tsx b/presentation/react-native/components/HabitsMainPage/HabitsMainPage.tsx
index f424beb..4546cea 100644
--- a/presentation/react-native/components/HabitsMainPage/HabitsMainPage.tsx
+++ b/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}
           />
         )
       }}