20 - useImperativeHandle

src/screens/app/EditProfileScreen/EditProfileScreen.tsx

@@ -1,11 +1,14 @@
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 
 import {useUserGetById} from '@domain';
 
 import {Button, Screen} from '@components';
 import {AppScreenProps} from '@routes';
 
-import {EditProfileForm} from './components/EditProfileForm';
+import {
+  EditProfileForm,
+  EditProfileFormRef,
+} from './components/EditProfileForm';
 import {EditProfileHeader} from './components/EditProfileHeader';
 
 export function EditProfileScreen({
@@ -14,13 +17,21 @@ export function EditProfileScreen({
   const {user} = useUserGetById(route.params.userId);
   const [formIsValid, setFormIsValid] = useState(false);
 
+  const formRef = useRef<EditProfileFormRef>(null);
+
   function submitForm() {
-    //TODO:
+    formRef.current?.onSubmit();
   }
   return (
     <Screen canGoBack scrollable title="Editar Perfil">
       <EditProfileHeader user={user} />
-      {user && <EditProfileForm user={user} onChangeIsValid={setFormIsValid} />}
+      {user && (
+        <EditProfileForm
+          ref={formRef}
+          user={user}
+          onChangeIsValid={setFormIsValid}
+        />
+      )}
 
       <Button
         mt="s40"

src/screens/app/EditProfileScreen/components/EditProfileForm.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useImperativeHandle} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 
 import {User, authService} from '@domain';
@@ -15,18 +15,24 @@ type Props = {
   onChangeIsValid: (isValid: boolean) => void;
 };
 
-export function EditProfileForm({user, onChangeIsValid}: Props) {
-  const {control, watch, getFieldState, formState} = useForm<EditProfileSchema>(
-    {
+export type EditProfileFormRef = {
+  onSubmit: () => void;
+};
+
+export function EditProfileFormComponent(
+  {user, onChangeIsValid}: Props,
+  ref: React.Ref<EditProfileFormRef>,
+) {
+  const {control, watch, getFieldState, formState, handleSubmit} =
+    useForm<EditProfileSchema>({
       resolver: zodResolver(editProfileSchema),
       defaultValues: {
         username: user.username,
         firstName: user.firstName,
         lastName: user.lastName,
       },
       mode: 'onChange',
-    },
-  );
+    });
 
   const usernameValidation = useAsyncValidation({
     watch,
@@ -40,6 +46,12 @@ export function EditProfileForm({user, onChangeIsValid}: Props) {
     onChangeIsValid(formState.isValid && !usernameValidation.notReady);
   }, [formState.isValid, onChangeIsValid, usernameValidation.notReady]);
 
+  useImperativeHandle(ref, () => ({
+    onSubmit: () => {
+      handleSubmit(formValues => console.log(formValues))();
+    },
+  }));
+
   return (
     <View>
       <FormTextInput
@@ -75,3 +87,5 @@ export function EditProfileForm({user, onChangeIsValid}: Props) {
     </View>
   );
 }
+
+export const EditProfileForm = React.forwardRef(EditProfileFormComponent);