RESPONSE now render properly

Author: nqnguyen1

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

@@ -257,80 +257,10 @@ export default function TRPCComposer(props) {
 
   const sendRequest = async () => {
     const id = uuid();
-    // const headers = newRequest.newRequestHeaders.headersArr.filter(
-    //   (x) => x.active
-    // );
-    // const cookie = cookiesArr.filter((x) => x.active);
-    // const reqRes = {
-    //   id,
-    //   createdAt: new Date(),
-    //   protocol,
-    //   trpc: true,
-    //   url: 'http://localhost:3000/trpc',
-    //   graphQL,
-    //   gRPC,
-    //   webrtc,
-    //   timeSent: null,
-    //   timeReceived: null,
-    //   connection: 'uninitialized',
-    //   connectionType: null,
-    //   checkSelected: false,
-    //   host: 'http://localhost:3000',
-    //   request: {
-    //     method,
-    //     headers,
-    //     procedures,
-    //     bodyType,
-    //     rawType,
-    //     network,
-    //     restUrl,
-    //     wsUrl,
-    //     gqlUrl,
-    //     cookie,
-    //   },
-    //   response: {
-    //     cookies: [],
-    //     headers: {},
-    //     stream: null,
-    //     events: [],
-    //   },
-    //   checked: false,
-    //   minimized: false,
-    //   tab: currentTab,
-    // };
-
-    const cache = [
-      {
-        method: 'MUTATE',
-        endpoint: 'update',
-        variable: '{\n    "userId": "1",\n    "name": "nguyen"\n  }',
-      },
-      { method: 'QUERY', endpoint: 'sayHi', variable: '' },
-      {
-        method: 'MUTATE',
-        endpoint: 'log',
-        variable: '"HELLO WORLD"',
-      },
-      {
-        method: 'QUERY',
-        endpoint: 'secretData',
-        variable: '{\n    "userId": "1",\n    "name": "justin"\n  }',
-      },
-      {
-        method: 'QUERY',
-        endpoint: 'BLAHBLAH.BLAH',
-        variable: '{\n    "userId": "1",\n    "name": "justin"\n  }',
-      },
-    ];
-
-    const cookiCache = [
-      { id: 'cookie0', active: true, key: 'cookie1', value: 'cookie1Val' },
-      { id: 'cookie1', active: true, key: 'cookie2', value: 'cookie2Val' },
-    ];
-    const headerCache = [
-      { id: 351217.45631817693, active: true, key: 'auth1', value: 'auth2' },
-      { id: 87384.65282544694, active: true, key: 'auth3', value: 'auth4' },
-    ];
+    const headers = newRequest.newRequestHeaders.headersArr.filter(
+      (x) => x.active
+    );
+    const cookie = cookiesArr.filter((x) => x.active);
     const reqRes = {
       id,
       createdAt: new Date(),
@@ -348,26 +278,96 @@ export default function TRPCComposer(props) {
       host: 'http://localhost:3000',
       request: {
         method,
-        headers: headerCache,
-        procedures: cache,
+        headers,
+        procedures,
         bodyType,
         rawType,
         network,
         restUrl,
         wsUrl,
         gqlUrl,
-        cookie: cookiCache,
+        cookie,
       },
       response: {
         cookies: [],
-        headers: [],
+        headers: {},
         stream: null,
         events: [],
       },
       checked: false,
       minimized: false,
       tab: currentTab,
     };
+
+    // const cache = [
+    //   {
+    //     method: 'MUTATE',
+    //     endpoint: 'update',
+    //     variable: '{\n    "userId": "1",\n    "name": "nguyen"\n  }',
+    //   },
+    //   { method: 'QUERY', endpoint: 'sayHi', variable: '' },
+    //   {
+    //     method: 'MUTATE',
+    //     endpoint: 'log',
+    //     variable: '"HELLO WORLD"',
+    //   },
+    //   {
+    //     method: 'QUERY',
+    //     endpoint: 'secretData',
+    //     variable: '{\n    "userId": "1",\n    "name": "justin"\n  }',
+    //   },
+    //   {
+    //     method: 'QUERY',
+    //     endpoint: 'BLAHBLAH.BLAH',
+    //     variable: '{\n    "userId": "1",\n    "name": "justin"\n  }',
+    //   },
+    // ];
+
+    // const cookiCache = [
+    //   { id: 'cookie0', active: true, key: 'cookie1', value: 'cookie1Val' },
+    //   { id: 'cookie1', active: true, key: 'cookie2', value: 'cookie2Val' },
+    // ];
+    // const headerCache = [
+    //   { id: 351217.45631817693, active: true, key: 'auth1', value: 'auth2' },
+    //   { id: 87384.65282544694, active: true, key: 'auth3', value: 'auth4' },
+    // ];
+    // const reqRes = {
+    //   id,
+    //   createdAt: new Date(),
+    //   protocol,
+    //   trpc: true,
+    //   url: 'http://localhost:3000/trpc',
+    //   graphQL,
+    //   gRPC,
+    //   webrtc,
+    //   timeSent: null,
+    //   timeReceived: null,
+    //   connection: 'uninitialized',
+    //   connectionType: null,
+    //   checkSelected: false,
+    //   host: 'http://localhost:3000',
+    //   request: {
+    //     method,
+    //     headers: headerCache,
+    //     procedures: cache,
+    //     bodyType,
+    //     rawType,
+    //     network,
+    //     restUrl,
+    //     wsUrl,
+    //     gqlUrl,
+    //     cookie: cookiCache,
+    //   },
+    //   response: {
+    //     cookies: [],
+    //     headers: [],
+    //     stream: null,
+    //     events: [],
+    //   },
+    //   checked: false,
+    //   minimized: false,
+    //   tab: currentTab,
+    // };
     // add request to history
     historyController.addHistoryToIndexedDb(reqRes);
     reqResItemAdded(reqRes);

src/client/components/main/response-composer/EventsContainer.tsx

@@ -34,9 +34,18 @@ function EventsContainer({ currentResponse }: EventsContainerProps) {
   }
   const { events, headers } = response;
   let responseBody = '';
-
+  if (currentResponse.trpc) {
+    events.forEach((event: any, idx: number) => {
+      if (event) {
+        const eventStr = JSON.stringify(event, null, 4);
+        responseBody += `-------------${
+          idx ? 'Mutate Result' : 'Query result'
+        }-------------\n${eventStr}\n\n`;
+      }
+    });
+  }
   // If it's a stream or graphQL subscription
-  if (
+  else if (
     (events && events.length > 1) ||
     (headers?.['content-type'] && headers['content-type'].includes('stream')) ||
     (currentResponse.graphQL && request.method === 'SUBSCRIPTION')

src/client/components/main/response-composer/HeadersContainer.tsx

@@ -24,19 +24,8 @@ function HeadersContainer({ currentResponse }: Props) {
     return <EmptyState />;
   }
 
-  console.log('CURRENT RES ', currentResponse);
   let responseHeaders;
 
-  {
-    /* <tbody>{Object.entries(req).map(([key, value], index) => {
-        return (
-          <tr key={index}>
-            <td>{key}</td>
-            <td className="table-value">{value}</td>
-          </tr>
-        );
-      })}</tbody> */
-  }
   if (currentResponse.trpc) {
     responseHeaders = currentResponse.response.headers.map((req, reqMethod) => {
       const typeHeader = reqMethod === 0 ? 'QUERY HEADER' : 'MUTATE HEADER';

src/client/controllers/reqResController.ts

@@ -56,7 +56,6 @@ const connectionController = {
       /** @todo Find where id should be */
       const currentID = Store.getState().reqRes.currentResponse.id;
       if (currentID === reqResObj.id) {
-        console.log('AFTER UPDATED: ', reqResObj);
         appDispatch(responseDataSaved(reqResObj));
       }
     });
@@ -68,7 +67,6 @@ const connectionController = {
     }
 
     if (reqResObj.trpc) {
-      console.log(reqResObj);
       api.send('open-trpc', reqResObj);
     } else if (reqResObj.request.method === 'SUBSCRIPTION')
       graphQLController.openSubscription(reqResObj);