Sitegen: Refactor Error State

src/OnboardingSPA/components/App/index.js

@@ -1,16 +1,11 @@
+// WordPress
 import { FullscreenMode } from '@wordpress/interface';
 import { SlotFillProvider } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 
-import FlowStateHandler from '../StateHandlers/Flow';
+// Components
+import { FlowStateHandler } from '../StateHandlers';
 
-/**
- * Primary app that renders the <FlowStateHandler />.
- *
- * Is a child of the hash router and error boundary.
- *
- * @return {WPComponent} App Component
- */
 const App = () => {
 	return (
 		<Fragment>

src/OnboardingSPA/components/SiteGenError/contents.js → src/OnboardingSPA/components/ErrorState/Step/SiteGen/contents.js

@@ -1,3 +1,4 @@
+// WordPress
 import { __ } from '@wordpress/i18n';
 
 const getContents = () => {

src/OnboardingSPA/components/SiteGenError/index.js → src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js

@@ -1,24 +1,35 @@
+// WordPress
 import { useViewportMatch } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import getContents from './contents';
 import { Button, Fill } from '@wordpress/components';
-import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../Layouts/Common';
-import OrbAnimation from '../OrbAnimation';
-import { SITEGEN_FLOW, DEFAULT_FLOW } from '../../data/flows/constants';
-import { validateFlow } from '../../data/flows/utils';
-import { resolveGetDataForFlow } from '../../data/flows';
+
+// Third-party
 import { useNavigate } from 'react-router-dom';
+
+// Classes and functions
+import getContents from './contents';
+import { validateFlow } from '../../../../data/flows/utils';
+import { resolveGetDataForFlow } from '../../../../data/flows';
+
+// Components
+import CommonLayout from '../../../Layouts/Common';
+import OrbAnimation from '../../../OrbAnimation';
+
+// Misc
+import { store as nfdOnboardingStore } from '../../../../store';
+import { SITEGEN_FLOW, DEFAULT_FLOW } from '../../../../data/flows/constants';
 import {
 	FOOTER_SITEGEN,
 	FOOTER_END,
 	HEADER_SITEGEN,
 	pluginDashboardPage,
-} from '../../../constants';
+} from '../../../../../constants';
 
-const SiteGenSiteError = () => {
+const SiteGenStepErrorState = () => {
 	const navigate = useNavigate();
+	const isLargeViewport = useViewportMatch( 'small' );
+
 	const {
 		setIsHeaderEnabled,
 		setSidebarActiveView,
@@ -38,11 +49,11 @@
 	useEffect( () => {
 		setHideFooterNav( true );
 		setIsHeaderEnabled( true );
-		setSidebarActiveView( false );
 		setHeaderActiveView( HEADER_SITEGEN );
 		setIsHeaderNavigationEnabled( true );
 		setDrawerActiveView( false );
-	} );
+		setSidebarActiveView( false );
+	}, [] );
 
 	const { brandConfig, currentData } = useSelect( ( select ) => {
 		return {
@@ -51,13 +62,10 @@
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 		};
 	} );
-	const isLargeViewport = useViewportMatch( 'small' );
 
-	const content = getContents();
 	const oldFlow = window.nfdOnboarding?.oldFlow
 		? window.nfdOnboarding.oldFlow
 		: DEFAULT_FLOW;
-
 	const switchFlow = ( newFlow ) => {
 		if ( ! validateFlow( brandConfig, newFlow ) ) {
 			return false;
@@ -77,15 +85,18 @@
 		currentData.activeFlow = newFlow;
 		currentData.continueWithoutAi = true;
 		setCurrentOnboardingData( currentData );
-		updateSiteGenErrorStatus( false );
 		if ( SITEGEN_FLOW !== newFlow ) {
 			updateInitialize( true );
 		}
 		navigate( data.steps[ 1 ].path );
 	};
+
 	const handleRetry = () => {
 		updateSiteGenErrorStatus( false );
 	};
+
+	const content = getContents();
+
 	return (
 		<CommonLayout className="nfd-onboarding-step--site-gen__error">
 			<div className="nfd-onboarding-step--site-gen__error__container">
@@ -151,4 +162,4 @@
 	);
 };
 
-export default SiteGenSiteError;
+export default SiteGenStepErrorState;

src/OnboardingSPA/components/Header/components/SiteGenHeader/step-navigation.js

@@ -1,40 +1,39 @@
+// WordPress
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useNavigate } from 'react-router-dom';
 import { Icon, chevronLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
-import { store as nfdOnboardingStore } from '../../../../store';
+// Third-party
+import { useNavigate } from 'react-router-dom';
+
+// Components
 import ButtonDark from '../../../Button/ButtonDark';
+
+// Misc
+import { store as nfdOnboardingStore } from '../../../../store';
 import { stepSiteGenPreview } from '../../../../steps/SiteGen/Preview/step';
 import { stepSiteGenSiteLogo } from '../../../../steps/SiteGen/SiteLogo/step';
 
-/**
- * Back step Navigation button.
- *
- * @param {*} param0
- *
- * @return {WPComponent} Back Component
- */
-const Back = ( { path, showErrorDialog } ) => {
-	const { setNavErrorContinuePath, updateSiteGenErrorStatus } =
-		useDispatch( nfdOnboardingStore );
+const Back = ( { path } ) => {
 	const { siteGenErrorStatus } = useSelect( ( select ) => {
 		return {
 			siteGenErrorStatus:
 				select( nfdOnboardingStore ).getSiteGenErrorStatus(),
 		};
 	} );
+
+	const { updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore );
+
 	const navigate = useNavigate();
+
 	const navigateBack = () => {
-		if ( siteGenErrorStatus === true ) {
+		if ( true === siteGenErrorStatus ) {
 			updateSiteGenErrorStatus( false );
 		}
-		if ( showErrorDialog !== false ) {
-			setNavErrorContinuePath( path );
-		} else {
-			navigate( path, { state: { origin: 'header' } } );
-		}
+
+		navigate( path, { state: { origin: 'header' } } );
 	};
+
 	return (
 		<ButtonDark onClick={ navigateBack } variant="secondary">
 			<Icon icon={ chevronLeft } />
@@ -43,35 +42,28 @@ const Back = ( { path, showErrorDialog } ) => {
 	);
 };
 
-/**
- * Step buttons presented in Header.
- *
- * @return {WPComponent} StepNavigation Component
- */
 const StepNavigation = () => {
-	const { previousStep, currentStep, showErrorDialog } = useSelect(
-		( select ) => {
-			return {
-				previousStep: select( nfdOnboardingStore ).getPreviousStep(),
-				currentStep: select( nfdOnboardingStore ).getCurrentStep(),
-				showErrorDialog:
-					select( nfdOnboardingStore ).getShowErrorDialog(),
-			};
-		},
-		[]
-	);
+	const { previousStep, currentStep } = useSelect( ( select ) => {
+		return {
+			previousStep: select( nfdOnboardingStore ).getPreviousStep(),
+			currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+		};
+	}, [] );
+
 	const isFirstStep = null === previousStep || false === previousStep;
 	const isPreviewStep = currentStep.path === stepSiteGenPreview.path;
+
 	return (
 		<div className="nfd-onboarding-header--sitegen__step-navigation">
-			{ isFirstStep ? null : (
+			{ isFirstStep ? (
+				<></>
+			) : (
 				<Back
 					path={
 						isPreviewStep
 							? stepSiteGenSiteLogo.path
 							: previousStep.path
 					}
-					showErrorDialog={ showErrorDialog }
 				/>
 			) }
 		</div>

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js

@@ -1,87 +1,38 @@
+// WordPress
 import { __ } from '@wordpress/i18n';
-
 import { memo, useContext, useRef, useState } from '@wordpress/element';
+import { Icon, closeSmall } from '@wordpress/icons';
+
+// Third-party
+import classNames from 'classnames';
+import bytes from 'bytes';
+
+// Classes and functions
 import { uploadImage } from '../../../../utils/api/uploader';
-import Spinner from '../../../Loaders/Spinner';
+import { getDominantColor, getContrastingColor } from './utils';
+
+// Components
 import { ThemeContext } from '../../../ThemeContextProvider';
-import classNames from 'classnames';
+import Spinner from '../../../Loaders/Spinner';
+
+// Misc
 import { THEME_LIGHT, THEME_DARK } from '../../../../../constants';
-import bytes from 'bytes';
-import { Icon, closeSmall } from '@wordpress/icons';
-import { store as nfdOnboardingStore } from '../../../../store';
-import { useDispatch } from '@wordpress/data';
 
-const ImageUploaderWithText = ( { image, imageSetter } ) => {
+const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {
 	const inputRef = useRef( null );
 	const { theme } = useContext( ThemeContext );
 	const [ isUploading, setIsUploading ] = useState( false );
 	const [ onDragActive, setOnDragActive ] = useState( false );
 	const [ pngLogoBgTheme, setPngLogoBgTheme ] = useState( '' );
 
-	const { updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore );
-
-	const getDominantColor = ( imageSrc, callback ) => {
-		// eslint-disable-next-line no-undef
-		const img = new Image();
-		img.crossOrigin = 'Anonymous';
-		/* Registering on load before src to so that event listener is ready capture when image loads */
-		img.onload = () => {
-			const canvas = document.createElement( 'canvas' );
-			const ctx = canvas.getContext( '2d' );
-			canvas.width = img.width;
-			canvas.height = img.height;
-			ctx.drawImage( img, 0, 0 );
-			const imageData = ctx.getImageData(
-				0,
-				0,
-				canvas.width,
-				canvas.height
-			);
-			const data = imageData.data;
-			let r = 0,
-				g = 0,
-				b = 0,
-				count = 0;
-
-			/* skip transparent areas as the 0 alpha value leads to lower rgb values even in white logos */
-			for ( let i = 0; i < data.length; i += 4 ) {
-				const alpha = data[ i + 3 ];
-				if ( alpha > 0 ) {
-					r += data[ i ];
-					g += data[ i + 1 ];
-					b += data[ i + 2 ];
-					count++;
-				}
-			}
-
-			/* Get the average rgb value of the image  */
-			if ( count > 0 ) {
-				// To avoid division by zero
-				r = Math.floor( r / count );
-				g = Math.floor( g / count );
-				b = Math.floor( b / count );
-			}
-
-			// Callback with the avrage dominant color
-			callback( `rgb(${ r }, ${ g }, ${ b })` );
-		};
-		img.src = imageSrc;
-	};
-
-	const getContrastingColor = ( color ) => {
-		/* if the contrast value more than 150 it should have black bg, otherwise white */
-		const [ r, g, b ] = color.match( /\d+/g ).map( Number );
-		const contrastValue = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-		return contrastValue > 160 ? THEME_DARK : THEME_LIGHT;
-	};
-
 	async function updateItem( fileData ) {
 		if ( fileData ) {
 			setIsUploading( true );
 			const res = await uploadImage( fileData );
 			if ( ! res?.body ) {
-				updateSiteGenErrorStatus( true );
-				return setIsUploading( false );
+				setIsUploading( false );
+				handleFailure();
+				return false;
 			}
 			const id = res.body?.id;
 			const url = res.body?.source_url;
@@ -104,6 +55,12 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 		setIsUploading( false );
 	}
 
+	const handleFailure = () => {
+		if ( typeof onFailure === 'function' ) {
+			return onFailure();
+		}
+	};
+
 	const handleClick = () => {
 		inputRef?.current.click();
 	};