Merge pull request #99 from Gossamer-React/neyser-previous-log

Neyser previous log

Author: neyser95

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,37 +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;
-}
-
-.graphql {
-  padding: 5px;
-}
-
-.graphql:not(:last-child) {
-  border-bottom: 1px solid grey;
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
 }
 
 .graphql-p {

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

@@ -17,6 +17,7 @@ const GraphQLResponse = ({ logs, log }) => {
               name={null}
               iconStyle='triangle'
               indentWidth={1}
+              collapsed={3}
               enableClipboard={false}
               displayDataTypes={false}
               displayObjectSize={false}

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/GraphQLResponse.js

@@ -16,6 +16,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
           Clear All
         </button>
       </div>
+      <hr />
       {stateDiffs.map((el, i) => {
         return (
           <div className='stateDiff-div'>
@@ -28,7 +29,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
                 indentWidth={1}
                 groupArraysAfterLength={20}
                 enableClipboard={false}
-                collapsed={2}
+                collapsed={1}
                 displayDataTypes={false}
                 displayObjectSize={false}
               />

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>