Fix dropped logo not updating preview

Author: wpalani

src/app/steps/Logo/LogoStep.js

@@ -5,28 +5,31 @@ import { Navigate, Step } from '@/components';
 import { OnboardingEvent, trackOnboardingEvent } from '@/utils/analytics/hiive';
 import { ACTION_LOGO_ADDED, ACTION_LOGO_SKIPPED } from '@/utils/analytics/hiive/constants';
 import { LogoUploadInput } from '.';
+import { nfdOnboardingStore } from '@/data/store';
 
 const LogoStep = () => {
-	const [ logoValue, setLogoValue ] = useState( {
-		id: null,
-		url: null,
-	} );
+	const [ isUploading, setIsUploading ] = useState( false );
 
 	const { editEntityRecord, saveEditedEntityRecord } = useDispatch( coreStore );
-	const { siteLogo } = useSelect( ( select ) => {
+	const { siteLogoId, storeLogoId } = useSelect( ( select ) => {
+		// Get the site logo from the core data store.
 		const { getEntityRecord } = select( coreStore );
 		const siteSettings = getEntityRecord( 'root', 'site' );
 		const logoId = siteSettings?.site_logo;
+
+		// Get the logo from the input slice.
+		const logo = select( nfdOnboardingStore ).getLogo();
 		return {
-			siteLogo: logoId,
+			siteLogoId: logoId,
+			storeLogoId: logo.id,
 		};
 	}, [] );
 
 	const handleNext = () => {
 		// If the logo is set.
-		if ( null !== logoValue.id && logoValue.id !== siteLogo ) {
+		if ( null !== storeLogoId && storeLogoId !== siteLogoId ) {
 			editEntityRecord( 'root', 'site', undefined, {
-				site_logo: logoValue.id,
+				site_logo: storeLogoId,
 			} );
 			saveEditedEntityRecord( 'root', 'site' );
 
@@ -51,21 +54,26 @@ const LogoStep = () => {
 					className="nfd-gap-2"
 				/>
 				<Container.Block separator={ false }>
-					<LogoUploadInput logo={ logoValue } setLogoValue={ setLogoValue } />
+					<LogoUploadInput
+						isUploading={ isUploading }
+						setIsUploading={ setIsUploading }
+					/>
 				</Container.Block>
 				<Container.Footer>
 					<Step.Actions>
 						<Navigate
 							toRoute="/generating"
 							direction="forward"
 							callback={ handleNext }
+							disabled={ isUploading }
 						>
 							{ __( 'Next', 'wp-module-onboarding' ) }
 						</Navigate>
 						<Navigate
 							toRoute="/intake"
 							direction="backward"
 							variant="secondary"
+							disabled={ isUploading }
 						>
 							{ __( 'Back', 'wp-module-onboarding' ) }
 						</Navigate>

src/app/steps/Logo/LogoUploadInput.js

@@ -1,18 +1,19 @@
-import { dispatch, select } from '@wordpress/data';
+import { dispatch, useSelect } from '@wordpress/data';
 import { uploadMedia, validateMimeType, validateFileSize } from '@wordpress/media-utils';
 import classNames from 'classnames';
 import { ImageImport, Label } from '@newfold/ui-component-library';
 import { nfdOnboardingStore } from '@/data/store';
 import { OnboardingEvent, trackOnboardingEvent } from '@/utils/analytics/hiive';
 import { ACTION_LOGO_UPLOAD_FAILED } from '@/utils/analytics/hiive/constants';
 
-const LogoUploadInput = ( { logoValue, setLogoValue } ) => {
-	const [ isUploading, setIsUploading ] = useState( false );
+const LogoUploadInput = ( { isUploading, setIsUploading } ) => {
 	const [ error, setError ] = useState( {
 		status: false,
 		message: '',
 	} );
 
+	const logo = useSelect( ( select ) => select( nfdOnboardingStore ).getLogo(), [] );
+
 	const validateFile = ( file ) => {
 		const validationResult = {
 			success: true,
@@ -60,24 +61,20 @@ const LogoUploadInput = ( { logoValue, setLogoValue } ) => {
 		 * Since we're only interested in the final uploaded object...
 		 * The isOptimisticUrl flag is used to track the first call and ignore the blob src.
 		 */
-		let isOptimisticUrl = false;
+		let isOptimisticUrl = true;
 		uploadMedia( {
 			multiple: false,
 			filesList: [ file ],
 			onFileChange: ( files ) => {
-				if ( ! isOptimisticUrl ) {
-					return isOptimisticUrl = true;
+				if ( isOptimisticUrl ) {
+					isOptimisticUrl = false;
+					return;
 				}
 				// Set the logo in the input slice
 				dispatch( nfdOnboardingStore ).setLogo( {
 					id: files[ 0 ].id,
 					url: files[ 0 ].url,
 				} );
-				// Set the logo in the step state
-				setLogoValue( {
-					id: files[ 0 ].id,
-					url: files[ 0 ].url,
-				} );
 				// Reset the uploading state
 				setIsUploading( false );
 			},
@@ -103,52 +100,25 @@ const LogoUploadInput = ( { logoValue, setLogoValue } ) => {
 			id: null,
 			url: null,
 		} );
-		// Reset the logo in the step state
-		setLogoValue( {
-			id: 0,
-			url: '',
-		} );
 	};
 
-	/**
-	 * Get the current site logo from the input slice
-	 * @return {object|null} The current site logo object or null if no logo is set
-	 */
-	const getCurrentSiteLogo = () => {
-		const { logo } = select( nfdOnboardingStore ).getInputSlice();
-		return logo?.url || null;
-	};
-
-	/**
-	 * On mount, set the parent logo state to the input slice.
-	 * Helpful in cases where the user navigate to another step then return to the Logo step or...
-	 * Refresh the app.
-	 */
-	useEffect( () => {
-		const { logo } = select( nfdOnboardingStore ).getInputSlice();
-		if ( logo?.url && logo?.id !== logoValue?.id ) {
-			setLogoValue( {
-				id: logo.id,
-				url: logo.url,
-			} );
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
 	return (
 		<div className="nfd-onboarding-logo-upload nfd-flex nfd-flex-col nfd-gap-2">
 			<Label htmlFor="nfd-onboarding-logo-input">
 				{ __( 'Site logo', 'wp-module-onboarding' ) }
 			</Label>
 			<ImageImport
+				key={ logo?.url || 'no-logo' }
 				id="nfd-onboarding-logo-input"
 				name="nfd-onboarding-logo-input"
 				imageInputVariant="rounded"
-				previewImage={ getCurrentSiteLogo() }
+				previewImage={ logo?.url || null }
 				dropLabel={ __( 'accepted: .png, .jpg, .jpeg (5MB max)', 'wp-module-onboarding' ) }
 				buttonText={ __( 'Browse', 'wp-module-onboarding' ) }
 				onChange={ ( { file } ) => handleUpload( file ) }
-				onDrop={ handleUpload }
+				onDrop={ ( e ) => {
+					handleUpload( e.dataTransfer.files[ 0 ] );
+				} }
 				onReset={ handleReset }
 				disabled={ isUploading }
 				isLoading={ isUploading }