Commit abe7879b authored by Jeff Avallone's avatar Jeff Avallone

Adding module loading flow

parent 8187865f
Pipeline #43114872 passed with stages
in 3 minutes and 49 seconds
import React from 'react';
import * as Sentry from '@sentry/browser';
import { AppContextProvider } from 'components/AppContext';
import Form from 'components/Form';
import Loader from 'components/Loader';
import Message from 'components/Message';
import Render from 'components/Render';
class App extends React.PureComponent {
state={}
state = {
loading: false,
loadingError: null,
Render: null
}
handleRender = async ({ syntax, expr }) => {
this.setState({
syntax,
expr,
loading: true,
loadingError: null,
Render: null
});
try {
const Render = await import(
/* webpackChunkName: "render-[index]" */
'components/Render' // TODO: Import syntax-specific render component
);
handleRender = ({ syntax, expr }) => {
this.setState({ syntax, expr });
// HACK: Fake loading time
await new Promise(resolve => setTimeout(resolve, 2000));
this.setState({
loading: false,
Render: Render.default
});
}
catch (e) {
Sentry.captureException(e, { syntax });
this.setState({
loading: false,
loadingError: e
});
throw e;
}
}
handleRetry = event => {
......@@ -19,17 +52,23 @@ class App extends React.PureComponent {
}
render() {
const {
loading,
loadingError,
Render
} = this.state;
return <AppContextProvider onExpressionChange={ this.handleRender }>
<Form />
<Loader />
{ loading && <Loader /> }
<Message type="error" heading="Render Failure">
{ loadingError && <Message type="error" heading="Render Failure">
<p>An error occurred while rendering the regular expression.</p>
<a href="#retry" onClick={ this.handleRetry }>Retry</a>
</Message>
</Message> }
<Render />
{ Render && <Render /> }
</AppContextProvider>;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment