From 62130b37a147f9a5a115d2fce1797b9453d58809 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Tue, 1 Dec 2020 10:47:55 +0800 Subject: [PATCH] refactor: code optimize --- packages/core/package.json | 1 + packages/core/src/api/index.ts | 68 ++++++++++++++----- packages/core/src/mods/flowChart/index.tsx | 2 +- .../mods/flowChart/registerServerStorage.ts | 24 +++---- .../src/mods/toolBar/widgets/modifyStatus.tsx | 23 +++---- packages/core/src/utils/index.ts | 12 ++-- 6 files changed, 81 insertions(+), 49 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index b3bc3ad..f128304 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -40,6 +40,7 @@ "@antv/x6": "^0.13.0", "ace-builds": "^1.4.12", "antd": "^4.5.3", + "axios": "^0.21.0", "lodash.merge": "^4.6.2", "query-string": "^6.13.7", "react-ace": "^9.1.3", diff --git a/packages/core/src/api/index.ts b/packages/core/src/api/index.ts index 710499c..1b87277 100644 --- a/packages/core/src/api/index.ts +++ b/packages/core/src/api/index.ts @@ -1,9 +1,16 @@ +import axios from 'axios'; +import { message} from 'antd'; + export interface ILocalConfig { ip: string; port: string; } -export type ActionType = 'create' | 'update' | 'remove'; +export enum ActionType { + create = 'create', + update = 'update', + remove = 'remove' +} export interface IModifyGraphAction { type: string; @@ -11,6 +18,40 @@ export interface IModifyGraphAction { data: any; } +interface RequestConfig { + url: string; + method?: 'get' | 'post'; + params?: {[key: string]: any}; + headers?: {[key: string]: string}; +} + +const request = (function() { + const instance = axios.create(); + instance.interceptors.response.use((response: any) => { + const {data} = response || {}; + const {success, msg} = data || {}; + if(success) { + return data; + } else { + message.error(msg); + return Promise.reject(data); + } + }); + return (config: RequestConfig) => { + const {url, method = 'post', params, headers = {}} = config; + return instance.request({ + url, + method, + headers: { + 'Content-Type': 'application/json;charset=utf-8', + ...headers + }, + data: params, + timeout: 3000 + }); + }; +})(); + export const localConfig: ILocalConfig = { ip: '127.0.0.1', port: '3500' @@ -37,29 +78,20 @@ export const localSave = (data: any) => { } export const queryGraph = (projectId: string) => { - return fetch('/api/queryGraph', { - method: 'POST', - headers: {'Content-Type': 'application/json;charset=utf-8'}, - body: JSON.stringify({ + return request({ + url: '/api/queryGraph', + params: { projectId - }) - }).then(res => res.json()).then(res => { - const {success} = res; - if(success) { - return res; - } else { - return Promise.reject(res); } - }) + }); } export const modifyGraph = (projectId: string, actions: IModifyGraphAction[]) => { - return fetch('/api/modifyGraph', { - method: 'POST', - headers: {'Content-Type': 'application/json;charset=utf-8'}, - body: JSON.stringify({ + return request({ + url: '/api/modifyGraph', + params: { projectId, actions - }) + } }); } diff --git a/packages/core/src/mods/flowChart/index.tsx b/packages/core/src/mods/flowChart/index.tsx index b6a1ae2..d7ed679 100644 --- a/packages/core/src/mods/flowChart/index.tsx +++ b/packages/core/src/mods/flowChart/index.tsx @@ -32,7 +32,7 @@ const FlowChart: React.FC = props => { const { data: dsl } = res; graph.fromJSON(dsl); }).catch(err => { - message.error(err.msg); + console.log('query graph data failed, the error is:', err); }); }; diff --git a/packages/core/src/mods/flowChart/registerServerStorage.ts b/packages/core/src/mods/flowChart/registerServerStorage.ts index 63b080d..4caeb78 100644 --- a/packages/core/src/mods/flowChart/registerServerStorage.ts +++ b/packages/core/src/mods/flowChart/registerServerStorage.ts @@ -50,10 +50,10 @@ const save = (flowChart: Graph, type: string, actionType: ActionType, data: any) }; type ActionEventMap = {[key: string]: string[]}; -const NODE_ACTION_EVENT_MAP: ActionEventMap = { - create: ['node:added'], - remove: ['node:removed'], - update: [ +const nodeActionEventMap: ActionEventMap = { + [ActionType.create]: ['node:added'], + [ActionType.remove]: ['node:removed'], + [ActionType.update]: [ 'node:moved', 'node:resized', 'node:rotated', @@ -64,18 +64,18 @@ const NODE_ACTION_EVENT_MAP: ActionEventMap = { ] }; -const EDGE_ACTION_EVENT_MAP: ActionEventMap = { - create: ['edge:connected'], - remove: ['edge:removed'], - update: [ +const edgeActionEventMap: ActionEventMap = { + [ActionType.create]: ['edge:connected'], + [ActionType.remove]: ['edge:removed'], + [ActionType.update]: [ 'edge:moved', ] }; export const registerServerStorage = (flowChart: Graph) => { - Object.keys(NODE_ACTION_EVENT_MAP).forEach((actionType) => { - const events = NODE_ACTION_EVENT_MAP[actionType]; + Object.keys(nodeActionEventMap).forEach((actionType) => { + const events = nodeActionEventMap[actionType]; events.forEach(event => { flowChart.on(event, (args: any) => { console.log('node event:', event, 'args:', args); @@ -84,8 +84,8 @@ export const registerServerStorage = (flowChart: Graph) => { }); }); - Object.keys(EDGE_ACTION_EVENT_MAP).forEach((actionType) => { - const events = EDGE_ACTION_EVENT_MAP[actionType]; + Object.keys(edgeActionEventMap).forEach((actionType) => { + const events = edgeActionEventMap[actionType]; events.forEach(event => { flowChart.on(event, (args: any) => { console.log('edge event:', event, 'args:', args); diff --git a/packages/core/src/mods/toolBar/widgets/modifyStatus.tsx b/packages/core/src/mods/toolBar/widgets/modifyStatus.tsx index f64e08e..8303f84 100644 --- a/packages/core/src/mods/toolBar/widgets/modifyStatus.tsx +++ b/packages/core/src/mods/toolBar/widgets/modifyStatus.tsx @@ -15,8 +15,11 @@ interface IProps { flowChart: Graph } -const STATUS_TEXT_MAP = { - [Status.pending]: '', +const statusMap = { + [Status.pending]: { + color: '', + text: '' + }, [Status.syncing]: { color: '#999', text: '正在保存...' @@ -54,16 +57,12 @@ const ModifyStatus: React.FC = (props) => { }; }, []); - if(status === Status.pending) { - return null; - } else { - const {color, text} = STATUS_TEXT_MAP[status]; - return ( -
- {text} -
- ); - } + const {color, text} = statusMap[status]; + return status === Status.pending ? null : ( +
+ {text} +
+ ); }; export default ModifyStatus; diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts index 3ef74f3..929311f 100644 --- a/packages/core/src/utils/index.ts +++ b/packages/core/src/utils/index.ts @@ -14,20 +14,20 @@ export const safeGet = (obj: any, keyChain: string, defaultVal?: any): any => { return defaultVal; } - let retVal = obj; + let val = obj; const keys = keyChain.split('.'); for(const key of keys) { - if(retVal[key] === undefined) { + if(val[key] === undefined) { return defaultVal; } else { - retVal = retVal[key]; + val = val[key]; } } - return retVal; + return val; }; -const PARSE_CONFIG = { +const parseConfig = { skipNull: true, skipEmptyString: true, parseNumbers: false, @@ -35,5 +35,5 @@ const PARSE_CONFIG = { }; export const parseQuery = (): {[key: string]: any} => { - return parse(location.search, PARSE_CONFIG); + return parse(location.search, parseConfig); };