graphql js is display and download

package.json

@@ -30,6 +30,7 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
+    "file-saver": "^2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
     "graphiql": "^0.12.0",
@@ -42,6 +43,7 @@
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
+    "js-beautify": "^1.8.8",
     "mini-css-extract-plugin": "0.4.3",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.1.0",

src/components/common/generateJs/GenerateJs.jsx

@@ -1,6 +1,10 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {Tabs} from 'antd';
+import {BackTop, Tabs, Button, Spin} from 'antd';
+import saveAs from 'file-saver';
+import beautify from 'js-beautify';
+
+import './index.css';
 
 const TabPane = Tabs.TabPane;
 axios.defaults.withCredentials = true;
@@ -10,23 +14,41 @@ class GenerateJs extends Component {
         super(props);
         this.state = {
             schemaID:props.schemaID,
-            graphqlJs:'',
+            schemaName:props.schemaName,
+            queryList:[],
+            mutationList:[],
             show: false
         };
     }
 
     componentDidMount() {
-        // let requestUrl = 'http://123.206.193.98:8999/graphql/genjs';
-        let requestUrl = 'http://localhost:8999/graphql/genjs';
+        let requestUrl = 'http://123.206.193.98:8999/graphql/genjs';
+        // let requestUrl = 'http://localhost:8999/graphql/genjs';
         let _this = this;
-        axios.get(`${requestUrl}?schema=${this.state.schemaID}`)
+        let {schemaID} = this.state;
+        axios.get(`${requestUrl}?schema=${schemaID}`)
             .then((res) => {
-            console.log('js res',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);
+                // console.log('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
+                    }
+                });
+                // console.log('queryList',queryList);
+                // console.log('mutationList',mutationList);
                 if (res.data !== '') {
                     _this.setState({
-                        graphqlJs: res.data,
+                        queryList,
+                        mutationList,
                         show: true
-                    })
+                    });
                 } else {
                     _this.setState({
                         show: true
@@ -44,8 +66,20 @@ class GenerateJs extends Component {
         });
     }
 
+    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() {
-        return (
+        let {queryList, mutationList} = this.state;
+
+        return (this.state.show ?
             <div>
                 <Tabs
                     defaultActiveKey="query"
@@ -53,11 +87,41 @@ class GenerateJs extends Component {
                     // style={{ height: 220 }}
                 >
                     <TabPane tab="Query" key="query">
-                        Query Graphql<br/>
-                        {this.state.graphqlJs}
+                        <div className='download-button'>
+                            <Button type="primary" style={{float:'right'}} onClick={()=>this.saveFile()}>Download</Button>
+                        </div>
+                        <br/>
+                        <pre>
+                            <code>
+                                {queryList}
+                            </code>
+                        </pre>
+                    </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>
                     </TabPane>
-                    <TabPane tab="Mutation" key="mutation">Mutation Graphql</TabPane>
                 </Tabs>
+                <div>
+                    <BackTop />
+                </div>
+            </div>:
+            <div style={{width:'100%',height:window.innerHeight - 164}}>
+                <Spin
+                    tip={'loading...'}
+                    style={{
+                        position: 'relative',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%,-50%)'
+                    }}/>
             </div>
         )
     }

src/components/common/generateJs/index.css

@@ -0,0 +1,3 @@
+.ant-back-top-content{
+    background-color: #1890ff;
+}

src/components/trialCase/TrialCase.jsx

@@ -31,7 +31,7 @@ class TrialCase extends Component {
 
 
     render() {
-        let schemaID = this.props.history.location.state ? this.props.history.location.state.schemaID : "schema_1542243424669_92094965";
+        let schemaID = this.props.history.location.state ? this.props.history.location.state.schemaID : "ecommerce_schemaID";
         let schemaName = this.props.history.location.state ? this.props.history.location.state.schemaName : "ecommerce";
         return (
             <div>
@@ -63,7 +63,7 @@ class TrialCase extends Component {
                                     case 'deploy':
                                         return <Deploy userID={this.state.userID} schemaID={schemaID} schemaName={schemaName}/>;
                                     case 'graphql':
-                                        return <GenerateJs schemaID={schemaID}/>;
+                                        return <GenerateJs schemaID={schemaID} schemaName={schemaName}/>;
                                     case 'graphiql':
                                         return <Graphql/>;
                                     case 'metabase':