From 11598f6324397c26352d926e1619f8dd8b0731cd Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Fri, 20 Nov 2020 14:37:09 +0100
Subject: [PATCH] chore: fixing up the test timeout

---
 .../components/MultistepJsonForm/MultistepJsonForm.tsx   | 9 +++------
 .../src/components/TemplatePage/TemplatePage.tsx         | 8 +++++---
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index 9700d43c00..528d42b94f 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -27,7 +27,7 @@ import {
 } from '@material-ui/core';
 import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 const Form = withTheme(MuiTheme);
 type Step = {
@@ -54,7 +54,6 @@ export const MultistepJsonForm = ({
   onFinish,
 }: Props) => {
   const [activeStep, setActiveStep] = useState(0);
-  const [formDataEvent, setFormDataEvent] = useState({ formData: {} });
 
   const handleReset = () => {
     setActiveStep(0);
@@ -63,9 +62,7 @@ export const MultistepJsonForm = ({
   const handleNext = () =>
     setActiveStep(Math.min(activeStep + 1, steps.length));
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
-  useEffect(() => {
-    onChange(formDataEvent as IChangeEvent);
-  }, [formDataEvent, onChange]);
+
   return (
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
@@ -77,7 +74,7 @@ export const MultistepJsonForm = ({
                 key={label}
                 noHtml5Validate
                 formData={formData}
-                onChange={e => setFormDataEvent(e)}
+                onChange={onChange}
                 schema={schema as FormProps<any>['schema']}
                 onSubmit={e => {
                   if (e.errors.length === 0) handleNext();
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index ebefc6522d..d8b803f893 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -26,7 +26,7 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -86,8 +86,10 @@ export const TemplatePage = () => {
   const [formState, setFormState] = useState({});
 
   const handleFormReset = () => setFormState({});
-  const handleChange = (e: IChangeEvent) =>
-    setFormState({ ...formState, ...e.formData });
+  const handleChange = useCallback(
+    (e: IChangeEvent) => setFormState({ ...formState, ...e.formData }),
+    [setFormState, formState],
+  );
 
   const [jobId, setJobId] = useState<string | null>(null);