Switched back to component extension

This is for maximum backwards compatibility as React Hook implementation is only supported in WP 5.2 and above.

src/blocks/activity/edit.js

@@ -1,6 +1,8 @@
 /* global wp, wpStrava */
 import EmbedPlaceholder from './embed-placeholder';
-import { isEmpty } from 'lodash';
+import EmbedControls from './embed-controls';
+
+const { Component } = wp.element;
 
 /**
  * Localized Data.
@@ -9,49 +11,61 @@ const {
 	placeholderActivityImg,
 } = wpStrava;
 
-const Edit = (props) => {
-	const {
-		setAttributes,
-		cannotEmbed,
-		tryAgain,
-		attributes: {
-			url
-		}
-	 } = props;
+class Edit extends Component {
 
+	constructor() {
+		super( ...arguments );
+		this.setUrl = this.setUrl.bind( this );
+		this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
 
-	const submitUrl = (event) => {
+		this.state = {
+			editingURL: true,
+			url: this.props.attributes.url,
+		};
+	}
+
+	setUrl( event ) {
 		if ( event ) {
 			event.preventDefault();
 		}
-		console.log( 'onsubmit', event );
-		setAttributes( { url: event.target.value } )
-	};
+		const { url } = this.state;
+		const { setAttributes } = this.props;
+		this.setState( { editingURL: false } );
+		setAttributes( { url } );
+	}
 
-	const changeUrl = ( event ) => {
-		console.log( 'onchange', event );
-		console.log( 'Props', props );
-		setAttributes( { url: event.target.value } );
-	};
+	switchBackToURLInput() {
+		this.setState( { editingURL: true } );
+	}
+
+	render() {
+		const { url, editingURL } = this.state;
+
+		// Newly inserted block or we've clicked the edit button.
+		if ( editingURL ) {
+			return (
+				<EmbedPlaceholder
+					icon="chart-line"
+					label="BBQ LOL Label"
+					onSubmit={ this.setUrl }
+					value={ url }
+					onChange={ ( event ) =>
+						this.setState( { url: event.target.value } )
+					}
+				/>
+			);
+		}
 
-	if ( isEmpty( url ) ) {
 		return (
-			<EmbedPlaceholder
-				icon="chart-line"
-				label="BBQ LOL Label"
-				value={ url }
-				cannotEmbed={ cannotEmbed }
-				onChange={ changeUrl }
-				fallback={ () => fallback( url, props.onReplace ) }
-				tryAgain={ tryAgain }
-				onSubmit={ submitUrl }
-			/>
+			<>
+				<EmbedControls
+					switchBackToURLInput={ this.switchBackToURLInput }
+				/>
+				<img className="wp-strava-img" src={placeholderActivityImg} />
+			</>
 		);
 	}
 
-	return (
-		<img className="wp-strava-img" src={placeholderActivityImg} />
-	);
 };
 
 export default Edit;