mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
removed v3api debbuger due to poor code quality
This commit is contained in:
srgooglo
parent
93d7af148b
commit
5747809cf8
@ -1,350 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {api_request} from 'core/libs/v3_model'
|
|
||||||
import {
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Select,
|
|
||||||
Form,
|
|
||||||
Input,
|
|
||||||
Button,
|
|
||||||
List,
|
|
||||||
Tag,
|
|
||||||
Checkbox,
|
|
||||||
} from 'antd';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { CloseOutlined } from '@ant-design/icons';
|
|
||||||
import endpoints_list from 'config/endpoints';
|
|
||||||
|
|
||||||
import styles from './api.less';
|
|
||||||
|
|
||||||
const { Option } = Select;
|
|
||||||
const InputGroup = Input.Group;
|
|
||||||
const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'];
|
|
||||||
|
|
||||||
const methodTagColor = {
|
|
||||||
GET: 'green',
|
|
||||||
POST: 'orange',
|
|
||||||
DELETE: 'red',
|
|
||||||
PUT: 'geekblue',
|
|
||||||
};
|
|
||||||
|
|
||||||
const requests = Object.values(endpoints_list).map(item => {
|
|
||||||
let url = item;
|
|
||||||
let method = 'GET';
|
|
||||||
const paramsArray = item.split(' ');
|
|
||||||
if (paramsArray.length === 2) {
|
|
||||||
method = paramsArray[0];
|
|
||||||
url = paramsArray[1];
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
method,
|
|
||||||
url,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
let uuid = 2;
|
|
||||||
|
|
||||||
export default class RequestPage extends React.Component {
|
|
||||||
paramsForm = React.createRef();
|
|
||||||
bodyDataForm = React.createRef();
|
|
||||||
|
|
||||||
state = {
|
|
||||||
// Default sets
|
|
||||||
method: 'GET',
|
|
||||||
url: '',
|
|
||||||
ParamsKeys: [1],
|
|
||||||
BodyKeys: [1],
|
|
||||||
result: null,
|
|
||||||
visible: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
handleRequest = () => {
|
|
||||||
const { method, url } = this.state;
|
|
||||||
let params = {};
|
|
||||||
let body = {};
|
|
||||||
|
|
||||||
this.paramsForm.current
|
|
||||||
.validateFields()
|
|
||||||
.then(values => {
|
|
||||||
if (values) {
|
|
||||||
for (let i in values) {
|
|
||||||
if (i.startsWith('check')) {
|
|
||||||
const index = i.match(/check\[(\d+)\]/)[1];
|
|
||||||
const key = values[`key[${index}]`];
|
|
||||||
params[key] = values[`value[${index}]`];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(errorInfo => {
|
|
||||||
console.log(errorInfo);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.bodyDataForm.current
|
|
||||||
.validateFields()
|
|
||||||
.then(values => {
|
|
||||||
if (values) {
|
|
||||||
for (let i in values) {
|
|
||||||
if (i.startsWith('check')) {
|
|
||||||
const index = i.match(/check\[(\d+)\]/)[1];
|
|
||||||
const key = values[`key[${index}]`];
|
|
||||||
body[key] = values[`value[${index}]`];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(errorInfo => {
|
|
||||||
console.log(errorInfo);
|
|
||||||
});
|
|
||||||
const frame = {
|
|
||||||
method,
|
|
||||||
endpoint: `${method} ${url}`,
|
|
||||||
body
|
|
||||||
}
|
|
||||||
console.log(frame)
|
|
||||||
api_request(frame, (err, res) => {
|
|
||||||
this.setState({
|
|
||||||
result: res,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
handleClickListItem = ({ method, url }) => {
|
|
||||||
this.setState({
|
|
||||||
method,
|
|
||||||
url,
|
|
||||||
keys: [uuid++],
|
|
||||||
result: null,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleInputChange = e => {
|
|
||||||
this.setState({
|
|
||||||
url: e.target.value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleSelectChange = method => {
|
|
||||||
this.setState({
|
|
||||||
method,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleAddParam = () => {
|
|
||||||
const { ParamsKeys } = this.state;
|
|
||||||
const nextKeys = ParamsKeys.concat(uuid);
|
|
||||||
uuid++;
|
|
||||||
this.setState({
|
|
||||||
ParamsKeys: nextKeys,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleAddBody = () => {
|
|
||||||
const { BodyKeys } = this.state;
|
|
||||||
const nextKeys = BodyKeys.concat(uuid);
|
|
||||||
uuid++;
|
|
||||||
this.setState({
|
|
||||||
BodyKeys: nextKeys,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleRemoveParam = key => {
|
|
||||||
const { ParamsKeys } = this.state;
|
|
||||||
this.setState({
|
|
||||||
ParamsKeys: ParamsKeys.filter(item => item !== key),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleRemoveBody = key => {
|
|
||||||
const { BodyKeys } = this.state;
|
|
||||||
this.setState({
|
|
||||||
BodyKeys: BodyKeys.filter(item => item !== key),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleVisible = () => {
|
|
||||||
this.setState({
|
|
||||||
visible: !this.state.visible,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Row>
|
|
||||||
<Col lg={8} md={24}>
|
|
||||||
<List
|
|
||||||
className={styles.requestList}
|
|
||||||
dataSource={requests}
|
|
||||||
renderItem={item => (
|
|
||||||
<List.Item
|
|
||||||
className={classnames(styles.listItem, {
|
|
||||||
[styles.lstItemActive]:
|
|
||||||
item.method === method && item.url === url,
|
|
||||||
})}
|
|
||||||
onClick={this.handleClickListItem.bind(this, item)}
|
|
||||||
>
|
|
||||||
<span style={{ width: 72 }}>
|
|
||||||
<Tag
|
|
||||||
style={{ marginRight: 8 }}
|
|
||||||
color={methodTagColor[item.method]}
|
|
||||||
>
|
|
||||||
{item.method}
|
|
||||||
</Tag>
|
|
||||||
</span>
|
|
||||||
{item.url}
|
|
||||||
</List.Item>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col lg={16} md={24}>
|
|
||||||
<Row type="flex" justify="space-between">
|
|
||||||
<InputGroup compact size="large" style={{ flex: 1 }}>
|
|
||||||
<Select
|
|
||||||
size="large"
|
|
||||||
value={method}
|
|
||||||
style={{ width: 100 }}
|
|
||||||
onChange={this.handleSelectChange}
|
|
||||||
>
|
|
||||||
{methods.map(item => (
|
|
||||||
<Option value={item} key={item}>
|
|
||||||
{item}
|
|
||||||
</Option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
<Input
|
|
||||||
value={url}
|
|
||||||
onChange={this.handleInputChange}
|
|
||||||
style={{ width: 'calc(100% - 200px)' }}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
ghost={visible}
|
|
||||||
type={visible ? 'primary' : ''}
|
|
||||||
onClick={this.handleVisible}
|
|
||||||
size="large"
|
|
||||||
>
|
|
||||||
Params
|
|
||||||
</Button>
|
|
||||||
</InputGroup>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
size="large"
|
|
||||||
type="primary"
|
|
||||||
style={{ width: 100 }}
|
|
||||||
onClick={this.handleRequest}
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Row justify="center">
|
|
||||||
<Col span={12}>
|
|
||||||
<Form ref={this.paramsForm} name="control-ref">
|
|
||||||
<div
|
|
||||||
className={classnames(styles.paramsBlock, {
|
|
||||||
[styles.hideParams]: !visible,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{ParamsKeys.map((key, index) => (
|
|
||||||
<Row
|
|
||||||
gutter={8}
|
|
||||||
type="flex"
|
|
||||||
justify="start"
|
|
||||||
align="middle"
|
|
||||||
key={key}
|
|
||||||
>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item
|
|
||||||
name={`check[${key}]`}
|
|
||||||
valuePropName="checked"
|
|
||||||
>
|
|
||||||
<Checkbox defaultChecked />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item name={`key[${key}]`}>
|
|
||||||
<Input placeholder="Key" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item name={`value[${key}]`}>
|
|
||||||
<Input placeholder="Value" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<CloseOutlined
|
|
||||||
onClick={this.handleRemoveParam.bind(this, key)}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Row style={{ marginTop: 8 }}>
|
|
||||||
<Button onClick={this.handleAddParam}>Add Param</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col span={12}>
|
|
||||||
<Form ref={this.bodyDataForm} name="control-ref">
|
|
||||||
<div
|
|
||||||
className={classnames(styles.paramsBlock, {
|
|
||||||
[styles.hideParams]: !visible,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{BodyKeys.map((key, index) => (
|
|
||||||
<Row
|
|
||||||
gutter={8}
|
|
||||||
type="flex"
|
|
||||||
justify="start"
|
|
||||||
align="middle"
|
|
||||||
key={key}
|
|
||||||
>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item
|
|
||||||
name={`check[${key}]`}
|
|
||||||
valuePropName="checked"
|
|
||||||
>
|
|
||||||
<Checkbox defaultChecked />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item name={`key[${key}]`}>
|
|
||||||
<Input placeholder="Key" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<Form.Item name={`value[${key}]`}>
|
|
||||||
<Input placeholder="Value" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col style={{ marginTop: 8 }}>
|
|
||||||
<CloseOutlined
|
|
||||||
onClick={this.handleRemoveBody.bind(this, key)}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Row style={{ marginTop: 8 }}>
|
|
||||||
<Button onClick={this.handleAddBody}>
|
|
||||||
Add form-data
|
|
||||||
</Button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<div className={styles.result}>{JSON.stringify(result)}</div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
@import '~theme/index.less';
|
|
||||||
|
|
||||||
.result {
|
|
||||||
height: 700px;
|
|
||||||
width: 100%;
|
|
||||||
background: @hover-color;
|
|
||||||
border-color: #ddd;
|
|
||||||
padding: 16px;
|
|
||||||
margin-top: 16px;
|
|
||||||
word-break: break-word;
|
|
||||||
line-height: 2;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.requestList {
|
|
||||||
padding-right: 24px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
.listItem {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 8px;
|
|
||||||
&.lstItemActive {
|
|
||||||
background-color: @hover-color;
|
|
||||||
}
|
|
||||||
.background-hover();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.paramsBlock {
|
|
||||||
overflow: visible;
|
|
||||||
opacity: 1;
|
|
||||||
height: auto;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
&.hideParams {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,7 +2,6 @@ import React from 'react'
|
|||||||
import * as Icons from 'components/Icons'
|
import * as Icons from 'components/Icons'
|
||||||
import { ListedMenu } from 'components'
|
import { ListedMenu } from 'components'
|
||||||
|
|
||||||
import ApiDebug from 'debuggers/api'
|
|
||||||
import CoreDebug from 'debuggers/core'
|
import CoreDebug from 'debuggers/core'
|
||||||
import ThemeDebug from 'debuggers/theme'
|
import ThemeDebug from 'debuggers/theme'
|
||||||
import SocketDebug from 'debuggers/socket'
|
import SocketDebug from 'debuggers/socket'
|
||||||
@ -11,7 +10,6 @@ import InternalDebug from 'debuggers/internals'
|
|||||||
import ContextMenuDebug from 'debuggers/contextmenu.js'
|
import ContextMenuDebug from 'debuggers/contextmenu.js'
|
||||||
|
|
||||||
const Debuggers = {
|
const Debuggers = {
|
||||||
api: <ApiDebug />,
|
|
||||||
core: <CoreDebug />,
|
core: <CoreDebug />,
|
||||||
theme: <ThemeDebug />,
|
theme: <ThemeDebug />,
|
||||||
socket: <SocketDebug />,
|
socket: <SocketDebug />,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user