delete schema work

src/components/common/schema/Schema.jsx

@@ -1,12 +1,14 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button, Spin, Pagination} from 'antd';
+import {Row, Col, Input, Icon, Button, Spin, Pagination, Modal} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
 import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
 import Table from "./Table";
 
+const confirm = Modal.confirm;
+
 class Schema extends Component {
     constructor(props) {
         super(props);
@@ -94,20 +96,23 @@ class Schema extends Component {
                                                     </Col>
                                                 </Row>
                                             </div>
-                                            {
-                                                data.map(table => (
-                                                    <div key={table.name} className={'schema-table-list-content'}>
-                                                        <Row>
-                                                            <Col
-                                                                span={10}
-                                                                onClick={() => this.switchTable(table.name)}
-                                                            >
-                                                                <span className={'schema-table-content'}>{table.name}</span>
-                                                            </Col>
-                                                            <Col span={10}>
-                                                                <span className={'schema-table-content'}>{table.remark}</span>
-                                                            </Col>
-                                                            <Col span={2} offset={2}>
+                                            <div>
+                                                {
+                                                    data.map(table => (
+                                                        <div key={table.name} className={'schema-table-list-content'}>
+                                                            <Row>
+                                                                <Col
+                                                                    span={10}
+                                                                    onClick={() => this.switchTable(table.name)}
+                                                                >
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.name}</span>
+                                                                </Col>
+                                                                <Col span={10}>
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.remark}</span>
+                                                                </Col>
+                                                                <Col span={2} offset={2}>
                                                                 <span className={'schema-table-content'}>
                                                                     <DeleteTableButton
                                                                         currentTable={table.name}
@@ -116,23 +121,28 @@ class Schema extends Component {
                                                                         userID={userID}
                                                                     />
                                                                 </span>
-                                                            </Col>
-                                                        </Row>
-                                                    </div>
+                                                                </Col>
+                                                            </Row>
+                                                        </div>
+
+                                                    ))
+                                                }
+                                            </div>
 
-                                                ))
-                                            }
                                             <div className={'schema-bottom'}>
                                                 <Row>
                                                     <Col span={4}>
                                                         <div className={'delete-schema'}>
-                                                            {/*<DeleteSchemaButton/>*/}
-                                                            <Button type="danger">delete</Button>
+                                                            <DeleteSchemaButton
+                                                                userID={userID}
+                                                                schemaName={this.state.schemaName}
+                                                            />
+                                                            {/*<Button type="danger">delete</Button>*/}
                                                         </div>
                                                     </Col>
                                                     <Col span={4} offset={16}>
                                                         <div className={'pagination'}>
-                                                            <Pagination simple defaultCurrent={2} total={50} />
+                                                            <Pagination simple defaultCurrent={2} total={50}/>
                                                         </div>
                                                     </Col>
                                                 </Row>
@@ -183,17 +193,29 @@ class DeleteSchemaButton extends Component {
         }
     }
 
+    showConfirm = (delete_schema, schemaName) => {
+        confirm({
+            title: 'Do you want to delete this schema?',
+            content: 'It cannot be find back!',
+            onOk() {
+                delete_schema({variables: {schemaName}});
+            },
+            onCancel() {
+            },
+        });
+    };
+
     render() {
         let userID = this.props.userID;
         return (
             <Mutation
-                mutation={DELETE_SCHEMA}
+                mutation={gql(DELETE_SCHEMA)}
                 update={(cache) => {
-                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
+                    let data = cache.readQuery({query: gql(SHOW_SCHEMA), variables: {user_id: userID}});
 
                     data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
                     cache.writeQuery({
-                        query: SHOW_SCHEMA,
+                        query: gql(SHOW_SCHEMA),
                         variables: {user_id: userID},
                         data
                     });
@@ -205,9 +227,14 @@ class DeleteSchemaButton extends Component {
                     if (loading)
                         return <Spin style={{marginLeft: 3}}/>;
                     return (
-                        <Button onClick={(e) => {
-                            delete_schema({variables: {schemaName: this.props.schemaName}});
-                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+                        <Button
+                            type="danger"
+                            onClick={() => {
+                                this.showConfirm(delete_schema, this.props.schemaName);
+                            }}
+                        >
+                            delete
+                        </Button>
                     )
                 }}
             </Mutation>