atlp-rwanda · Nkbtemmy · Jun 24, 2024 · Jun 20, 2024
diff --git a/app/(app)/ActionMenu/AllDoctorScreen.tsx b/app/(app)/ActionMenu/AllDoctorScreen.tsx
diff --git a/app/(app)/ActionMenu/index.tsx b/app/(app)/ActionMenu/index.tsx
diff --git a/app/(app)/Profile/EditProfile.tsx b/app/(app)/Profile/EditProfile.tsx
@@ -17,7 +17,7 @@ import Typography from "@/constants/Typography";
 import { typedCountries } from "@/constants/Languages";
 import { ThemeContext } from "@/ctx/ThemeContext";
 import { supabase } from "@/lib/supabase";
-import { fetchPatientData, getPatientData } from "@/helper/LoggedInUser";
+import { fetchPatientData, getPatientData } from "@/utils/LoggedInUser";
 
 interface Props {}
 

diff --git a/app/(app)/Profile/index.tsx b/app/(app)/Profile/index.tsx
@@ -43,29 +43,53 @@ import { ThemeContext } from "@/ctx/ThemeContext";
 import { router } from "expo-router";
 import Switch from "@/components/UI/Switch";
 import SelectProfile from "@/components/UI/SelectProfile";
-import { Session } from "@supabase/supabase-js";
 import { supabase } from "@/lib/supabase";
-import { fetchPatientData, getPatientData } from "@/helper/LoggedInUser";
+import { getUserImageUrl, fetchPatientData, getPatientData } from "@/utils/LoggedInUser";
 
 const index = () => {
-  const [session, setSession] = useState<Session | null>(null);
   const { theme, changeTheme } = useContext(ThemeContext);
-  const [image, setImage] = useState<null | string>(null);
-
   const [userData, setUserData] = useState<any[]>([]);
   const [patientData, setPatientData] = useState(null);
+  const [imageUrl, setImageUrl] = useState([])
+  const [profilePhoto, setProfilePhoto] =  useState("");
+  const CDNURL = "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/patients/"
+
 
   useEffect(() => {
     getPatientData(supabase, setUserData);
   }, []);
 
   useEffect(() => {
-    const id: string = userData?.id;
-    if (id) {
-      fetchPatientData(id, setPatientData);
+    if (userData?.id) {
+      fetchPatientData(userData?.id, setPatientData);
+      getUserImageUrl('patients', userData, setImageUrl);
     }
   }, [userData]);
 
+  useEffect(() => {
+    if (imageUrl.length > 0) {
+      setProfilePhoto(imageUrl[0]?.name);
+    }
+  }, [imageUrl]);
+  const [formData, setFormData] = useState({
+    image: {
+      name: "",
+      mimeType: "",
+      uri: "",
+    },
+  });
+
+  const image  = `${CDNURL + userData?.id + '/' + profilePhoto}`;
+
+  function handleImagePicker(name: string, value: string) {
+    setFormData((prevVal) => {
+      return {
+        ...prevVal,
+        [name]: value,
+      };
+    });
+  }
+
   return (
     <View>
       {patientData && userData && (
@@ -86,7 +110,12 @@ const index = () => {
                   gap:10,
                 }}
               >
-                <SelectProfile image={item?.image} setImage={setImage} />
+                <View style={{borderRadius:100, width: 200, height: 200}}>
+                  <Image 
+                  style={{width: "100%", height: "100%", borderRadius:100}}
+                  source={{ uri: `${CDNURL + userData?.id + '/' + profilePhoto}` }}/>
+                </View>
+                {/* <SelectProfile image={item?.image} onChange={handleImagePicker}/> */}
                 <Text
                   style={[
                     Typography.bold.xxLarge,
@@ -111,7 +140,7 @@ const index = () => {
                     },
                   ]}
                 >
-                  +1 111 467 378 399
+                  {!item?.phone ? "add your phone number": item?.phone}
                 </Text>
               </View>
               <View

diff --git a/app/(auth)/CreateNewPassword.tsx b/app/(auth)/CreateNewPassword.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Image, StyleSheet, Text, TextInput, View, TouchableOpacity, ScrollView, Alert, Pressable } from 'react-native';
-import { FontAwesome, MaterialIcons } from '@expo/vector-icons'; // Import FontAwesome icons
+import { Image, StyleSheet, Text, TextInput, View, TouchableOpacity, ScrollView, Alert, Pressable, ActivityIndicator } from 'react-native';
+import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
 import {Colors} from '@/constants/Colors';
 import { router } from 'expo-router';
 import { LeftArrow } from '@/components/UI/Icons';
@@ -28,6 +28,7 @@ export default function CreateNewPassword() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
+  const [isLoading , setIsLoading] = useState(false)
   const [alert, setAlert] = useState<{ text: string, status: "success" | "error" | "info" | "warning" } | null>(null);
 
   const modal = useModal();
@@ -119,6 +120,7 @@ export default function CreateNewPassword() {
 
   const handleCreatePassword = async() => {
     try {
+      setIsLoading(false);
       if(!newPassword || !confirmPassword){
         setAlert({ text: "Fill all the fields", status: "error" });
       }
@@ -130,11 +132,16 @@ export default function CreateNewPassword() {
     const {error}  = await supabase.auth.updateUser({password: newPassword})
     if(error){
       setAlert({ text: "Make sure the user is registered", status: "error" });
+      setIsLoading(false);
+
     }else{
+      setIsLoading(true);
       handleModal()
     }
     } catch (error) {
       setAlert({ text: "Error updating password", status: "error" });
+      setIsLoading(false);
+
     }
   };
 
@@ -205,14 +212,21 @@ export default function CreateNewPassword() {
           <TouchableOpacity onPress={()=> {
             handleCreatePassword()
           }} style={styles.createButton}>
+
+            {isLoading ? (
+            <ActivityIndicator color="white" />
+          ) : (
             <Text style={styles.createButtonText}>Continue</Text>
+          )}
           </TouchableOpacity>
         </View>
       </View>
     </ScrollView>
   );
 }
 
+
+
 const styles = StyleSheet.create({
   scrollViewContent: {
     flexGrow: 1,

diff --git a/app/(auth)/ForgotPassword&Reset/index.tsx b/app/(auth)/ForgotPassword&Reset/index.tsx
@@ -1,14 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import { Text } from "@/components/Themed";
 import { LeftArrow, Chat, Message } from "@/components/UI/Icons";
-import { StyleSheet, Image, View, TouchableOpacity, Pressable, TextInput, ScrollView } from "react-native";
+import { StyleSheet, Image, View, TouchableOpacity, Pressable, TextInput, ScrollView, ActivityIndicator } from "react-native";
 import Typography from "@/constants/Typography";
 import { Colors } from "@/constants/Colors";
 import { useState } from "react";
 import { Redirect, router } from "expo-router";
 import { supabase } from "@/lib/supabase";
-import { useLocalSearchParams } from "expo-router";
 import Alerts from "@/components/UI/AlertComponent";
+import { ThemeContext } from "@/ctx/ThemeContext";
+
 
 
 
@@ -17,11 +18,11 @@ export default function ForgotPassword() {
   const darkImg = require("@/assets/images/ForgotPasswordImages/forgotpassworddark.png");
   const [isSelectedSMS, setIsSelectedSMS] = useState(true);
   const [isSelectedEmail, setIsSelectedEmail] = useState(false);
-  const [isDark, setIsDark] = useState(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
   const [email, setEmail] = useState("")
+  const [isLoading , setIsLoading] = useState(false)
   const [alert, setAlert] = useState<{ text: string, status: "success" | "error" | "info" | "warning" } | null>(null);
 
-
   const validateEmail = (email: string) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
@@ -39,58 +40,69 @@ export default function ForgotPassword() {
 
   const resetByEmail= async()=> {
     try {
+      setIsLoading(false);
       if(!email ){
         setAlert({ text: "Email can't be empty", status: "error" });
       }else if (!validateEmail(email)){
         setAlert({ text: "Enter a valid email", status: "error" });
       }else {
         const {error } = await supabase.auth.resetPasswordForEmail(email)
       if (error){
-        console.log("unable to reach the target...................: ", error?.message)
+        setIsLoading(false)
+        setAlert({ text: `${error?.message}`, status: "error" });
       }
       setTimeout(()=>{
       router.replace({
         pathname: "(auth)/ForgotPassword&Reset/[OTPform]}",
         params: {email}
       })
       },1000)
+      setIsLoading(true);
       setAlert({ text: "Please check your email", status: "success" });
       }
     } catch (error) {
       setAlert({ text: "An unexpected error occurred", status: "error" });
+      setIsLoading(false);
     }
   }
 
-  const border= isDark ? Colors.dark._3:Colors.grayScale._200;
+  const border= theme=== "dark" ? Colors.dark._3:Colors.grayScale._200;
 
   return (
     <>
-      <ScrollView
-      contentContainerStyle={isDark ? styles.containerdark : styles.container}
+      <View
+      style={{
+        justifyContent: "flex-start",
+        gap: 25,
+        alignItems: "center",
+        flex: 1,
+        padding: 20,
+        backgroundColor: theme=== "dark" ? Colors.dark._1 : Colors.others.white,
+      }}
       >
 
-        <View style={isDark ? styles.headerdark : styles.header}>
+        <View style={theme=== "dark" ? styles.headerdark : styles.header}>
           <Pressable onPress={()=> router.back()}>
             <LeftArrow
-              fillColor={isDark ? Colors.others.white : Colors.grayScale._900}
+              fillColor={theme=== "dark" ? Colors.others.white : Colors.grayScale._900}
             />
           </Pressable>
           <Text
             style={[
               Typography.heading._4,
-              { color: isDark ? Colors.others.white : Colors.grayScale._900 },
+              { color: theme=== "dark" ? Colors.others.white : Colors.grayScale._900 },
             ]}
           >
             Forgot Password
           </Text>
         </View>
         <View style={{ backgroundColor: "transparent"}}>
-          <Image source={isDark ? darkImg : image} style={{width:276,height:250}}></Image>
+          <Image source={theme=== "dark" ? darkImg : image} style={{width:276,height:250}}></Image>
         </View>
         <Text
           style={[
             Typography.regular.xLarge,
-            { color: isDark ? Colors.others.white : Colors.grayScale._900 },
+            { color:theme=== "dark"  ? Colors.others.white : Colors.grayScale._900 },
           ]}
         >
           Select which contact details should we use to reset your password
@@ -106,7 +118,7 @@ export default function ForgotPassword() {
               ? Colors.main.primary._500
               : border,
 
-            backgroundColor: isDark ? Colors.dark._1 : Colors.others.white,
+            backgroundColor: theme=== "dark" ? Colors.dark._1 : Colors.others.white,
             borderWidth: 3,
             borderRadius: 32,
             flexDirection: "row",
@@ -119,7 +131,7 @@ export default function ForgotPassword() {
               width: 80,
               height: 80,
               borderRadius: 100,
-              backgroundColor: Colors.transparent.blue,
+              backgroundColor:theme === "dark" ? "#181A20" : "#FFFFFF",
               alignItems: "center",
               justifyContent: "center",
             }}
@@ -136,7 +148,7 @@ export default function ForgotPassword() {
               style={[
                 Typography.medium.medium,
                 {
-                  color: isDark ? Colors.grayScale._300 : Colors.grayScale._600,
+                  color: theme=== "dark"  ? Colors.grayScale._300 : Colors.grayScale._600,
                 },
               ]}
             >
@@ -145,10 +157,10 @@ export default function ForgotPassword() {
             <Text
               style={[
                 Typography.bold.large,
-                { color: isDark ? Colors.others.white : Colors.grayScale._900 },
+                { color: theme=== "dark"  ? Colors.others.white : Colors.grayScale._900 },
               ]}
             >
-              +1 111*****99
+              +250********59
             </Text>
           </View>
         </TouchableOpacity>
@@ -162,7 +174,7 @@ export default function ForgotPassword() {
             borderColor: isSelectedEmail
               ? Colors.main.primary._500
               : border,
-            backgroundColor: isDark ? Colors.dark._1 : Colors.others.white,
+            backgroundColor: theme=== "dark"  ? Colors.dark._1 : Colors.others.white,
             borderWidth: 3,
             borderRadius: 32,
             flexDirection: "row",
@@ -192,7 +204,7 @@ export default function ForgotPassword() {
               style={[
                 Typography.medium.medium,
                 {
-                  color: isDark ? Colors.grayScale._300 : Colors.grayScale._600,
+                  color: theme=== "dark"  ? Colors.grayScale._300 : Colors.grayScale._600,
                 },
               ]}
             >
@@ -202,9 +214,9 @@ export default function ForgotPassword() {
               style={[
                 Typography.bold.large,
 
-                { color: isDark ? Colors.others.white : Colors.grayScale._900, borderRadius: 5, borderBottomWidth: 1,  borderColor: "#ccc",minWidth: "60%", paddingStart:10}]}
+                { color: theme=== "dark"  ? Colors.others.white : Colors.grayScale._900, borderRadius: 5, borderWidth: 1,  borderColor: "#ccc",minWidth: "75%", paddingStart:10}]}
               placeholder="email"
-              placeholderTextColor={isDark ? Colors.others.white : Colors.grayScale._500}
+              placeholderTextColor={theme=== "dark"  ? Colors.others.white : Colors.grayScale._500}
 
               value={email}
               onChangeText={(email)=> setEmail(email)}
@@ -228,9 +240,14 @@ export default function ForgotPassword() {
           }}
         >
 
-          <Text style={[Typography.bold.large,{color:Colors.others.white}]}>Continue</Text>
+          {isLoading ? (
+            <ActivityIndicator color="white" />
+          ) : (
+            <Text style={[Typography.bold.large,{color:Colors.others.white}]}>Continue</Text>
+
+          )}
         </TouchableOpacity>
-      </ScrollView>
+      </View>
     </>
   );
 }
@@ -245,14 +262,6 @@ const styles = StyleSheet.create({
     marginTop: 60,
     backgroundColor: "transparent",
   },
-  container: {
-    justifyContent: "flex-start",
-    gap: 25,
-    alignItems: "center",
-    backgroundColor: Colors.others.white,
-    flex: 1,
-    padding: 20,
-  },
 
   headerdark: {
     width: "100%",
@@ -263,12 +272,5 @@ const styles = StyleSheet.create({
     marginTop: 60,
     backgroundColor: "transparent",
   },
-  containerdark: {
-    justifyContent: "flex-start",
-    gap: 25,
-    backgroundColor: Colors.dark._1,
-    alignItems: "center",
-    flex: 1,
-    padding: 20,
-  },
+
 });