refactor fat render function
@@ -55,30 +55,10 @@ class ApplicationFormRaw extends React.PureComponent<
ReturnType<typeof mapStateToProps> &
WithStyles<typeof styles>
> {
- public render() {
- const { sharedEnv, handleSubmit, formComponents, classes } = this.props;
- const isEnvInSharedEnv = (envName: string) => {
- return !!sharedEnv.find(x => x.get("name") === envName);
- };
-
- const missingVariables = Array.from(
- new Set(
- formComponents
- .map(component => {
- return component
- .get("env")
- .filter(env => env.get("type") === EnvTypeExternal)
- .map(env => env.get("name"));
- })
- .reduce((acc, item) => acc.concat(item))
- )
- ).filter(x => !isEnvInSharedEnv(x));
-
+ private renderBaisc() {
+ const { classes } = this.props;
return (
- <div>
- <form onSubmit={handleSubmit}>
- <Grid container spacing={1}>
- <Grid item xs={12} sm={12} md={8} lg={8} xl={6}>
+ <>
<Typography
variant="h2"
classes={{
@@ -106,7 +86,14 @@ class ApplicationFormRaw extends React.PureComponent<
placeholder="Please type the component name"
/>
</Paper>
+ </>
+ );
+ }
+ private renderComponent() {
+ const { classes } = this.props;
+ return (
+ <>
<Typography
variant="h2"
classes={{
@@ -127,7 +114,31 @@ class ApplicationFormRaw extends React.PureComponent<
>
<Components />
</Paper>
+ </>
+ );
+ }
+ private renderSharedEnvs() {
+ const { sharedEnv, formComponents, classes } = this.props;
+ const isEnvInSharedEnv = (envName: string) => {
+ return !!sharedEnv.find(x => x.get("name") === envName);
+ };
+
+ const missingVariables = Array.from(
+ new Set(
+ formComponents
+ .map(component => {
+ return component
+ .get("env")
+ .filter(env => env.get("type") === EnvTypeExternal)
+ .map(env => env.get("name"));
+ })
+ .reduce((acc, item) => acc.concat(item))
+ )
+ ).filter(x => !isEnvInSharedEnv(x));
+
+ return (
+ <>
<Typography
variant="h2"
classes={{
@@ -153,6 +164,20 @@ class ApplicationFormRaw extends React.PureComponent<
missingVariables={missingVariables}
/>
</Paper>
+ </>
+ );
+ }
+ public render() {
+ const { handleSubmit } = this.props;
+
+ return (
+ <div>
+ <form onSubmit={handleSubmit}>
+ <Grid container spacing={1}>
+ <Grid item xs={12} sm={12} md={8} lg={8} xl={6}>
+ {this.renderBaisc()}
+ {this.renderComponent()}
+ {this.renderSharedEnvs()}
</Grid>
</Grid>
<Button variant="contained" color="primary" type="submit">
