Merge branch 'fix/retrieve-habits-status' into 'develop'

fix: handle retrieve habits statuses

See merge request rrll/p61-project!1

app/application/habits/index.tsx

@@ -1,11 +1,15 @@
 import { SafeAreaView } from "react-native-safe-area-context"
-import { ActivityIndicator } from "react-native-paper"
+import { ActivityIndicator, Button, Text } from "react-native-paper"
 
 import { HabitsHistory } from "@/presentation/react/components/HabitsHistory/HabitsHistory"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
+import { useAuthentication } from "@/presentation/react/contexts/Authentication"
 
 const HabitsPage: React.FC = () => {
-  const { habitsTracker, retrieveHabitsTracker } = useHabitsTracker()
+  const { habitsTracker, retrieveHabitsTracker, habitsTrackerPresenter } =
+    useHabitsTracker()
+
+  const { user } = useAuthentication()
 
   return (
     <SafeAreaView
@@ -14,12 +18,47 @@ const HabitsPage: React.FC = () => {
           flex: 1,
           alignItems: "center",
           justifyContent:
-            retrieveHabitsTracker.state === "loading" ? "center" : "flex-start",
+            retrieveHabitsTracker.state === "loading" ||
+            retrieveHabitsTracker.state === "error"
+              ? "center"
+              : "flex-start",
         },
       ]}
     >
       {retrieveHabitsTracker.state === "loading" ? (
         <ActivityIndicator animating size="large" />
+      ) : retrieveHabitsTracker.state === "error" ? (
+        <>
+          <Text variant="titleLarge">
+            Error: There was an issue while retrieving habits, please try again.
+          </Text>
+          <Button
+            mode="contained"
+            style={{
+              marginTop: 16,
+              width: 150,
+              height: 40,
+            }}
+            onPress={async () => {
+              if (user === null) {
+                return
+              }
+              await habitsTrackerPresenter.retrieveHabitsTracker({
+                userId: user.id,
+              })
+            }}
+          >
+            <Text
+              style={{
+                color: "white",
+                fontWeight: "bold",
+                fontSize: 16,
+              }}
+            >
+              Retry
+            </Text>
+          </Button>
+        </>
       ) : (
         <HabitsHistory habitsTracker={habitsTracker} />
       )}

presentation/react/components/HabitsHistory/HabitsHistory.tsx

@@ -1,6 +1,7 @@
-import { FlatList } from "react-native"
-import { List } from "react-native-paper"
-import { useState } from "react"
+import { FlatList, View } from "react-native"
+import { Button, List, Text } from "react-native-paper"
+import { useMemo, useState } from "react"
+import { useRouter } from "expo-router"
 
 import type { GoalFrequency } from "@/domain/entities/Goal"
 import { GOAL_FREQUENCIES } from "@/domain/entities/Goal"
@@ -15,6 +16,14 @@ export interface HabitsHistoryProps {
 export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
   const { habitsTracker } = props
 
+  const router = useRouter()
+
+  const habitsByFrequency = useMemo(() => {
+    return GOAL_FREQUENCIES.filter((frequency) => {
+      return habitsTracker.habitsHistory[frequency].length > 0
+    })
+  }, [habitsTracker])
+
   const [accordionExpanded, setAccordionExpanded] = useState<{
     [key in GoalFrequency]: boolean
   }>({
@@ -23,6 +32,41 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
     monthly: true,
   })
 
+  if (habitsByFrequency.length <= 0) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Text variant="titleLarge">{"Let's begin by adding habits! 🤩"}</Text>
+        <Button
+          mode="contained"
+          style={{
+            marginTop: 16,
+            width: 250,
+            height: 40,
+          }}
+          onPress={() => {
+            router.push("/application/habits/new")
+          }}
+        >
+          <Text
+            style={{
+              color: "white",
+              fontWeight: "bold",
+              fontSize: 16,
+            }}
+          >
+            Create your first habit! 🚀
+          </Text>
+        </Button>
+      </View>
+    )
+  }
+
   return (
     <List.Section
       style={[
@@ -31,7 +75,7 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
         },
       ]}
     >
-      {GOAL_FREQUENCIES.map((frequency) => {
+      {habitsByFrequency.map((frequency) => {
         return (
           <List.Accordion
             expanded={accordionExpanded[frequency]}