Make it work with backend

src/nexblocks/NexBlockContainer.jsx

@@ -1,26 +1,36 @@
-import React, { Component } from 'react';
-
+import React, { useState, useEffect } from 'react';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import Plugin, { COMPONENT } from '../plugin-test/Plugin';
 
 const FALLBACK_URL = 'http://localhost:7331/remoteEntry.js';
 const FALLBACK_VIEW = 'PluginOne';
 
 // eslint-disable-next-line react/prefer-stateless-function
-export default class NexBlockContainer extends Component {
-  render() {
-    // eslint-disable-next-line react/prop-types
-    const query = new URLSearchParams(this.props.location.search);
+export default function NexBlockContainer() {
+  // eslint-disable-next-line react/prop-types
+  const query = new URLSearchParams(window.location.search);
 
-    const plugin = {
-      url: query.get('url') ?? FALLBACK_URL,
-      scope: 'plugin',
-      module: `./${query.get('view') ?? FALLBACK_VIEW}`,
-      type: COMPONENT,
-    };
-    return (
-      <div style={{ marginTop: '2em' }}>
-        <Plugin plugin={plugin} />
-      </div>
-    );
-  }
+  const plugin = {
+    url: query.get('url') ?? FALLBACK_URL,
+    scope: 'plugin',
+    module: `./${query.get('view') ?? FALLBACK_VIEW}`,
+    type: COMPONENT,
+  };
+
+  const [instanceData, setInstanceData] = useState({ title: 'Loading...', body: '' });
+  const usageId = query.get('usage_id');
+  const DATA_URL = `http://localhost:18000/api/nexblocks/v0/instance-data/${usageId}`;
+  const httpClient = getAuthenticatedHttpClient();
+
+  useEffect(() => {
+    httpClient.get(DATA_URL, { params: {} }).then(({ data }) => {
+      setInstanceData(data);
+    });
+  }, []);
+
+  return (
+    <div style={{ marginTop: '2em' }}>
+      <Plugin plugin={plugin} instanceData={instanceData} />
+    </div>
+  );
 }

src/plugin-test/Plugin.jsx

@@ -44,7 +44,7 @@ const useDynamicScript = (url) => {
   };
 };
 
-function Plugin({ plugin, intl }) {
+function Plugin({ plugin, intl, ...props }) {
   const url = plugin ? plugin.url : null;
   const { ready, failed } = useDynamicScript(url);
 
@@ -76,7 +76,7 @@ function Plugin({ plugin, intl }) {
         />
       )}
     >
-      <PluginComponent />
+      <PluginComponent {...props} {...plugin.props} />
     </Suspense>
   );
 }
@@ -87,6 +87,7 @@ Plugin.propTypes = {
     module: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     type: PropTypes.oneOf([COMPONENT, SCRIPT, IFRAME]).isRequired,
+    props: PropTypes.object,
   }),
   intl: intlShape.isRequired,
 };