From 31660d41c1eb0f9ef2c9f3db1aaf9ec7135416b8 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@users.noreply.github.com>
Date: Tue, 25 Aug 2020 12:20:16 -0700
Subject: [PATCH] feat #65 - Fix infinite calls with react hooks

---
 src/components/Form/FieldContext.ts     |  3 ++-
 src/components/Form/FormInput/index.tsx | 10 +++++++---
 src/components/Form/index.tsx           | 14 ++++++--------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Form/FieldContext.ts b/src/components/Form/FieldContext.ts
index ae3e7178..e56bb792 100644
--- a/src/components/Form/FieldContext.ts
+++ b/src/components/Form/FieldContext.ts
@@ -1,6 +1,7 @@
 import { createContext } from 'react'
 
-interface FieldContextProps {
+export interface FieldContextProps {
+	initialValues: Record<string, any>
 	loading: boolean
 	onSubmit: (data: any) => void
 }
diff --git a/src/components/Form/FormInput/index.tsx b/src/components/Form/FormInput/index.tsx
index 282caafb..2433a789 100644
--- a/src/components/Form/FormInput/index.tsx
+++ b/src/components/Form/FormInput/index.tsx
@@ -1,6 +1,6 @@
-import FieldContext from '../FieldContext'
 import FieldLabel from '../FieldLabel'
 import { Controller, useFormContext, ValidationRules } from 'react-hook-form'
+import FieldContext, { FieldContextProps } from '../FieldContext'
 import Input, { InputProps } from '../../Input'
 import React, { FC, useContext } from 'react'
 
@@ -21,12 +21,16 @@ const FormInput: FC<FormInputProps> = ({
 	...rest
 }: FormInputProps) => {
 	const { control, errors } = useFormContext()
-	const { loading } = useContext(FieldContext)
+	const { initialValues, loading } = useContext<FieldContextProps>(
+		FieldContext
+	)
 
 	if (required) {
 		rules.required = true
 	}
 
+	const defaultValue = (initialValues[name] as string) || ''
+
 	return (
 		<div>
 			{label && (
@@ -38,7 +42,7 @@ const FormInput: FC<FormInputProps> = ({
 			)}
 			<Controller
 				control={control}
-				defaultValue=''
+				defaultValue={defaultValue}
 				name={name}
 				render={({ onChange, value }) => (
 					<Input
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 72501f23..f43e9ca3 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -3,7 +3,7 @@ import FieldContext from './FieldContext'
 import FormButton, { FormButtonProps } from './FormButton'
 import FormInput, { FormInputProps } from './FormInput'
 import { FormProvider, useForm } from 'react-hook-form'
-import React, { FC, ReactNode, useEffect } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 const useStyles = createUseStyles({
 	container: {
@@ -15,7 +15,7 @@ const useStyles = createUseStyles({
 
 export interface FormProps {
 	children: ReactNode
-	initialValues?: object
+	initialValues?: Record<string, any>
 	loading?: boolean
 	onSubmit: (data: any) => void
 }
@@ -34,16 +34,14 @@ const Form: FC<FormProps> & FormSubComponents = ({
 	const classes = useStyles()
 	const methods = useForm()
 
-	const { handleSubmit, reset } = methods
-
-	useEffect(() => {
-		reset(initialValues)
-	}, [initialValues, reset])
+	const { handleSubmit } = methods
 
 	return (
 		<FormProvider {...methods}>
 			<form onSubmit={handleSubmit(onSubmit)}>
-				<FieldContext.Provider value={{ loading, onSubmit }}>
+				<FieldContext.Provider
+					value={{ initialValues, loading, onSubmit }}
+				>
 					<div className={classes.container}>{children}</div>
 				</FieldContext.Provider>
 			</form>