|
|
@@ -1,171 +1,57 @@
|
|
|
import React, {Component} from 'react';
|
|
|
-import GenerateJs from "../common/generateJs/GenerateJs";
|
|
|
-import {Layout, Menu, Input, Button, Spin} from 'antd';
|
|
|
+import {Layout, Menu} from 'antd';
|
|
|
|
|
|
+import GenerateJs from "../common/generateJs/GenerateJs";
|
|
|
import Deploy from '../common/deploy/Deploy';
|
|
|
+import Config from '../common/config/Config';
|
|
|
import Schema from '../common/schema/Schema';
|
|
|
import Graphql from "../common/graphql/Graphql";
|
|
|
import CaseNotification from "../common/caseNotification/CaseNotification";
|
|
|
import CaseMetabase from "../common/caseMetabase/CaseMetabase";
|
|
|
-import {ADD_USER, GET_USER} from "../gql";
|
|
|
-import {Query, Mutation} from "react-apollo";
|
|
|
-import fetch from "isomorphic-fetch";
|
|
|
+import {GET_USER} from "../gql";
|
|
|
+import axios from 'axios';
|
|
|
+import {request} from 'graphql-request'
|
|
|
+
|
|
|
+axios.defaults.withCredentials = true;
|
|
|
|
|
|
const {Content} = Layout;
|
|
|
-const idGen = (kind) => {
|
|
|
- return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
|
|
|
-};
|
|
|
+
|
|
|
|
|
|
class TrialCase extends Component {
|
|
|
constructor() {
|
|
|
super();
|
|
|
+
|
|
|
this.state = {
|
|
|
menuLevel2: "schema",
|
|
|
- shouldShow: false,
|
|
|
- userID: '',
|
|
|
- hasLogin: false,
|
|
|
- hasRegister: false,
|
|
|
- user: {
|
|
|
- nickname: '',
|
|
|
- avatar: ''
|
|
|
- },
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- url: 'http://localhost:8999/resetpassword'
|
|
|
+ userID: 'ioobot',
|
|
|
+ getID_url: 'http://localhost:8999/getuserid'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ let _this = this;
|
|
|
+ axios.get(this.state.getID_url)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data !== '') {
|
|
|
+ _this.setState({
|
|
|
+ userID: res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function (err) {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
switchMenu = (menuName, e) => {
|
|
|
- console.log('menuName', menuName, 'e', e);
|
|
|
+ // console.log('menuName', menuName, 'e', e);
|
|
|
this.setState({
|
|
|
[menuName]: e.key,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
|
|
|
- login = () => {
|
|
|
- let id = this.state.userID;
|
|
|
- return (
|
|
|
- <Query query={GET_USER} variables={{id}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return <Spin style={{marginLeft: 3}}/>
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!';
|
|
|
- }
|
|
|
-
|
|
|
- if (data.user_by_id === null) {
|
|
|
-
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <span style={{marginRight: '10px'}}>no such person</span>
|
|
|
- <Button onClick={() => {
|
|
|
- this.setState({hasLogin: false})
|
|
|
- }}>relogin</Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- else {
|
|
|
- // 不可使用 this.setState, 会报错。
|
|
|
- // Warning: Cannot update during an existing state transition (such as within `render`).
|
|
|
- // Render methods should be a pure function of props and state.
|
|
|
- // this.state.user = {
|
|
|
- // avatar: data.user_by_id.avatar,
|
|
|
- // nickname: data.user_by_id.nickname
|
|
|
- // };
|
|
|
-
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
|
|
|
- <Button onClick={() => {
|
|
|
- this.setState({hasLogin: false})
|
|
|
- }}>exit</Button>
|
|
|
- <Button onClick={() => {
|
|
|
- this.setState({shouldShow: true})
|
|
|
- }}>go to use</Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- )
|
|
|
- };
|
|
|
-
|
|
|
- register = () => {
|
|
|
- return (
|
|
|
- <Mutation mutation={ADD_USER}>
|
|
|
- {(create_user, {loading, error}) => {
|
|
|
- if (error)
|
|
|
- return 'error';
|
|
|
- if (loading)
|
|
|
- return <Spin style={{marginLeft: 3}}/>;
|
|
|
- return (
|
|
|
- <div style={{marginTop: 20}}>
|
|
|
- <span style={{marginRight: 20}}><b>register:</b></span>
|
|
|
- <div style={{marginTop: 10}}>
|
|
|
- <span>username: </span>
|
|
|
- <Input
|
|
|
- placeholder=""
|
|
|
- onChange={(e) => {
|
|
|
- // antd 获取不到 target，百度来的下面这句代码
|
|
|
- e.persist();
|
|
|
- this.setState({username: e.target.value});
|
|
|
- }}
|
|
|
- style={{width: 200}}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style={{marginTop: 10}}>
|
|
|
- <span>password: </span>
|
|
|
- <Input
|
|
|
- placeholder=""
|
|
|
- onChange={(e) => {
|
|
|
- // antd 获取不到 target，百度来的下面这句代码
|
|
|
- e.persist();
|
|
|
- this.setState({password: e.target.value});
|
|
|
- }}
|
|
|
- style={{width: 200}}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <Button type='primary' onClick={() => {
|
|
|
- let id = idGen('userID');
|
|
|
- create_user({
|
|
|
- variables: {
|
|
|
- id,
|
|
|
- email: '',
|
|
|
- updatedAt: '',
|
|
|
- password: '',
|
|
|
- telephone: '',
|
|
|
- nickname: '',
|
|
|
- username: this.state.username,
|
|
|
- createdAt: new Date().getTime(),
|
|
|
- openid: '',
|
|
|
- avatar: ''
|
|
|
- }
|
|
|
- });
|
|
|
- fetch(this.state.url,{
|
|
|
- method: 'POST',
|
|
|
- mode: 'cors',
|
|
|
- body: {
|
|
|
- 'user-id': id,
|
|
|
- 'password': this.state.password,
|
|
|
- 'token': 'WXgraphql4Io',
|
|
|
- }
|
|
|
- }).then(res => res.json())
|
|
|
- .catch(error => console.error('Error:', error))
|
|
|
- .then(response => console.log('Success:', response));
|
|
|
- }}>ok</Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
-
|
|
|
- )
|
|
|
- };
|
|
|
-
|
|
|
render() {
|
|
|
return (
|
|
|
<div>
|
|
|
@@ -177,6 +63,7 @@ class TrialCase extends Component {
|
|
|
selectedKeys={[this.state.menuLevel2]}
|
|
|
>
|
|
|
<Menu.Item key="schema">schema</Menu.Item>
|
|
|
+ <Menu.Item key="config">config</Menu.Item>
|
|
|
<Menu.Item key="deploy">deploy</Menu.Item>
|
|
|
<Menu.Item key="graphql">graphql</Menu.Item>
|
|
|
<Menu.Item key="graphiql">graphql IDE</Menu.Item>
|
|
|
@@ -188,59 +75,27 @@ class TrialCase extends Component {
|
|
|
<Layout style={{padding: '24px', zIndex: '0'}}>
|
|
|
<Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
|
|
|
{
|
|
|
- this.state.shouldShow === false ?
|
|
|
- <div>
|
|
|
- <div className='login'>
|
|
|
- {
|
|
|
- this.state.hasLogin ?
|
|
|
- this.login()
|
|
|
- :
|
|
|
- <div>
|
|
|
- <span style={{marginRight: 20}}><b>login:</b></span>
|
|
|
- <Input
|
|
|
- placeholder="id, eg: 'xy_1'"
|
|
|
- onChange={(e) => {
|
|
|
- // antd 获取不到 target，百度来的下面这句代码
|
|
|
- e.persist();
|
|
|
- this.setState({userID: e.target.value});
|
|
|
- }}
|
|
|
- onPressEnter={() => {
|
|
|
- this.setState({hasLogin: true})
|
|
|
- }}
|
|
|
- style={{width: 200}}
|
|
|
- />
|
|
|
- </div>
|
|
|
- }
|
|
|
- </div>
|
|
|
- <div className='register'>
|
|
|
- {
|
|
|
- this.register()
|
|
|
- }
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- :
|
|
|
-
|
|
|
- (() => {
|
|
|
- switch (this.state.menuLevel2) {
|
|
|
- case 'schema':
|
|
|
- return <Schema userID={this.state.userID}/>;
|
|
|
- case 'deploy':
|
|
|
- return <Deploy userID={this.state.userID}/>;
|
|
|
- case 'graphql':
|
|
|
- return <GenerateJs/>;
|
|
|
- case 'graphiql':
|
|
|
- return <Graphql/>;
|
|
|
- case 'metabase':
|
|
|
- return <CaseMetabase/>;
|
|
|
- case 'notification':
|
|
|
- return <CaseNotification/>;
|
|
|
- default:
|
|
|
- return <Graphql/>
|
|
|
- }
|
|
|
-
|
|
|
- })()
|
|
|
+ (() => {
|
|
|
+ switch (this.state.menuLevel2) {
|
|
|
+ case 'schema':
|
|
|
+ return <Schema userID={this.state.userID}/>;
|
|
|
+ case 'config':
|
|
|
+ return <Config userID={this.state.userID}/>;
|
|
|
+ case 'deploy':
|
|
|
+ return <Deploy userID={this.state.userID}/>;
|
|
|
+ case 'graphql':
|
|
|
+ return <GenerateJs/>;
|
|
|
+ case 'graphiql':
|
|
|
+ return <Graphql/>;
|
|
|
+ case 'metabase':
|
|
|
+ return <CaseMetabase/>;
|
|
|
+ case 'notification':
|
|
|
+ return <CaseNotification/>;
|
|
|
+ default:
|
|
|
+ return <Graphql/>
|
|
|
+ }
|
|
|
+
|
|
|
+ })()
|
|
|
}
|
|
|
|
|
|
</Content>
|
xy