From 45305b3967e42a46c6f9e2e5283e25169f5040ff Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 2 Jan 2023 12:30:14 +0530
Subject: [PATCH] Review Comments

---
 .../RadioControl/RadioControlSkeleton/index.js   | 16 +++++-----------
 .../index.js                                     | 12 ++++++------
 .../components/RadioControl/index.js             |  4 ++--
 .../pages/Steps/Ecommerce/StepTax/index.js       |  8 ++++----
 .../GetStarted/GetStartedExperience/index.js     |  8 ++++----
 5 files changed, 21 insertions(+), 27 deletions(-)
 rename src/OnboardingSPA/components/RadioControl/{RadioControlState => RadioControlStateHandler}/index.js (52%)

diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
index 9e7a26695..8160d73ce 100644
--- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
+++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
@@ -1,20 +1,14 @@
 /**
  * Renders Skeletons for Radio Control.
  *
- * @param {number} data       The options to be renedered
+ * @param {number} options       The options to be renedered
  *
  */
-const RadioControlSkeleton = ({ data }) => {
-    const buildDummyRadioControls = () => {
-        const customItems = [];
+const RadioControlSkeleton = ({ options }) => {
 
-        for (let idx = 0; idx < data.length; idx++)
-            customItems.push(<div className="radio-control-skeleton-item" />);
-
-        return <div className="radio-control-skeleton">{customItems}</div>;
-    };
-
-    return buildDummyRadioControls();
+    return <div className="radio-control-skeleton">
+            {options.map((option) => (<div className="radio-control-skeleton-item" />))}
+        </div>;
 };
 
 export default RadioControlSkeleton;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
similarity index 52%
rename from src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
rename to src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
index f20ea6190..1a14ce86f 100644
--- a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
+++ b/src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js
@@ -4,18 +4,18 @@ import RadioControlSkeleton from '../RadioControlSkeleton';
 /**
  * A State Handler to manage Radio Control
  *
- * @param {number} data           The options to be renedered.
- * @param {string} children       The children to be rendered out.
- * @param {number} watch          The variable to be awaited for to be fetched.
+ * @param {number} options           The options to be renedered.
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
  *
  */
-const RadioControlState = ({ data, watch, children }) => {
+const RadioControlStateHandler = ({ options, watch, children }) => {
     const [rerender, doRerender] = useState(0);
 
     useEffect(() => doRerender(1), [watch]);
 
     return !watch ? (
-        <RadioControlSkeleton data={data} />
+        <RadioControlSkeleton options={options} />
     ) : (
         <>
             {<div style={{ display: 'none' }}>{rerender}</div>}
@@ -24,4 +24,4 @@ const RadioControlState = ({ data, watch, children }) => {
     );
 };
 
-export default RadioControlState;
\ No newline at end of file
+export default RadioControlStateHandler;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js
index af8cae2e2..f8741d0c3 100644
--- a/src/OnboardingSPA/components/RadioControl/index.js
+++ b/src/OnboardingSPA/components/RadioControl/index.js
@@ -1,2 +1,2 @@
-export { default as RadioCtrlSkeleton } from './RadioControlSkeleton';
-export { default as RadioCtrlStateHandler } from './RadioControlState';
\ No newline at end of file
+export { default as RadioControlSkeleton } from './RadioControlSkeleton';
+export { default as RadioControlStateHandler } from './RadioControlStateHandler';
\ No newline at end of file
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index 9618082b8..9a6790e52 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
@@ -13,7 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -103,9 +103,9 @@ const StepTax = () => {
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
 					</div>
-					<RadioCtrlStateHandler
+					<RadioControlStateHandler
 						watch={ settings }
-						data={ content.stepTaxOptions }
+						options={ content.stepTaxOptions }
 					>
 						<RadioControl
 							className={
@@ -128,7 +128,7 @@ const StepTax = () => {
 							)}
 							onChange={( value ) => selectOption( value )}
 						/>
-					</RadioCtrlStateHandler>
+					</RadioControlStateHandler>
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
index 8db5f88cf..6e7532278 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
@@ -13,7 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,9 +81,9 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioCtrlStateHandler
+					<RadioControlStateHandler
 						watch={ wpComfortLevel }
-						data={ content.options }
+						options={ content.options }
 					>
 						<RadioControl
 							className={
@@ -106,7 +106,7 @@ const GetStartedExperience = () => {
 							)}
 							onChange={( value ) => setWpComfortLevel( value )}
 						/>
-					</RadioCtrlStateHandler>
+					</RadioControlStateHandler>
 					<NavCardButton
 						text={ __(
 							content.buttonText,