Skip to content

Commit 1a9579e

Browse files
nqnguyen1nqnguyen1
committed
version - only one procedure field and add to a list of procedure
1 parent 8c388cb commit 1a9579e

File tree

8 files changed

+363
-242
lines changed

8 files changed

+363
-242
lines changed

src/client/components/main/TRPC-composer/TRPCBodyEntryForm.tsx renamed to TRPCBodyEntryForm.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React, { useState } from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
3-
import { RootState } from '../../../toolkit-refactor/store';
4-
import TextCodeArea from '../sharedComponents/TextCodeArea';
3+
import { RootState } from './src/client/toolkit-refactor/store';
4+
import TextCodeArea from './src/client/components/main/sharedComponents/TextCodeArea';
55

66
/**
77
* renders entry form for TRPC request
88
*/
99

10-
1110
const TRPCBodyEntryForm = (props: any) => {
1211
const { newRequestBodySet } = props;
1312
const dispatch = useDispatch();

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

Lines changed: 138 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import React from 'react';
22
import { v4 as uuid } from 'uuid';
3-
// Import controllers
4-
import SendRequestButton from '../sharedComponents/requestButtons/SendRequestButton';
53
// Import local components
64
import TRPCMethodAndEndpointEntryForm from './TRPCMethodAndEndpointEntryForm';
7-
import TRPCBodyEntryForm from './TRPCBodyEntryForm';
85
// Import Redux hooks
96
import { useSelector, useDispatch } from 'react-redux';
107
// Import Actions from RTK slice
11-
import { newRequestBodySet } from '../../../toolkit-refactor/slices/newRequestSlice';
128
import { responseDataSaved } from '../../../toolkit-refactor/slices/reqResSlice';
9+
import { useState } from 'react';
1310

1411
// Import MUI components
1512
import { Box } from '@mui/material';
1613
import { RootState } from '../../../toolkit-refactor/store';
1714
import HeaderEntryForm from '../sharedComponents/requestForms/HeaderEntryForm';
15+
import TRPCProceduresContainer from './TRPCProceduresContainer';
1816

1917
// import tRPC client Module
2018
import {
@@ -29,13 +27,23 @@ import Store from '../../../toolkit-refactor/store';
2927
/**
3028
*
3129
*/
30+
31+
const PROCEDURE_DEFAULT = {
32+
procedureMethod: 'QUERRY',
33+
endpoint: '',
34+
variable: '',
35+
};
3236
export default function TRPCComposer(props) {
3337
const dispatch = useDispatch();
3438
/** newRequestBody slice from redux store, contains specific request info */
3539
const requestBody = useSelector(
3640
(state: RootState) => state.newRequest.newRequestBody
3741
);
3842

43+
const [procedures, setProcedures] = useState([
44+
{ method: 'QUERRY', endpoint: '.user', variable: '{hello:World}' },
45+
]);
46+
3947
const {
4048
newRequestHeadersSet,
4149
newRequestStreamsSet,
@@ -44,133 +52,132 @@ export default function TRPCComposer(props) {
4452
newRequestBody,
4553
newRequestStreams,
4654
} = props;
47-
console.log(Store.getState());
55+
4856
/** newRequestFields slice from redux store, contains general request info*/
4957
const requestFields = useSelector(
5058
(state: RootState) => state.newRequestFields
5159
);
5260

5361
/** reqRes slice from redux store, contains request and response data */
54-
const requestStuff = useSelector((state: RootState) => state.newRequest);
62+
const newRequest = useSelector((state: RootState) => state.newRequest);
63+
// const headers = requestStuff.newRequestHeaders.headersArr.filter(
64+
// (x) => x.active
65+
// );
5566

5667
let subscription: any;
5768

58-
const sendRequest = () => {
59-
let isWebsocket = false;
60-
const links = [];
61-
const clientURL: string = requestFields.url; //grabbing url
62-
const request = requestBody.bodyContent;
63-
const httpRegex =
64-
/^http:\/\/([a-zA-Z0-9-]+\.[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/; // trpc doesn't accept https requests to my knowledge otherwise https?
65-
const wsRegex =
66-
/^(ws|wss):\/\/(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/;
67-
68-
//checks if URL is to WebSocket or standard HTTP
69-
if (wsRegex.test(clientURL)) {
70-
// setup links array with ws
71-
isWebsocket = true;
72-
73-
//instantiates a WebSocket
74-
const wsClient = createWSClient({ url: clientURL });
75-
links.push(wsLink({ client: wsClient }));
76-
77-
//grabs the WebSocket from tRPC's wsClient
78-
const ws = wsClient.getConnection();
79-
const persistentData: Array<any> = [];
80-
81-
//current WebSocket is listening for anytime an event is sent back to client
82-
ws.onmessage = (event) => {
83-
persistentData.push(JSON.parse(event.data));
84-
const newCurrentResponse: any = {
85-
checkSelected: false,
86-
checked: false,
87-
connection: 'closed',
88-
connectionType: 'plain',
89-
createdAt: new Date(),
90-
gRPC: false,
91-
graphQL: false,
92-
host: clientURL,
93-
id: uuid(),
94-
minimized: false,
95-
path: '/',
96-
protoPath: undefined,
97-
protocol: 'ws://',
98-
request: { ...requestStuff },
99-
tab: undefined,
100-
timeReceived: 1676146914257,
101-
timeSent: 1676146914244,
102-
url: clientURL,
103-
webrtc: false,
104-
response: {
105-
events: [],
106-
},
107-
};
108-
newCurrentResponse.response.events.push([...persistentData]);
109-
dispatch(responseDataSaved(newCurrentResponse));
110-
};
111-
} else if (httpRegex.test(clientURL)) {
112-
// setup links array with http
113-
links.push(httpBatchLink({ url: clientURL }));
114-
} else {
115-
console.log('error in url');
116-
}
117-
118-
const client = createTRPCProxyClient({ links: links });
119-
120-
//if the request is to a WebSocket server + is a subscription, execute request
121-
if (isWebsocket) {
122-
//replacing user's client name to what app is expecting
123-
const editedRequest = request.replace(/^[^.]*./, 'client.');
124-
subscription = eval(editedRequest);
125-
} else {
126-
//if request is not from Websocket server + is query/mutation, execute request
127-
//this handles batch queries + mutations
128-
const reqArray = request.split('\n').map((el) => {
129-
el = el.replace(/^[^.]*./, 'client.');
130-
return el;
131-
});
132-
133-
Promise.all(reqArray.map((el) => eval(el))).then((res: any) => {
134-
const newCurrentResponse: any = {
135-
checkSelected: false,
136-
checked: false,
137-
connection: 'closed',
138-
connectionType: 'plain',
139-
createdAt: new Date(),
140-
gRPC: false,
141-
graphQL: false,
142-
host: clientURL,
143-
id: uuid(),
144-
minimized: false,
145-
path: '/',
146-
protoPath: undefined,
147-
protocol: 'http://',
148-
request: { ...requestStuff },
149-
tab: undefined,
150-
timeReceived: null,
151-
timeSent: null,
152-
url: clientURL,
153-
webrtc: false,
154-
response: {
155-
events: [res],
156-
},
157-
};
158-
159-
//dispatch response to it's slice, to update the state
160-
dispatch(responseDataSaved(newCurrentResponse));
161-
});
162-
}
163-
};
164-
69+
// const sendRequest = () => {
70+
// let isWebsocket = false;
71+
// const links = [];
72+
// const clientURL: string = requestFields.url; //grabbing url
73+
// const request = requestBody.bodyContent;
74+
// const httpRegex =
75+
// /^http:\/\/([a-zA-Z0-9-]+\.[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/; // trpc doesn't accept https requests to my knowledge otherwise https?
76+
// const wsRegex =
77+
// /^(ws|wss):\/\/(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|localhost)(:[0-9]+)?(\/.*)?$/;
78+
79+
// //checks if URL is to WebSocket or standard HTTP
80+
// if (wsRegex.test(clientURL)) {
81+
// // setup links array with ws
82+
// isWebsocket = true;
83+
84+
// //instantiates a WebSocket
85+
// const wsClient = createWSClient({ url: clientURL });
86+
// links.push(wsLink({ client: wsClient }));
87+
88+
// //grabs the WebSocket from tRPC's wsClient
89+
// const ws = wsClient.getConnection();
90+
// const persistentData: Array<any> = [];
91+
92+
// //current WebSocket is listening for anytime an event is sent back to client
93+
// ws.onmessage = (event) => {
94+
// persistentData.push(JSON.parse(event.data));
95+
// const newCurrentResponse: any = {
96+
// checkSelected: false,
97+
// checked: false,
98+
// connection: 'closed',
99+
// connectionType: 'plain',
100+
// createdAt: new Date(),
101+
// gRPC: false,
102+
// graphQL: false,
103+
// host: clientURL,
104+
// id: uuid(),
105+
// minimized: false,
106+
// path: '/',
107+
// protoPath: undefined,
108+
// protocol: 'ws://',
109+
// request: { ...requestStuff },
110+
// tab: undefined,
111+
// timeReceived: 1676146914257,
112+
// timeSent: 1676146914244,
113+
// url: clientURL,
114+
// webrtc: false,
115+
// response: {
116+
// events: [],
117+
// },
118+
// };
119+
// newCurrentResponse.response.events.push([...persistentData]);
120+
// dispatch(responseDataSaved(newCurrentResponse));
121+
// };
122+
// } else if (httpRegex.test(clientURL)) {
123+
// // setup links array with http
124+
// links.push(httpBatchLink({ url: clientURL }));
125+
// } else {
126+
// console.log('error in url');
127+
// }
128+
129+
// const client = createTRPCProxyClient({ links: links });
130+
131+
// //if the request is to a WebSocket server + is a subscription, execute request
132+
// if (isWebsocket) {
133+
// //replacing user's client name to what app is expecting
134+
// const editedRequest = request.replace(/^[^.]*./, 'client.');
135+
// subscription = eval(editedRequest);
136+
// } else {
137+
// //if request is not from Websocket server + is query/mutation, execute request
138+
// //this handles batch queries + mutations
139+
// const reqArray = request.split('\n').map((el) => {
140+
// el = el.replace(/^[^.]*./, 'client.');
141+
// return el;
142+
// });
143+
144+
// Promise.all(reqArray.map((el) => eval(el))).then((res: any) => {
145+
// const newCurrentResponse: any = {
146+
// checkSelected: false,
147+
// checked: false,
148+
// connection: 'closed',
149+
// connectionType: 'plain',
150+
// createdAt: new Date(),
151+
// gRPC: false,
152+
// graphQL: false,
153+
// host: clientURL,
154+
// id: uuid(),
155+
// minimized: false,
156+
// path: '/',
157+
// protoPath: undefined,
158+
// protocol: 'http://',
159+
// request: { ...requestStuff },
160+
// tab: undefined,
161+
// timeReceived: null,
162+
// timeSent: null,
163+
// url: clientURL,
164+
// webrtc: false,
165+
// response: {
166+
// events: [res],
167+
// },
168+
// };
169+
170+
// //dispatch response to it's slice, to update the state
171+
// dispatch(responseDataSaved(newCurrentResponse));
172+
// });
173+
// }
174+
// };
175+
176+
const sendRequest = () => {};
165177
return (
166178
<Box
167-
className="is-flex-grow-3 add-vertical-scroll"
168-
sx={{
169-
height: '100%',
170-
px: 1,
171-
overflowX: 'scroll',
172-
overflowY: 'scroll',
173-
}}
179+
className="is-flex is-flex-direction-column is-justify-content-space-between"
180+
sx={{ height: '100%', width: '100%' }}
174181
id="composer-trpc"
175182
>
176183
<div
@@ -187,19 +194,17 @@ export default function TRPCComposer(props) {
187194
newRequestStreamsSet={newRequestStreamsSet}
188195
/>
189196

190-
<TRPCBodyEntryForm newRequestBodySet={newRequestBodySet} />
191-
<div
192-
className="is-3rem-footer is-clickable is-margin-top-auto"
193-
style={{ display: 'flex', justifyContent: 'space-around' }}
194-
>
195-
<SendRequestButton onClick={sendRequest} />
196-
{requestFields.method === 'SUBSCRIPTION' && (
197-
<SendRequestButton
198-
onClick={() => subscription.unsubscribe()}
199-
buttonText="Close Subscription"
200-
></SendRequestButton>
201-
)}
202-
</div>
197+
<TRPCProceduresContainer
198+
procedures={procedures}
199+
sendRequest={sendRequest}
200+
/>
201+
202+
{/* {requestFields.method === 'SUBSCRIPTION' && ( ////for subscription
203+
<SendRequestButton
204+
onClick={() => subscription.unsubscribe()}
205+
buttonText="Close Subscription"
206+
></SendRequestButton>
207+
)} */}
203208
</div>
204209
</Box>
205210
);

0 commit comments

Comments
 (0)