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, };