WIP not working

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export default function WpcomMediaUrlImportForm( { siteId } ) {
+	const [ url, setUrl ] = useState( '' );
+
+	const handleUrlChange = e => {
+    setUrl( e.target.value );
+  };
+
+	const handleSubmit = async e => {
+		try {
+			new URL(url);
+		} catch (e) {
+			return false;
+		}
+		e.preventDefault();
+
+		console.log({ url, siteId } );
+
+		console.log({ wpcomRequest });
+
+		window.wpcomRequest = wpcomRequest;
+
+		// NOT WORKING!!
+
+		const response = await wpcomRequest( {
+			method: 'POST',
+			apiVersion: '2',
+			apiNamespace: 'rest/v1.1',
+			path: `/sites/${ siteId }/media/new`,
+			body: {
+				media_urls: [ url ],
+			}
+		});
+
+
+		console.log('FINISH');
+		console.log({ response});
+
+		return false;
+	}
+
+	return (
+		<div class="wrap">
+			<p>or import from URL YAY!</p>
+				<form onsubmit="return false;">
+					<input
+						type="url"
+						value={ url }
+        		onChange={ handleUrlChange }
+						required />
+					<button onClick={ handleSubmit } class="button button-primary">Import</button>
+				</form>
+		</div>
+	);
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js

@@ -1,5 +1,21 @@
-import apiFetch from '@wordpress/api-fetch';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import WpcomMediaUrlImportForm from './wpcom-media-url-import-form';
 
-document.addEventListener( 'DOMContentLoaded', () => {
-	console.log( 'TESTING' );
+const props = typeof window === 'object' ? window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT : {};
+
+document.addEventListener( 'DOMContentLoaded', function () {
+	const observer = new MutationObserver( mutations => {
+		mutations.forEach( mutation => {
+			if ( mutation.addedNodes.length > 0 ) {
+				const container = document.getElementById( 'wpcom-media-url-import' );
+				if ( container ) {
+					const root = ReactDOM.createRoot( container );
+					root.render( <WpcomMediaUrlImportForm { ...props } /> );
+					observer.disconnect();
+				}
+			}
+		} );
+	} );
+	observer.observe( document.body, { childList: true, subtree: true } );
 } );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php

@@ -10,18 +10,8 @@
 use Automattic\Jetpack\Connection\Client;
 
 function wpcom_media_url_import() {
-	$nonce = wp_create_nonce('import_image');
-    $ajax_url = admin_url('admin-ajax.php');
-
     ?>
-    <div class="wrap">
-        <h1>Import Image from URL hah</h1>
-        <form id="wpcom-media-url-import" action="<?php echo esc_url($ajax_url); ?>" method="POST">
-            <input type="url" id="image_url" placeholder="Enter image URL" required />
-			<input type="hidden" name="nonce" value="<?php echo esc_attr($nonce); ?>" />
-			<input type="hidden" name="action" value="import_image" />
-            <button type="submit" class="button button-primary">Import Image</button>
-        </form>
+    <div id="wpcom-media-url-import">
     </div>
     <?php
 }
@@ -31,29 +21,18 @@ function wpcom_media_url_import() {
  * Enqueue the assets of the wpcom media URL import.
  */
 function enqueue_wpcom_media_url_import() {
-	jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
-}
-add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );
-
-// IT WON'T WORK NOT SURE WHY!?!?!
-function wpcom_handle_media_url_import() {
-    check_ajax_referer('import_image', 'nonce');
+	$handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js' ) );
 
-	$image_url = esc_url_raw($_POST['image_url']);
 	$blog_id = Jetpack_Options::get_option( 'id' );
-	$response = Client::wpcom_json_api_request_as_blog(
-		'/sites/' . $blog_id . '/media/new',
-		'1.1',
+	$data = wp_json_encode(
 		array(
-			'method' => 'POST',
-			'headers' => array(
-				'Content-Type'    => 'application/json',
-			),
-		),
-		wp_json_encode(array( 'media_urls' => [$image_url])),
-		'rest'
+			'siteId' => $blog_id,
+		)
+	);
+	wp_add_inline_script(
+		$handle,
+		"window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT = $data;",
+		'before'
 	);
-
-    wp_send_json_success($response);
 }
-add_action('wp_ajax_import_image', 'wpcom_handle_media_url_import');
+add_action('post-plupload-upload-ui', 'enqueue_wpcom_media_url_import' );