Add/PRESS2 93 Implement a API Queuing System

src/OnboardingSPA/components/App/index.js

@@ -4,8 +4,6 @@ import Drawer from '../Drawer';
 import Sidebar from '../Sidebar';
 import classNames from 'classnames';
 import { useLocation } from 'react-router-dom';
-import { setFlow } from '../../utils/api/flow';
-import { getSettings, setSettings } from '../../utils/api/settings';
 import { isEmpty, updateWPSettings } from '../../utils/api/ecommerce';
 import { store as nfdOnboardingStore } from '../../store';
 
@@ -44,21 +42,8 @@ const App = () => {
 		};
 	}, []);
 
-	const [isRequestPlaced, setIsRequestPlaced] = useState(false);
-	const [didVisitBasicInfo, setDidVisitBasicInfo] = useState(false);
 	const [didVisitEcommerce, setDidVisitEcommerce] = useState(false);
-	const { setActiveStep, setActiveFlow, setCurrentOnboardingData } = useDispatch(nfdOnboardingStore);
-
-	async function syncSocialSettings() {
-		const initialData = await getSettings();
-		const result = await setSettings(currentData?.data?.socialData);
-		setDidVisitBasicInfo(false);
-		if (result?.error != null) {
-			console.error('Unable to Save Social Data!');
-			return initialData?.body;
-		}
-		return result?.body;
-	}
+	const { setActiveStep, setActiveFlow } = useDispatch(nfdOnboardingStore);
 
 	async function syncStoreDetails() {
 		let { address, tax } = currentData.storeDetails;
@@ -92,39 +77,12 @@ const App = () => {
 	}
 
 	async function syncStoreToDB() {
-		// The First Welcome Step doesn't have any Store changes
-		const isFirstStep = location?.pathname === firstStep?.path;
-		if (currentData && !isFirstStep){
-			if(!isRequestPlaced){
-				setIsRequestPlaced(true);
-
-				if (didVisitEcommerce) {
-					await syncStoreDetails();
-				}
-
-				// If Social Data is changed then sync it
-				if (didVisitBasicInfo){
-					const socialData = await syncSocialSettings();
-
-					// If Social Data is changed then Sync that also to the store
-					if (socialData && currentData?.data)
-						currentData.data.socialData = socialData;
-				} 
-
-				const result = await setFlow(currentData);
-				if (result?.error != null) {
-					setIsRequestPlaced(false);
-					console.error('Unable to Save data!');
-				} else {
-					setCurrentOnboardingData(result?.body);
-					setIsRequestPlaced(false);
-				}
-
+		if ( currentData ){
+			if (didVisitEcommerce) {
+				await syncStoreDetails();
 			}
 		}
-		// Check if the Basic Info page was visited
-		if (location?.pathname.includes('basic-info'))
-			setDidVisitBasicInfo(true);
+
 		if (location?.pathname.includes('ecommerce')) {
 			setDidVisitEcommerce(true);
 		}

src/OnboardingSPA/pages/Steps/BasicInfo/index.js

@@ -6,22 +6,27 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { FLOW_SYNC, SETTINGS_SYNC } from '../../../utils/api-queuer/constants'; 
 
 const StepBasicInfo = () => {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { setIsDrawerOpened, setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } =
+	const { enqueueRequest, flushQueue, setIsDrawerOpened, setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } =
 		useDispatch( nfdOnboardingStore );
 
-	const { currentStep } = useSelect(
+	const { currentStep, currentData } = useSelect(
 		(select) => {
 			return {
-				currentStep: select(nfdOnboardingStore).getCurrentStep()
+				currentStep: select(nfdOnboardingStore).getCurrentStep(),
+				currentData: select(nfdOnboardingStore).getCurrentOnboardingData()
 			};
 		},
 		[]
 	);
 
 	useEffect( () => {
+		flushQueue(currentData);
+		enqueueRequest(FLOW_SYNC);
+		enqueueRequest(SETTINGS_SYNC);
 		if ( isLargeViewport ) {
 			setIsDrawerOpened( true );
 		}

src/OnboardingSPA/pages/Steps/DesignThemes/index.js

@@ -2,14 +2,21 @@ import CommonLayout from '../../../components/Layouts/Common';
 import StepOverview from '../../../components/StepOverview';
 import { VIEW_DESIGN_THEMES } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 const StepDesignThemes = () => {
-	const { setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened } =
+	const { flushQueue, setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened } =
 		useDispatch( nfdOnboardingStore );
 
+	const { currentData } = useSelect((select) => {
+		return {
+			currentData: select(nfdOnboardingStore).getCurrentOnboardingData()
+		};
+	}, []);
+
 	useEffect( () => {
+		flushQueue(currentData);
 		setIsSidebarOpened( false );
 		setIsDrawerOpened( true );
 		setDrawerActiveView( VIEW_DESIGN_THEMES );

src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js

@@ -16,6 +16,7 @@ import { useWPSettings } from '../useWPSettings';
 const StepAddress = () => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		flushQueue, 
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsDrawerSuppressed,
@@ -24,6 +25,7 @@ const StepAddress = () => {
 	} = useDispatch(nfdOnboardingStore);
 
 	useEffect(() => {
+		flushQueue(currentData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}

src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js

@@ -15,6 +15,7 @@ import content from '../content.json';
 const StepProducts = () => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		flushQueue,
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsDrawerSuppressed,
@@ -27,6 +28,7 @@ const StepProducts = () => {
 	);
 	let productInfo = currentData.storeDetails.productInfo;
 	useEffect(() => {
+		flushQueue(currentData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}

src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js

@@ -21,6 +21,7 @@ function createReverseLookup(state) {
 const StepTax = () => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		flushQueue,
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsDrawerSuppressed,
@@ -34,6 +35,7 @@ const StepTax = () => {
 	);
 
 	useEffect(() => {
+		flushQueue(currentData);
 		if (isLargeViewport) {
 			setIsDrawerOpened(true);
 		}

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js

@@ -6,6 +6,8 @@ import NeedHelpTag from '../../../../components/NeedHelpTag';
 import { VIEW_NAV_GET_STARTED } from '../../../../../constants';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from './content.json';
+import { FLOW_SYNC } from '../../../../utils/api-queuer/constants';
+
 import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -21,7 +23,7 @@ const GetStartedExperience = () => {
 	const [ isLoaded, setisLoaded ] = useState( false );
 	const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' );
 
-	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
+	const { enqueueRequest, flushQueue, setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
 
 	const { currentData, currentStep } = useSelect( ( select ) => {
 		return {
@@ -37,6 +39,8 @@ const GetStartedExperience = () => {
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
+		flushQueue(currentData);
+		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( true );
 		setDrawerActiveView( VIEW_NAV_GET_STARTED );

src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js

@@ -10,11 +10,12 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
+import { FLOW_SYNC } from '../../../../../utils/api-queuer/constants';
 
 
 const StepPrimarySetup = () => {
 
-	const { setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } = useDispatch(
+	const { enqueueRequest, flushQueue, setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } = useDispatch(
 		nfdOnboardingStore
 	);
 
@@ -29,6 +30,8 @@ const StepPrimarySetup = () => {
 	);
 
 	useEffect(() => {
+		flushQueue(currentData);
+		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened(false);
 		setIsDrawerSuppressed(true);
 		setDrawerActiveView(VIEW_NAV_GET_STARTED);

src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js

@@ -10,14 +10,28 @@ import NavCardButton from '../../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../../components/NeedHelpTag';
 import content from '../content.json';
 import { translations } from '../../../../../utils/locales/translations';
-
+import { FLOW_SYNC } from '../../../../../utils/api-queuer/constants';
 
 const StepPrimarySetup = () => {
-	const { setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } = useDispatch(
-		nfdOnboardingStore
-	);
+	const { enqueueRequest, 
+			flushQueue, 
+			setDrawerActiveView, 
+			setIsSidebarOpened, 
+			setIsDrawerSuppressed, 
+			setCurrentOnboardingData 
+		} 
+	= useDispatch( nfdOnboardingStore );
+
+	const { currentStep, currentData } = useSelect((select) => {
+		return {
+			currentStep: select(nfdOnboardingStore).getCurrentStep(),
+			currentData: select(nfdOnboardingStore).getCurrentOnboardingData()
+		};
+	}, []);
 
 	useEffect(() => {
+		flushQueue(currentData);
+		enqueueRequest(FLOW_SYNC);
 		setIsSidebarOpened(false);
 		setIsDrawerSuppressed(true);
 		setDrawerActiveView(VIEW_NAV_GET_STARTED);
@@ -26,16 +40,6 @@ const StepPrimarySetup = () => {
 	const [clickedIndex, changeCategory] = useState(-1);
 	const [inputCategVal, changeInputCateg] = useState('');
 
-
-	const { setCurrentOnboardingData } = useDispatch(nfdOnboardingStore);
-
-	const { currentStep, currentData } = useSelect((select) => {
-		return {
-			currentStep: select(nfdOnboardingStore).getCurrentStep(),
-			currentData: select(nfdOnboardingStore).getCurrentOnboardingData()
-		};
-	}, []);
-
 	const selectedCategoryInStore = currentData?.data?.siteType?.secondary;
 	const categoriesArray = content.categories;
 	const subCategories = categoriesArray[0]?.subCategories;

src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js

@@ -22,22 +22,25 @@ import { VIEW_NAV_GET_STARTED } from '../../../../../constants';
  */
 const StepWelcome = () => {
 	const location = useLocation();
-	const { currentStep, brandName } = useSelect(
+	const { currentStep, currentData, brandName } = useSelect(
 		(select) => {
 			return {
 				currentStep: select(nfdOnboardingStore).getCurrentStep(),
+				currentData: select(nfdOnboardingStore).getCurrentOnboardingData(),
 				brandName: select(nfdOnboardingStore).getNewfoldBrandName(),
 			};
 		},
 		[location.pathname]
 	);
 	const {
+		flushQueue,
 		setDrawerActiveView,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
+		flushQueue(currentData);
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( true );
 		setDrawerActiveView( VIEW_NAV_GET_STARTED );

src/OnboardingSPA/pages/Steps/TopPriority/index.js

@@ -10,6 +10,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import SelectableCardList from '../../../components/SelectableCardList/selectable-card-list';
+import { FLOW_SYNC } from '../../../utils/api-queuer/constants'; 
 
 const StepTopPriority = ( props ) => {
 	const priorityTypes = {
@@ -42,6 +43,8 @@ const StepTopPriority = ( props ) => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
 	const {
+		enqueueRequest, 
+		flushQueue,
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsSidebarOpened,
@@ -63,6 +66,8 @@ const StepTopPriority = ( props ) => {
 	};
 
 	useEffect( () => {
+		flushQueue(currentData);
+		enqueueRequest(FLOW_SYNC);
 		if ( isLargeViewport ) {
 			setIsDrawerOpened( true );
 		}

src/OnboardingSPA/store/actions.js

@@ -138,3 +138,23 @@ export function updatePreviewSettings( previewSettings ) {
 		previewSettings,
 	};
 }
+
+export function enqueueRequest( request ) {
+	return {
+		type: 'ENQUEUE_REQUEST',
+		request,
+	};
+}
+
+export function dequeueRequest() {
+	return {
+		type: 'DEQUEUE_REQUEST'
+	};
+}
+
+export function flushQueue( storeData ) {
+	return {
+		type: 'FLUSH_QUEUE',
+		storeData,
+	};
+}