Skip to content

Commit b822e2c

Browse files
author
esa
committed
add error handling
1 parent f0612d0 commit b822e2c

File tree

1 file changed

+53
-172
lines changed

1 file changed

+53
-172
lines changed

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

Lines changed: 53 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ export default function TRPCComposer(props) {
8989
const [procedures, proceduresDipatch] = useReducer(reducer, [
9090
PROCEDURE_DEFAULT,
9191
]);
92-
// const [procedures, setProcedures] = useState([{ PROCEDURE_DEFAULT }]);
9392

9493
const {
9594
currentTab,
@@ -109,120 +108,11 @@ export default function TRPCComposer(props) {
109108

110109
/** reqRes slice from redux store, contains request and response data */
111110
const newRequest = useSelector((state: RootState) => state.newRequest);
112-
// const headers = newRequest.newRequestHeaders.headersArr.filter(
113-
// (x) => x.active
114-
// );
115111

116112
let subscription: any;
117113
const addProcedures = () => {
118114
proceduresDipatch({ type: 'ADD' });
119115
};
120-
// const sendRequest = () => {
121-
// let isWebsocket = false;
122-
// const links = [];
123-
// const clientURL: string = requestFields.url; //grabbing url
124-
// const request = requestBody.bodyContent;
125-
// const httpRegex =
126-
// /^http:\/\/([a-zA-Z0-9-]+\.[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/; // trpc doesn't accept https requests to my knowledge otherwise https?
127-
// const wsRegex =
128-
// /^(ws|wss):\/\/(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/;
129-
130-
// //checks if URL is to WebSocket or standard HTTP
131-
// if (wsRegex.test(clientURL)) {
132-
// // setup links array with ws
133-
// isWebsocket = true;
134-
135-
// //instantiates a WebSocket
136-
// const wsClient = createWSClient({ url: clientURL });
137-
// links.push(wsLink({ client: wsClient }));
138-
139-
// //grabs the WebSocket from tRPC's wsClient
140-
// const ws = wsClient.getConnection();
141-
// const persistentData: Array<any> = [];
142-
143-
// //current WebSocket is listening for anytime an event is sent back to client
144-
// ws.onmessage = (event) => {
145-
// persistentData.push(JSON.parse(event.data));
146-
// const newCurrentResponse: any = {
147-
// checkSelected: false,
148-
// checked: false,
149-
// connection: 'closed',
150-
// connectionType: 'plain',
151-
// createdAt: new Date(),
152-
// gRPC: false,
153-
// graphQL: false,
154-
// host: clientURL,
155-
// id: uuid(),
156-
// minimized: false,
157-
// path: '/',
158-
// protoPath: undefined,
159-
// protocol: 'ws://',
160-
// request: { ...requestStuff },
161-
// tab: undefined,
162-
// timeReceived: 1676146914257,
163-
// timeSent: 1676146914244,
164-
// url: clientURL,
165-
// webrtc: false,
166-
// response: {
167-
// events: [],
168-
// },
169-
// };
170-
// newCurrentResponse.response.events.push([...persistentData]);
171-
// dispatch(responseDataSaved(newCurrentResponse));
172-
// };
173-
// } else if (httpRegex.test(clientURL)) {
174-
// // setup links array with http
175-
// links.push(httpBatchLink({ url: clientURL }));
176-
// } else {
177-
// console.log('error in url');
178-
// }
179-
180-
// const client = createTRPCProxyClient({ links: links });
181-
182-
// //if the request is to a WebSocket server + is a subscription, execute request
183-
// if (isWebsocket) {
184-
// //replacing user's client name to what app is expecting
185-
// const editedRequest = request.replace(/^[^.]*./, 'client.');
186-
// subscription = eval(editedRequest);
187-
// } else {
188-
// //if request is not from Websocket server + is query/mutation, execute request
189-
// //this handles batch queries + mutations
190-
// const reqArray = request.split('\n').map((el) => {
191-
// el = el.replace(/^[^.]*./, 'client.');
192-
// return el;
193-
// });
194-
195-
// Promise.all(reqArray.map((el) => eval(el))).then((res: any) => {
196-
// const newCurrentResponse: any = {
197-
// checkSelected: false,
198-
// checked: false,
199-
// connection: 'closed',
200-
// connectionType: 'plain',
201-
// createdAt: new Date(),
202-
// gRPC: false,
203-
// graphQL: false,
204-
// host: clientURL,
205-
// id: uuid(),
206-
// minimized: false,
207-
// path: '/',
208-
// protoPath: undefined,
209-
// protocol: 'http://',
210-
// request: { ...requestStuff },
211-
// tab: undefined,
212-
// timeReceived: null,
213-
// timeSent: null,
214-
// url: clientURL,
215-
// webrtc: false,
216-
// response: {
217-
// events: [res],
218-
// },
219-
// };
220-
221-
// //dispatch response to it's slice, to update the state
222-
// dispatch(responseDataSarved(newCurrentResponse));
223-
// });
224-
// }
225-
// };
226116

227117
function parseString(str) {
228118
if (str === 'true') {
@@ -262,45 +152,11 @@ export default function TRPCComposer(props) {
262152
batchConfigureObject.headers = headers;
263153
}
264154
links.push(httpBatchLink(batchConfigureObject));
265-
// const clientURL: string = requestFields.url; //grabbing url
266-
155+
267156
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-
// };
157+
158+
const dispatchTRPCResponse = (tRPCResponse) => {
159+
304160
const newCurrentResponse: any = {
305161
checkSelected: false,
306162
checked: false,
@@ -322,27 +178,57 @@ export default function TRPCComposer(props) {
322178
url: requestFields.url,
323179
webrtc: false,
324180
response: {
325-
events: [res],
181+
events: [tRPCResponse],
326182
},
327183
};
328-
329-
//dispatch response to it's slice, to update the state
330-
// reqResItemAdded(fakeRes);
331184
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-
};
185+
}
186+
187+
Promise.all(
188+
189+
procedures.map((procedure) => {
190+
let endpoint = procedure.endpoint;
191+
const method = procedure.method.toLowerCase();
192+
193+
if (procedure.variable) {
194+
let arg = parseString(procedure.variable.replace(/\s/g, ''));
195+
const tempArg = procedure.variable.replace(/\s/g, '');
196+
const e = `client.${endpoint}.${method}(${tempArg})`;
197+
198+
new Promise((resolve, reject) => {
199+
try {
200+
const result = eval(e);
201+
resolve(result);
202+
} catch (error) {
203+
reject(error);
204+
}
205+
}).then(res => {
206+
dispatchTRPCResponse(res);
207+
}).catch(error => {
208+
dispatchTRPCResponse(error);
209+
})
210+
211+
212+
} else {
213+
214+
new Promise((resolve, reject) => {
215+
try {
216+
const result = eval(`client.${endpoint}.${method}()`);
217+
resolve(result);
218+
} catch (error) {
219+
reject(error);
220+
}
221+
}).then(res => {
222+
dispatchTRPCResponse(res);
223+
}).catch(error => {
224+
dispatchTRPCResponse(error);
225+
})
226+
227+
228+
}
229+
})
230+
231+
)}
346232
return (
347233
<Box
348234
className="is-flex is-flex-direction-column is-justify-content-space-between"
@@ -376,12 +262,7 @@ export default function TRPCComposer(props) {
376262
Add Procedure
377263
</button>
378264
<SendRequestButton onClick={sendRequest} />
379-
{/* {requestFields.method === 'SUBSCRIPTION' && ( ////for subscription
380-
<SendRequestButton
381-
onClick={() => subscription.unsubscribe()}
382-
buttonText="Close Subscription"
383-
></SendRequestButton>
384-
)} */}
265+
385266
</div>
386267
</Box>
387268
);

0 commit comments

Comments
 (0)