code refactoring

src/components/common/cards/detailsCard/DetailsCard.tsx

@@ -1,17 +1,7 @@
 import { View, Text, Image, TouchableOpacity } from "react-native"
 import detailsCardStyles from "./detailsCardStyles"
 
-const DetailsCard = ({
-    heading,
-    details,
-    edit,
-    onPress,
-}: {
-    heading: string
-    details: { title: string; value: string }[]
-    edit?: boolean
-    onPress?: () => void
-}): JSX.Element => {
+const DetailsCard = ({ heading, details, edit, onPress }: { heading: string; details: { title: string; value: string }[]; edit?: boolean; onPress?: () => void }): JSX.Element => {
     return (
         <View style={detailsCardStyles.detailsContainer}>
             <View style={detailsCardStyles.detailsWrapper}>
@@ -23,7 +13,7 @@ const DetailsCard = ({
                     </TouchableOpacity>
                 )}
             </View>
-            {details.map((detail, index) => (
+            {details?.map((detail, index) => (
                 <View
                     key={index}
                     style={[

src/components/common/cards/headerCard/Header.tsx

@@ -7,12 +7,14 @@ const Header = ({
     subHeading,
     textButton,
     placeholder,
+    onChangeText,
     onPress,
 }: {
     heading: string
     subHeading: string
     textButton: string
     placeholder: string
+    onChangeText?: (text: string) => void
     onPress?: () => void
 }): JSX.Element => {
     return (
@@ -24,7 +26,7 @@ const Header = ({
                 </View>
                 <TextButton text={textButton} onPress={onPress} />
             </View>
-            <SearchInput placeholder={placeholder} />
+            <SearchInput placeholder={placeholder} onChangeText={onChangeText} />
         </View>
     )
 }

src/components/common/nav/navbar/NavBar.tsx

@@ -2,10 +2,27 @@ import { View, Text, Image, TouchableOpacity } from "react-native"
 import navStyles from "./navStyles"
 import ProfileIcon from "../profileIcon/ProfileIcon"
 import { NavigationProp } from "@react-navigation/native"
+import { RootState } from "../../../../state/store"
+import { useAppSelector, useAppDispatch } from "../../../../state/hooks"
+import { getUserInfos } from "../../../../services"
+import { useEffect } from "react"
+import API_URL from "../../../../configs/API_URL"
 
 const NavBar = ({ navigation }: { navigation?: NavigationProp<any> }): JSX.Element => {
     const boldTitle = "MON"
     const lightTitle = "ORDONNANCE"
+
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(getUserInfos())
+    }, [])
+
+    const { user } = useAppSelector((state: RootState) => state.profile)
+
+    const firstName = user?.fullName.split(" ")[0] || "No"
+    const lastName = user?.fullName.split(" ")[1] || "Name"
+
     return (
         <View style={navStyles.container}>
             {navigation ? (
@@ -23,7 +40,7 @@ const NavBar = ({ navigation }: { navigation?: NavigationProp<any> }): JSX.Eleme
                 <Text style={navStyles.boldTitle}>{boldTitle}</Text>
                 <Text style={navStyles.lightTitle}>{lightTitle}</Text>
             </View>
-            <ProfileIcon firstName="John" lastName="Doe" />
+            <ProfileIcon firstName={firstName} lastName={lastName} />
         </View>
     )
 }

src/components/common/nav/profileIcon/ProfileIcon.tsx

@@ -1,12 +1,18 @@
-import { View, Text } from "react-native"
+import { View, Text, Image } from "react-native"
 import profileIconStyles from "./profileIconStyles"
 
-const ProfileIcon = ({ firstName, lastName, size }: { firstName: string; lastName: string; size?: { width: string; height: string } }) => {
+const ProfileIcon = ({ firstName, lastName, avatar }: { firstName: string; lastName: string; avatar?: string }) => {
     const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`
 
     return (
-        <View style={profileIconStyles.container}>
-            <Text style={profileIconStyles.text}>{initials}</Text>
+        <View
+            style={[
+                profileIconStyles.container,
+                {
+                    backgroundColor: avatar ? "transparent" : "#00C389",
+                },
+            ]}>
+            {avatar ? <Image source={{ uri: avatar }} /> : <Text style={profileIconStyles.text}>{initials}</Text>}
         </View>
     )
 }

src/components/common/nav/profileIcon/profileIconStyles.ts

@@ -7,7 +7,6 @@ const profileIconStyles = StyleSheet.create({
         width: wp("10%"),
         height: hp("5%"),
         borderRadius: hp("2.5%"),
-        backgroundColor: "#FF5A5F",
         alignItems: "center",
         justifyContent: "center",
     },

src/components/patients/patientCard/PatientCard.tsx

@@ -1,7 +1,6 @@
 import { View, Text, Image, Pressable } from "react-native"
 import patientCardStyles from "./patientCardStyles"
 import { Patient } from "../../../@types"
-import API_URL from "../../../configs/API_URL"
 import calculateAge from "../../../helpers/calculateAge"
 
 const PatientCard = ({ patient, onPress }: { patient: Patient; onPress?: () => void }) => {
@@ -10,7 +9,7 @@ const PatientCard = ({ patient, onPress }: { patient: Patient; onPress?: () => v
             <View style={patientCardStyles.container}>
                 <View style={patientCardStyles.wrapper}>
                     <View style={patientCardStyles.imageWrapper}>
-                        <Image source={{ uri: API_URL + patient.avatar }} style={patientCardStyles.image} />
+                        <Image source={{ uri: patient.avatar }} style={patientCardStyles.image} />
                     </View>
                     <View style={patientCardStyles.textWrapper}>
                         <Text style={patientCardStyles.name}>

src/components/prescriptions/prescriptionCard/PrescriptionCard.tsx

@@ -2,15 +2,9 @@ import { View, Text, Pressable, Image, StyleSheet } from "react-native"
 import { Prescription } from "../../../@types"
 import prescriptionCardStyles from "./prescriptionCardStyles"
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen"
-import API_URL from "../../../configs/API_URL"
+import formatDate from "../../../helpers/formatDate"
 
-const PrescriptionCard = ({
-    prescription,
-    onPress,
-}: {
-    prescription: Prescription
-    onPress: () => void
-}): JSX.Element => {
+const PrescriptionCard = ({ prescription, onPress }: { prescription: Prescription; onPress: () => void }): JSX.Element => {
     const styles = StyleSheet.create({
         statusWrapper: {
             backgroundColor: prescription.status === "Enregistrée" ? "#0DD05F" : "#F8C436",
@@ -26,14 +20,11 @@ const PrescriptionCard = ({
                 <View style={prescriptionCardStyles.container}>
                     <View style={prescriptionCardStyles.wrapper}>
                         <View style={prescriptionCardStyles.imageWrapper}>
-                            <Image
-                                source={{ uri: API_URL + prescription.avatar }}
-                                style={prescriptionCardStyles.image}
-                            />
+                            <Image source={{ uri: prescription.avatar }} style={prescriptionCardStyles.image} />
                         </View>
                         <View style={prescriptionCardStyles.textWrapper}>
                             <Text style={prescriptionCardStyles.name}>{prescription.patient}</Text>
-                            <Text style={prescriptionCardStyles.date}>{prescription.createdAt}</Text>
+                            <Text style={prescriptionCardStyles.date}>{formatDate(prescription.createdAt)}</Text>
                         </View>
                     </View>
                     <Image source={require("../../../assets/images/More.png")} />

src/components/products/productCard/ProductCard.tsx

@@ -1,15 +1,14 @@
 import { Image, Text, Pressable, View } from "react-native"
 import { Product } from "../../../@types/"
 import productCardStyles from "./productCardStyles"
-import API_URL from "../../../configs/API_URL"
 
 const ProductCard = ({ product, onPress }: { product: Product; onPress?: () => void }) => {
     return (
         <Pressable onPress={onPress}>
             <View style={productCardStyles.card}>
                 <View>
                     <View style={productCardStyles.cardContent}>
-                        <Image source={{ uri: API_URL + product.avatar }} style={productCardStyles.image} />
+                        <Image source={{ uri: product.avatar }} style={productCardStyles.image} />
                         <View style={productCardStyles.details}>
                             <Text style={productCardStyles.name}>{product.name}</Text>
                             <Text style={productCardStyles.type}>{product.dci}</Text>

src/helpers/calculateAge.ts

@@ -1,4 +1,6 @@
 const calculateAge = (dateString: string): number => {
+    if (!dateString) return 0
+
     const [day, month, year] = dateString.split("-").map(Number)
     const today = new Date()
     const birthDate = new Date(year, month - 1, day)

src/helpers/formatDate.ts

@@ -0,0 +1,21 @@
+const formatDate = (date: Date | string, forInput: boolean = false): string => {
+    date = new Date(date)
+
+    // get the date, month and year
+    const day = date.getDate().toString().padStart(2, "0")
+    const month = (date.getMonth() + 1).toString().padStart(2, "0")
+    const year = date.getFullYear()
+
+    // get the hours and minutes
+    const hours = date.getHours().toString().padStart(2, "0")
+    const minutes = date.getMinutes().toString().padStart(2, "0")
+
+    // return the formatted date
+    if (forInput) {
+        return `${year}-${month}-${day}T${hours}:${minutes}`
+    }
+
+    return `${day}/${month}/${year} ${hours}:${minutes}`
+}
+
+export default formatDate

src/screens/dashboard/Dashboard.tsx

@@ -18,6 +18,8 @@ const Dashboard = (): JSX.Element => {
         dispatch(getProductsCount())
     }, [dispatch])
 
+    if (loading) return <Loading />
+
     return (
         <SafeAreaView>
             <NavBar />
@@ -26,23 +28,22 @@ const Dashboard = (): JSX.Element => {
                     <View style={dashboardStyles.headingContainer}>
                         <Heading text="Tableau de bord" />
                     </View>
-                    {loading ? (
-                        <Loading />
-                    ) : (
-                        <>
-                            <StateCard state="Nombre de patients au total" value={patientsCount.total.toString()} color="#00C389" image={require("../../assets/images/User.png")} />
-                            <View style={dashboardStyles.wrapper}>
-                                <StateCard state="Nombre de patients ce mois" value={patientsCount.month.toString()} color="#00C389" />
-                                <StateCard state="Nombre de patients cette semaine" value={patientsCount.week.toString()} color="#00C389" />
-                            </View>
-                            <StateCard state="Nombre d’ordonnances au total" value={prescriptionsCount.total.toString()} color="#BA68C8" image={require("../../assets/images/Prescription.png")} />
-                            <View style={dashboardStyles.wrapper}>
-                                <StateCard state="Nombre d’ordonnances ce mois" value={prescriptionsCount.month.toString()} color="#BA68C8" />
-                                <StateCard state="Nombre d’ordonnances cette semaine" value={prescriptionsCount.week.toString()} color="#BA68C8" />
-                            </View>
-                            <StateCard state="Produits" value={productsCount.toString()} color="#448AFF" image={require("../../assets/images/Pill.png")} />
-                        </>
-                    )}
+
+                    <StateCard state="Nombre de patients au total" value={patientsCount.total.toString()} color="#00C389" image={require("../../assets/images/User.png")} />
+
+                    <View style={dashboardStyles.wrapper}>
+                        <StateCard state="Nombre de patients ce mois" value={patientsCount.month.toString()} color="#00C389" />
+                        <StateCard state="Nombre de patients cette semaine" value={patientsCount.week.toString()} color="#00C389" />
+                    </View>
+
+                    <StateCard state="Nombre d’ordonnances au total" value={prescriptionsCount.total.toString()} color="#BA68C8" image={require("../../assets/images/Prescription.png")} />
+
+                    <View style={dashboardStyles.wrapper}>
+                        <StateCard state="Nombre d’ordonnances ce mois" value={prescriptionsCount.month.toString()} color="#BA68C8" />
+                        <StateCard state="Nombre d’ordonnances cette semaine" value={prescriptionsCount.week.toString()} color="#BA68C8" />
+                    </View>
+
+                    <StateCard state="Produits" value={productsCount.toString()} color="#448AFF" image={require("../../assets/images/Pill.png")} />
                 </View>
             </ScrollView>
         </SafeAreaView>

src/screens/patients/patientDetails/PatientDetails.tsx

@@ -1,5 +1,5 @@
 import { View, Text, Image, ScrollView, SafeAreaView } from "react-native"
-import { NavBar, SimpleCard, DetailsCard } from "../../../components"
+import { NavBar, SimpleCard, DetailsCard, Loading } from "../../../components"
 import { PatientStackNavProps } from "../../../navigation/stacks/patientStack/@types"
 import patientDetailsStyles from "./patientDetailsStyles"
 import styles from "../../../assets/styles"
@@ -9,15 +9,8 @@ import { useAppSelector, useAppDispatch } from "../../../state/hooks"
 import { RootState } from "../../../state/store"
 import { getPatientById } from "../../../services/patientServices"
 import calculateAge from "../../../helpers/calculateAge"
-import API_URL from "../../../configs/API_URL"
 
-const PatientDetails = ({
-    navigation,
-    route,
-}: {
-    navigation: PatientStackNavProps<"PatientDetails">["navigation"]
-    route: PatientStackNavProps<"PatientDetails">["route"]
-}): JSX.Element => {
+const PatientDetails = ({ navigation, route }: { navigation: PatientStackNavProps<"PatientDetails">["navigation"]; route: PatientStackNavProps<"PatientDetails">["route"] }): JSX.Element => {
     const { patientId } = route.params
 
     const { patient, loading } = useAppSelector((state: RootState) => state.patients)
@@ -28,14 +21,14 @@ const PatientDetails = ({
         dispatch(getPatientById(patientId))
     }, [])
 
-    console.log()
+    if (loading) return <Loading />
 
     return (
         <SafeAreaView>
             <NavBar navigation={navigation} />
             <ScrollView style={styles.appContainer}>
                 <View style={patientDetailsStyles.container}>
-                    <Image source={{ uri: API_URL + patient?.avatar }} style={patientDetailsStyles.image} />
+                    <Image source={{ uri: patient?.avatar }} style={patientDetailsStyles.image} />
                     <Text style={patientDetailsStyles.name}>
                         {patient?.firstName} {patient?.lastName}
                     </Text>
@@ -60,11 +53,7 @@ const PatientDetails = ({
                         },
                         {
                             title: "Date de naissance",
-                            value: ("( " +
-                                calculateAge(patient?.dateOfBirth as string) +
-                                " ans )" +
-                                " " +
-                                patient?.dateOfBirth) as string,
+                            value: ("( " + calculateAge(patient?.dateOfBirth as string) + " ans )" + " " + patient?.dateOfBirth) as string,
                         },
                         {
                             title: "Téléphone",

src/screens/patients/patientsList/PatientsList.tsx

@@ -1,11 +1,10 @@
-import { ScrollView, View, SafeAreaView, FlatList } from "react-native"
-import { NavBar, PatientCard, Header, TextButton } from "../../../components"
+import { ScrollView, View, SafeAreaView } from "react-native"
+import { NavBar, PatientCard, Header, TextButton, Loading } from "../../../components"
 import { PatientStackNavProps } from "../../../navigation/stacks/patientStack/@types"
 import patientsListStyles from "./patientsListStyles"
-import patients from "../../../helpers/data/patients"
 import styles from "../../../assets/styles"
 import { heightPercentageToDP as hp } from "react-native-responsive-screen"
-import { useEffect } from "react"
+import { useEffect, useState, useMemo } from "react"
 import { useAppSelector, useAppDispatch } from "../../../state/hooks"
 import { RootState } from "../../../state/store"
 import { getPatients } from "../../../services/patientServices"
@@ -19,28 +18,26 @@ const PatientsList = ({ navigation }: { navigation: PatientStackNavProps<"Patien
         dispatch(getPatients())
     }, [])
 
+    const [search, setSearch] = useState("")
+    const onSearch = (text: string) => {
+        setSearch(text)
+    }
+
+    const filteredPatients = useMemo(() => {
+        return patients.filter(patient => patient.firstName?.toLowerCase().includes(search.toLowerCase()) || patient.lastName?.toLowerCase().includes(search.toLowerCase()))
+    }, [patients, search])
+
+    if (loading) return <Loading />
+
     return (
         <SafeAreaView>
             <NavBar />
             <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
-                <Header
-                    heading="Patients"
-                    subHeading="45 300 Patients"
-                    textButton="+ Ajouter un patient"
-                    placeholder="Rechercher un patient"
-                />
+                <Header heading="Patients" subHeading="45 300 Patients" textButton="+ Ajouter un patient" placeholder="Rechercher un patient" onChangeText={onSearch} />
                 <View style={patientsListStyles.container}>
-                    <FlatList
-                        data={patients}
-                        keyExtractor={item => item._id}
-                        renderItem={({ item }) => (
-                            <PatientCard
-                                key={item._id}
-                                patient={item}
-                                onPress={() => navigation.navigate("PatientDetails", { patientId: item._id })}
-                            />
-                        )}
-                    />
+                    {filteredPatients?.map(patient => (
+                        <PatientCard key={patient._id} patient={patient} onPress={() => navigation.navigate("PatientDetails", { patientId: patient._id })} />
+                    ))}
                 </View>
                 <View>
                     <TextButton text="+ Ajouter un patient" style={patientsListStyles.btnCenter} />