From c8202c9663f826d280e3b239f7154e7182effdf8 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 26 Dec 2022 17:28:32 +0530
Subject: [PATCH] Added State Handler Again

---
 .../RadioControlSkeleton/index.js             | 20 ++++++
 .../RadioControlSkeleton}/stylesheet.scss     |  0
 .../RadioControl/RadioControlState/index.js   | 27 ++++++++
 .../components/RadioControl/index.js          |  2 +
 .../RadioControlWithSkeleton/index.js         | 68 -------------------
 .../pages/Steps/Ecommerce/StepTax/index.js    | 34 ++++++++--
 .../GetStarted/GetStartedExperience/index.js  | 34 ++++++++--
 src/OnboardingSPA/styles/app.scss             |  2 +-
 8 files changed, 104 insertions(+), 83 deletions(-)
 create mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
 rename src/OnboardingSPA/components/{RadioControlWithSkeleton => RadioControl/RadioControlSkeleton}/stylesheet.scss (100%)
 create mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
 create mode 100644 src/OnboardingSPA/components/RadioControl/index.js
 delete mode 100644 src/OnboardingSPA/components/RadioControlWithSkeleton/index.js

diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
new file mode 100644
index 000000000..9e7a26695
--- /dev/null
+++ b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
@@ -0,0 +1,20 @@
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @param {number} data       The options to be renedered
+ *
+ */
+const RadioControlSkeleton = ({ data }) => {
+    const buildDummyRadioControls = () => {
+        const customItems = [];
+
+        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();
+};
+
+export default RadioControlSkeleton;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss
rename to src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
new file mode 100644
index 000000000..f20ea6190
--- /dev/null
+++ b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
@@ -0,0 +1,27 @@
+import { useState, useEffect } from '@wordpress/element';
+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.
+ *
+ */
+const RadioControlState = ({ data, watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <RadioControlSkeleton data={data} />
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+            {children}
+        </>
+    );
+};
+
+export default RadioControlState;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js
new file mode 100644
index 000000000..af8cae2e2
--- /dev/null
+++ b/src/OnboardingSPA/components/RadioControl/index.js
@@ -0,0 +1,2 @@
+export { default as RadioCtrlSkeleton } from './RadioControlSkeleton';
+export { default as RadioCtrlStateHandler } from './RadioControlState';
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js
deleted file mode 100644
index 7859dc781..000000000
--- a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RadioControl } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Renders Skeletons for Radio Control.
- *
- * @property {number} data                      The options to be renedered
- * @property {number} watch                     The variable to be awaited for
- * @property {string} callback                  The Render function in parent to be called
- * @property {string} className                 The class name for the Live Preview
- * 
- */
-const RadioControlWithSkeleton = ({
-    data,
-    watch,
-    selected,
-    callback,
-    className,
-}) => {
-
-    const [rerender, doRerender] = useState(0);
-
-    useEffect(() => doRerender(1), [watch, selected]);
-
-    const buildDummyPreviews = () => {
-        var customItems = [];
-
-        for (let idx = 0; idx < data.length; idx++)
-            customItems.push(<div className="radio-control-skeleton-item" />);
-            
-        return (
-            <div className='radio-control-skeleton'>
-                {customItems}
-           </div>
-        );
-    };
-
-    const buildRealPreview = () => {
-        return (
-            <RadioControl
-                className={`${className} radio-control-main`}
-                selected={selected}
-                options={data.map((option) => {
-                    return {
-                        label: __(
-                            option.content,
-                            'wp-module-onboarding'
-                        ),
-                        value: __(
-                            option.value,
-                            'wp-module-onboarding'
-                        ),
-                    };
-                })}
-                onChange={(value) => callback(value)}
-            />
-        );
-    };
-
-    return !watch ? buildDummyPreviews() :
-        <>
-            {watch ? <div style={{ display: 'none' }}>{rerender}</div> : null}
-            {buildRealPreview()}
-        </>;
-};
-
-export default RadioControlWithSkeleton;
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index 67ce0708e..9618082b8 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 RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
+import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -103,12 +103,32 @@ const StepTax = () => {
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
 					</div>
-					<RadioControlWithSkeleton
-						className={"nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step"}
-						watch={settings}
-						selected={tax?.option}
-						data={content.stepTaxOptions}
-						callback={(value) => selectOption(value)} />
+					<RadioCtrlStateHandler
+						watch={ settings }
+						data={ content.stepTaxOptions }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step radio-control-main'
+							}
+							selected={ tax?.option }
+							options={ content.stepTaxOptions.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => selectOption( value )}
+						/>
+					</RadioCtrlStateHandler>
 					<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 9f89bf88c..8db5f88cf 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 RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
+import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,12 +81,32 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioControlWithSkeleton 
-						className={"nfd-onboarding-experience-step-tabs components-radio-control__input"}
-						data={content.options}
-						watch={wpComfortLevel}
-						selected={wpComfortLevel}
-						callback={(value) => setWpComfortLevel(value)}/>
+					<RadioCtrlStateHandler
+						watch={ wpComfortLevel }
+						data={ content.options }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-main'
+							}
+							selected={ wpComfortLevel }
+							options={ content.options.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => setWpComfortLevel( value )}
+						/>
+					</RadioCtrlStateHandler>
 					<NavCardButton
 						text={ __(
 							content.buttonText,
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index d7383b41f..5c8161be8 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -34,9 +34,9 @@
 @import "../components/Button/NavCardButton/stylesheet";
 @import "../pages/Steps/Ecommerce/stylesheet";
 @import "../components/ErrorState/stylesheet";
-@import "../components/RadioControlWithSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
+@import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";