diff --git a/src/nexblocks/NexBlockContainer.jsx b/src/nexblocks/NexBlockContainer.jsx
index 59dc7410..7434affb 100644
--- a/src/nexblocks/NexBlockContainer.jsx
+++ b/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 (
-
- );
- }
+ 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 (
+
+ );
}
diff --git a/src/plugin-test/Plugin.jsx b/src/plugin-test/Plugin.jsx
index c1141f88..b6eac5d1 100644
--- a/src/plugin-test/Plugin.jsx
+++ b/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 }) {
/>
)}
>
-
+
);
}
@@ -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,
};