Preventing rendering with the wrong component

This commit is contained in:
Jeff Avallone 2019-01-13 11:51:45 -05:00
parent 5de72ffb97
commit 3eb0689ff3

View File

@ -12,7 +12,7 @@ class App extends React.PureComponent {
state = {
loading: false,
loadingError: null,
Render: null
render: {}
}
componentDidMount() {
@ -44,7 +44,7 @@ class App extends React.PureComponent {
this.setState({
loading: false,
loadingError: null,
Render: null
render: {}
});
if (!expr) {
@ -56,7 +56,7 @@ class App extends React.PureComponent {
});
try {
const Render = await import(
const Component = await import(
/* webpackChunkName: "render-[index]" */
`syntax/${ syntax }`
);
@ -66,7 +66,10 @@ class App extends React.PureComponent {
this.setState({
loading: false,
Render: Render.default
render: {
syntax,
Component: Component.default
}
});
}
catch (e) {
@ -99,10 +102,14 @@ class App extends React.PureComponent {
const {
loading,
loadingError,
Render,
imageDetails
imageDetails,
render: {
syntax: renderSyntax,
Component
}
} = this.state;
const formProps = {
onSubmit: this.handleSubmit,
syntax,
@ -118,9 +125,11 @@ class App extends React.PureComponent {
expr
};
const doRender = renderSyntax === syntax;
return <>
<Form { ...formProps }>
{ Render && <FormActions { ...actionProps } /> }
{ doRender && <FormActions { ...actionProps } /> }
</Form>
{ loading && <Loader /> }
@ -130,7 +139,7 @@ class App extends React.PureComponent {
<a href="#retry" onClick={ this.handleRetry }>Retry</a>
</Message> }
{ Render && <Render { ...renderProps } /> }
{ doRender && <Component { ...renderProps } /> }
</>;
}
}