From b76a832c43d15a70b33cb981354ed32993a31bdb Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Mon, 8 Jul 2024 21:20:19 +0200
Subject: [PATCH] Fix forms not registering input values

Ended up ruining the clean looking code. There's probably a way to make
it clean AND working
---
 src/components/FormInput.tsx             | 10 ++++-----
 src/modules/login/Login.tsx              |  6 +++++-
 src/modules/login/useLogin.tsx           |  3 ++-
 src/modules/register/UserRegister.tsx    | 26 +++++++++++++++++++++---
 src/modules/register/useUserRegister.tsx |  3 ++-
 5 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 91e6e81..3a00011 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -1,9 +1,11 @@
 import { Input, Text, WarningOutlineIcon, FormControl, IInputProps } from 'native-base';
 import React from 'react';
-import { Controller, UseControllerProps, useForm } from 'react-hook-form';
+import { Control, Controller, UseControllerProps } from 'react-hook-form';
 import { ReturnKeyTypeOptions } from 'react-native';
 
 type FormInputProps = {
+  errors: any; // TODO: Figure out how to handle typing this
+  control: Control<any, any>;
   name: string;
   label: string;
   rules?: UseControllerProps['rules'];
@@ -11,6 +13,8 @@ type FormInputProps = {
 } & IInputProps;
 
 const FormInput = ({
+  errors,
+  control,
   name,
   label,
   rules = {
@@ -19,10 +23,6 @@ const FormInput = ({
   returnKeyType = 'next',
   ...rest
 }: FormInputProps) => {
-  const {
-    formState: { errors },
-    control,
-  } = useForm();
   const fieldError = errors[name];
   return (
     <Controller
diff --git a/src/modules/login/Login.tsx b/src/modules/login/Login.tsx
index e3bafa6..ca3fcfe 100644
--- a/src/modules/login/Login.tsx
+++ b/src/modules/login/Login.tsx
@@ -10,7 +10,7 @@ import theme from 'src/theme';
 import useLogin from './useLogin';
 
 const Login = () => {
-  const { isLoggingIn, errors, setFocus, onSubmit } = useLogin();
+  const { isLoggingIn, errors, control, setFocus, onSubmit } = useLogin();
 
   return (
     <ScrollView>
@@ -20,6 +20,8 @@ const Login = () => {
           name="email"
           label="E-post / Brukernavn"
           keyboardType="email-address"
+          control={control}
+          errors={errors}
           autoFocus
           autoCapitalize="none"
           autoCorrect={false}
@@ -28,6 +30,8 @@ const Login = () => {
         <FormInput
           name="password"
           label="Passord"
+          control={control}
+          errors={errors}
           secureTextEntry
           autoCapitalize="none"
           autoCorrect={false}
diff --git a/src/modules/login/useLogin.tsx b/src/modules/login/useLogin.tsx
index eca7c93..c084014 100644
--- a/src/modules/login/useLogin.tsx
+++ b/src/modules/login/useLogin.tsx
@@ -20,6 +20,7 @@ const useLogin = () => {
   const loginError = useAppSelector((store) => store.loginError);
 
   const {
+    control,
     handleSubmit,
     formState: { errors },
     setFocus,
@@ -36,7 +37,7 @@ const useLogin = () => {
     }
   }, [isAuthenticated, navigation]);
 
-  return { onSubmit, isLoggingIn, setFocus, errors: { ...errors, ...loginError } };
+  return { onSubmit, isLoggingIn, setFocus, control, errors: { ...errors, ...loginError } };
 };
 
 export default useLogin;
diff --git a/src/modules/register/UserRegister.tsx b/src/modules/register/UserRegister.tsx
index 2d35fc7..c7bbf5a 100644
--- a/src/modules/register/UserRegister.tsx
+++ b/src/modules/register/UserRegister.tsx
@@ -13,7 +13,8 @@ import useUserRegister from './useUserRegister';
 const { Toast } = Incubator;
 
 const UserRegister = () => {
-  const { isRegisteringUser, onSubmit, isValid, errors, registerError, setFocus, toast, setToast } = useUserRegister();
+  const { isRegisteringUser, onSubmit, isValid, control, errors, registerError, setFocus, toast, setToast } =
+    useUserRegister();
   const isDisabled = isRegisteringUser || !isValid;
   // TODO: validate on type
   // TODO: highlight errorfields
@@ -22,12 +23,27 @@ const UserRegister = () => {
     <>
       <View style={styles.card}>
         <ScrollView>
-          <FormInput name="firstName" label="Fornavn" autoFocus onSubmitEditing={() => setFocus('lastName')} />
-          <FormInput name="lastName" label="Etternavn" onSubmitEditing={() => setFocus('email')} />
+          <FormInput
+            name="firstName"
+            label="Fornavn"
+            control={control}
+            errors={errors}
+            autoFocus
+            onSubmitEditing={() => setFocus('lastName')}
+          />
+          <FormInput
+            name="lastName"
+            label="Etternavn"
+            control={control}
+            errors={errors}
+            onSubmitEditing={() => setFocus('email')}
+          />
           <FormInput
             name="email"
             label="E-post"
             keyboardType="email-address"
+            control={control}
+            errors={errors}
             autoCapitalize="none"
             autoCorrect={false}
             rules={{
@@ -39,12 +55,16 @@ const UserRegister = () => {
           <FormInput
             name="phoneNumber"
             label="Mobilnummer"
+            control={control}
+            errors={errors}
             keyboardType="phone-pad"
             onSubmitEditing={() => setFocus('password')}
           />
           <FormInput
             name="password"
             label="Passord"
+            control={control}
+            errors={errors}
             secureTextEntry
             autoCapitalize="none"
             autoCorrect={false}
diff --git a/src/modules/register/useUserRegister.tsx b/src/modules/register/useUserRegister.tsx
index 1ed4a1f..c1c0732 100644
--- a/src/modules/register/useUserRegister.tsx
+++ b/src/modules/register/useUserRegister.tsx
@@ -25,6 +25,7 @@ const useUserRegister = () => {
   const isAuthenticatedPrev = usePrevious(isAuthenticated);
 
   const {
+    control,
     handleSubmit,
     formState: { errors, isValid },
     setFocus,
@@ -55,6 +56,6 @@ const useUserRegister = () => {
     }
   }, [isAuthenticatedPrev, isAuthenticated, navigation]);
 
-  return { isRegisteringUser, onSubmit, isValid, registerError, errors, setFocus, toast, setToast };
+  return { isRegisteringUser, onSubmit, isValid, registerError, control, errors, setFocus, toast, setToast };
 };
 export default useUserRegister;