feat: stats v1

presentation/react/components/Stats/Stats.tsx

@@ -1,9 +1,9 @@
-import { SafeAreaView } from "react-native-safe-area-context"
 import { Card, Text } from "react-native-paper"
 import CircularProgress from "react-native-circular-progress-indicator"
-import { ScrollView } from "react-native"
+import { Agenda } from "react-native-calendars"
-import { Calendar } from "react-native-calendars"
+import { useState } from "react"
 
+import { getNowDate, getISODate } from "@/utils/dates"
 import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
 
 export interface StatsProps {
@@ -13,23 +13,107 @@ export interface StatsProps {
 export const Stats: React.FC<StatsProps> = (props) => {
   const { habitsTracker } = props
 
-  const habitsHistory = habitsTracker.getAllHabitsHistory()
+  const today = getNowDate()
-  return (
+  const todayISO = getISODate(today)
-    <SafeAreaView>
-      <ScrollView>
-        <Calendar />
 
-        {habitsHistory.map((element) => {
+  const [selectedDate, setSelectedDate] = useState<Date>(today)
-          if (element.habit.goal.frequency === "daily") {
+  const selectedDateISO = getISODate(selectedDate)
+
+  const habitsHistory = habitsTracker.getAllHabitsHistory()
+
+  let goalDays = 0
+  let totalGoalDays = 0
+  const dailyHabits = habitsHistory.filter((el) => {
     return (
-              <Card key={element.habit.id} mode="outlined">
+      el.habit.goal.frequency === "daily" && el.habit.startDate <= selectedDate
-                <Card.Title title="Sucess Week" />
+    )
+  })
+  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
+    )
+  })
+
+  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
+    )
+  })
+
+  let displayMonthly = true
+  if (monthlyHabits.length === 0) {
+    displayMonthly = false
+  } else {
+    for (const el of monthlyHabits) {
+      totalGoalMonth++
+      if (
+        el.getProgressesByDate(selectedDate)[0]?.goalProgress.isCompleted() ??
+        false
+      ) {
+        goalMonth++
+      }
+    }
+  }
+
+  return (
+    <Agenda
+      firstDay={1}
+      showClosingKnob
+      onDayPress={(date) => {
+        setSelectedDate(new Date(date.dateString))
+      }}
+      markedDates={{
+        [todayISO]: { marked: true, today: true },
+      }}
+      maxDate={todayISO}
+      selected={selectedDateISO}
+      renderList={() => {
+        return (
+          <>
+            {displayDaily ? (
+              <Card key="statsDay" mode="outlined">
+                <Card.Title title="Sucess Day" />
                 <Card.Content>
                   <Text variant="bodyMedium">
-                    nbDays Sucess dans la semaine
+                    {goalDays} but réussi dans la journée sur {totalGoalDays}
                   </Text>
                   <CircularProgress
-                    value={91}
+                    value={(goalDays / totalGoalDays) * 100}
                     activeStrokeWidth={12}
                     progressValueColor={"#ecf0f1"}
                     circleBackgroundColor="black"
@@ -38,31 +122,46 @@ export const Stats: React.FC<StatsProps> = (props) => {
                   />
                 </Card.Content>
               </Card>
-            )
+            ) : null}
-          }
+            {displayWeekly ? (
-          if (element.habit.goal.frequency === "weekly") {
+              <Card key="statsWeek" mode="outlined">
-            return (
+                <Card.Title title="Sucess Week" />
-              <Card key={element.habit.id} mode="outlined">
-                <Card.Title title="Sucess Month" />
                 <Card.Content>
-                  <Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
+                  <Text variant="bodyMedium">
+                    {goalWeek} but réussi dans la semaine sur {totalGoalWeek}
+                  </Text>
+                  <CircularProgress
+                    value={(goalWeek / totalGoalWeek) * 100}
+                    activeStrokeWidth={12}
+                    progressValueColor={"#ecf0f1"}
+                    circleBackgroundColor="black"
+                    titleColor="white"
+                    title="%"
+                  />
                 </Card.Content>
               </Card>
-            )
+            ) : null}
-          }
+            {displayMonthly ? (
-          if (element.habit.goal.frequency === "monthly") {
+              <Card key="statsMonth" mode="outlined">
-            return (
-              <Card key={element.habit.id} mode="outlined">
                 <Card.Title title="Sucess Month" />
                 <Card.Content>
-                  <Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
+                  <Text variant="bodyMedium">
+                    {goalMonth} but réussi dans le mois sur {totalGoalMonth}
+                  </Text>
+                  <CircularProgress
+                    value={(goalMonth / totalGoalMonth) * 100}
+                    activeStrokeWidth={12}
+                    progressValueColor={"#ecf0f1"}
+                    circleBackgroundColor="black"
+                    titleColor="white"
+                    title="%"
+                  />
                 </Card.Content>
               </Card>
+            ) : null}
+          </>
         )
-          }
+      }}
-          return null
+    />
-        })}
-      </ScrollView>
-    </SafeAreaView>
   )
 }