added update profile and clinic functionalities

- added updateClinicInfos and updateProfileInfos services to profileSlice
- added cities.ts file to store cities data
- updated navigationStacks paramList
- updated ProfileIcon component to display user's profile picture
- also make the profileScreen data dynamic

src/components/common/buttons/wideButton/wideButtonStyles.ts

@@ -7,7 +7,7 @@ const wideButtonStyles = StyleSheet.create({
     button: {
         backgroundColor: colors.coldBlue,
         paddingVertical: hp("2.5%"),
-        width: "90%",
+        width: "100%",
         alignSelf: "center",
         marginVertical: hp("1.5%"),
         borderRadius: hp("1.5%"),

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

@@ -1,7 +1,7 @@
 import { View, Text } from "react-native"
 import profileIconStyles from "./profileIconStyles"
 
-const ProfileIcon = ({ firstName, lastName }: { firstName: string; lastName: string }) => {
+const ProfileIcon = ({ firstName, lastName, size }: { firstName: string; lastName: string; size?: { width: string; height: string } }) => {
     const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`
 
     return (

src/components/index.ts

@@ -18,26 +18,6 @@ import CustomTextInput from "./common/form/customTextInput/CustomTextInput"
 import SimpleCard from "./common/cards/simpleCard/SimpleCard"
 import DetailsCard from "./common/cards/detailsCard/DetailsCard"
 import ProductInputs from "./prescriptions/productInputs/ProductInputs"
+import ProfileIcon from "./common/nav/profileIcon/ProfileIcon"
 
-export {
-    NavBar,
-    Heading,
-    StateCard,
-    TabIcon,
-    SubHeading,
-    TextButton,
-    SearchInput,
-    ProductCard,
-    Header,
-    PatientCard,
-    PrescriptionCard,
-    PrescriptionHeader,
-    WideButton,
-    CustomContainer,
-    SelectOption,
-    Option,
-    CustomTextInput,
-    SimpleCard,
-    DetailsCard,
-    ProductInputs,
-}
+export { NavBar, Heading, StateCard, TabIcon, SubHeading, TextButton, SearchInput, ProductCard, Header, PatientCard, PrescriptionCard, PrescriptionHeader, WideButton, CustomContainer, SelectOption, Option, CustomTextInput, SimpleCard, DetailsCard, ProductInputs, ProfileIcon }

src/helpers/data/cities.ts

@@ -0,0 +1,13 @@
+const cities = [
+    { name: "ouarzazate", avatar: null },
+    { name: "casablanca", avatar: null },
+    { name: "rabat", avatar: null },
+    { name: "marrakech", avatar: null },
+    { name: "tanger", avatar: null },
+    { name: "fes", avatar: null },
+    { name: "meknes", avatar: null },
+    { name: "agadir", avatar: null },
+    { name: "oujda", avatar: null },
+]
+
+export default cities

src/navigation/stacks/settingsStack/@types/index.ts

@@ -1,13 +1,14 @@
 import { StackNavigationProp } from "@react-navigation/stack"
 import { RouteProp } from "@react-navigation/native"
+import { User, Clinic } from "../../../../@types"
 
 /** ========================  SETTINGS STACK TYPES  ======================== */
 
 export type SettingsStackParamsList = {
     SettingsList: undefined
     Profile: undefined
-    EditProfile: undefined
-    EditClinic: undefined
+    EditProfile: { user: User }
+    EditClinic: { clinic: Clinic }
 }
 
 export type SettingsStackNavProps<T extends keyof SettingsStackParamsList> = {

src/screens/settings/EditClinicScreen/EditClinic.tsx

@@ -4,42 +4,57 @@ import { SettingsStackNavProps } from "../../../navigation/stacks/settingsStack/
 import editClinicStyles from "./editClinicStyles"
 import styles from "../../../assets/styles"
 import { heightPercentageToDP as hp } from "react-native-responsive-screen"
+import { useState } from "react"
+import { useAppDispatch, useAppSelector } from "../../../state/hooks"
+import { updateClinicInfos } from "../../../services/profileServices"
+import cities from "../../../helpers/data/cities"
+
+const EditClinic = ({ navigation, route }: { navigation: SettingsStackNavProps<"EditClinic">["navigation"]; route: SettingsStackNavProps<"EditClinic">["route"] }): JSX.Element => {
+    const { clinic } = route.params
+
+    const [clinicData, setClinicData] = useState({
+        name: clinic?.name,
+        email: clinic?.email,
+        address: clinic?.address,
+        city: clinic?.city,
+        phone: clinic?.phone,
+        fax: clinic?.fax,
+    })
+
+    const dispatch = useAppDispatch()
+
+    const { loading, error } = useAppSelector(state => state.profile)
+
+    const handleSave = () => {
+        dispatch(updateClinicInfos(clinicData))
+
+        if (error) {
+            console.log(error)
+            return
+        }
+
+        if (loading) {
+            console.log("loading...")
+            return
+        }
+
+        navigation.goBack()
+    }
 
-const EditClinic = ({ navigation }: { navigation: SettingsStackNavProps<"EditClinic">["navigation"] }): JSX.Element => {
-    const cities = [
-        { name: "ouarzazate" },
-        { name: "casablanca" },
-        { name: "rabat" },
-        { name: "marrakech" },
-        { name: "tanger" },
-        { name: "fes" },
-        { name: "meknes" },
-        { name: "agadir" },
-        { name: "oujda" },
-    ]
     return (
         <SafeAreaView>
             <NavBar navigation={navigation} />
             <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
                 <View style={editClinicStyles.container}>
                     <Heading text="Cabinet" />
                     <View style={editClinicStyles.formContainer}>
-                        <CustomContainer
-                            label="Nom du cabinet"
-                            element={<CustomTextInput placeholder="Cabinet Redouani" />}
-                        />
-                        <CustomContainer
-                            label="Email du cabinet"
-                            element={<CustomTextInput placeholder="[email protected]" />}
-                        />
-                        <CustomContainer
-                            label="Adresse du cabinet"
-                            element={<SelectOption data={cities} initialValue="ouarzazate" noImg={true} />}
-                        />
-                        <CustomContainer label="Ville" element={<CustomTextInput placeholder="Paris" />} />
-                        <CustomContainer label="Téléphone" element={<CustomTextInput placeholder="06 12 34 56 78" />} />
-                        <CustomContainer label="Fax" element={<CustomTextInput placeholder="01 23 45 67 89" />} />
-                        <WideButton text="Enregistrer" />
+                        <CustomContainer label="Nom du cabinet" element={<CustomTextInput placeholder="Cabinet Redouani" value={clinicData.name} onChangeText={text => setClinicData({ ...clinicData, name: text })} />} />
+                        <CustomContainer label="Email du cabinet" element={<CustomTextInput placeholder="[email protected]" value={clinicData.email} onChangeText={text => setClinicData({ ...clinicData, email: text })} />} />
+                        <CustomContainer label="Adresse du cabinet" element={<CustomTextInput placeholder="2 parc des princes" value={clinicData.address} onChangeText={text => setClinicData({ ...clinicData, address: text })} />} />
+                        <CustomContainer label="Ville" element={<SelectOption data={cities} initialValue={{ name: "ouarzazate", avatar: null }} onSelect={item => setClinicData({ ...clinicData, city: item.name })} />} />
+                        <CustomContainer label="Téléphone" element={<CustomTextInput placeholder="06 12 34 56 78" value={clinicData.phone} onChangeText={text => setClinicData({ ...clinicData, phone: text })} />} />
+                        <CustomContainer label="Fax" element={<CustomTextInput placeholder="01 23 45 67 89" value={clinicData.fax} onChangeText={text => setClinicData({ ...clinicData, fax: text })} />} />
+                        <WideButton text="Enregistrer" onPress={handleSave} />
                     </View>
                 </View>
                 <View style={{ marginTop: hp("10%") }} />

src/screens/settings/EditProfileScreen/EditProfile.tsx

@@ -1,39 +1,63 @@
-import { View, SafeAreaView, ScrollView } from "react-native"
+import { View, SafeAreaView, ScrollView, Text } from "react-native"
 import { NavBar, Heading, CustomContainer, CustomTextInput, WideButton } from "../../../components"
 import { SettingsStackNavProps } from "../../../navigation/stacks/settingsStack/@types"
 import editProfileStyles from "./editProfileStyles"
 import styles from "../../../assets/styles"
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen"
+import { useState } from "react"
+import { useAppDispatch, useAppSelector } from "../../../state/hooks"
+import { updateUserInfos } from "../../../services/profileServices"
+
+const EditProfile = ({ navigation, route }: { navigation: SettingsStackNavProps<"EditProfile">["navigation"]; route: SettingsStackNavProps<"EditProfile">["route"] }): JSX.Element => {
+    const { user } = route.params
+
+    const [userData, setUserData] = useState({
+        fullName: user?.fullName,
+        speciality: user?.speciality,
+        phone: user?.phone,
+        email: user?.email,
+        dateOfBirth: user?.dateOfBirth,
+        inpe: user?.inpe,
+    })
+
+    const dispatch = useAppDispatch()
+
+    const { loading, error } = useAppSelector(state => state.profile)
+
+    const handleSave = () => {
+        dispatch(updateUserInfos(userData))
+
+        if (error) {
+            console.log(error)
+            return
+        }
+
+        navigation.goBack()
+    }
+
+    if (loading)
+        return (
+            <View>
+                <Text>Loading...</Text>
+            </View>
+        )
 
-const EditProfile = ({
-    navigation,
-}: {
-    navigation: SettingsStackNavProps<"EditProfile">["navigation"]
-}): JSX.Element => {
     return (
         <SafeAreaView>
             <NavBar navigation={navigation} />
             <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
                 <View style={editProfileStyles.container}>
                     <Heading text="Informations générales" />
                     <View style={editProfileStyles.formContainer}>
-                        <CustomContainer
-                            label="Nom du compte"
-                            element={<CustomTextInput placeholder="Khalid Redouani" />}
-                        />
-                        <CustomContainer
-                            label="Spécialité"
-                            element={<CustomTextInput placeholder="Médecin généraliste" />}
-                        />
-                        <CustomContainer label="Téléphone" element={<CustomTextInput placeholder="06 12 34 56 78" />} />
-                        <CustomContainer label="Email" element={<CustomTextInput placeholder="[email protected]" />} />
-                        <CustomContainer
-                            label="Date de naissance"
-                            element={<CustomTextInput placeholder="01/01/1990" />}
-                        />
-                        <CustomContainer label="INPE" element={<CustomTextInput placeholder="123456789" />} />
-                        <WideButton text="Enregistrer" />
+                        <CustomContainer label="Nom du compte" element={<CustomTextInput placeholder="Khalid Redouani" value={userData.fullName} onChangeText={text => setUserData({ ...userData, fullName: text })} />} />
+                        <CustomContainer label="Spécialité" element={<CustomTextInput placeholder="Médecin généraliste" value={userData.speciality} onChangeText={text => setUserData({ ...userData, speciality: text })} />} />
+
+                        <CustomContainer label="Téléphone" element={<CustomTextInput placeholder="06 12 34 56 78" value={userData.phone} onChangeText={text => setUserData({ ...userData, phone: text })} />} />
+                        <CustomContainer label="Email" element={<CustomTextInput placeholder="[email protected]" value={userData.email} onChangeText={text => setUserData({ ...userData, email: text })} />} />
+                        <CustomContainer label="Date de naissance" element={<CustomTextInput placeholder="01/01/1990" value={userData.dateOfBirth} onChangeText={text => setUserData({ ...userData, dateOfBirth: text })} />} />
+                        <CustomContainer label="INPE" element={<CustomTextInput placeholder="123456789" value={userData.inpe} onChangeText={text => setUserData({ ...userData, inpe: text })} />} />
                     </View>
+                    <WideButton text="Enregistrer" onPress={handleSave} />
                 </View>
                 <View style={{ marginTop: hp("10%") }} />
             </ScrollView>

src/screens/settings/profileScreen/Profile.tsx

@@ -1,20 +1,45 @@
-import { View, Image, ScrollView, SafeAreaView } from "react-native"
-import { NavBar, TextButton, DetailsCard } from "../../../components"
+import { View, Image, ScrollView, SafeAreaView, Text } from "react-native"
+import { NavBar, TextButton, DetailsCard, ProfileIcon } from "../../../components"
 import { SettingsStackNavProps } from "../../../navigation/stacks/settingsStack/@types"
 import profileStyles from "./profileStyles"
 import styles from "../../../assets/styles"
 import { heightPercentageToDP as hp } from "react-native-responsive-screen"
+import { useEffect } from "react"
+import { useAppDispatch, useAppSelector } from "../../../state/hooks"
+import { getUserInfos, getClinicInfos } from "../../../services/profileServices"
+import { RootState } from "../../../state/store"
+import API_URL from "../../../configs/API_URL"
 
 const Profile = ({ navigation }: { navigation: SettingsStackNavProps<"Profile">["navigation"] }): JSX.Element => {
+    const dispatch = useAppDispatch()
+
+    const { user, clinic, loading } = useAppSelector((state: RootState) => state.profile)
+
+    useEffect(() => {
+        dispatch(getUserInfos())
+        dispatch(getClinicInfos())
+    }, [dispatch])
+
+    if (loading)
+        return (
+            <View>
+                <Text
+                    style={{
+                        textAlign: "center",
+                        marginTop: hp("10%"),
+                        fontSize: 20,
+                    }}>
+                    Loading...
+                </Text>
+            </View>
+        )
+
     return (
         <SafeAreaView>
             <NavBar navigation={navigation} />
             <ScrollView nestedScrollEnabled={true} style={styles.appContainer}>
                 <View style={profileStyles.container}>
-                    <Image
-                        source={{ uri: "https://www.w3schools.com/w3images/avatar2.png" }}
-                        style={profileStyles.image}
-                    />
+                    {user.avatar ? <Image source={{ uri: API_URL + user?.avatar }} style={profileStyles.image} /> : <ProfileIcon firstName={user?.fullName.split(" ")[0] || "No"} lastName={user?.fullName.split(" ")[1] || "Name"} />}
                     <TextButton text="Changer photo de profile" />
                 </View>
                 {/* General Infos */}
@@ -24,30 +49,30 @@ const Profile = ({ navigation }: { navigation: SettingsStackNavProps<"Profile">[
                     details={[
                         {
                             title: "Nom du Compte",
-                            value: "Khalid Redouani",
+                            value: user?.fullName,
                         },
                         {
                             title: "Spécialité",
-                            value: "Médecin généraliste",
+                            value: user.speciality,
                         },
                         {
                             title: "Email",
-                            value: "[email protected]",
+                            value: user.email,
                         },
                         {
                             title: "Téléphone",
-                            value: "06 12 34 56 78",
+                            value: user.phone,
                         },
                         {
                             title: "Date de naissance",
-                            value: "01 novembre 1990",
+                            value: user.dateOfBirth,
                         },
                         {
                             title: "INPE",
-                            value: "EE 123456",
+                            value: user.inpe,
                         },
                     ]}
-                    onPress={() => navigation.navigate("EditProfile")}
+                    onPress={() => navigation.navigate("EditProfile", { user })}
                 />
                 {/* Cabinet */}
                 <DetailsCard
@@ -56,30 +81,30 @@ const Profile = ({ navigation }: { navigation: SettingsStackNavProps<"Profile">[
                     details={[
                         {
                             title: "Nom",
-                            value: "Cabinet Redouani",
+                            value: clinic?.name,
                         },
                         {
                             title: "Email du cabinet",
-                            value: "[email protected]",
+                            value: clinic?.email,
                         },
                         {
                             title: "Adresse",
-                            value: "Rue 123, Ville, Pays",
+                            value: clinic?.address,
                         },
                         {
                             title: "Ville",
-                            value: "Ville",
+                            value: clinic?.city,
                         },
                         {
                             title: "Téléphone",
-                            value: "06 12 34 56 78",
+                            value: clinic?.phone,
                         },
                         {
                             title: "Fax",
-                            value: "06 12 34 56 78",
+                            value: clinic?.fax,
                         },
                     ]}
-                    onPress={() => navigation.navigate("EditClinic")}
+                    onPress={() => navigation.navigate("EditClinic", { clinic })}
                 />
                 <View style={{ marginTop: hp("10%") }} />
             </ScrollView>