feat: add update profile handling

src/screens/Profile.tsx

@@ -4,16 +4,46 @@ import { Center, Heading, Text, useToast, VStack } from '@gluestack-ui/themed';
 import * as ImagePicker from 'expo-image-picker';
 import * as FileSystem from 'expo-file-system';
 
+import { Controller, useForm } from 'react-hook-form';
+
 import { Button } from '@components/Button';
 import { Input } from '@components/Input';
 import { ScreenHeader } from '@components/ScreenHeader';
 import { UserPhoto } from '@components/UserPhoto';
 import { ToastMessage } from '@components/ToastMessage';
+import { useAuth } from '@hooks/useAuth';
+
+type ProfileForm = {
+  name: string;
+  email: string;
+  old_password: string;
+  new_password: string;
+  confirm_password: string;
+};
 
 export function Profile() {
   const [userPhoto, setUserPhoto] = useState('https://i.pravatar.cc/200');
 
   const toast = useToast();
+  const { user } = useAuth();
+
+  const { control, handleSubmit } = useForm<ProfileForm>({
+    defaultValues: {
+      name: user.name,
+      email: user.email,
+      old_password: '',
+      new_password: '',
+      confirm_password: '',
+    },
+  });
+
+  async function handleProfileUpdate(data: ProfileForm) {
+    try {
+      console.debug('handleProfileUpdate =>', data);
+    } catch (error) {
+      throw error;
+    }
+  }
 
   async function handleUserPhotoSelection() {
     try {
@@ -72,8 +102,21 @@ export function Profile() {
           </TouchableOpacity>
 
           <Center w="$full" gap="$4">
-            <Input placeholder="Nome" bg="$gray600" />
+            <Controller
-            <Input value="john.doe@email.com" bg="$gray600" isReadOnly />
+              control={control}
+              name="name"
+              render={({ field: { onChange, value } }) => (
+                <Input placeholder="Nome" bg="$gray600" onChangeText={onChange} value={value} />
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="email"
+              render={({ field: { onChange, value } }) => (
+                <Input bg="$gray600" isReadOnly onChangeText={onChange} value={value} />
+              )}
+            />
           </Center>
 
           <Heading alignSelf="flex-start" color="$gray200" fontSize="$md" mt="$12" mb="$2">
@@ -81,11 +124,46 @@ export function Profile() {
           </Heading>
 
           <Center w="$full" gap="$4">
-            <Input placeholder="Senha antiga" bg="$gray600" secureTextEntry />
+            <Controller
-            <Input placeholder="Nova senha" bg="$gray600" secureTextEntry />
+              control={control}
-            <Input placeholder="Confirme a nova senha" bg="$gray600" secureTextEntry />
+              name="old_password"
+              render={({ field: { onChange } }) => (
+                <Input
+                  placeholder="Senha antiga"
+                  bg="$gray600"
+                  secureTextEntry
+                  onChangeText={onChange}
+                />
+              )}
+            />
 
-            <Button title="Atualizar" />
+            <Controller
+              control={control}
+              name="new_password"
+              render={({ field: { onChange } }) => (
+                <Input
+                  placeholder="Nova senha"
+                  bg="$gray600"
+                  secureTextEntry
+                  onChangeText={onChange}
+                />
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="confirm_password"
+              render={({ field: { onChange } }) => (
+                <Input
+                  placeholder="Confirme a nova senha"
+                  bg="$gray600"
+                  secureTextEntry
+                  onChangeText={onChange}
+                />
+              )}
+            />
+
+            <Button title="Atualizar" mt={4} onPress={handleSubmit(handleProfileUpdate)} />
           </Center>
         </Center>
       </ScrollView>