fix generate js

src/components/common/generateJs/GenerateJs.jsx

@@ -16,44 +16,31 @@ class GenerateJs extends Component {
             schemaID:props.schemaID,
             schemaName:props.schemaName,
             graphqlJs:'',
-            queryList:[],
-            mutationList:[],
             show: false
         };
     }
 
     componentDidMount() {
+        this._isMounted = true;
         let requestUrl = 'http://123.206.193.98:8999/graphql/genjs';
-        // let requestUrl = 'http://localhost:8999/graphql/genjs';
         let _this = this;
         let {schemaID} = this.state;
         axios.get(`${requestUrl}?schema=${schemaID}`)
             .then((res) => {
-                // console.log('js res1', res.data);
-                let queryList = [];
-                let mutationList = [];
-                let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
-                // console.log('beautify graphqlJs',graphqlJs);
-                graphqlJs.split("}\n}\n").map((item) => {
-                    if (item.indexOf('query')>-1) queryList.push(item+"}\n}\n");
-                    else mutationList.push(item+"}\n}\n");
-                    return {
-                        queryList,mutationList
+                if(this._isMounted){
+                    if (res.data !== '') {
+                        // console.log('js res', res.data);
+                        let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
+                        // console.log('beautify graphqlJs',graphqlJs);
+                        _this.setState({
+                            graphqlJs,
+                            show: true
+                        });
+                    } else {
+                        _this.setState({
+                            show: true
+                        })
                     }
-                });
-                // console.log('queryList',queryList);
-                // console.log('mutationList',mutationList);
-                if (res.data !== '') {
-                    _this.setState({
-                        graphqlJs,
-                        queryList,
-                        mutationList,
-                        show: true
-                    });
-                } else {
-                    _this.setState({
-                        show: true
-                    })
                 }
             })
             .catch((err) => {
@@ -67,54 +54,112 @@ class GenerateJs extends Component {
         });
     }
 
+    componentDidUpdate() {
+        this._isMounted = true;
+        let requestUrl = 'http://123.206.193.98:8999/graphql/genjs';
+        let _this = this;
+        let {schemaID} = this.state;
+        axios.get(`${requestUrl}?schema=${schemaID}`)
+            .then((res) => {
+                if(this._isMounted){
+                    if (res.data !== '') {
+                        // console.log('js res', res.data);
+                        let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
+                        // console.log('beautify graphqlJs',graphqlJs);
+                        _this.setState({
+                            graphqlJs,
+                            show: true
+                        });
+                    } else {
+                        _this.setState({
+                            show: true
+                        })
+                    }
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
     saveFile =()=>{
         let {schemaName,graphqlJs} = this.state;
-        // let file = new File([graphqlJs], `${schemaName}.txt`, {type: "text/plain;charset=utf-8"});
-        // console.log('file',file);
         let blob = new Blob([graphqlJs], {type: "text/plain;charset=utf-8"});
-        // console.log('blob',blob);
         saveAs(blob, `${schemaName}_graphql.js`);
-        // FileSaver.saveAs(blob, `${schemaName}.txt`);
     };
 
     render() {
-        let {queryList, mutationList} = this.state;
-
-        return (this.state.show ?
+        let {graphqlJs} = this.state;
+        let queryList = [];
+        let mutationList = [];
+        let graphqlJsList = beautify(graphqlJs, { indent_size: 2, space_in_empty_paren: true });
+        // console.log('beautify graphqlJs',graphqlJsList);
+        graphqlJsList.split("}\n}\n").forEach((item) => {
+            if (item.indexOf('query')>-1) queryList.push(item+"}\n}\n");
+            else mutationList.push(item+"}\n}\n");
+        });
+        // console.log('queryList',queryList);
+        // console.log('mutationList',mutationList);
+        return (
             <div>
                 <Tabs
                     defaultActiveKey="query"
                     tabPosition="left"
-                    // style={{ height: 220 }}
                 >
                     <TabPane tab="Query" key="query">
                         <div className='download-button'>
                             <Button type="primary" style={{float:'right'}} onClick={()=>this.saveFile()}>Download</Button>
                         </div>
                         <br/>
-                        <pre>
-                            <code>
-                                {queryList}
-                            </code>
-                        </pre>
+                        {this.state.show ?
+                            <GraphqlJs graphqlList={queryList}/> :
+                            <Loading/>
+                        }
                     </TabPane>
+
                     <TabPane tab="Mutation" key="mutation">
                         <div className='download-button'>
                             <Button type="primary" style={{float:'right'}} onClick={()=>this.saveFile()}>Download</Button>
                         </div>
                         <br/>
-                        <pre>
-                            <code>
-                                 {mutationList}
-                            </code>
-                        </pre>
+                        {this.state.show ?
+                            <GraphqlJs graphqlList={mutationList}/> :
+                            <Loading/>
+                        }
                     </TabPane>
                 </Tabs>
                 <div>
                     <BackTop />
                 </div>
-            </div>:
-            <div style={{width:'100%',height:window.innerHeight - 164}}>
+            </div>
+        )
+    }
+}
+
+export default GenerateJs;
+
+class GraphqlJs extends Component {
+    render() {
+        return (
+            <div>
+                 <pre>
+                     <code>
+                         {this.props.graphqlList}
+                     </code>
+                 </pre>
+            </div>
+        );
+    }
+}
+
+class Loading extends Component {
+    render() {
+        return (
+            <div style={{width: '100%', height: window.innerHeight - 164}}>
                 <Spin
                     tip={'loading...'}
                     style={{
@@ -124,8 +169,6 @@ class GenerateJs extends Component {
                         transform: 'translate(-50%,-50%)'
                     }}/>
             </div>
-        )
+        );
     }
-}
-
-export default GenerateJs;
+}