Ionic React + Firebase: React Hook Form

Get user input and put it into Firestore

Install these packages

npm install --save react-firebase-hooks 
npm install react-hook-form

See Full Code At The Bottom

Imports

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonGrid, IonCol, IonRow, IonLabel, IonInput, IonList, IonItem, IonButton, IonText, IonIcon, IonChip} from '@ionic/react';
import React, { useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import firebase from 'firebase';
import { useForm, Controller } from 'react-hook-form';
import { home, card, cash, person, chatbubbles } from 'ionicons/icons';

The Page Level ‘ProfileSetup’ Component

const ProfileSetup: React.FC = () => { const [user] = useAuthState(firebase.auth()); 
function createUserData(){ if (user){
firebase.firestore().collection('users').doc(user.uid).set({
name: "test-name",
}, { merge: true });
//Merge checks to see if values exist, if so don't overwrite everything, just update}} if (user){
console.log("creating user data");
createUserData();
}
firebase.firestore().collection('users').doc(user.uid).set({ name: "test-name", }, { merge: true });
if (user){ console.log("creating user data"); createUserData(); }
ionViewWillEnter() {if (user){ 
console.log("creating user data");
createUserData();
}
}
function updateUserData(data: any){if (user){ 
console.log("setting up user data for user with UID: " + user.uid); console.log("cash: " + Number(data["cash"]));
firebase.firestore().collection('users').doc(user.uid).set({monthlyIncome: Number(data["monthlyIncome"]),
monthlyExpenses: Number(data["monthlyExpenses"]),
cash: Number(data["cash"]),
realEstate: Number(data["realEstate"]),
checkingAccounts: Number(data["checkingAccounts"]),
savingsAccounts: Number(data["savingsAccounts"]), retirementAccounts: Number(data["retirementAccounts"]),
otherAssets: Number(data["otherAssets"]),
mortgages: Number(data["mortgages"]),
consumerDebt: Number(data["consumerDebt"]),
personalLoans: Number(data["personalLoans"]),
studentLoans: Number(data["studentLoans"]),
otherDebts: Number(data["otherDebts"]),
}, { merge: true }) } console.log(JSON.stringify(data, null, 2));
}
let initialValues = { 
monthlyIncome: 0.00,
monthlyExpenses: 0.00,
cash: 0.00,
realEstate: 0.00,
checkingAccounts: 0.00,
savingsAccounts: 0.00,
retirementAccounts: 0.00,
otherAssets: 0.00,
mortgages: 0.00,
consumerDebt: 0.00,
personalLoans: 0.00,
studentLoans: 0.00,
otherDebts: 0.00, };
const { control, handleSubmit, formState, reset, errors } = useForm({ defaultValues: { ...initialValues }, mode: "onChange" });
const [data, setData] = useState(); const showError = (_fieldName: string) => { 
let error = (errors as any)[_fieldName];
return error ? (
<div style={{ color: "red", fontWeight: "bold" }}>
{error.message || "Field Is Required And Must Be In Valid Dollar Format (00.00)"} </div> ) : null;
};
const onSubmit = (data: any) => { console.log(data); console.log(JSON.stringify(data, null, 2)); setData(data); updateUserData(data); };
return ( 
<IonPage>
<IonHeader>
<IonToolbar>
<IonChip slot="start" outline color="dark"><IonLabel><IonTitle color="dark" size="large">Virta</IonTitle></IonLabel><IonIcon icon={person}></IonIcon></IonChip> <IonTitle size="small" slot="end" color="dark">Finance Companion</IonTitle> </IonToolbar>
</IonHeader>
<IonContent> 
<IonGrid>
<IonRow>
<IonCol text-center>
<IonChip>
<IonLabel> <p><strong>Welcome to <IonText color="tertiary">Virta</IonText>, {user && user.displayName}.</strong></p> </IonLabel>
</IonChip>
<br></br>
<br></br>
<IonChip>
<IonLabel>
<IonIcon color="tertiary" icon={person}></IonIcon>
<IonIcon color="tertiary" icon={chatbubbles}></IonIcon>
</IonLabel>
</IonChip>
<IonLabel> <p><strong> Before you start improving your finances, I need to collect some basic information about your finances to set up your profile and calculate your net worth. </strong></p> </IonLabel> </IonCol>
</IonRow>
<IonList> 
<IonItem> <IonButton routerLink="/home" routerDirection="forward" color="warning">Go Back</IonButton> </IonItem>
<form onSubmit={handleSubmit(onSubmit)} style={{ padding: 0 }}> <IonItem>
<IonText color="tertiary"><h2>Income/Expenses</h2></IonText> <IonIcon icon={cash} slot="end" color="tertiary"></IonIcon> </IonItem>
<IonItem>
<IonLabel>Monthly Income ($): </IonLabel>
<Controller
as={ <IonInput placeholder="0.00" clearInput> </IonInput> }
control={control}
onChangeName="onIonChange"
onChange={([selected]) => {
console.log("cash", selected.detail.value);
return selected.detail.value;
}}
name="monthlyIncome"
rules={{
required: true,
pattern: new RegExp('^[0-9]+(\.[0-9]{1,2})?$'),
}} />
</IonItem>
{showError("monthlyIncome")}

See Full Code

Software Engineer & Writer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store