resolved conflicts

neyser zana · neyser zana · commit 760d744c4b1d · 2018-12-04T09:34:02.000-05:00
diff --git a/build/logo-card.png b/build/logo-card.png
diff --git a/build/webpack-bundle.js b/build/webpack-bundle.js
diff --git a/build/webpack-bundle.js.map b/build/webpack-bundle.js.map
diff --git a/public/app.css b/public/app.css
@@ -18,7 +18,7 @@ h2{
 
 #app-container{
   display: flex;
-  padding: 10px 25px;
+  padding: 10px;
   max-height: 95%;
 }
 
@@ -31,7 +31,7 @@ h2{
   padding: 10px;
   display: grid;
   grid-template-rows: 1fr 3fr;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 3fr 7fr;
   grid-template-areas:
     'sp-box tree'
     'diff tree';
@@ -54,7 +54,6 @@ h2{
 }
 
 #treeWrapper{
-  text-align: center;
   grid-area: tree;
   height: 700px;
   padding: 10px;
@@ -63,6 +62,9 @@ h2{
   font-size: .9em;
   letter-spacing: 1.5px;
 }
+#treeButtons{
+  text-align: center;
+}
 
 .rd3t-tree-container{
   margin-top: 15px;
@@ -128,7 +130,6 @@ button:focus{
 }
 button:hover{
   background-color: #555;
-  border: none;
   color: white;
 }
 .active{
diff --git a/public/graphql.css b/public/graphql.css
@@ -14,10 +14,10 @@
 }
 
 #graphql-res {
-  background-color: rgba(214, 214, 214, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  padding: 10px;
+  background-color: white;;
+  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
+  0 5px 15px 0 rgba(0,0,0,0.08);
+  padding: 10px 25px;
   margin-bottom: 10px;
 }
 
@@ -30,10 +30,6 @@
   padding: 10px;
 }
 
-.graphql {
-  padding: 5px;
-}
-
 .graphql-p {
   margin-top: 10px; 
 }
diff --git a/public/log-container.css b/public/log-container.css
@@ -1,6 +1,6 @@
 #log-container{
   padding: 10px;
-  width: 250px;
+  /* width: 250px; */
   max-height: 700px;
   height: 700px;
 }
diff --git a/public/stateContainer.css b/public/stateContainer.css
@@ -3,8 +3,6 @@
   max-height: 500px;
   overflow-y: scroll;
   padding: 10px; 
-  margin-top: 10px;
-  margin-right: 10px;
 }
 
 #state-header{
@@ -22,10 +20,11 @@
   box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
   0 5px 15px 0 rgba(0,0,0,0.08);
   margin-bottom: 15px;
-  padding: 10px;
+  padding: 0px 10px;
 }
 
 .state-span{
+  font-family: 'Roboto';
   margin: 6px;
   font-size: 1.2em;
   font-weight: 500;
diff --git a/src/components/GraphQLResponse.js b/src/components/GraphQLResponse.js
@@ -10,7 +10,7 @@ const GraphQLResponse = ({ logs, log }) => {
       {logs.length !== 0
         ?
         <div className="graphql">
-          <p className='graphql-p'><b>Response:</b></p>
+          <p className='graphql-p'><h2>Response:</h2></p>
           <span className='graphql-span'>
             <ReactJson
               src={response}
diff --git a/src/components/GraphQLSchema.js b/src/components/GraphQLSchema.js
@@ -11,8 +11,8 @@ const GraphQLSchema = ({ schema }) => {
 
     return (
       <div id='graphql-schema'>
-        <div className='graphql'>
-          <p className='graphql-p'><b>Schema:</b></p>
+        <div>
+          <p className='graphql-p'><h2>Schema:</h2></p>
           <span className='graphql-span'>
             <GraphqlCodeBlock
               className='GraphqlCodeBlock'
@@ -27,7 +27,7 @@ const GraphQLSchema = ({ schema }) => {
 
     return (
       <div id='graphql'>
-        <div className='graphql'>
+        <div>
           <p className='graphql-p'>
             No GraphQL data available.
           </p>
diff --git a/src/components/Log/Log.jsx b/src/components/Log/Log.jsx
@@ -10,6 +10,7 @@ const Log = props => {
       </p>
       <p className='log-p'>
         <b>Operation Name:</b> {props.operationName}
+        {/* {props.operationName !== null ? (<b>Operation Name:</b>props.operationName) : null} */}
       </p>
       <p className='log-p'>
         <b>Query:</b>
diff --git a/src/components/TreeDiagram.jsx b/src/components/TreeDiagram.jsx
@@ -86,10 +86,12 @@ class TreeDiagram extends React.Component {
 
     return (
       <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
-        <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reduxComponents) }}>Filter Redux</button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reactRouterComponents) }}>Filter React-Router</button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        <div id='treeButtons'>
+          <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reduxComponents) }}>Filter Redux</button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reactRouterComponents) }}>Filter React-Router</button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        </div>
      
         {this.props.appState.length !== 0 ? (
           <Tree
diff --git a/src/containers/GraphQLContainer.js b/src/containers/GraphQLContainer.js
@@ -5,14 +5,14 @@ import styles from '../../public/graphql.css';
 
 const GraphQLContainer = ({ logs, schema, log }) => {
   return (
-    <div id='graphql-container'>
+    <div>
       {logs.length !== 0 ? (
-        <div>
+        <div id='graphql-container'>
           <GraphQLResponse logs={logs} log={log} />
           <GraphQLSchema schema={schema} />
         </div>
       ) : (
-          <h1>No requests have been made yet.</h1>
+          <h2>No requests have been made yet.</h2>
         )}
     </div>
   );
diff --git a/src/containers/LogContainer.jsx b/src/containers/LogContainer.jsx
@@ -19,12 +19,16 @@ const LogContainer = props => {
 
   logs.reverse();
   return (
-    <div id='log-container'>
-      <div id='log-header'>
-        <h2>Request Log</h2>
-        <button className='appButton' data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear</button>
-      </div>
-      <div id='logs'>{logs}</div>
+    <div>
+      {logs.length > 0 ? (
+        <div id='log-container'>
+          <div id='log-header'>
+            <h2>Request Log</h2>
+            <button className='appButton' data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear</button>
+          </div>
+          <div id='logs'>{logs}</div>
+        </div>
+      ) : ('')}
     </div>
   );
 };
diff --git a/src/containers/StateContainer.jsx b/src/containers/StateContainer.jsx
@@ -6,7 +6,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
   return (
     <div id='stateDiff-container'>
       <div id='state-header'>
-        <h2>State Changes</h2>
+        <h2>State Log</h2>
         <button
           className='appButton' 
           data-log='state-log'
@@ -22,18 +22,33 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
         return (
           <div className='stateDiff-div'>
             <span className='state-span'>
-              <ReactJson
-                key={i}
-                src={el}
-                name={null}
-                iconStyle='triangle'
-                indentWidth={1}
-                groupArraysAfterLength={20}
-                enableClipboard={false}
-                collapsed={1}
-                displayDataTypes={false}
-                displayObjectSize={false}
-              />
+              <div key={i}>
+                <div><b>{el.component}: </b>{Object.keys(el.oldState)[0]}</div>
+                <div><b>Old: </b>{el.oldState[Object.keys(el.oldState)[0]]}</div>
+                  {/* <ReactJson
+                  src={el.oldState[Object.keys(el.oldState)[0]]}
+                  name={null}
+                  iconStyle='triangle'
+                  indentWidth={1}
+                  groupArraysAfterLength={20}
+                  enableClipboard={false}
+                  collapsed={1}
+                  displayDataTypes={false}
+                  displayObjectSize={false}
+                  /> */}
+                <div><b>New: </b>{el.newState[Object.keys(el.newState)[0]]}</div>
+                  {/* <ReactJson
+                  src={el.newState[Object.keys(el.newState)[0]]}
+                  name={null}
+                  iconStyle='triangle'
+                  indentWidth={1}
+                  groupArraysAfterLength={20}
+                  enableClipboard={false}
+                  collapsed={1}
+                  displayDataTypes={false}
+                  displayObjectSize={false}
+                  /> */}
+              </div>
             </span>
           </div>
         );

Original file line number	Diff line number	Diff line change
`@@ -14,10 +14,10 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`#graphql-res {`
`17`		`- background-color: rgba(214, 214, 214, 0.4);`
`18`		`- border: 1px solid rgba(0, 0, 0, 0.3);`
`19`		`- border-radius: 5px;`
`20`		`- padding: 10px;`
	`17`	`+ background-color: white;;`
	`18`	`+ box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),`
	`19`	`+ 0 5px 15px 0 rgba(0,0,0,0.08);`
	`20`	`+ padding: 10px 25px;`
`21`	`21`	`margin-bottom: 10px;`
`22`	`22`	`}`
`23`	`23`
`@@ -30,10 +30,6 @@`
`30`	`30`	`padding: 10px;`
`31`	`31`	`}`
`32`	`32`
`33`		`-.graphql {`
`34`		`- padding: 5px;`
`35`		`-}`
`36`		`-`
`37`	`33`	`.graphql-p {`
`38`	`34`	`margin-top: 10px;`
`39`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`#log-container{`
`2`	`2`	`padding: 10px;`
`3`		`- width: 250px;`
	`3`	`+ /* width: 250px; */`
`4`	`4`	`max-height: 700px;`
`5`	`5`	`height: 700px;`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const GraphQLResponse = ({ logs, log }) => {`
`10`	`10`	`{logs.length !== 0`
`11`	`11`	`?`
`12`	`12`	`<div className="graphql">`
`13`		`- <p className='graphql-p'><b>Response:</b></p>`
	`13`	`+ <p className='graphql-p'><h2>Response:</h2></p>`
`14`	`14`	`<span className='graphql-span'>`
`15`	`15`	`<ReactJson`
`16`	`16`	`src={response}`