From 1c648972d59a196f1bae07f7aaf32b8551a254c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Sun, 24 Mar 2024 23:41:23 +0100
Subject: [PATCH] refactor: habits history component

---
 app/application/_layout.tsx                   |  6 ++
 app/application/habits/[habitId]/_layout.tsx  |  7 ++
 app/application/habits/[habitId]/index.tsx    | 22 ++++++
 app/application/habits/history.tsx            | 19 +++--
 app/application/habits/index.tsx              | 76 +++----------------
 app/application/habits/new.tsx                | 19 +++--
 app/application/users/settings.tsx            | 20 ++---
 app/authentication/login.tsx                  |  8 +-
 app/authentication/register.tsx               | 18 ++---
 domain/use-cases/Authentication.ts            | 17 ++---
 presentation/presenters/Authentication.ts     | 50 +++++++-----
 .../presenters/utils/ColorsPresenter.ts       | 18 -----
 presentation/presenters/utils/ZodPresenter.ts |  7 --
 presentation/presenters/utils/colors.ts       | 24 ++++++
 presentation/presenters/utils/zod.ts          |  7 ++
 .../components/HabitsHistory/HabitHistory.tsx | 68 +++++++++++++++++
 .../HabitsHistory/HabitsHistory.tsx           | 30 ++++++++
 presentation/react/components/TabBarIcon.tsx  |  2 +-
 18 files changed, 254 insertions(+), 164 deletions(-)
 create mode 100644 app/application/habits/[habitId]/_layout.tsx
 create mode 100644 app/application/habits/[habitId]/index.tsx
 delete mode 100644 presentation/presenters/utils/ColorsPresenter.ts
 delete mode 100644 presentation/presenters/utils/ZodPresenter.ts
 create mode 100644 presentation/presenters/utils/colors.ts
 create mode 100644 presentation/presenters/utils/zod.ts
 create mode 100644 presentation/react/components/HabitsHistory/HabitHistory.tsx
 create mode 100644 presentation/react/components/HabitsHistory/HabitsHistory.tsx

diff --git a/app/application/_layout.tsx b/app/application/_layout.tsx
index 8f2eb1b..1bf47a0 100644
--- a/app/application/_layout.tsx
+++ b/app/application/_layout.tsx
@@ -36,6 +36,12 @@ const TabLayout: React.FC = () => {
           },
         }}
       />
+      <Tabs.Screen
+        name="habits/[habitId]"
+        options={{
+          href: null,
+        }}
+      />
       <Tabs.Screen
         name="habits/history"
         options={{
diff --git a/app/application/habits/[habitId]/_layout.tsx b/app/application/habits/[habitId]/_layout.tsx
new file mode 100644
index 0000000..52018f7
--- /dev/null
+++ b/app/application/habits/[habitId]/_layout.tsx
@@ -0,0 +1,7 @@
+import { Slot } from "expo-router"
+
+const HabitLayout: React.FC = () => {
+  return <Slot />
+}
+
+export default HabitLayout
diff --git a/app/application/habits/[habitId]/index.tsx b/app/application/habits/[habitId]/index.tsx
new file mode 100644
index 0000000..aeaa0c2
--- /dev/null
+++ b/app/application/habits/[habitId]/index.tsx
@@ -0,0 +1,22 @@
+import { useLocalSearchParams } from "expo-router"
+import { Text } from "react-native-paper"
+import { SafeAreaView } from "react-native-safe-area-context"
+
+const HabitPage: React.FC = () => {
+  const { habitId } = useLocalSearchParams()
+
+  return (
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          alignItems: "center",
+        },
+      ]}
+    >
+      <Text>Habit Page {habitId}</Text>
+    </SafeAreaView>
+  )
+}
+
+export default HabitPage
diff --git a/app/application/habits/history.tsx b/app/application/habits/history.tsx
index ffcae32..4513654 100644
--- a/app/application/habits/history.tsx
+++ b/app/application/habits/history.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { StyleSheet } from "react-native"
 import { Calendar } from "react-native-calendars"
 import { SafeAreaView } from "react-native-safe-area-context"
 
@@ -7,7 +6,15 @@ const HistoryPage: React.FC = () => {
   const [selected, setSelected] = useState("")
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      ]}
+    >
       <Calendar
         onDayPress={(day) => {
           setSelected(day.dateString)
@@ -37,12 +44,4 @@ const HistoryPage: React.FC = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-})
-
 export default HistoryPage
diff --git a/app/application/habits/index.tsx b/app/application/habits/index.tsx
index 04ce75b..46a36e9 100644
--- a/app/application/habits/index.tsx
+++ b/app/application/habits/index.tsx
@@ -1,79 +1,23 @@
-import FontAwesome6 from "@expo/vector-icons/FontAwesome6"
-import { FlatList, StyleSheet } from "react-native"
-import { List } from "react-native-paper"
 import { SafeAreaView } from "react-native-safe-area-context"
 
+import { HabitsHistory } from "@/presentation/react/components/HabitsHistory/HabitsHistory"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
-import { colorsPresenter } from "@/presentation/presenters/utils/ColorsPresenter"
 
 const HabitsPage: React.FC = () => {
   const { habitsTracker } = useHabitsTracker()
 
   return (
-    <SafeAreaView style={[styles.container]}>
-      <List.Section style={[styles.habitsList]}>
-        <FlatList
-          data={habitsTracker.habitsHistory}
-          renderItem={({ item }) => {
-            const { habit } = item
-
-            return (
-              <List.Item
-                title={habit.name}
-                style={[
-                  styles.habitItem,
-                  {
-                    backgroundColor: colorsPresenter.hexToRgbA(
-                      habit.color,
-                      0.4,
-                    ),
-                  },
-                ]}
-                contentStyle={[
-                  {
-                    paddingLeft: 12,
-                  },
-                ]}
-                titleStyle={[
-                  {
-                    fontSize: 18,
-                  },
-                ]}
-                left={() => {
-                  return (
-                    <FontAwesome6
-                      size={24}
-                      name={habit.icon}
-                      style={[styles.habitItemIcon]}
-                    />
-                  )
-                }}
-              />
-            )
-          }}
-        />
-      </List.Section>
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          alignItems: "center",
+        },
+      ]}
+    >
+      <HabitsHistory habitsHistory={habitsTracker.habitsHistory} />
     </SafeAreaView>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-  },
-  habitsList: {
-    width: "90%",
-  },
-  habitItem: {
-    paddingVertical: 20,
-    paddingHorizontal: 10,
-    marginVertical: 10,
-    borderRadius: 10,
-  },
-  habitItemIcon: {
-    width: 30,
-  },
-})
-
 export default HabitsPage
diff --git a/app/application/habits/new.tsx b/app/application/habits/new.tsx
index 5d6ac05..053a29a 100644
--- a/app/application/habits/new.tsx
+++ b/app/application/habits/new.tsx
@@ -1,21 +1,20 @@
-import { StyleSheet } from "react-native"
 import { Text } from "react-native-paper"
 import { SafeAreaView } from "react-native-safe-area-context"
 
 const NewHabitPage: React.FC = () => {
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      ]}
+    >
       <Text>New Habit</Text>
     </SafeAreaView>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-})
-
 export default NewHabitPage
diff --git a/app/application/users/settings.tsx b/app/application/users/settings.tsx
index dc59f25..1a4b9f9 100644
--- a/app/application/users/settings.tsx
+++ b/app/application/users/settings.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, Text } from "react-native"
+import { Text } from "react-native"
 import { Button } from "react-native-paper"
 import { SafeAreaView } from "react-native-safe-area-context"
 
@@ -12,7 +12,15 @@ const SettingsPage: React.FC = () => {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={[
+        {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      ]}
+    >
       <Text>Settings</Text>
 
       <Button
@@ -27,12 +35,4 @@ const SettingsPage: React.FC = () => {
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-})
-
 export default SettingsPage
diff --git a/app/authentication/login.tsx b/app/authentication/login.tsx
index 896dc9b..d6fea8c 100644
--- a/app/authentication/login.tsx
+++ b/app/authentication/login.tsx
@@ -21,7 +21,7 @@ const LoginPage: React.FC = () => {
   }
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={[styles.container]}>
       <Controller
         control={control}
         render={({ field: { onChange, onBlur, value } }) => {
@@ -31,7 +31,7 @@ const LoginPage: React.FC = () => {
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              style={styles.input}
+              style={[styles.input]}
               mode="outlined"
             />
           )
@@ -48,7 +48,7 @@ const LoginPage: React.FC = () => {
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              style={styles.input}
+              style={[styles.input]}
               mode="outlined"
               secureTextEntry
             />
@@ -60,7 +60,7 @@ const LoginPage: React.FC = () => {
       <HelperText
         type="error"
         visible={login.state === "error"}
-        style={styles.helperText}
+        style={[styles.helperText]}
       >
         Invalid credentials.
       </HelperText>
diff --git a/app/authentication/register.tsx b/app/authentication/register.tsx
index e496de8..74e8ceb 100644
--- a/app/authentication/register.tsx
+++ b/app/authentication/register.tsx
@@ -24,13 +24,13 @@ const RegisterPage: React.FC = () => {
 
   const helperMessage = useMemo(() => {
     if (register.state === "error") {
-      if (register.errorsFields.includes("displayName")) {
+      if (register.errors.fields.includes("displayName")) {
         return "Display Name is required."
       }
-      if (register.errorsFields.includes("email")) {
+      if (register.errors.fields.includes("email")) {
         return "Invalid email."
       }
-      if (register.errorsFields.includes("password")) {
+      if (register.errors.fields.includes("password")) {
         return "Password must be at least 6 characters."
       }
       return "Invalid credentials."
@@ -41,10 +41,10 @@ const RegisterPage: React.FC = () => {
     // }
 
     return ""
-  }, [register.errorsFields, register.state])
+  }, [register.errors.fields, register.state])
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={[styles.container]}>
       <Controller
         control={control}
         render={({ field: { onChange, onBlur, value } }) => {
@@ -54,7 +54,7 @@ const RegisterPage: React.FC = () => {
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              style={styles.input}
+              style={[styles.input]}
               mode="outlined"
             />
           )
@@ -71,7 +71,7 @@ const RegisterPage: React.FC = () => {
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              style={styles.input}
+              style={[styles.input]}
               mode="outlined"
             />
           )
@@ -88,7 +88,7 @@ const RegisterPage: React.FC = () => {
               onBlur={onBlur}
               onChangeText={onChange}
               value={value}
-              style={styles.input}
+              style={[styles.input]}
               mode="outlined"
               secureTextEntry
             />
@@ -100,7 +100,7 @@ const RegisterPage: React.FC = () => {
       <HelperText
         type={register.state === "error" ? "error" : "info"}
         visible={register.state === "error" || register.state === "success"}
-        style={styles.helperText}
+        style={[styles.helperText]}
       >
         {helperMessage}
       </HelperText>
diff --git a/domain/use-cases/Authentication.ts b/domain/use-cases/Authentication.ts
index cbc87e0..4aee4db 100644
--- a/domain/use-cases/Authentication.ts
+++ b/domain/use-cases/Authentication.ts
@@ -1,8 +1,5 @@
-import {
-  UserRegisterSchema,
-  type User,
-  UserLoginSchema,
-} from "../entities/User"
+import type { User } from "../entities/User"
+import { UserLoginSchema, UserRegisterSchema } from "../entities/User"
 import type { AuthenticationRepository } from "../repositories/Authentication"
 
 export interface AuthenticationUseCaseDependencyOptions {
@@ -42,16 +39,16 @@ export class AuthenticationUseCase
     return await this.authenticationRepository.login(userData)
   }
 
-  public async logout(): Promise<void> {
+  public logout: AuthenticationRepository["logout"] = async () => {
     return await this.authenticationRepository.logout()
   }
 
-  public getUser: AuthenticationRepository["getUser"] = async (...args) => {
-    return await this.authenticationRepository.getUser(...args)
+  public getUser: AuthenticationRepository["getUser"] = async () => {
+    return await this.authenticationRepository.getUser()
   }
 
   public onUserStateChange: AuthenticationRepository["onUserStateChange"] =
-    async (...args) => {
-      return this.authenticationRepository.onUserStateChange(...args)
+    async (callback) => {
+      return this.authenticationRepository.onUserStateChange(callback)
     }
 }
diff --git a/presentation/presenters/Authentication.ts b/presentation/presenters/Authentication.ts
index 13789d2..97acf31 100644
--- a/presentation/presenters/Authentication.ts
+++ b/presentation/presenters/Authentication.ts
@@ -8,7 +8,7 @@ import type {
 import type { AuthenticationUseCase } from "@/domain/use-cases/Authentication"
 import type { ErrorGlobal, FetchState } from "./_Presenter"
 import { Presenter } from "./_Presenter"
-import { zodPresenter } from "./utils/ZodPresenter"
+import { getErrorsFieldsFromZodError } from "./utils/zod"
 
 export interface AuthenticationPresenterState {
   user: User | null
@@ -20,14 +20,18 @@ export interface AuthenticationPresenterState {
 
   register: {
     state: FetchState
-    errorsFields: Array<keyof UserRegisterData>
-    errorGlobal: ErrorGlobal
+    errors: {
+      fields: Array<keyof UserRegisterData>
+      global: ErrorGlobal
+    }
   }
 
   login: {
     state: FetchState
-    errorsFields: Array<keyof UserLoginData>
-    errorGlobal: ErrorGlobal
+    errors: {
+      fields: Array<keyof UserLoginData>
+      global: ErrorGlobal
+    }
   }
 
   logout: {
@@ -52,13 +56,17 @@ export class AuthenticationPresenter
       hasLoaded: true,
       register: {
         state: "idle",
-        errorsFields: [],
-        errorGlobal: null,
+        errors: {
+          fields: [],
+          global: null,
+        },
       },
       login: {
         state: "idle",
-        errorsFields: [],
-        errorGlobal: null,
+        errors: {
+          fields: [],
+          global: null,
+        },
       },
       logout: {
         state: "idle",
@@ -71,8 +79,10 @@ export class AuthenticationPresenter
     try {
       this.setState((state) => {
         state.register.state = "loading"
-        state.register.errorsFields = []
-        state.register.errorGlobal = null
+        state.register.errors = {
+          fields: [],
+          global: null,
+        }
       })
       const user = await this.authenticationUseCase.register(data)
       this.setState((state) => {
@@ -83,10 +93,10 @@ export class AuthenticationPresenter
       this.setState((state) => {
         state.register.state = "error"
         if (error instanceof ZodError) {
-          state.register.errorsFields =
-            zodPresenter.getErrorsFieldsFromZodError<UserRegisterData>(error)
+          state.register.errors.fields =
+            getErrorsFieldsFromZodError<UserRegisterData>(error)
         } else {
-          state.register.errorGlobal = "unknown"
+          state.register.errors.global = "unknown"
         }
       })
     }
@@ -96,8 +106,10 @@ export class AuthenticationPresenter
     try {
       this.setState((state) => {
         state.login.state = "loading"
-        state.login.errorsFields = []
-        state.login.errorGlobal = null
+        state.login.errors = {
+          fields: [],
+          global: null,
+        }
       })
       const user = await this.authenticationUseCase.login(data)
       this.setState((state) => {
@@ -108,10 +120,10 @@ export class AuthenticationPresenter
       this.setState((state) => {
         state.login.state = "error"
         if (error instanceof ZodError) {
-          state.login.errorsFields =
-            zodPresenter.getErrorsFieldsFromZodError<UserLoginData>(error)
+          state.login.errors.fields =
+            getErrorsFieldsFromZodError<UserLoginData>(error)
         } else {
-          state.login.errorGlobal = "unknown"
+          state.login.errors.global = "unknown"
         }
       })
     }
diff --git a/presentation/presenters/utils/ColorsPresenter.ts b/presentation/presenters/utils/ColorsPresenter.ts
deleted file mode 100644
index ef299a6..0000000
--- a/presentation/presenters/utils/ColorsPresenter.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const colorsPresenter = {
-  hexToRgbA: (hexColor: string, opacity: number): string => {
-    let hex = hexColor.replace("#", "")
-    if (hex.length === 3) {
-      hex = hex
-        .split("")
-        .map((char) => {
-          return char + char
-        })
-        .join("")
-    }
-    const color = Number.parseInt(hex, 16)
-    const red = (color >> 16) & 255
-    const green = (color >> 8) & 255
-    const blue = color & 255
-    return `rgba(${red}, ${green}, ${blue}, ${opacity})`
-  },
-}
diff --git a/presentation/presenters/utils/ZodPresenter.ts b/presentation/presenters/utils/ZodPresenter.ts
deleted file mode 100644
index 3664589..0000000
--- a/presentation/presenters/utils/ZodPresenter.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ZodError } from "zod"
-
-export const zodPresenter = {
-  getErrorsFieldsFromZodError: <T>(error: ZodError<T>): Array<keyof T> => {
-    return Object.keys(error.format()) as Array<keyof T>
-  },
-}
diff --git a/presentation/presenters/utils/colors.ts b/presentation/presenters/utils/colors.ts
new file mode 100644
index 0000000..4e9fc44
--- /dev/null
+++ b/presentation/presenters/utils/colors.ts
@@ -0,0 +1,24 @@
+interface GetColorRGBAFromHexOptions {
+  hexColor: string
+  opacity: number
+}
+
+export const getColorRGBAFromHex = (
+  options: GetColorRGBAFromHexOptions,
+): string => {
+  const { hexColor, opacity } = options
+  let hex = hexColor.replace("#", "")
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map((char) => {
+        return char + char
+      })
+      .join("")
+  }
+  const color = Number.parseInt(hex, 16)
+  const red = (color >> 16) & 255
+  const green = (color >> 8) & 255
+  const blue = color & 255
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`
+}
diff --git a/presentation/presenters/utils/zod.ts b/presentation/presenters/utils/zod.ts
new file mode 100644
index 0000000..44b458e
--- /dev/null
+++ b/presentation/presenters/utils/zod.ts
@@ -0,0 +1,7 @@
+import type { ZodError } from "zod"
+
+export const getErrorsFieldsFromZodError = <T>(
+  error: ZodError<T>,
+): Array<keyof T> => {
+  return Object.keys(error.format()) as Array<keyof T>
+}
diff --git a/presentation/react/components/HabitsHistory/HabitHistory.tsx b/presentation/react/components/HabitsHistory/HabitHistory.tsx
new file mode 100644
index 0000000..f425198
--- /dev/null
+++ b/presentation/react/components/HabitsHistory/HabitHistory.tsx
@@ -0,0 +1,68 @@
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6"
+import { useRouter } from "expo-router"
+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 {
+  habitHistory: HabitHistoryType
+}
+
+export const HabitHistory: React.FC<HabitHistoryProps> = (props) => {
+  const { habitHistory } = props
+  const { habit } = habitHistory
+
+  const router = useRouter()
+
+  const habitColor = getColorRGBAFromHex({
+    hexColor: habit.color,
+    opacity: 0.4,
+  })
+
+  return (
+    <List.Item
+      onPress={() => {
+        router.push({
+          pathname: "/application/habits/[habitId]/",
+          params: {
+            habitId: habit.id,
+          },
+        })
+      }}
+      title={habit.name}
+      style={[
+        {
+          paddingVertical: 20,
+          paddingHorizontal: 10,
+          marginVertical: 10,
+          borderRadius: 10,
+          backgroundColor: habitColor,
+        },
+      ]}
+      contentStyle={[
+        {
+          paddingLeft: 12,
+        },
+      ]}
+      titleStyle={[
+        {
+          fontSize: 18,
+        },
+      ]}
+      left={() => {
+        return (
+          <FontAwesome6
+            size={24}
+            name={habit.icon}
+            style={[
+              {
+                width: 30,
+              },
+            ]}
+          />
+        )
+      }}
+    />
+  )
+}
diff --git a/presentation/react/components/HabitsHistory/HabitsHistory.tsx b/presentation/react/components/HabitsHistory/HabitsHistory.tsx
new file mode 100644
index 0000000..baf799d
--- /dev/null
+++ b/presentation/react/components/HabitsHistory/HabitsHistory.tsx
@@ -0,0 +1,30 @@
+import { FlatList } from "react-native"
+import { List } from "react-native-paper"
+
+import type { HabitHistory as HabitHistoryType } from "@/domain/entities/HabitHistory"
+import { HabitHistory } from "./HabitHistory"
+
+export interface HabitsHistoryProps {
+  habitsHistory: HabitHistoryType[]
+}
+
+export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
+  const { habitsHistory } = props
+
+  return (
+    <List.Section
+      style={[
+        {
+          width: "90%",
+        },
+      ]}
+    >
+      <FlatList
+        data={habitsHistory}
+        renderItem={({ item }) => {
+          return <HabitHistory habitHistory={item} />
+        }}
+      />
+    </List.Section>
+  )
+}
diff --git a/presentation/react/components/TabBarIcon.tsx b/presentation/react/components/TabBarIcon.tsx
index 9501547..533dcc1 100644
--- a/presentation/react/components/TabBarIcon.tsx
+++ b/presentation/react/components/TabBarIcon.tsx
@@ -9,5 +9,5 @@ export const TabBarIcon: React.FC<{
   name: React.ComponentProps<typeof FontAwesome>["name"]
   color: string
 }> = (props) => {
-  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />
+  return <FontAwesome size={28} style={[{ marginBottom: -3 }]} {...props} />
 }