feat: finish stas

presentation/react/components/Stats/Stats.tsx

@@ -1,18 +1,18 @@
 import { Card, Text } from "react-native-paper"
 import CircularProgress from "react-native-circular-progress-indicator"
 import { Agenda } from "react-native-calendars"
-import { useState } from "react"
+import type { SetStateAction } from "react"
+import { useState, useEffect } from "react"
 
 import { getNowDateUTC, getISODate } from "@/utils/dates"
 import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
+import type { HabitHistory } from "@/domain/entities/HabitHistory"
 
 export interface StatsProps {
   habitsTracker: HabitsTracker
 }
 
-export const Stats: React.FC<StatsProps> = (props) => {
+export const Stats: React.FC<StatsProps> = ({ habitsTracker }) => {
-  const { habitsTracker } = props
-
   const today = getNowDateUTC()
   const todayISO = getISODate(today)
 
@@ -21,81 +21,98 @@ export const Stats: React.FC<StatsProps> = (props) => {
 
   const habitsHistory = habitsTracker.getAllHabitsHistory()
 
-  let goalDays = 0
+  const [goalDays, setGoalDays] = useState(0)
-  let totalGoalDays = 0
+  const [totalGoalDays, setTotalGoalDays] = useState(0)
+  const [displayDaily, setDisplayDaily] = useState(true)
+  const [goalWeek, setGoalWeek] = useState(0)
+  const [totalGoalWeek, setTotalGoalWeek] = useState(0)
+  const [displayWeekly, setDisplayWeekly] = useState(true)
+  const [goalMonth, setGoalMonth] = useState(0)
+  const [totalGoalMonth, setTotalGoalMonth] = useState(0)
+  const [displayMonthly, setDisplayMonthly] = useState(true)
+
+  const updateStats = (date: Date): void => {
     const dailyHabits = habitsHistory.filter((el) => {
       return (
-      el.habit.goal.frequency === "daily" && el.habit.startDate <= selectedDate
+        el.habit.goal.frequency === "daily" &&
+        el.habit.startDate.getFullYear() <= date.getFullYear() &&
+        el.habit.startDate.getMonth() <= date.getMonth() &&
+        el.habit.startDate.getDate() <= date.getDate()
       )
     })
-  let displayDaily = true
-  if (dailyHabits.length === 0) {
-    displayDaily = false
-  } else {
-    for (const el of dailyHabits) {
-      totalGoalDays++
-      if (
-        el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
-        false
-      ) {
-        goalDays++
-      }
-    }
-  }
-
-  let goalWeek = 0
-  let totalGoalWeek = 0
     const weeklyHabits = habitsHistory.filter((el) => {
       return (
-      el.habit.goal.frequency === "weekly" && el.habit.startDate <= selectedDate
+        el.habit.goal.frequency === "weekly" &&
+        el.habit.startDate.getFullYear() <= date.getFullYear() &&
+        el.habit.startDate.getMonth() <= date.getMonth() &&
+        el.habit.startDate.getDate() <= date.getDate()
       )
     })
-
-  let displayWeekly = true
-  if (weeklyHabits.length === 0) {
-    displayWeekly = false
-  } else {
-    for (const el of weeklyHabits) {
-      totalGoalWeek++
-      if (
-        el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
-        false
-      ) {
-        goalWeek++
-      }
-    }
-  }
-
-  let goalMonth = 0
-  let totalGoalMonth = 0
     const monthlyHabits = habitsHistory.filter((el) => {
       return (
         el.habit.goal.frequency === "monthly" &&
-      el.habit.startDate <= selectedDate
+        el.habit.startDate.getFullYear() <= date.getFullYear() &&
+        el.habit.startDate.getMonth() <= date.getMonth() &&
+        el.habit.startDate.getDate() <= date.getDate()
       )
     })
 
-  let displayMonthly = true
+    const calculateGoals = (
-  if (monthlyHabits.length === 0) {
+      habits: HabitHistory[],
-    displayMonthly = false
+      setTotalGoals: {
+        (value: SetStateAction<number>): void
+        (value: SetStateAction<number>): void
+        (value: SetStateAction<number>): void
+        (arg0: any): void
+      },
+      setGoals: {
+        (value: SetStateAction<number>): void
+        (value: SetStateAction<number>): void
+        (value: SetStateAction<number>): void
+        (arg0: any): void
+      },
+    ): void => {
+      setTotalGoals(habits.length)
+      const completedGoals = habits.filter((el) => {
+        return (
+          el.getProgressesByDate(date)[0]?.goalProgress.isCompleted() ?? false
+        )
+      }).length
+      setGoals(completedGoals)
+    }
+
+    if (dailyHabits.length === 0) {
+      setDisplayDaily(false)
     } else {
-    for (const el of monthlyHabits) {
+      setDisplayDaily(true)
-      totalGoalMonth++
+      calculateGoals(dailyHabits, setTotalGoalDays, setGoalDays)
-      if (
+    }
-        el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
+
-        false
+    if (weeklyHabits.length === 0) {
-      ) {
+      setDisplayWeekly(false)
-        goalMonth++
+    } else {
-      }
+      setDisplayWeekly(true)
+      calculateGoals(weeklyHabits, setTotalGoalWeek, setGoalWeek)
+    }
+
+    if (monthlyHabits.length === 0) {
+      setDisplayMonthly(false)
+    } else {
+      setDisplayMonthly(true)
+      calculateGoals(monthlyHabits, setTotalGoalMonth, setGoalMonth)
     }
   }
 
+  useEffect(() => {
+    updateStats(selectedDate)
+  }, [selectedDate])
+
   return (
     <Agenda
       firstDay={1}
       showClosingKnob
       onDayPress={(date) => {
-        setSelectedDate(new Date(date.dateString))
+        return setSelectedDate(new Date(date.dateString))
       }}
       markedDates={{
         [todayISO]: { marked: true, today: true },
@@ -105,10 +122,11 @@ export const Stats: React.FC<StatsProps> = (props) => {
       renderList={() => {
         return (
           <>
-            {displayDaily ? (
             <Card key="statsDay" mode="outlined">
-                <Card.Title title="Sucess Day" />
+              <Card.Title title="Success Day" />
               <Card.Content>
+                {displayDaily ? (
+                  <>
                     <Text variant="bodyMedium">
                       {goalDays} but réussi dans la journée sur {totalGoalDays}
                     </Text>
@@ -120,13 +138,18 @@ export const Stats: React.FC<StatsProps> = (props) => {
                       titleColor="white"
                       title="%"
                     />
+                  </>
+                ) : (
+                  <Text variant="bodyMedium">Aucun objectif quotidien</Text>
+                )}
               </Card.Content>
             </Card>
-            ) : null}
+
-            {displayWeekly ? (
             <Card key="statsWeek" mode="outlined">
-                <Card.Title title="Sucess Week" />
+              <Card.Title title="Success Week" />
               <Card.Content>
+                {displayWeekly ? (
+                  <>
                     <Text variant="bodyMedium">
                       {goalWeek} but réussi dans la semaine sur {totalGoalWeek}
                     </Text>
@@ -138,13 +161,18 @@ export const Stats: React.FC<StatsProps> = (props) => {
                       titleColor="white"
                       title="%"
                     />
+                  </>
+                ) : (
+                  <Text variant="bodyMedium">Aucun objectif hebdomadaire</Text>
+                )}
               </Card.Content>
             </Card>
-            ) : null}
+
-            {displayMonthly ? (
             <Card key="statsMonth" mode="outlined">
-                <Card.Title title="Sucess Month" />
+              <Card.Title title="Success Month" />
               <Card.Content>
+                {displayMonthly ? (
+                  <>
                     <Text variant="bodyMedium">
                       {goalMonth} but réussi dans le mois sur {totalGoalMonth}
                     </Text>
@@ -156,9 +184,12 @@ export const Stats: React.FC<StatsProps> = (props) => {
                       titleColor="white"
                       title="%"
                     />
+                  </>
+                ) : (
+                  <Text variant="bodyMedium">Aucun objectif mensuel</Text>
+                )}
               </Card.Content>
             </Card>
-            ) : null}
           </>
         )
       }}