feat: group habits history by frequencies (daily, weekly, monthly)

app/application/habits/index.tsx

@@ -21,7 +21,7 @@ const HabitsPage: React.FC = () => {
       {retrieveHabitsTracker.state === "loading" ? (
         <ActivityIndicator animating size="large" />
       ) : (
-        <HabitsHistory habitsHistory={habitsTracker.habitsHistory} />
+        <HabitsHistory habitsTracker={habitsTracker} />
       )}
     </SafeAreaView>
   )

domain/entities/HabitsTracker.ts

@@ -1,11 +1,14 @@
+import type { GoalFrequency } from "./Goal"
 import type { HabitHistory } from "./HabitHistory"
 
 export interface HabitsTrackerData {
-  habitsHistory: HabitHistory[]
+  habitsHistory: {
+    [key in GoalFrequency]: HabitHistory[]
+  }
 }
 
 export class HabitsTracker implements HabitsTrackerData {
-  public habitsHistory: HabitHistory[]
+  public habitsHistory: HabitsTrackerData["habitsHistory"]
 
   public constructor(options: HabitsTrackerData) {
     const { habitsHistory } = options
@@ -13,6 +16,12 @@ export class HabitsTracker implements HabitsTrackerData {
   }
 
   public static default(): HabitsTracker {
-    return new HabitsTracker({ habitsHistory: [] })
+    return new HabitsTracker({
+      habitsHistory: {
+        daily: [],
+        weekly: [],
+        monthly: [],
+      },
+    })
   }
 }

domain/use-cases/RetrieveHabitsTracker.ts

@@ -1,4 +1,5 @@
 import { HabitHistory } from "../entities/HabitHistory"
+import type { HabitsTrackerData } from "../entities/HabitsTracker"
 import { HabitsTracker } from "../entities/HabitsTracker"
 import type { User } from "../entities/User"
 import type { GetHabitProgressHistoryRepository } from "../repositories/GetHabitProgressHistory"
@@ -44,8 +45,23 @@ export class RetrieveHabitsTrackerUseCase
         })
       }),
     )
+    const habitsHistory = habitProgressHistories.reduce<
+      HabitsTrackerData["habitsHistory"]
+    >(
+      (accumulator, habitHistory) => {
+        const { habit } = habitHistory
+        const frequency = habit.goal.frequency
+        accumulator[frequency].push(habitHistory)
+        return accumulator
+      },
+      {
+        daily: [],
+        weekly: [],
+        monthly: [],
+      },
+    )
     const habitsTracker = new HabitsTracker({
-      habitsHistory: habitProgressHistories,
+      habitsHistory,
     })
     return habitsTracker
   }

presentation/presenters/utils/strings.ts

@@ -0,0 +1,3 @@
+export const capitalize = (string: string): string => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}

presentation/react/components/HabitsHistory/HabitsHistory.tsx

@@ -1,30 +1,65 @@
 import { FlatList } from "react-native"
 import { List } from "react-native-paper"
+import { useState } from "react"
 
-import type { HabitHistory as HabitHistoryType } from "@/domain/entities/HabitHistory"
+import type { GoalFrequency } from "@/domain/entities/Goal"
+import { GOAL_FREQUENCIES } from "@/domain/entities/Goal"
+import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
+import { capitalize } from "@/presentation/presenters/utils/strings"
 import { HabitHistory } from "./HabitHistory"
 
 export interface HabitsHistoryProps {
-  habitsHistory: HabitHistoryType[]
+  habitsTracker: HabitsTracker
 }
 
 export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
-  const { habitsHistory } = props
+  const { habitsTracker } = props
+
+  const [accordionExpanded, setAccordionExpanded] = useState<{
+    [key in GoalFrequency]: boolean
+  }>({
+    daily: true,
+    weekly: true,
+    monthly: true,
+  })
 
   return (
     <List.Section
       style={[
         {
-          width: "90%",
+          width: "92%",
         },
       ]}
     >
-      <FlatList
-        data={habitsHistory}
-        renderItem={({ item }) => {
-          return <HabitHistory habitHistory={item} />
-        }}
-      />
+      {GOAL_FREQUENCIES.map((frequency) => {
+        return (
+          <List.Accordion
+            expanded={accordionExpanded[frequency]}
+            onPress={() => {
+              setAccordionExpanded((old) => {
+                return {
+                  ...old,
+                  [frequency]: !old[frequency],
+                }
+              })
+            }}
+            key={frequency}
+            title={capitalize(frequency)}
+            titleStyle={[
+              {
+                fontSize: 26,
+              },
+            ]}
+          >
+            <FlatList
+              data={habitsTracker.habitsHistory[frequency]}
+              renderItem={({ item }) => {
+                return <HabitHistory habitHistory={item} />
+              }}
+            />
+          </List.Accordion>
+        )
+      })}
     </List.Section>
   )
 }