Skip to content

Commit b11e8aa

Browse files
alilezaalileza
committed
fix bugs on params
1 parent 13a11d1 commit b11e8aa

File tree

5 files changed

+96
-848
lines changed

5 files changed

+96
-848
lines changed

‎ui/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_SERVER_URL=https://run.mocky.io/v3/7cb83203-7aa7-4cbd-bd37-331b483b649e

‎ui/src/App.tsx‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,60 @@
11
import React, {useState,useEffect} from 'react';
22
import axios from 'axios';
3+
import { Spin, Button } from 'antd';
34
import Config from './containers/Config';
5+
import { IConfig, IDictionary } from './interfaces';
6+
47
import 'antd/dist/antd.css';
5-
import dictionary from './dictionary';
6-
import {IConfig} from './interfaces';
8+
9+
interface IGlobal {
10+
loading: boolean;
11+
config: IConfig;
12+
dictionary: IDictionary;
13+
}
714

815
function App() {
9-
const [config, setConfig] = useState<IConfig>({features_path:[],resources:[]});
16+
const [global, setGlobal] = useState<IGlobal>({
17+
loading: true,
18+
config: { features_path: [], resources: []},
19+
dictionary: { handlers:[] }
20+
} as IGlobal);
1021
const initialData = (window as any).__INITIAL_DATA__;
1122

1223
useEffect(() => {
13-
axios.get(initialData.serverURL, { headers: {'client': 'true'}})
14-
.then(function (response) {
15-
return response.data.config as IConfig;
16-
})
17-
.then(function (config: IConfig) {
18-
setConfig(config);
19-
})
20-
.catch(function (error) {
21-
alert('failed to fetch config file: ' + error)
24+
const initConfig = async () => {
25+
try {
26+
const result = await axios.get(initialData.serverURL, { headers: {'client': 'true', 'Access-Control-Allow-Headers': '*'} });
27+
setGlobal({
28+
loading: false,
29+
config: result.data.config,
30+
dictionary: result.data.dictionary
31+
});
32+
} catch (e) {
33+
alert(e);
34+
}
35+
};
36+
initConfig();
37+
}, []);
38+
39+
const setConfig = (config: IConfig) => {
40+
setGlobal({
41+
loading: global.loading,
42+
config: config,
43+
dictionary: global.dictionary
2244
})
23-
}, [config]);
45+
}
46+
const handleSave = () => {
47+
48+
}
2449

2550
return (
2651
<div className="App">
27-
<Config dictionary={dictionary} config={config} />
52+
{ global.loading ? <Spin /> : (
53+
<div>
54+
<Config dictionary={global.dictionary} config={global.config} setConfig={setConfig} />
55+
<Button onClick={handleSave}>Save</Button>
56+
</div>
57+
) }
2858
</div>
2959
);
3060
}

‎ui/src/containers/Config.tsx‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { Input, List, Button, Form } from 'antd';
33
import { PlusOutlined, CloseCircleTwoTone } from '@ant-design/icons';
44
import ConfigResourceContainer from './ConfigResource'
@@ -7,83 +7,76 @@ import { IDictionary, IResource, IConfig } from '../interfaces'
77
interface IProps {
88
dictionary: IDictionary;
99
config: IConfig;
10+
setConfig: any;
1011
}
1112

12-
function ConfigContainer({ dictionary, config }:IProps) {
13-
const [configState, setConfig] = useState<IConfig>(config);
14-
13+
function ConfigContainer({ dictionary, config, setConfig }:IProps) {
1514
const handleFeaturePathsChange = (index) => {
1615
return (e) => {
17-
let featurePaths = configState.features_path;
16+
let featurePaths = config.features_path;
1817
featurePaths[index] = e.target.value;
1918

2019
setConfig({
21-
features_path: configState.features_path.map((val, i) => {
20+
features_path: config.features_path.map((val, i) => {
2221
if (i === index) return e.target.value;
2322
return val;
2423
}),
25-
resources: configState.resources
24+
resources: config.resources
2625
})
2726
}
2827
}
2928
const handleFeaturePathsDelete = (index) => {
3029
return () => {
3130
setConfig({
32-
features_path: configState.features_path.filter((item, i) => index !== i),
33-
resources: configState.resources
31+
features_path: config.features_path.filter((item, i) => index !== i),
32+
resources: config.resources
3433
})
3534
}
3635
}
3736
const handleFeaturePathsAdd = () => {
3837
setConfig({
39-
features_path: [...configState.features_path, `somewhere/features-${configState.features_path.length}`],
40-
resources: configState.resources
38+
features_path: [...config.features_path, `somewhere/features-${config.features_path.length}`],
39+
resources: config.resources
4140
})
4241
}
4342

4443
const handleResourceItemChange = (selectedName: string, newItem: IResource | null) => {
4544
if (newItem === null) return handleResourceItemRemove(selectedName);
46-
const newResourceItem = configState.resources.map((item: IResource) => {
45+
const newResourceItem = config.resources.map((item: IResource) => {
4746
if (item.name === selectedName) {
4847
return newItem;
4948
}
5049
return item;
5150
});
5251

5352
setConfig({
54-
features_path: configState.features_path,
53+
features_path: config.features_path,
5554
resources: newResourceItem
5655
});
5756
}
5857

5958
const handleResourceItemRemove = (selectedName: string) => {
60-
const newResourceItems = configState.resources.filter((item: IResource) => {
59+
const newResourceItems = config.resources.filter((item: IResource) => {
6160
return (item.name !== selectedName)
6261
});
6362

6463
setConfig({
65-
features_path: configState.features_path,
64+
features_path: config.features_path,
6665
resources: newResourceItems
6766
});
6867
}
6968

7069
const handleAddResourceItem = () => {
7170
const newResourceItem = {
72-
name: `new-${configState.resources.length}`,
73-
type: "wiremock",
71+
name: `new-${config.resources.length}`,
72+
type: 'wiremock',
7473
parameters: {}
7574
};
76-
7775
setConfig({
78-
features_path: configState.features_path,
79-
resources: [...configState.resources, newResourceItem]
76+
features_path: config.features_path,
77+
resources: [...config.resources, newResourceItem]
8078
});
8179
}
82-
83-
84-
const handleSave = () => {
85-
86-
}
8780

8881
return (
8982
<div className="App">
@@ -92,10 +85,11 @@ function ConfigContainer({ dictionary, config }:IProps) {
9285
<strong>Features Path</strong>
9386
<List
9487
itemLayout="horizontal"
95-
dataSource={configState.features_path}
88+
dataSource={config.features_path}
9689
renderItem={(item, index) => (
9790
<List.Item>
9891
<Input
92+
key={index}
9993
style={{ width: '300px' }}
10094
onChange={handleFeaturePathsChange(index)}
10195
placeholder="Features path"
@@ -114,10 +108,13 @@ function ConfigContainer({ dictionary, config }:IProps) {
114108
</Button>
115109
</div>
116110
<table style={{ width: '100%' }}>
117-
<tr>
118-
<th>Resources</th>
119-
</tr>
120-
{configState.resources.map((item, index) => {
111+
<thead>
112+
<tr>
113+
<th>Resources</th>
114+
</tr>
115+
</thead>
116+
<tbody>
117+
{config.resources.map((item, index) => {
121118
return (
122119
<ConfigResourceContainer
123120
key={index}
@@ -127,27 +124,25 @@ function ConfigContainer({ dictionary, config }:IProps) {
127124
/>
128125
);
129126
})}
130-
<tr>
131-
<td colSpan={3}>
132-
<Form.Item>
133-
<Button
134-
style={{ height: '60px' }}
135-
type="dashed"
136-
onClick={handleAddResourceItem}
137-
block
138-
>
139-
<PlusOutlined /> Add new resource
140-
</Button>
141-
</Form.Item>
142-
</td>
143-
</tr>
127+
</tbody>
128+
<tfoot>
129+
<tr>
130+
<td colSpan={3}>
131+
<Form.Item>
132+
<Button
133+
style={{ height: '60px' }}
134+
type="dashed"
135+
onClick={handleAddResourceItem}
136+
block
137+
>
138+
<PlusOutlined /> Add new resource
139+
</Button>
140+
</Form.Item>
141+
</td>
142+
</tr>
143+
</tfoot>
144144
</table>
145-
146-
<Button onClick={handleSave} type="primary">
147-
Save
148-
</Button>
149-
150-
<div>{JSON.stringify(configState)}</div>
145+
<div>{JSON.stringify(config)}</div>
151146
</div>
152147
);
153148
}

‎ui/src/containers/ConfigResource.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface IProps {
1212
handleResourceItemChange: any;
1313
}
1414

15-
function ConfigResourceContainer({ dictionary, item, handleResourceItemChange, }:IProps) {
15+
function ConfigResourceContainer({ dictionary, item, handleResourceItemChange }:IProps) {
1616
let handleNameChange = (e) => {
1717
let copy = Object.assign({}, item);
1818
copy.name = e.target.value;
@@ -72,18 +72,20 @@ function ConfigResourceContainer({ dictionary, item, handleResourceItemChange, }
7272
<td valign="top" style={{ padding: '10px'}}>
7373
{getResourceParams(dictionary, item.type).map((param, index) => {
7474
return (
75-
<Form.Item style={{ width: '100%' }}>
75+
<Form.Item key={index} style={{ width: '100%' }}>
7676
<Input
7777
name={param.name}
7878
onChange={handleParameterChange}
79-
placeholder={param.name} />
79+
placeholder={param.name}
80+
value={(item.parameters && item.parameters[param.name]) ? item.parameters[param.name] : ''}
81+
/>
8082
<small>{param.description}</small>
8183
</Form.Item>
8284
);
8385
})}
8486
</td>
8587
<td valign="top" style={{ padding: '10px'}}>
86-
<a onClick={handleRemove}>Remove</a>
88+
<a onClick={handleRemove} href="/#">Remove</a>
8789
</td>
8890
</tr>
8991
);

0 commit comments

Comments
 (0)