Capture screen: Get rid of redux connect data; simplify component

client/blocks/import/capture/index.tsx

@@ -1,29 +1,28 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Title } from '@automattic/onboarding';
-import { localize, translate } from 'i18n-calypso';
-import React, { useEffect, useRef } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { useTranslate } from 'i18n-calypso';
+import React, { useEffect, useRef, useState } from 'react';
+import { useAnalyzeUrlQuery } from 'calypso/data/site-profiler/use-analyze-url-query';
 import { triggerMigrationStartingEvent } from 'calypso/my-sites/migrate/helpers';
-import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { useSelector } from 'calypso/state';
 import { getCurrentUser } from 'calypso/state/current-user/selectors';
-import { analyzeUrl, resetError } from 'calypso/state/imports/url-analyzer/actions';
-import { isAnalyzing, getAnalyzerError } from 'calypso/state/imports/url-analyzer/selectors';
 import ScanningStep from '../scanning';
-import { GoToStep, UrlData } from '../types';
+import { GoToStep } from '../types';
 import CaptureInput from './capture-input';
 import type { OnInputEnter, OnInputChange } from './types';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';
 
 interface Props {
-	translate: typeof translate;
+	hasError?: boolean;
 	onInputEnter: OnInputEnter;
 	onInputChange?: OnInputChange;
-	hasError?: boolean;
 	onDontHaveSiteAddressClick?: () => void;
 }
-const Capture: FunctionComponent< Props > = ( props ) => {
-	const { translate, onInputEnter, onInputChange, onDontHaveSiteAddressClick, hasError } = props;
+export const Capture: FunctionComponent< Props > = ( props ) => {
+	const translate = useTranslate();
+	const { onInputEnter, onInputChange, onDontHaveSiteAddressClick, hasError } = props;
 
 	return (
 		<>
@@ -42,11 +41,7 @@ const Capture: FunctionComponent< Props > = ( props ) => {
 	);
 };
 
-const LocalizedCapture = localize( Capture );
-
-export { LocalizedCapture as Capture };
-
-type StepProps = ConnectedProps< typeof connector > & {
+type StepProps = {
 	goToStep: GoToStep;
 	disableImportListStep?: boolean;
 };
@@ -57,38 +52,42 @@ const trackEventParams = {
 	step: 'capture',
 };
 
-const CaptureStep: React.FunctionComponent< StepProps > = ( {
-	currentUser,
+export const CaptureStep: React.FunctionComponent< StepProps > = ( {
 	goToStep,
-	analyzeUrl,
-	resetError,
-	isAnalyzing,
-	analyzerError,
-	recordTracksEvent,
 	disableImportListStep,
 } ) => {
+	const currentUser = useSelector( getCurrentUser );
 	const isStartingPointEventTriggeredRef = useRef( false );
-	const runProcess = ( url: string ): void => {
-		// Analyze the URL and when we receive the urlData, decide where to go next.
-		analyzeUrl( url ).then( ( response: UrlData ) => {
-			let stepSectionName;
-
-			switch ( response.platform ) {
-				case 'unknown':
-					stepSectionName = 'not';
-					break;
-
-				case 'wordpress':
-					stepSectionName = response.platform_data?.is_wpcom ? 'wpcom' : 'preview';
-					break;
-
-				default:
-					stepSectionName = 'preview';
-					break;
-			}
-
-			goToStep( 'ready', stepSectionName );
-		} );
+	const [ url, setUrl ] = useState( '' );
+	const {
+		data: urlData,
+		isFetching: isAnalyzing,
+		error: analyzerError,
+	} = useAnalyzeUrlQuery( url );
+
+	const decideStepRedirect = () => {
+		if ( ! urlData ) {
+			return;
+		}
+
+		const stepName = 'ready';
+		let stepSectionName;
+
+		switch ( urlData.platform ) {
+			case 'unknown':
+				stepSectionName = 'not';
+				break;
+
+			case 'wordpress':
+				stepSectionName = urlData.platform_data?.is_wpcom ? 'wpcom' : 'preview';
+				break;
+
+			default:
+				stepSectionName = 'preview';
+				break;
+		}
+
+		goToStep( stepName, stepSectionName, { fromUrl: url } );
 	};
 
 	const recordScanningEvent = () => {
@@ -134,33 +133,24 @@ const CaptureStep: React.FunctionComponent< StepProps > = ( {
 	useEffect( recordScanningErrorEvent, [ analyzerError ] );
 	useEffect( recordMigrationStartingPointEvent, [ currentUser ] );
 	useEffect( recordCaptureScreen, [] );
+	useEffect( () => decideStepRedirect(), [ urlData ] );
 
 	return (
 		<>
 			{ ! isAnalyzing && (
-				<LocalizedCapture
-					onInputEnter={ runProcess }
+				<Capture
+					onInputEnter={ setUrl }
 					onDontHaveSiteAddressClick={ onDontHaveSiteAddressClick }
 					hasError={ !! analyzerError }
-					onInputChange={ () => resetError() }
+					onInputChange={ () => {
+						// resets the error when the user starts typing again
+						setUrl( '' );
+					} }
 				/>
 			) }
 			{ isAnalyzing && <ScanningStep /> }
 		</>
 	);
 };
 
-const connector = connect(
-	( state ) => ( {
-		currentUser: getCurrentUser( state || {} ),
-		isAnalyzing: isAnalyzing( state ),
-		analyzerError: getAnalyzerError( state ),
-	} ),
-	{
-		analyzeUrl,
-		resetError,
-		recordTracksEvent,
-	}
-);
-
-export default connector( CaptureStep );
+export default CaptureStep;