Skip to content

Commit 68b47fe

Browse files
nqnguyen1nqnguyen1
committed
working trpc completed
1 parent 85ed75f commit 68b47fe

File tree

6 files changed

+233
-47
lines changed

6 files changed

+233
-47
lines changed

‎src/client/components/main/TRPC-composer/TRPCComposer.tsx‎

Lines changed: 177 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useReducer } from 'react';
22
import { v4 as uuid } from 'uuid';
33
// Import controllers
44
import SendRequestButton from '../sharedComponents/requestButtons/SendRequestButton';
@@ -7,8 +7,10 @@ import TRPCMethodAndEndpointEntryForm from './TRPCMethodAndEndpointEntryForm';
77
// Import Redux hooks
88
import { useSelector, useDispatch } from 'react-redux';
99
// Import Actions from RTK slice
10-
import { responseDataSaved } from '../../../toolkit-refactor/slices/reqResSlice';
11-
import { useState } from 'react';
10+
import {
11+
reqResItemAdded,
12+
responseDataSaved,
13+
} from '../../../toolkit-refactor/slices/reqResSlice';
1214

1315
// Import MUI components
1416
import { Box } from '@mui/material';
@@ -31,45 +33,89 @@ import Store from '../../../toolkit-refactor/store';
3133
*/
3234

3335
const PROCEDURE_DEFAULT = {
34-
procedureMethod: 'QUERRY',
36+
method: 'QUERY',
3537
endpoint: '',
3638
variable: '',
3739
};
40+
41+
// {type:"",payload:{index,value}}
42+
function reducer(procedures, action) {
43+
if (action.type === 'METHOD') {
44+
const proceduresCopy = [...procedures];
45+
const procedure = proceduresCopy[action.payload.index];
46+
const newState = {
47+
...procedure,
48+
method: action.payload.value,
49+
};
50+
proceduresCopy[action.payload.index] = newState;
51+
return proceduresCopy;
52+
} else if (action.type === 'ENDPOINT') {
53+
const proceduresCopy = [...procedures];
54+
const procedure = proceduresCopy[action.payload.index];
55+
const newState = {
56+
...procedure,
57+
endpoint: action.payload.value,
58+
};
59+
proceduresCopy[action.payload.index] = newState;
60+
return proceduresCopy;
61+
} else if (action.type === 'VARIABLE') {
62+
const proceduresCopy = [...procedures];
63+
const procedure = proceduresCopy[action.payload.index];
64+
const newState = {
65+
...procedure,
66+
variable: action.payload.value,
67+
};
68+
proceduresCopy[action.payload.index] = newState;
69+
return proceduresCopy;
70+
} else if (action.type === 'ADD') {
71+
const proceduresCopy = [...procedures];
72+
proceduresCopy.push(PROCEDURE_DEFAULT);
73+
return proceduresCopy;
74+
} else if (action.type === 'DELETE') {
75+
const proceduresCopy = [...procedures];
76+
proceduresCopy.splice(action.payload.index, 1);
77+
return proceduresCopy;
78+
}
79+
return procedures;
80+
}
81+
3882
export default function TRPCComposer(props) {
3983
const dispatch = useDispatch();
4084
/** newRequestBody slice from redux store, contains specific request info */
4185
const requestBody = useSelector(
4286
(state: RootState) => state.newRequest.newRequestBody
4387
);
4488

45-
const [procedures, setProcedures] = useState([{ PROCEDURE_DEFAULT }]);
89+
const [procedures, proceduresDipatch] = useReducer(reducer, [
90+
PROCEDURE_DEFAULT,
91+
]);
92+
// const [procedures, setProcedures] = useState([{ PROCEDURE_DEFAULT }]);
4693

4794
const {
95+
currentTab,
4896
newRequestHeadersSet,
4997
newRequestStreamsSet,
5098
newRequestFields,
5199
newRequestHeaders,
52100
newRequestBody,
53101
newRequestStreams,
102+
reqResItemAdded,
54103
} = props;
55104

56-
console.log(Store.getState());
57105
/** newRequestFields slice from redux store, contains general request info*/
58106
const requestFields = useSelector(
59107
(state: RootState) => state.newRequestFields
60108
);
61109

62110
/** reqRes slice from redux store, contains request and response data */
63111
const newRequest = useSelector((state: RootState) => state.newRequest);
64-
// const headers = requestStuff.newRequestHeaders.headersArr.filter(
112+
// const headers = newRequest.newRequestHeaders.headersArr.filter(
65113
// (x) => x.active
66114
// );
67115

68116
let subscription: any;
69117
const addProcedures = () => {
70-
setProcedures((prev) => {
71-
return [...prev, { ...PROCEDURE_DEFAULT }];
72-
});
118+
proceduresDipatch({ type: 'ADD' });
73119
};
74120
// const sendRequest = () => {
75121
// let isWebsocket = false;
@@ -173,12 +219,130 @@ export default function TRPCComposer(props) {
173219
// };
174220

175221
// //dispatch response to it's slice, to update the state
176-
// dispatch(responseDataSaved(newCurrentResponse));
222+
// dispatch(responseDataSarved(newCurrentResponse));
177223
// });
178224
// }
179225
// };
180226

181-
const sendRequest = () => {};
227+
function parseString(str) {
228+
if (str === 'true') {
229+
return true;
230+
}
231+
232+
if (str === 'false') {
233+
return false;
234+
}
235+
236+
if (!isNaN(str)) {
237+
return parseFloat(str);
238+
}
239+
240+
try {
241+
const parsedJson = JSON.parse(str);
242+
243+
if (typeof parsedJson === 'object' && parsedJson !== null) {
244+
return parsedJson;
245+
}
246+
} catch (error) {
247+
return str;
248+
}
249+
}
250+
251+
const sendRequest = async () => {
252+
const links = [];
253+
const batchConfigureObject = {};
254+
batchConfigureObject.url = requestFields.url;
255+
const headers = newRequest.newRequestHeaders.headersArr
256+
.filter((x) => x.active)
257+
.reduce((acc, curr) => {
258+
acc[curr.key] = curr.value;
259+
return acc;
260+
}, {});
261+
if (headers) {
262+
batchConfigureObject.headers = headers;
263+
}
264+
links.push(httpBatchLink(batchConfigureObject));
265+
// const clientURL: string = requestFields.url; //grabbing url
266+
267+
const client = createTRPCProxyClient({ links });
268+
Promise.all(
269+
procedures.map((procedure) => {
270+
let endpoint = procedure.endpoint;
271+
const method = procedure.method.toLowerCase();
272+
if (procedure.variable) {
273+
console.log('SHOULD NOT HI');
274+
let arg = parseString(procedure.variable.replace(/\s/g, ''));
275+
const tempArg = procedure.variable.replace(/\s/g, '');
276+
const e = `client.${endpoint}.${method}(${tempArg})`;
277+
return eval(e);
278+
} else {
279+
return eval(`client.${endpoint}.${method}()`);
280+
}
281+
})
282+
).then((res) => {
283+
// const fakeRes = {
284+
// id: uuid(),
285+
// createdAt: new Date(),
286+
// protocol: 'http://',
287+
// url: 'google.com',
288+
// timeSent: null,
289+
// timeReceived: null,
290+
// connection: 'uninitialized',
291+
// connectionType: null,
292+
// checkSelected: false,
293+
// request: {
294+
// method: 'Get',
295+
// },
296+
// response: {
297+
// headers: {},
298+
// events: [],
299+
// },
300+
// checked: false,
301+
// minimized: false,
302+
// tab: currentTab,
303+
// };
304+
const newCurrentResponse: any = {
305+
checkSelected: false,
306+
checked: false,
307+
connection: 'closed',
308+
connectionType: 'plain',
309+
createdAt: new Date(),
310+
gRPC: false,
311+
graphQL: false,
312+
host: requestFields.url,
313+
id: uuid(),
314+
minimized: false,
315+
path: '/',
316+
protoPath: undefined,
317+
protocol: 'http://',
318+
request: { ...newRequest },
319+
tab: undefined,
320+
timeReceived: null,
321+
timeSent: null,
322+
url: requestFields.url,
323+
webrtc: false,
324+
response: {
325+
events: [res],
326+
},
327+
};
328+
329+
//dispatch response to it's slice, to update the state
330+
// reqResItemAdded(fakeRes);
331+
dispatch(responseDataSaved(newCurrentResponse));
332+
});
333+
334+
// const arg = JSON.parse(currProc.variable.replace(/\s/g, ''));
335+
336+
// const res = await client[endpoint][method](arg);
337+
// console.log(res);
338+
// console.log((procedures.variable = procedures.variable.replace(/\s/g, '')));
339+
340+
// const res = await client.update.mutate({
341+
// userId: '1',
342+
// name: 'nguyen',
343+
// });
344+
// console.log(res);
345+
};
182346
return (
183347
<Box
184348
className="is-flex is-flex-direction-column is-justify-content-space-between"
@@ -201,7 +365,7 @@ export default function TRPCComposer(props) {
201365

202366
<TRPCProceduresContainer
203367
procedures={procedures}
204-
addProcedures={addProcedures}
368+
proceduresDipatch={proceduresDipatch}
205369
/>
206370
<button
207371
className="button is-normal is-primary-100 add-request-button is-vertical-align-center is-justify-content-center no-border-please"

‎src/client/components/main/TRPC-composer/TRPCPrceduresEndPoint.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@ import { fieldsReplaced } from '../../../toolkit-refactor/slices/newRequestField
1212
const TRPCPrceduresEndPoint = (props) => {
1313
const [dropdownIsActive, setDropdownIsActive] = useState(false);
1414
const dropdownEl = useRef();
15-
const requestFields = useSelector(
16-
(state: RootState) => state.newRequestFields
17-
);
18-
const dispatch = useDispatch();
1915

2016
useEffect(() => {
2117
const closeDropdown = (event: MouseEvent) => {
@@ -27,13 +23,24 @@ const TRPCPrceduresEndPoint = (props) => {
2723
return () => document.removeEventListener('click', closeDropdown);
2824
}, []);
2925

30-
const populateUrl = (request: string) => {
31-
props.setProcedureTypeHandler(request);
26+
const methodHandler = (method) => {
27+
props.proceduresDipatch({
28+
type: 'METHOD',
29+
payload: { index: props.index, value: method },
30+
});
3231
};
3332
const onChangeHandler = (e) => {
34-
props.endPointChangeHandler(e.target.value);
33+
props.proceduresDipatch({
34+
type: 'ENDPOINT',
35+
payload: { index: props.index, value: e.target.value },
36+
});
37+
};
38+
const onDeleteHandler = (e) => {
39+
props.proceduresDipatch({
40+
type: 'DELETE',
41+
payload: { index: props.index },
42+
});
3543
};
36-
3744
const isDark = useSelector((store: RootState) => store.ui.isDark);
3845

3946
return (
@@ -53,7 +60,7 @@ const TRPCPrceduresEndPoint = (props) => {
5360
aria-controls="dropdown-menu"
5461
onClick={() => setDropdownIsActive(!dropdownIsActive)}
5562
>
56-
<span>{props.procedureType}</span>
63+
<span>{props.procedureData.method}</span>
5764
<span className="icon is-small">
5865
<img
5966
src={dropDownArrow}
@@ -67,33 +74,33 @@ const TRPCPrceduresEndPoint = (props) => {
6774

6875
<div className="dropdown-menu" id="dropdown-menu">
6976
<ul className="dropdown-content">
70-
{props.procedureType !== 'QUERY' && (
77+
{props.procedureData.method !== 'QUERY' && (
7178
<a
7279
onClick={(e) => {
7380
setDropdownIsActive(false);
74-
populateUrl('QUERY');
81+
methodHandler('QUERY');
7582
}}
7683
className="dropdown-item"
7784
>
7885
QUERY
7986
</a>
8087
)}
81-
{props.procedureType !== 'MUTATE' && (
88+
{props.procedureData.method !== 'MUTATE' && (
8289
<a
8390
onClick={(e) => {
8491
setDropdownIsActive(false);
85-
populateUrl('MUTATE');
92+
methodHandler('MUTATE');
8693
}}
8794
className="dropdown-item"
8895
>
8996
MUTATE
9097
</a>
9198
)}
92-
{props.procedureType !== 'SUBSCRIPTION' && (
99+
{props.procedureData.method !== 'SUBSCRIPTION' && (
93100
<a
94101
onClick={(e) => {
95102
setDropdownIsActive(false);
96-
populateUrl('SUBSCRIPTION');
103+
methodHandler('SUBSCRIPTION');
97104
}}
98105
className="dropdown-item"
99106
>
@@ -110,8 +117,13 @@ const TRPCPrceduresEndPoint = (props) => {
110117
type="text"
111118
id="url-input"
112119
placeholder="Enter endpoint"
120+
value={props.procedureData.endpoint}
113121
onChange={onChangeHandler}
114122
/>
123+
124+
<div className="is-flex is-justify-content-center is-align-items-center ml-4">
125+
<div className="delete m-auto" onClick={onDeleteHandler} />
126+
</div>
115127
</div>
116128
</div>
117129
);

‎src/client/components/main/TRPC-composer/TRPCProcedure.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,20 @@ import React, { useState } from 'react';
22
import TRPCVariableForm from './TRPCVariableForm';
33
import TRPCPrceduresEndPoint from './TRPCPrceduresEndPoint';
44

5-
export default function TRPCProcedure() {
6-
const [procedureType, setProcedureType] = useState('QUERRY');
7-
const [endpoint, setEndpoint] = useState('');
8-
const setProcedureTypeHandler = (type) => {
9-
setProcedureType(type);
10-
};
11-
const endPointChangeHandler = (userEndpoint) => {
12-
setEndpoint(endpoint);
13-
};
5+
export default function TRPCProcedure(props) {
146
return (
157
<div style={container}>
168
<TRPCPrceduresEndPoint
17-
procedureType={procedureType}
18-
setProcedureTypeHandler={setProcedureTypeHandler}
19-
endpoint={endpoint}
20-
endPointChangeHandler={endPointChangeHandler}
9+
procedureData={props.procedureData}
10+
proceduresDipatch={props.proceduresDipatch}
11+
index={props.index}
2112
></TRPCPrceduresEndPoint>
22-
<TRPCVariableForm></TRPCVariableForm>
13+
14+
<TRPCVariableForm
15+
procedureData={props.procedureData}
16+
proceduresDipatch={props.proceduresDipatch}
17+
index={props.index}
18+
></TRPCVariableForm>
2319
</div>
2420
);
2521
}

0 commit comments

Comments
 (0)