Refactored to use the New API Queuing System

newfold-labs · Aug 23, 2022 · 4d81c96 · 4d81c96
1 parent c793c68
commit 4d81c96
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 27 deletions.
diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/index.js b/src/OnboardingSPA/pages/Steps/BasicInfo/index.js
@@ -13,18 +13,18 @@ const StepBasicInfo = () => {
 	const { enqueueRequest, flushQueue, setIsDrawerOpened, setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } =
 		useDispatch( nfdOnboardingStore );
 
-	const { currentStep, flowData } = useSelect(
+	const { currentStep, onboardingData } = useSelect(
 		(select) => {
 			return {
 				currentStep: select(nfdOnboardingStore).getCurrentStep(),
-				flowData: select(nfdOnboardingStore).getOnboardingFlowData()
+				onboardingData: select(nfdOnboardingStore).getOnboardingData()
 			};
 		},
 		[]
 	);
 
 	useEffect( () => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		enqueueRequest(FLOW_SYNC);
 		enqueueRequest(SETTINGS_SYNC);
 		if ( isLargeViewport ) {

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -25,7 +25,7 @@ const StepAddress = () => {
 	} = useDispatch(nfdOnboardingStore);
 
 	useEffect(() => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}
@@ -36,8 +36,14 @@ const StepAddress = () => {
 
 	const navigate = useNavigate();
 
-	let flowData = useSelect((select) =>
-		select(nfdOnboardingStore).getOnboardingFlowData()
+	const { flowData, onboardingData } = useSelect(
+		(select) => {
+			return {
+				flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+				onboardingData: select(nfdOnboardingStore).getOnboardingData()
+			};
+		},
+		[]
 	);
 
 	const settings = useWPSettings();

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
@@ -23,12 +23,19 @@ const StepProducts = () => {
 		setCurrentOnboardingFlowData,
 	} = useDispatch(nfdOnboardingStore);
 
-	let flowData = useSelect((select) =>
-		select(nfdOnboardingStore).getOnboardingFlowData()
+	const { flowData, onboardingData } = useSelect(
+		(select) => {
+			return {
+				flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+				onboardingData: select(nfdOnboardingStore).getOnboardingData()
+			};
+		},
+		[]
 	);
+
 	let productInfo = flowData.storeDetails.productInfo;
 	useEffect(() => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
@@ -30,12 +30,18 @@ const StepTax = () => {
 	} = useDispatch(nfdOnboardingStore);
 	const navigate = useNavigate();
 
-	let flowData = useSelect((select) =>
-		select(nfdOnboardingStore).getOnboardingFlowData()
+	const { flowData, onboardingData } = useSelect(
+		(select) => {
+			return {
+				flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+				onboardingData: select(nfdOnboardingStore).getOnboardingData()
+			};
+		},
+		[]
 	);
 
 	useEffect(() => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
@@ -24,10 +24,11 @@ const GetStartedExperience = () => {
 	const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' );
 
 	const { enqueueRequest, flushQueue, setCurrentOnboardingFlowData } = useDispatch( nfdOnboardingStore );
-	const { flowData, currentStep } = useSelect( ( select ) => {
+	const { flowData, currentStep, onboardingData } = useSelect( ( select ) => {
 		return {
 			flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
 			currentStep: select(nfdOnboardingStore).getCurrentStep(),
+			onboardingData: select(nfdOnboardingStore).getOnboardingData()
 		};
 	}, [] );
 
@@ -38,7 +39,7 @@ const GetStartedExperience = () => {
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( true );

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js
@@ -19,18 +19,20 @@ const StepPrimarySetup = () => {
 		nfdOnboardingStore
 	);
 
-	const { currentStep, flowData } = useSelect(
+	const { currentStep, flowData, onboardingData } = useSelect(
 		(select) => {
 			return {
 				currentStep: select(nfdOnboardingStore).getCurrentStep(),
-				flowData: select(nfdOnboardingStore).getOnboardingFlowData()
+				flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+				onboardingData: select(nfdOnboardingStore).getOnboardingData()
+
 			};
 		},
 		[]
 	);
 
 	useEffect(() => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened(false);
 		setIsDrawerSuppressed(true);

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js
@@ -23,17 +23,18 @@ const StepPrimarySetup = () => {
 		} 
 	= useDispatch( nfdOnboardingStore );
 
-	const { currentStep, flowData } = useSelect((select) => {
+	const { currentStep, flowData, onboardingData } = useSelect((select) => {
 		return {
 			currentStep: select(nfdOnboardingStore).getCurrentStep(),
-			flowData: select(nfdOnboardingStore).getOnboardingFlowData()
+			flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+			onboardingData: select(nfdOnboardingStore).getOnboardingData()
 		};
 	}, []);
 
 	const selectedCategoryInStore = flowData?.data?.siteType?.secondary;
 
 	useEffect(() => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened(false);
 		setIsDrawerSuppressed(true);

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
@@ -22,11 +22,11 @@ import { VIEW_NAV_GET_STARTED } from '../../../../../constants';
  */
 const StepWelcome = () => {
 	const location = useLocation();
-	const { currentStep, flowData, brandName } = useSelect(
+	const { currentStep, onboardingData, brandName } = useSelect(
 		(select) => {
 			return {
 				currentStep: select(nfdOnboardingStore).getCurrentStep(),
-				flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+				onboardingData: select(nfdOnboardingStore).getOnboardingData(),
 				brandName: select(nfdOnboardingStore).getNewfoldBrandName(),
 			};
 		},
@@ -40,7 +40,7 @@ const StepWelcome = () => {
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( true );
 		setDrawerActiveView( VIEW_NAV_GET_STARTED );

diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/index.js b/src/OnboardingSPA/pages/Steps/TopPriority/index.js
@@ -52,10 +52,11 @@ const StepTopPriority = ( props ) => {
 		setIsDrawerSuppressed,
 	} = useDispatch( nfdOnboardingStore );
 
-	const { currentStep, flowData } = useSelect( ( select ) => {
+	const { currentStep, flowData, onboardingData } = useSelect( ( select ) => {
 		return {
 			currentStep: select(nfdOnboardingStore).getCurrentStep(),
 			flowData: select(nfdOnboardingStore).getOnboardingFlowData(),
+			onboardingData: select(nfdOnboardingStore).getOnboardingData()
 		};
 	}, [] );
 
@@ -66,7 +67,7 @@ const StepTopPriority = ( props ) => {
 	};
 
 	useEffect( () => {
-		flushQueue(flowData);
+		flushQueue(onboardingData);
 		enqueueRequest(FLOW_SYNC);
 		if ( isLargeViewport ) {
 			setIsDrawerOpened( true );

diff --git a/src/OnboardingSPA/utils/api-queuer/api-executer.js b/src/OnboardingSPA/utils/api-queuer/api-executer.js
@@ -7,9 +7,9 @@ export async function apiExecuter(data, requests) {
 
     requests.forEach(request => {
         switch (request) {
-            case FLOW_SYNC: setFlow(data);
+            case FLOW_SYNC: setFlow(data?.flowData);
                 break;
-            case SETTINGS_SYNC: setSettings(data?.data?.socialData);
+            case SETTINGS_SYNC: setSettings(data?.socialData);
                 break;
             default:
                 break;