From 2452e3dedde66749638ad4b7e4fed71d58cd67a6 Mon Sep 17 00:00:00 2001
From: Maxime RICHARD <maxime.richard2@etu.unistra.fr>
Date: Fri, 5 Apr 2024 13:50:51 +0200
Subject: [PATCH] fix: scroll is working on main page and rename some file

---
 app/application/habits/index.tsx              |  4 +-
 .../{HabitHistory.tsx => HabitCard.tsx}       |  4 +-
 .../{HabitsHistory.tsx => HabitsMainPage.tsx} | 77 +++++++++----------
 3 files changed, 42 insertions(+), 43 deletions(-)
 rename presentation/react/components/HabitsHistory/{HabitHistory.tsx => HabitCard.tsx} (92%)
 rename presentation/react/components/HabitsHistory/{HabitsHistory.tsx => HabitsMainPage.tsx} (57%)

diff --git a/app/application/habits/index.tsx b/app/application/habits/index.tsx
index 1a8f487..42417e9 100644
--- a/app/application/habits/index.tsx
+++ b/app/application/habits/index.tsx
@@ -1,7 +1,7 @@
 import { SafeAreaView } from "react-native-safe-area-context"
 import { ActivityIndicator, Button, Text } from "react-native-paper"
 
-import { HabitsHistory } from "@/presentation/react/components/HabitsHistory/HabitsHistory"
+import { HabitsMainPage } from "@/presentation/react/components/HabitsHistory/HabitsMainPage"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
 import { useAuthentication } from "@/presentation/react/contexts/Authentication"
 
@@ -61,7 +61,7 @@ const HabitsPage: React.FC = () => {
           </Button>
         </>
       ) : (
-        <HabitsHistory habitsTracker={habitsTracker} />
+        <HabitsMainPage habitsTracker={habitsTracker} />
       )}
     </SafeAreaView>
   )
diff --git a/presentation/react/components/HabitsHistory/HabitHistory.tsx b/presentation/react/components/HabitsHistory/HabitCard.tsx
similarity index 92%
rename from presentation/react/components/HabitsHistory/HabitHistory.tsx
rename to presentation/react/components/HabitsHistory/HabitCard.tsx
index f425198..6526d38 100644
--- a/presentation/react/components/HabitsHistory/HabitHistory.tsx
+++ b/presentation/react/components/HabitsHistory/HabitCard.tsx
@@ -5,11 +5,11 @@ import { List } from "react-native-paper"
 import type { HabitHistory as HabitHistoryType } from "@/domain/entities/HabitHistory"
 import { getColorRGBAFromHex } from "@/presentation/presenters/utils/colors"
 
-export interface HabitHistoryProps {
+export interface HabitCardProps {
   habitHistory: HabitHistoryType
 }
 
-export const HabitHistory: React.FC<HabitHistoryProps> = (props) => {
+export const HabitCard: React.FC<HabitCardProps> = (props) => {
   const { habitHistory } = props
   const { habit } = habitHistory
 
diff --git a/presentation/react/components/HabitsHistory/HabitsHistory.tsx b/presentation/react/components/HabitsHistory/HabitsMainPage.tsx
similarity index 57%
rename from presentation/react/components/HabitsHistory/HabitsHistory.tsx
rename to presentation/react/components/HabitsHistory/HabitsMainPage.tsx
index b9e7ac4..00dab13 100644
--- a/presentation/react/components/HabitsHistory/HabitsHistory.tsx
+++ b/presentation/react/components/HabitsHistory/HabitsMainPage.tsx
@@ -1,19 +1,19 @@
 import { useRouter } from "expo-router"
 import { useMemo, useState } from "react"
-import { FlatList, View } from "react-native"
+import { View, ScrollView, Dimensions } from "react-native"
 import { Button, List, Text } from "react-native-paper"
 
 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"
+import { HabitCard } from "./HabitCard"
 
-export interface HabitsHistoryProps {
+export interface HabitsMainPageProps {
   habitsTracker: HabitsTracker
 }
 
-export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
+export const HabitsMainPage: React.FC<HabitsMainPageProps> = (props) => {
   const { habitsTracker } = props
 
   const router = useRouter()
@@ -68,42 +68,41 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
   }
 
   return (
-    <List.Section
-      style={[
-        {
-          width: "92%",
-        },
-      ]}
+    <ScrollView
+      showsVerticalScrollIndicator={false}
+      style={{
+        paddingHorizontal: 20,
+        width: Dimensions.get("window").width,
+      }}
     >
-      {habitsByFrequency.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.Section>
+        {habitsByFrequency.map((frequency) => {
+          return (
+            <List.Accordion
+              expanded={accordionExpanded[frequency]}
+              onPress={() => {
+                setAccordionExpanded((old) => {
+                  return {
+                    ...old,
+                    [frequency]: !old[frequency],
+                  }
+                })
               }}
-            />
-          </List.Accordion>
-        )
-      })}
-    </List.Section>
+              key={frequency}
+              title={capitalize(frequency)}
+              titleStyle={[
+                {
+                  fontSize: 26,
+                },
+              ]}
+            >
+              {habitsTracker.habitsHistory[frequency].map((item) => {
+                return <HabitCard habitHistory={item} key={item.habit.id} />
+              })}
+            </List.Accordion>
+          )
+        })}
+      </List.Section>
+    </ScrollView>
   )
 }