11import React , { useContext , useState , useEffect } from "react" ;
2- import { Pressable , StyleSheet , View , FlatList , TextInput , Platform } from "react-native" ;
2+ import {
3+ Pressable ,
4+ StyleSheet ,
5+ View ,
6+ FlatList ,
7+ TextInput ,
8+ Platform ,
9+ } from "react-native" ;
310import { SvgXml } from "react-native-svg" ;
411import { Dropdown } from "react-native-element-dropdown" ;
512import Button from "@/components/UI/Button" ;
613import { Colors } from "@/constants/Colors" ;
7- import DateTimePicker from ' @react-native-community/datetimepicker' ;
14+ import DateTimePicker from " @react-native-community/datetimepicker" ;
815import {
916 CalenderIcon ,
1017 CalenderIconDark ,
@@ -19,18 +26,19 @@ import { ThemeContext } from "@/ctx/ThemeContext";
1926import { supabase } from "@/lib/supabase" ;
2027import { fetchPatientData , getPatientData } from "@/utils/LoggedInUser" ;
2128import { User } from "@/utils/LoggedInUser" ;
29+ import { router } from "expo-router" ;
2230
2331interface PatientData {
24- id : string ,
25- first_name : string ,
26- last_name : string ,
27- date_of_birth : string ,
28- gender : string ,
29- country : string ,
30- email : string ,
31- phone : string ,
32+ id : string ;
33+ first_name : string ;
34+ last_name : string ;
35+ date_of_birth : string ;
36+ gender : string ;
37+ country : string ;
38+ email : string ;
39+ phone : string ;
3240}
33- interface props {
41+ interface props {
3442 disabled ?: boolean ;
3543 editable ?: boolean ;
3644}
@@ -55,7 +63,7 @@ function EditProfile() {
5563
5664 const onChange = ( event : any , selectedDate ?: Date ) => {
5765 const currentDate = selectedDate || date ;
58- setShow ( Platform . OS === ' ios' ) ;
66+ setShow ( Platform . OS === " ios" ) ;
5967 setDate ( currentDate ) ;
6068 } ;
6169
@@ -65,11 +73,11 @@ function EditProfile() {
6573
6674 const formatDate = ( date : Date ) : string => {
6775 const year = date . getFullYear ( ) ;
68- const month = ( date . getMonth ( ) + 1 ) . toString ( ) . padStart ( 2 , '0' ) ; // Months are 0-based, so add 1
69- const day = date . getDate ( ) . toString ( ) . padStart ( 2 , '0' ) ;
76+ const month = ( date . getMonth ( ) + 1 ) . toString ( ) . padStart ( 2 , "0" ) ; // Months are 0-based, so add 1
77+ const day = date . getDate ( ) . toString ( ) . padStart ( 2 , "0" ) ;
7078 return `${ year } -${ month } -${ day } ` ;
7179 } ;
72-
80+
7381 useEffect ( ( ) => {
7482 getPatientData ( supabase , setUserData ) ;
7583 } , [ ] ) ;
@@ -78,37 +86,38 @@ function EditProfile() {
7886 const id : string = userData ?. id as string ;
7987 if ( id ) {
8088 fetchPatientData ( id , setPatientData ) ;
81- if ( userData ) {
82- setEmail ( userData ?. email as string )
83- setPhone ( userData ?. phone as string )
89+ if ( userData ) {
90+ setEmail ( userData ?. email as string ) ;
91+ setPhone ( userData ?. phone as string ) ;
8492 }
8593 }
8694 } , [ userData ] ) ;
87-
95+
8896 useEffect ( ( ) => {
89- if ( patientData ) {
90- setCountry ( patientData [ 0 ] ?. country as string )
91- setFirstName ( patientData [ 0 ] ?. first_name as string )
92- setLastName ( patientData [ 0 ] ?. last_name as string )
93- setGender ( patientData [ 0 ] ?. gender as string )
94- setBirthDate ( patientData [ 0 ] ?. date_of_birth as string )
95- setId ( patientData [ 0 ] ?. id )
96- setPhone ( patientData [ 0 ] ?. phone as string )
97- }
97+ if ( patientData ) {
98+ setCountry ( patientData [ 0 ] ?. country as string ) ;
99+ setFirstName ( patientData [ 0 ] ?. first_name as string ) ;
100+ setLastName ( patientData [ 0 ] ?. last_name as string ) ;
101+ setGender ( patientData [ 0 ] ?. gender as string ) ;
102+ setBirthDate ( patientData [ 0 ] ?. date_of_birth as string ) ;
103+ setId ( patientData [ 0 ] ?. id ) ;
104+ setPhone ( patientData [ 0 ] ?. phone as string ) ;
98105 }
99- , [ patientData ] ) ;
106+ } , [ patientData ] ) ;
100107
101108 useEffect ( ( ) => {
102- setBirthDate ( `${ formatDate ( date ) } ` )
103- } , [ date ] )
109+ setBirthDate ( `${ formatDate ( date ) } ` ) ;
110+ } , [ date ] ) ;
104111
105112 useEffect ( ( ) => {
106113 const getUser = async ( ) => {
107- const { data :{ user} } = await supabase . auth . getUser ( )
108- setEmail ( user ?. email as string )
109- }
110- getUser ( )
111- } , [ ] )
114+ const {
115+ data : { user } ,
116+ } = await supabase . auth . getUser ( ) ;
117+ setEmail ( user ?. email as string ) ;
118+ } ;
119+ getUser ( ) ;
120+ } , [ ] ) ;
112121
113122 const countryNames : { label : string ; value : string } [ ] = Object . keys (
114123 typedCountries
@@ -119,22 +128,26 @@ function EditProfile() {
119128 const handleUpdate = async ( ) => {
120129 try {
121130 const data = await supabase
122- . from ( ' patients' )
131+ . from ( " patients" )
123132 . update ( {
124133 first_name : firstName ,
125134 last_name : lastName ,
126135 gender : gender ,
127136 date_of_birth : birthDate ,
128137 country : country ,
129- phone : phone
138+ phone : phone ,
130139 } )
131- . eq ( 'id' , id ) ;
140+ . eq ( "id" , id ) ;
141+
142+ const res = await supabase . auth . updateUser ( { email : email } ) ;
143+
144+ console . log ( res ) ;
132145
133146 if ( data . error ) throw data . error ;
134- console . log ( data )
135147 alert ( "Profile updated successfully" ) ;
148+ router . back ( ) ;
136149 } catch ( error ) {
137- console . log ( error )
150+ console . log ( error ) ;
138151 alert ( "Error updating profile" ) ;
139152 }
140153 } ;
@@ -165,32 +178,44 @@ function EditProfile() {
165178 Typography . semiBold . medium ,
166179 {
167180 backgroundColor :
168- theme === "light" ? Colors . grayScale . _50 : Colors . dark . _2 ,
181+ theme === "light"
182+ ? Colors . grayScale . _50
183+ : Colors . dark . _2 ,
169184 borderRadius : 15 ,
170185 flexDirection : "row" ,
171186 alignItems : "center" ,
172187 paddingHorizontal : 20 ,
173- color : theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
188+ color :
189+ theme === "light"
190+ ? Colors . grayScale . _900
191+ : Colors . others . white ,
174192 paddingVertical : 15 ,
175- } ] }
193+ } ,
194+ ] }
176195 placeholderTextColor = { Colors . grayScale . _500 }
177196 placeholder = "First Name"
178197 value = { firstName }
179- onChangeText = { ( text ) => setFirstName ( text ) }
198+ onChangeText = { ( text ) => setFirstName ( text ) }
180199 />
181200 < TextInput
182201 style = { [
183202 Typography . semiBold . medium ,
184203 {
185204 backgroundColor :
186- theme === "light" ? Colors . grayScale . _50 : Colors . dark . _2 ,
205+ theme === "light"
206+ ? Colors . grayScale . _50
207+ : Colors . dark . _2 ,
187208 borderRadius : 15 ,
188209 flexDirection : "row" ,
189210 alignItems : "center" ,
190211 paddingHorizontal : 20 ,
191- color : theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
212+ color :
213+ theme === "light"
214+ ? Colors . grayScale . _900
215+ : Colors . others . white ,
192216 paddingVertical : 15 ,
193- } ] }
217+ } ,
218+ ] }
194219 placeholderTextColor = { Colors . grayScale . _500 }
195220 placeholder = "Last Name"
196221 value = { lastName }
@@ -204,13 +229,16 @@ function EditProfile() {
204229 flexDirection : "row" ,
205230 alignItems : "center" ,
206231 paddingHorizontal : 20 ,
207- } } >
232+ } }
233+ >
208234 < TextInput
209235 style = { [
210236 Typography . semiBold . medium ,
211237 {
212238 color :
213- theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
239+ theme === "light"
240+ ? Colors . grayScale . _900
241+ : Colors . others . white ,
214242 flexGrow : 1 ,
215243 paddingVertical : 15 ,
216244 } ,
@@ -223,19 +251,17 @@ function EditProfile() {
223251 />
224252 < Pressable onPress = { showDatepicker } >
225253 < SvgXml
226- xml = {
227- theme === "light" ? CalenderIcon : CalenderIconDark
228- }
254+ xml = { theme === "light" ? CalenderIcon : CalenderIconDark }
229255 />
230256 </ Pressable >
231257 { show && (
232- < DateTimePicker
233- value = { date }
234- mode = "date"
235- display = "default"
236- onChange = { onChange }
237- />
238- ) }
258+ < DateTimePicker
259+ value = { date }
260+ mode = "date"
261+ display = "default"
262+ onChange = { onChange }
263+ />
264+ ) }
239265 </ View >
240266 < View
241267 style = { {
@@ -245,13 +271,16 @@ function EditProfile() {
245271 flexDirection : "row" ,
246272 alignItems : "center" ,
247273 paddingHorizontal : 20 ,
248- } } >
274+ } }
275+ >
249276 < TextInput
250277 style = { [
251278 Typography . semiBold . medium ,
252279 {
253280 color :
254- theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
281+ theme === "light"
282+ ? Colors . grayScale . _900
283+ : Colors . others . white ,
255284 flexGrow : 1 ,
256285 paddingVertical : 15 ,
257286 } ,
@@ -263,9 +292,7 @@ function EditProfile() {
263292 />
264293 < Pressable >
265294 < SvgXml
266- xml = {
267- theme === "light" ? MessageIcon : MessageIconDark
268- }
295+ xml = { theme === "light" ? MessageIcon : MessageIconDark }
269296 />
270297 </ Pressable >
271298 </ View >
@@ -329,14 +356,20 @@ function EditProfile() {
329356 Typography . semiBold . medium ,
330357 {
331358 backgroundColor :
332- theme === "light" ? Colors . grayScale . _50 : Colors . dark . _2 ,
359+ theme === "light"
360+ ? Colors . grayScale . _50
361+ : Colors . dark . _2 ,
333362 borderRadius : 15 ,
334363 flexDirection : "row" ,
335364 alignItems : "center" ,
336365 paddingHorizontal : 20 ,
337- color : theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
366+ color :
367+ theme === "light"
368+ ? Colors . grayScale . _900
369+ : Colors . others . white ,
338370 paddingVertical : 15 ,
339- } ] }
371+ } ,
372+ ] }
340373 placeholderTextColor = { Colors . grayScale . _500 }
341374 placeholder = "+250"
342375 value = { phone }
@@ -347,14 +380,20 @@ function EditProfile() {
347380 Typography . semiBold . medium ,
348381 {
349382 backgroundColor :
350- theme === "light" ? Colors . grayScale . _50 : Colors . dark . _2 ,
383+ theme === "light"
384+ ? Colors . grayScale . _50
385+ : Colors . dark . _2 ,
351386 borderRadius : 15 ,
352387 flexDirection : "row" ,
353388 alignItems : "center" ,
354389 paddingHorizontal : 20 ,
355- color : theme === "light" ? Colors . grayScale . _900 : Colors . others . white ,
390+ color :
391+ theme === "light"
392+ ? Colors . grayScale . _900
393+ : Colors . others . white ,
356394 paddingVertical : 15 ,
357- } ] }
395+ } ,
396+ ] }
358397 placeholderTextColor = { Colors . grayScale . _500 }
359398 placeholder = "Gender"
360399 value = { gender }
@@ -378,7 +417,7 @@ function EditProfile() {
378417 ) }
379418 </ >
380419 ) ;
381- } ;
420+ }
382421
383422export default EditProfile ;
384423
0 commit comments