From 6fb76cb3b67207cb32885fa83ea1d1cbe5d2e9b2 Mon Sep 17 00:00:00 2001 From: Irirwanirira Date: Fri, 21 Jun 2024 01:51:42 +0200 Subject: [PATCH] Fix profile image on dashboard --- app/(app)/ActionMenu/AllDoctorScreen.tsx | 650 ++++++++---------- app/(app)/ActionMenu/index.tsx | 381 ++++++---- app/(app)/Profile/EditProfile.tsx | 2 +- app/(app)/Profile/index.tsx | 49 +- app/(auth)/CreateNewPassword.tsx | 18 +- app/(auth)/ForgotPassword&Reset/index.tsx | 84 +-- .../SignIn&SignOut/YourProfile/[email].tsx | 3 +- components/DoctorComponent.tsx | 5 +- components/UI/SelectProfile.tsx | 7 - components/UI/TabBar.tsx | 2 + constants/Types.ts | 11 + {helper => utils}/LoggedInUser.ts | 17 + 12 files changed, 675 insertions(+), 554 deletions(-) rename {helper => utils}/LoggedInUser.ts (74%) diff --git a/app/(app)/ActionMenu/AllDoctorScreen.tsx b/app/(app)/ActionMenu/AllDoctorScreen.tsx index ee4337d4..41765fa6 100644 --- a/app/(app)/ActionMenu/AllDoctorScreen.tsx +++ b/app/(app)/ActionMenu/AllDoctorScreen.tsx @@ -1,376 +1,326 @@ -import React,{ReactElement, useEffect, useState} from 'react'; -import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable} from 'react-native' -import { Feather } from '@expo/vector-icons'; -import { AntDesign } from '@expo/vector-icons'; -import { Ionicons } from '@expo/vector-icons'; -import DoctorComponent from '@/components/DoctorComponent'; -import { FontAwesome } from '@expo/vector-icons'; - import { SvgXml } from "react-native-svg" -import { WhiteHeart } from '@/components/UI/icons/WhiteHeart'; -import { star } from '@/assets/icons/star'; -import { search } from '@/assets/icons/search'; -import { more } from '@/assets/icons/more'; -import { leftArrow } from '@/assets/icons/left'; -import data from "../../doctors.json" -import HeaderComponent from '@/components/HeaderComponent'; -import SearchComponent from '@/components/SearchComponent'; -import FoundDoctorCount from '@/components/FoundDoctorCount'; -import NofoundComponent from '@/components/NofoundComponent'; -import RemovefavoritePopup from '@/components/RemovefavoritePopup'; -import FilterPopup from '@/components/FilterSearchComponent'; -import { StatusBar } from 'expo-status-bar'; -import NotFoundScreen from '@/app/+not-found'; -import { ThemeContext } from '@/ctx/ThemeContext'; -import { useContext } from 'react'; -import { supabase } from '@/lib/supabase'; +import React, { ReactElement, useEffect, useState } from "react"; +import { + StyleSheet, + Text, + View, + SafeAreaView, + ScrollView, + Pressable, +} from "react-native"; +import DoctorComponent from "@/components/DoctorComponent"; +import { SvgXml } from "react-native-svg"; +import { WhiteHeart } from "@/components/UI/icons/WhiteHeart"; +import { star } from "@/assets/icons/star"; +import data from "../../doctors.json"; +import HeaderComponent from "@/components/HeaderComponent"; +import SearchComponent from "@/components/SearchComponent"; +import FoundDoctorCount from "@/components/FoundDoctorCount"; +import NofoundComponent from "@/components/NofoundComponent"; +import RemovefavoritePopup from "@/components/RemovefavoritePopup"; +import FilterPopup from "@/components/FilterSearchComponent"; +import { StatusBar } from "expo-status-bar"; +import { ThemeContext } from "@/ctx/ThemeContext"; +import { useContext } from "react"; +import { supabase } from "@/lib/supabase"; +import { Doctor } from "@/constants/Types"; +const tableName = "doctors"; - -const tableName = 'doctors' - - - - -interface imageMapProp{ - [key:string]:ReturnType +interface imageMapProp { + [key: string]: ReturnType; } -const imageMap:imageMapProp = { - 'doctor1.png': require("../../../assets/images/Doctors/doctor1.png"), - 'doctor2.png': require("../../../assets/images/Doctors/doctor2.png"), - 'doctor3.png': require("../../../assets/images/Doctors/doctor3.png"), - 'doctor4.png': require("../../../assets/images/Doctors/doctor4.png"), - 'doctor5.png':require("../../../assets/images/Doctors/doctor5.png") - -} -interface iconMappingProp{ - [key :string]:ReactElement -} - - -interface Doctor{ - id: number, - first_name: string, - last_name: string, - hospital: string, - rate: string, - review: string, - specialization: string, - about:string -} -interface categoryProp{ - name: string, - Doctors:Doctor[] +interface iconMappingProp { + [key: string]: ReactElement; } -export const iconMapping:iconMappingProp = { - heart: , - star: , +interface categoryProp { + name: string; + Doctors: Doctor[]; } - +export const iconMapping: iconMappingProp = { + heart: , + star: , +}; function DoctorScreen() { - const [showSearch, setShowSearch] = useState(false) - const [searchTerm, setSearchTerm] = useState('') - const [selectedCategory, setSelectedCategory] = useState(data.categories[0]) - const [showpopUp, setShowPopup] = useState(false) - const [selectedDoctor, setSelectedDoctor] = useState() - const [showFilter, setShowfilter] = useState(false) - const [doctors,setDoctors]=useState([]) - const { theme, changeTheme } = useContext(ThemeContext) - const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight - const scrollbackColor = theme === "dark" ? styles.scrollDark : styles.scrollLight - - useEffect(() => { - async function fetchData() { - const { data, error } = await supabase.from(tableName).select('*'); + const [showSearch, setShowSearch] = useState(false); + const [searchTerm, setSearchTerm] = useState(""); + const [selectedCategory, setSelectedCategory] = useState(data.categories[0]); + const [showpopUp, setShowPopup] = useState(false); + const [selectedDoctor, setSelectedDoctor] = useState(); + const [showFilter, setShowfilter] = useState(false); + const [doctors, setDoctors] = useState([]); + const { theme, changeTheme } = useContext(ThemeContext); + const containerStyle = + theme === "dark" ? styles.outerDark : styles.outerLight; + const scrollbackColor = + theme === "dark" ? styles.scrollDark : styles.scrollLight; - if (error) { - console.error('Error fetching data:', error); - return; - } - setDoctors(data) - -// console.log('Fetched data:', data); -} + useEffect(() => { + async function fetchData() { + const { data, error } = await supabase.from(tableName).select("*"); -fetchData(); - },[]) + if (error) { + console.error("Error fetching data:", error); + return; + } + setDoctors(data); - const handleSearchPressed = () => { - setShowSearch(true) - } - const handleSearchSubmit = (text: string) => { - setSearchTerm(text.toLowerCase()) - } - - const handleFilter = () => { - setShowfilter(true) - } - const handleRemove = (doctor:any) => { - setSelectedDoctor(doctor) - - setShowPopup(true) + console.log("Fetched data:", data); } - const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors - return ( - - - - - - { - !showSearch ? ( - - ) : ( - - - ) - } - - - - - {data.categories.map((category, index) => - - - {category.name} - - - )} - - - - - {showSearch && ( - - )} - - - - {filteredDoctors.length > 0 ? ( - - filteredDoctors.map((doctor: any, index: any) => - - - { + setShowSearch(true); + }; + const handleSearchSubmit = (text: string) => { + setSearchTerm(text.toLowerCase()); + }; - imageSource={{uri:doctor.image}} - name={`${doctor.first_name} ${doctor.last_name}`} - iconComponent={} - professionalTitle={doctor.specialization} - hospital={doctor.hospital} - star={} - review={doctor.review} - rate={doctor.rate} - remove={()=>handleRemove(doctor)} + const handleFilter = () => { + setShowfilter(true); + }; + const handleRemove = (doctor: any) => { + setSelectedDoctor(doctor); - /> - - - ) - - ) : ( - - )} - + setShowPopup(true); + }; - - - - - - - - setShowPopup(false)} - visible={showpopUp} - onClose={() => setShowPopup(false)} - doctor={selectedDoctor} - - + const filteredDoctors = + searchTerm.length > 0 + ? doctors.filter((doctor) => + doctor.last_name.toLowerCase().includes(searchTerm) + ) + : doctors; + return ( + + + + + {!showSearch ? ( + - setShowfilter(false)} - visible={showFilter} - onClose={() => setShowfilter(false)} - - - + ) : ( + - - - - - - ); + )} + + + + {data.categories.map((category, index) => ( + + + {category.name} + + + ))} + + + + {showSearch && } + + + + {filteredDoctors.length > 0 ? ( + filteredDoctors.map((doctor: any, index: any) => ( + + } + professionalTitle={doctor.specialization} + hospital={doctor.hospital} + star={} + review={doctor.review} + rate={doctor.rate} + remove={() => handleRemove(doctor)} + /> + + )) + ) : ( + + )} + + + + setShowPopup(false)} + visible={showpopUp} + onClose={() => setShowPopup(false)} + doctor={selectedDoctor} + /> + setShowfilter(false)} + visible={showFilter} + onClose={() => setShowfilter(false)} + /> + + ); } export default DoctorScreen; const styles = StyleSheet.create({ - container: { - flex: 1, - zIndex:1 - }, - outerDark: { - backgroundColor:"#181A20" - - }, - outerLight: { - backgroundColor: "white", - - }, - upper: { - display: "flex", - flexDirection: 'row', - justifyContent: "center", - alignItems: "center", - width:"100%", - marginBottom: "7%", - marginTop: "18%", - }, - foundDoctorView: { - width: "100%", - display: "flex", - flexDirection: 'row', - justifyContent: "center", - alignItems: "center" - }, - searchComponent: { - - }, - upperInner: { - width: "95%", - display: "flex", - flexDirection: 'row', - justifyContent: "space-between", - alignItems: "center", - }, - upperLeft: { - display: "flex", - flexDirection: "row", - justifyContent: 'space-between', - width: "70%", - height:"100%", - }, - categoryScroll: { - - }, - categoryBtnView: { - display:"flex", - flexDirection: "row", - alignItems: 'center', - marginBottom: "5%", - backgroundColor: "white", - }, - categoryBtn: { - borderWidth: 2, - borderColor: "#246BFD", - height: 40, - paddingHorizontal: 20, - paddingVertical:7, - borderRadius: 20, - display: "flex", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - marginRight: 8, - marginLeft:10 - }, - firstCategoryBtn: { - backgroundColor: "#246BFD" - }, - firstCategoryBtnText: { - color:"white" - }, - categoryBtnText: { - color: "#246BFD", - fontSize:16 - }, - body: { - width: "98%", - backgroundColor:"#F7F7F7", - }, - scroll: { - width: "100%", - height: "100%", - zIndex: 1, - }, - scrollDark: { - backgroundColor:"#181A20" - - }, - scrollLight: { - backgroundColor: "#F7F7F7" - - }, - searchView: { - display: "flex", - flexDirection: 'row', - justifyContent: "center", - alignItems: "center", - }, - moreOuter: { - display: "flex", - flexDirection: 'row', - justifyContent: "center", - alignItems: "center", - }, - Headstyle: { - color: "#212121", - fontWeight: "bold", - fontSize:20 - }, - NotificationView: { - width:"80%" - }, - componentView: { - marginBottom: "5%", - width: "100%", - height:150, - display: "flex", - flexDirection: 'row', - justifyContent: "center", - alignItems: "center", - }, - rightView: { - display: "flex", - flexDirection: "row", - justifyContent: 'space-between', - width:"25%" - }, - - -}) \ No newline at end of file + container: { + flex: 1, + zIndex: 1, + }, + outerDark: { + backgroundColor: "#181A20", + }, + outerLight: { + backgroundColor: "white", + }, + upper: { + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + width: "100%", + marginBottom: "7%", + marginTop: "18%", + }, + foundDoctorView: { + width: "100%", + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + searchComponent: {}, + upperInner: { + width: "95%", + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + }, + upperLeft: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + width: "70%", + height: "100%", + }, + categoryScroll: {}, + categoryBtnView: { + display: "flex", + flexDirection: "row", + alignItems: "center", + marginBottom: "5%", + backgroundColor: "white", + }, + categoryBtn: { + borderWidth: 2, + borderColor: "#246BFD", + height: 40, + paddingHorizontal: 20, + paddingVertical: 7, + borderRadius: 20, + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + marginRight: 8, + marginLeft: 10, + }, + firstCategoryBtn: { + backgroundColor: "#246BFD", + }, + firstCategoryBtnText: { + color: "white", + }, + categoryBtnText: { + color: "#246BFD", + fontSize: 16, + }, + body: { + width: "98%", + backgroundColor: "#F7F7F7", + }, + scroll: { + width: "100%", + height: "100%", + zIndex: 1, + }, + scrollDark: { + backgroundColor: "#181A20", + }, + scrollLight: { + backgroundColor: "#F7F7F7", + }, + searchView: { + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + moreOuter: { + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + Headstyle: { + color: "#212121", + fontWeight: "bold", + fontSize: 20, + }, + NotificationView: { + width: "80%", + }, + componentView: { + marginBottom: "5%", + width: "100%", + height: 150, + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + rightView: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + width: "25%", + }, +}); diff --git a/app/(app)/ActionMenu/index.tsx b/app/(app)/ActionMenu/index.tsx index 23c44198..fec394bc 100644 --- a/app/(app)/ActionMenu/index.tsx +++ b/app/(app)/ActionMenu/index.tsx @@ -21,102 +21,206 @@ import { import { ThemeContext } from "@/ctx/ThemeContext"; import { blackHeart, whiteHeart } from "@/components/UI/icons/blackHeart"; import Chips from "@/components/UI/ChipsComponent"; -import { fullSmallBlueStar, fullSmallWhiteStar } from "@/components/UI/icons/star"; +import { + fullSmallBlueStar, + fullSmallWhiteStar, +} from "@/components/UI/icons/star"; import { Session } from "@supabase/supabase-js"; import { supabase } from "@/lib/supabase"; -import { fetchPatientData, getPatientData } from "@/helper/LoggedInUser"; +import { + getUserImageUrl, + fetchPatientData, + getPatientData, +} from "@/utils/LoggedInUser"; +import { Doctor } from "@/constants/Types"; +import DoctorDetails from "./Booking/Doctor_details"; +import DoctorComponent from "@/components/DoctorComponent"; +import { star } from "@/assets/icons/star"; +import NofoundComponent from "@/components/NofoundComponent"; export default function Index() { const [session, setSession] = useState(null); - const [userData, setUserData] = useState([]); + const [searchTerm, setSearchTerm] = useState('') + const [userData, setUserData] = useState<[]>([]); const [patientData, setPatientData] = useState(null); + const [imageUrl, setImageUrl] = useState([]); + const [activeIcon, setActiveIcon] = useState("Home"); + const [profilePhoto, setProfilePhoto] = useState(""); + const { theme, changeTheme } = useContext(ThemeContext); + const navigation = useNavigation(); + const [text, setText] = useState(""); + const [isLoading , setIsLoading] = useState(false) + const [doctors, setDoctors] = useState([]); + const [greeting, setGreeting] = useState(''); + + const [fontsLoaded] = useFontsExpo({ + "Urbanist-regular": require("@/assets/fonts/Urbanist-Regular.ttf"), + "Urbanist-bold": require("@/assets/fonts/Urbanist-Bold.ttf"), + "Urbanist-Semibold": require("@/assets/fonts/Urbanist-SemiBold.ttf"), + "Urbanist-Medium": require("@/assets/fonts/Urbanist-Medium.ttf"), + }); + const CDNURL = "https://vbwbfflzxuhktdvpbspd.supabase.co/storage/v1/object/public/patients/"; + const scrollbackColor = theme === "dark" ? styles.scrollDark : styles.scrollLight; + 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]); - const [activeIcon, setActiveIcon] = useState("Home"); + useEffect(() => { + if (imageUrl.length > 0) { + setProfilePhoto(imageUrl[0]?.name); + } + }, [imageUrl]); + + useEffect(() => { + async function fetchData() { + const { data, error } = await supabase.from("doctors").select("*"); + + if (error) { + setIsLoading(false) + throw new Error("Error fetching data:" + error.message); + } + setIsLoading(true) + setDoctors(data); + } + fetchData(); + }, [doctors]); + + useEffect(() => { + const updateGreeting = () => { + const now = new Date(); + const hours = now.getHours(); + + if (hours >= 12 && hours < 17) { + setGreeting('Good Afternoon'); + } else if (hours >= 17 || hours < 1) { + setGreeting('Good Evening'); + } else { + setGreeting('Good Morning'); + } + }; + + updateGreeting(); + const intervalId = setInterval(updateGreeting, 60000); + return () => clearInterval(intervalId); + }, []); + const handleIconPress = (iconName: string) => { - setActiveIcon(iconName); // Update active icon state when an icon is pressed + setActiveIcon(iconName); }; + const isIconActive = (iconName: string) => { return activeIcon === iconName; }; - const { theme, changeTheme } = useContext(ThemeContext); - const navigation = useNavigation(); - const [text, setText] = useState(""); - const [fontsLoaded] = useFontsExpo({ - "Urbanist-regular": require("@/assets/fonts/Urbanist-Regular.ttf"), - "Urbanist-bold": require("@/assets/fonts/Urbanist-Bold.ttf"), - "Urbanist-Semibold": require("@/assets/fonts/Urbanist-SemiBold.ttf"), - "Urbanist-Medium": require("@/assets/fonts/Urbanist-Medium.ttf"), - }); + + + if (!fontsLoaded) { return null; } - console.log(patientData?.image) - - - + const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors return ( - - - {patientData && ( - ( - + {patientData && ( + ( + - - - - - Good Morning👋 - {item?.first_name + " " + item?.last_name} - - - router.push("/ActionMenu/NotificationScreen")} - > - - - router.push("/ActionMenu/FavoriteDoctorScreen")} style={styles.heart}> - - - + marginTop: "5%", + }} + > + + - )} - keyExtractor={(item) => item.id} - contentContainerStyle={{ - paddingBottom:20 - }} - /> - )} - + + {" "} + {greeting} 👋 + + + {item?.first_name + " " + item?.last_name} + + + + router.push("/ActionMenu/NotificationScreen")} + > + + + + router.push("/ActionMenu/FavoriteDoctorScreen") + } + style={styles.heart} + > + + + + + )} + keyExtractor={(item) => item.id} + contentContainerStyle={{ + paddingBottom: 20, + }} + /> + )} + + contentContainerStyle={{ height: "150%" }} + > - Doctor Speciality - router.push("/ActionMenu/FavoriteDoctorScreen")}> + + Doctor Speciality + + router.push("/ActionMenu/FavoriteDoctorScreen")} + > See All @@ -300,8 +415,19 @@ export default function Index() { - Top Doctors - router.push("/ActionMenu/AllDoctorScreen")}> + + Top Doctors + + router.push("/ActionMenu/AllDoctorScreen")} + > See All @@ -420,79 +546,44 @@ export default function Index() { padding: 5, }} > - router.push("/ActionMenu/Booking/Doctor_details")} - style={{ - width: "95%", - height: 150, - marginTop: "2%", - marginLeft: "2%", - borderRadius: 20, - backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", - padding: 10, - flexDirection: "row", + - - - - - {" "} - Dr. Randy Wigham - - - - - - - Cardiologist | The Valley Hospital - - - - - 4.8 (3,379 reviews) - - - - + {filteredDoctors.length > 0 ? ( + filteredDoctors.map((doctor: any, index: any) => ( + + } + professionalTitle={doctor.specialization} + hospital={doctor?.hospital} + star={} + review={doctor.review} + rate={doctor.rate} + remove={() => handleRemove(doctor)} + /> + + )) + ) : ( + + )} + @@ -531,6 +622,17 @@ const styles = StyleSheet.create({ marginLeft: "0%", alignItems: "center", }, + scroll: { + width: "100%", + height: "100%", + zIndex: 1, + }, + scrollDark: { + backgroundColor: "#181A20", + }, + scrollLight: { + backgroundColor: "#F7F7F7", + }, FrameImage: { width: "101%", padding: 0, @@ -638,4 +740,5 @@ const styles = StyleSheet.create({ marginLeft: "5%", marginTop: "6%", }, + }); diff --git a/app/(app)/Profile/EditProfile.tsx b/app/(app)/Profile/EditProfile.tsx index 0d4832f3..e273874f 100644 --- 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 index fd338cc7..e3e8b980 100644 --- 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(null); const { theme, changeTheme } = useContext(ThemeContext); - const [image, setImage] = useState(null); - const [userData, setUserData] = useState([]); 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 ( {patientData && userData && ( @@ -86,7 +110,12 @@ const index = () => { gap:10, }} > - + + + + {/* */} { }, ]} > - +1 111 467 378 399 + {!item?.phone ? "add your phone number": item?.phone} (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,7 +212,12 @@ export default function CreateNewPassword() { { handleCreatePassword() }} style={styles.createButton}> + + {isLoading ? ( + + ) : ( Continue + )} @@ -213,6 +225,8 @@ export default function CreateNewPassword() { ); } + + const styles = StyleSheet.create({ scrollViewContent: { flexGrow: 1, diff --git a/app/(auth)/ForgotPassword&Reset/index.tsx b/app/(auth)/ForgotPassword&Reset/index.tsx index 155eb282..c71f9c55 100644 --- 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,6 +40,7 @@ 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)){ @@ -46,7 +48,8 @@ export default function ForgotPassword() { }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({ @@ -54,43 +57,52 @@ export default function ForgotPassword() { 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 ( <> - - + router.back()}> Forgot Password - + 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() { - +1 111*****99 + +250********59 @@ -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() { }} > - Continue + {isLoading ? ( + + ) : ( + Continue + + )} - + ); } @@ -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, - }, + }); diff --git a/app/(auth)/SignIn&SignOut/YourProfile/[email].tsx b/app/(auth)/SignIn&SignOut/YourProfile/[email].tsx index 56b03309..9301d602 100644 --- a/app/(auth)/SignIn&SignOut/YourProfile/[email].tsx +++ b/app/(auth)/SignIn&SignOut/YourProfile/[email].tsx @@ -78,7 +78,6 @@ const YourProfile = () => { // paddingHorizontal: 20, alignItems: "center", paddingVertical: 20, - flexGrow: 1, }} alwaysBounceVertical={false} > @@ -110,7 +109,7 @@ const YourProfile = () => { onChange={handleFormChange} /> console.error("Error while fetching data:", error); return; } + } + + export async function getUserImageUrl(storageName: string,userId:any, imageUrlState:any) { + const { data, error } = await supabase + .storage + .from(storageName) + .list(userId?.id + '/', { + limit: 100, + offset: 0, + sortBy: { column: 'name', order: 'asc' }, + }); + + if (error) { + return + } else { + imageUrlState(data); + } } \ No newline at end of file