adding final styling to graphql panel

Author: neyser zana

build/webpack-bundle.js

@@ -1,8 +1,5 @@
 #graphql-container {
   width: 75%;
-  background-color: rgba(214, 214, 214, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
   margin-left: 20px;
   min-height: 600px;
 }
@@ -13,29 +10,25 @@
   margin: 0px;
 }
 
-#req-res{
-  display: flex;
-}
-
 #graphql-hr {
   margin: 10px 0px;
 }
 
-#graphql {
-  border-right: 1px solid black;
-  width: 50%;
-  padding: 10px;
-}
-
 #graphql-res {
-  width: 50%;
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
   padding: 10px;
+  margin-bottom: 10px;
 }
 
 #graphql-schema {
   overflow-y: scroll;
   max-height: 90%;
   padding: 10px;
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
 }
 
 .graphql {

build/webpack-bundle.js.map

@@ -5,7 +5,7 @@
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   max-height: 600px;
-  height: 600px;
+  height: 650px;
 }
 
 #log-header{
@@ -23,6 +23,7 @@
   padding: 15px;
   background:rgba(255,255,255,0.5);
   margin: 8px 0px;
+  cursor: pointer;
 }
 
 .log-p{

public/graphql.css

@@ -4,6 +4,8 @@ import ReactJson from 'react-json-view';
 
 const GraphQLRequest = ({ logs, log } ) => {
   let req = log === null ? JSON.parse(logs[logs.length - 1].req.postData.text) : JSON.parse(log.req.postData.text);
+  let id = log === null ? logs.length - 1 : log.id;
+  console.log('GRAPHQL: ', req)
   let query = req.query;
   let variables = req.variables;
   let operation = req.operationName;
@@ -15,7 +17,7 @@ const GraphQLRequest = ({ logs, log } ) => {
       {logs.length !== 0 ? (
         <div className='graphql'>
           <p className='graphql-p'>
-            <b>Request:</b>
+            <b>Request: {id} </b>
           </p>
           <p className='graphql-p'>
             <b>URL:</b> {url}

public/log-container.css

@@ -4,8 +4,7 @@ import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
 
 const Log = props => {
   return (
-    <div className='log'>
-      <button onClick={() => {props.logChange(props.logId)}}>view</button>
+    <div className='log' onClick={() => { props.logChange(props.logId) }}>
       <p className='log-p'>
         <b>Request:</b> {props.logId}
       </p>

src/components/GraphQLRequest.js

@@ -9,16 +9,12 @@ const GraphQLContainer = ({ logs, schema, log }) => {
     <div id='graphql-container'>
       {logs.length !== 0 ? (
         <div>
-          <div id='req-res'>
-            <GraphQLRequest logs={logs} log ={log}/>
-            <GraphQLResponse logs={logs} log ={log}/>
-          </div>
-          <hr />
+          <GraphQLResponse logs={logs} log={log} />
           <GraphQLSchema schema={schema} />
         </div>
       ) : (
-        <h1>No requests have been made yet.</h1>
-      )}
+          <h1>No requests have been made yet.</h1>
+        )}
     </div>
   );
 };

src/components/Log/Log.jsx

@@ -28,7 +28,7 @@ class App extends Component {
 
     this.handleMouseOver = this.handleMouseOver.bind(this);
 
-    chrome.devtools.panels.create("Lucid", null, "devtools.html");
+    chrome.devtools.panels.create('Lucid', null, 'devtools.html');
   }
 
   componentDidMount() {
@@ -76,8 +76,8 @@ class App extends Component {
 
           if (httpReq.response.content) {
             httpReq.getContent(responseBody => {
-              if (responseBody === "") {
-                log.res = "No response received";
+              if (responseBody === '') {
+                log.res = 'No response received';
               } else {
                 const parsedResponseBody = JSON.parse(responseBody);
                 log.res = parsedResponseBody;
@@ -111,13 +111,11 @@ class App extends Component {
 
   //* invoke schema fetch only after a log object from a previous response is available
   componentDidUpdate(prevProps, prevState) {
-    console.log('LENGTH: ', this.state.appFilteredDOM.length)
-    if (this.state.schema === "GraphQL schema not available.") {
+    if (this.state.schema === 'GraphQL schema not available.') {
       this.fetchSchemaFromGraphQLServer();
     }
 
     if (prevState.appState !== this.state.appState) {
-      console.log(this.state.componentsToFilter);
       if (this.state.componentsToFilter.length) {
         let result = [];
         filter(this.state.appState, this.state.componentsToFilter, result);
@@ -186,7 +184,9 @@ class App extends Component {
   // * handles the change of a log
   handleLogChange(reqId) {
     let req = this.state.logs[reqId];
-    this.setState({ logView: req })
+    req.id = reqId;
+    console.log('HandleChange: ', req)
+    this.setState({ logView: req });
   }
 
   render() {
@@ -195,6 +195,7 @@ class App extends Component {
       <div>
         {this.state.appState.length === 0 ?
           <div id='devToolsLoader'>
+            <img src='./logo.png' alt='devtool logo'/> 
             <h1>Please trigger a setState() to activate Lucid devtool.<br /></h1>
             <p>Lucid works best on React v15/16</p>
           </div>