processed feedback

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -115,7 +115,7 @@ export const Stepper = (stepperProps: StepperProps) => {
   const apiHolder = useApiHolder();
   const [activeStep, setActiveStep] = useState(0);
   const [isValidating, setIsValidating] = useState(false);
-  const initialState = useFormDataFromQuery(props.initialState);
+  const [initialState] = useFormDataFromQuery(props.initialState);
   const [formState, setFormState] = useState<{
     [step: string]: Record<string, JsonValue>;
   }>();
@@ -123,6 +123,8 @@ export const Stepper = (stepperProps: StepperProps) => {
   const [errors, setErrors] = useState<undefined | FormValidation>();
   const styles = useStyles();
 
+  const makeStepKey = (step: string | number) => `step-${step}`;
+
   const backLabel =
     presentation?.buttonLabels?.backButtonText ?? backButtonText;
   const createLabel =
@@ -161,7 +163,7 @@ export const Stepper = (stepperProps: StepperProps) => {
     (e: IChangeEvent) => {
       setFormState(current => ({
         ...current,
-        [`step${activeStep}`]: e.formData,
+        [makeStepKey(activeStep)]: e.formData,
       }));
     },
     [setFormState, activeStep],
@@ -193,7 +195,10 @@ export const Stepper = (stepperProps: StepperProps) => {
         return stepNum;
       });
     }
-    setFormState(current => ({ ...current, [`step${activeStep}`]: formData }));
+    setFormState(current => ({
+      ...current,
+      [makeStepKey(activeStep)]: formData,
+    }));
   };
 
   const {
@@ -208,11 +213,11 @@ export const Stepper = (stepperProps: StepperProps) => {
     if (!formState) {
       return initialState;
     }
-    const { [`step${activeStep}`]: activeState, ...historicalState } =
+    const { [makeStepKey(activeStep)]: activeState, ...historicalState } =
       formState;
     const chronologicalState = {
       ...historicalState,
-      [`step${activeStep}`]: activeState,
+      [makeStepKey(activeStep)]: activeState,
     };
     return merge({}, ...Object.values(chronologicalState));
   }, [formState, activeStep, initialState]);

plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts

@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { JsonValue } from '@backstage/types';
 import qs from 'qs';
+import { useState } from 'react';
 
 /**
  * This hook is used to get the formData from the query string.
@@ -22,18 +24,20 @@ import qs from 'qs';
  */
 export const useFormDataFromQuery = (
   initialState?: Record<string, JsonValue>,
-): Record<string, JsonValue> => {
-  if (initialState) {
-    return initialState;
-  }
+) => {
+  return useState<Record<string, any>>(() => {
+    if (initialState) {
+      return initialState;
+    }
 
-  const query = qs.parse(window.location.search, {
-    ignoreQueryPrefix: true,
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true,
+    });
+
+    try {
+      return JSON.parse(query.formData as string);
+    } catch (e) {
+      return {};
+    }
   });
-
-  try {
-    return JSON.parse(query.formData as string);
-  } catch (e) {
-    return {};
-  }
 };