From 1caeebdca3340421916862369234ec79992d7c54 Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Fri, 26 Jul 2024 03:01:43 +0200
Subject: [PATCH] use snake_case field names for registration form

Although not conventional, our API uses snake_case and returns form
field exceptions in the same format. Thus to avoid handling variable
name conversions it is probably for the better
---
 src/api.ts                               |  9 +++++----
 src/modules/register/UserRegister.tsx    | 10 +++++-----
 src/modules/register/useUserRegister.tsx |  6 +++---
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index adc6891..3f80ee9 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -79,7 +79,8 @@ export function requestUserData(authToken: string) {
   };
 }
 
-export function requestRegisterUser({ firstName, lastName, email, phoneNumber, password }: UserRegisterFormValues) {
+// We use snake_case in order to fetch and display field errors from the API without any additional formatting
+export function requestRegisterUser({ first_name, last_name, email, phone_number, password }: UserRegisterFormValues) {
   return (dispatch: AppDispatch) => {
     dispatch(registerUserRequest());
 
@@ -90,10 +91,10 @@ export function requestRegisterUser({ firstName, lastName, email, phoneNumber, p
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        first_name: firstName,
-        last_name: lastName,
+        first_name: first_name,
+        last_name: last_name,
         email,
-        phone_number: phoneNumber,
+        phone_number: phone_number,
         password,
       }),
     })
diff --git a/src/modules/register/UserRegister.tsx b/src/modules/register/UserRegister.tsx
index c7bbf5a..ac11718 100644
--- a/src/modules/register/UserRegister.tsx
+++ b/src/modules/register/UserRegister.tsx
@@ -24,15 +24,15 @@ const UserRegister = () => {
       <View style={styles.card}>
         <ScrollView>
           <FormInput
-            name="firstName"
+            name="first_name"
             label="Fornavn"
             control={control}
             errors={errors}
             autoFocus
-            onSubmitEditing={() => setFocus('lastName')}
+            onSubmitEditing={() => setFocus('last_name')}
           />
           <FormInput
-            name="lastName"
+            name="last_name"
             label="Etternavn"
             control={control}
             errors={errors}
@@ -50,10 +50,10 @@ const UserRegister = () => {
               required: 'Kan ikke være tomt!',
               validate: (v) => EmailValidator.validate(v) || 'er ikke en gyldig e-post',
             }}
-            onSubmitEditing={() => setFocus('phoneNumber')}
+            onSubmitEditing={() => setFocus('phone_number')}
           />
           <FormInput
-            name="phoneNumber"
+            name="phone_number"
             label="Mobilnummer"
             control={control}
             errors={errors}
diff --git a/src/modules/register/useUserRegister.tsx b/src/modules/register/useUserRegister.tsx
index c1c0732..44b04ae 100644
--- a/src/modules/register/useUserRegister.tsx
+++ b/src/modules/register/useUserRegister.tsx
@@ -7,10 +7,10 @@ import { useAppDispatch, useAppSelector, usePrevious } from 'src/hooks';
 import { ToastProps } from 'src/types/toast';
 
 export interface UserRegisterFormValues {
-  firstName: string;
-  lastName: string;
+  first_name: string;
+  last_name: string;
   email: string;
-  phoneNumber: string;
+  phone_number: string;
   password: string;
 }