JSON formatted queries in req/res display

Author: nancyddao

src/client/components/composer/NewRequest/GRPCAutoInputForm.jsx

@@ -101,7 +101,8 @@ class GRPCAutoInputForm extends Component {
         ...this.state
       }, () => {
         let req;
-        let results = [];
+        // let results = [];
+        let results = {};
         let query = '';
         /*
         for each service obj in the services array, if its name matches the current selected service option then:
@@ -136,49 +137,59 @@ class GRPCAutoInputForm extends Component {
                           tempObj[subKey] = submess.def[subKey].type.slice(5).toLowerCase()
                         }
                         // console.log('tempObj: ', tempObj);
-                        results.push(`"${key}":${JSON.stringify(tempObj)}`)
+                        // JSON.stringify(JSON.parse(this.props.newRequestBody.bodyContent), null, 4
+                        // results.push(`"${key}":${JSON.stringify(tempObj, null, 2)}`)
+                        results[key] = tempObj
                         break;
                       }
                     }
                   } else {
                     // console.log('message.def: ', message.def);
-                    results.push(`"${key}": "${message.def[key].type.slice(5).toLowerCase()}"`)
+                    // results.push(`"${key}": "${message.def[key].type.slice(5).toLowerCase()}"`)
+                    results[key] = message.def[key].type.slice(5).toLowerCase()
                   }
                 }
                 break;
               }
             }
           }
         }
+        // console.log('resultsobj: ', results)
          // query for messages with single key:value pair
-        if (results.length === 1) {
-          query = results[0];
-        }
+        // if (results.length === 1) {
+        //   query = results[0];
+        // }
         // query for messages with multiple key:value pairs
-        else {
-          for (let i = 0; i < results.length; i++) {
-            query = `${query},
-    ${results[i]}`
-          }
-          query = query.slice(1).trim();
-        }
+    //     else {
+    //       for (let i = 0; i < results.length; i++) {
+    //         query = `${query},
+    // ${results[i]}`
+    //       }
+    //       query = query.slice(1).trim();
+    //     }
         // set query in streamsArr
+//         if (streamsArr[0] !== '') {
+//           streamsArr[0].query = `{
+//     ${query}
+// }`;
+//         }
+        const queryJSON = JSON.stringify(results, null, 4)
         if (streamsArr[0] !== '') {
-          streamsArr[0].query = `{
-    ${query}
-}`;
+          streamsArr[0].query = queryJSON
         }
         // remove initial empty string then push new query to stream content arr
+//         streamContent.pop();
+//         streamContent.push(`{
+//     ${query}
+// }`);
         streamContent.pop();
-        streamContent.push(`{
-    ${query}
-}`);
+        streamContent.push(queryJSON);
         // set state in the store with updated content
         this.props.setNewRequestStreams({
           ...this.props.newRequestStreams,
           streamsArr: streamsArr,
           streamContent: streamContent,
-          initialQuery: query
+          initialQuery: queryJSON
         });
       });
       // update button display for streaming type listed next to url

src/client/components/composer/NewRequest/GRPCBodyEntryForm.jsx

@@ -47,14 +47,16 @@ class GRPCBodyEntryForm extends Component {
     // construct new stream body obj & push into the streamsArr
     const newStream = {};
     newStream.id = this.props.newRequestStreams.count;
-    newStream.query = `{
-    ${firstBodyQuery}
-}`;
+//     newStream.query = `{
+//     ${firstBodyQuery}
+// }`;
+newStream.query = firstBodyQuery
     streamsArr.push(newStream)
     // push query of initial stream body into streamContent array
-    streamContent.push(`{
-    ${firstBodyQuery}
-}`);
+//     streamContent.push(`{
+//     ${firstBodyQuery}
+// }`);
+    streamContent.push(firstBodyQuery);
     // update mew state in the store
     this.props.setNewRequestStreams({
       ...this.props.newRequestStreams,

src/client/components/containers/ReqResContainer.jsx

@@ -23,7 +23,7 @@ class ReqResContainer extends Component {
   }
 
   render() {
-    // console.log('this.props.reqResArray: ', this.props.reqResArray)
+    
     const reqResArr = this.props.reqResArray
       .map((reqRes, index) => {
         return <SingleReqResContainer

src/client/components/containers/SingleReqResContainer.jsx

@@ -20,7 +20,6 @@ class SingleReqResContainer extends Component {
     this.props.reqResUpdate(this.props.content);
   }
 
-
   removeReqRes() {
     connectionController.closeReqRes(this.props.content.id);
     this.props.reqResDelete(this.props.content);
@@ -38,7 +37,6 @@ class SingleReqResContainer extends Component {
         : this.props.content.response.events
         && this.props.content.response.events.length
         ? JSON.parse(this.props.content.response.events[0]).statusCode : '';
-
       return !this.props.content.response.events 
         ? ''
         : this.props.content.response.events
@@ -51,7 +49,6 @@ class SingleReqResContainer extends Component {
         && this.props.content.response.headers[':status'] 
         ? 'Status: ' + this.props.content.response.headers[":status"] : '';
     }
-    
   }
 
   render() {