From 62f2a1b63eec77b433ed3beebea927ab3ee6ad92 Mon Sep 17 00:00:00 2001
From: Mick Dekkers <mick.dekkers@tradecast.eu>
Date: Tue, 27 Nov 2018 14:37:56 +0100
Subject: [PATCH 1/5] fix: don't break on empty response body

---
 src/components/Response.js | 20 ++++++++++++--------
 src/lib/utils.js           |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Response.js b/src/components/Response.js
index 61d07e1..2b28a8e 100644
--- a/src/components/Response.js
+++ b/src/components/Response.js
@@ -7,17 +7,21 @@ export default function Response({
   return (
     <div className="response">
       <h3>Response</h3>
-      <div className="responseJson">
-        <CollapsableObject
-          object={response}
-          topLevel
-          open
-        />
-      </div>
+      {response != null ? (
+        <div className="responseJson">
+          <CollapsableObject
+            object={response}
+            topLevel
+            open
+          />
+        </div>
+      ) : (
+        <em>empty response body</em>
+      )}
     </div>
   );
 }
 
 Response.propTypes = {
-  response: React.PropTypes.string.isRequired,
+  response: React.PropTypes.object,
 };
diff --git a/src/lib/utils.js b/src/lib/utils.js
index feeae26..81a9e3e 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -134,7 +134,7 @@ export function parseEntry(entry) {
 
   return new Promise(resolve => {
     entry.getContent(responseBody => {
-      const parsedResponseBody = JSON.parse(responseBody);
+      const parsedResponseBody = (typeof responseBody === 'string' && responseBody.length === 0) ? null : JSON.parse(responseBody);
 
       resolve(parsedQueries.map((parsedQuery, i) => {
         return {

From 871830be55ed447e0342c7a0ab25f3113483fc01 Mon Sep 17 00:00:00 2001
From: Mick Dekkers <mick.dekkers@tradecast.eu>
Date: Tue, 27 Nov 2018 14:40:55 +0100
Subject: [PATCH 2/5] fix: error when clicking computed query operation name

---
 src/components/Collapsable.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Collapsable.js b/src/components/Collapsable.js
index 1c74137..4977696 100644
--- a/src/components/Collapsable.js
+++ b/src/components/Collapsable.js
@@ -8,11 +8,15 @@ export default class Collapsable extends React.Component {
     object: React.PropTypes.object.isRequired,
     topLevel: React.PropTypes.bool,
     opened: React.PropTypes.bool,
-    requestOpen: React.PropTypes.func.isRequired,
+    requestOpen: React.PropTypes.func,
     fragments: React.PropTypes.array.isRequired,
     closable: React.PropTypes.bool.isRequired,
   };
 
+  static defaultProps = {
+    requestOpen: () => {},
+  };
+
   constructor(props) {
     super(props);
     this.state = {

From 90b422d2061d7a4d1729a7a66def79ae7f0e5eb6 Mon Sep 17 00:00:00 2001
From: Mick Dekkers <mick.dekkers@tradecast.eu>
Date: Tue, 27 Nov 2018 14:48:57 +0100
Subject: [PATCH 3/5] fix: avoid rendering `<div>` elements in `<p>` elements

---
 src/components/Collapsable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Collapsable.js b/src/components/Collapsable.js
index 4977696..d314534 100644
--- a/src/components/Collapsable.js
+++ b/src/components/Collapsable.js
@@ -47,7 +47,7 @@ export default class Collapsable extends React.Component {
     return (
       <div className="collapsable">
         <div className={`nameParamWrapper ${fields && closable && 'hasChildren'} ${opened ? 'opened' : 'closed'}`} onClick={() => requestOpen(object.name)}>
-          <p className="name" onClick={() => requestOpen(object.name)}>
+          <div className="name" onClick={() => requestOpen(object.name)}>
             {object.kind !== 'FragmentSpread' && object.name}
             {object.kind === 'FragmentSpread' && (
               <Computed
@@ -55,7 +55,7 @@ export default class Collapsable extends React.Component {
                 fragments={fragments}
               />
             )}
-          </p>
+          </div>
           {object.params && object.params.length > 0 && (
             <div className="params">
               {object.params.map(param => (

From 010d875434699d15006296f2e867f424d289ba1c Mon Sep 17 00:00:00 2001
From: Mick Dekkers <mick.dekkers@tradecast.eu>
Date: Tue, 27 Nov 2018 14:57:18 +0100
Subject: [PATCH 4/5] fix: always render array items with a key

---
 src/components/Collapsable.js | 7 ++++---
 src/components/Computed.js    | 4 ++--
 src/components/Request.js     | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Collapsable.js b/src/components/Collapsable.js
index d314534..dbec529 100644
--- a/src/components/Collapsable.js
+++ b/src/components/Collapsable.js
@@ -58,8 +58,8 @@ export default class Collapsable extends React.Component {
           </div>
           {object.params && object.params.length > 0 && (
             <div className="params">
-              {object.params.map(param => (
-                <div className="param">
+              {object.params.map((param, i) => (
+                <div className="param" key={`param-${i}`}>
                   <span className="paramName">{param.name}</span>
                   <Value value={param.value} kind={param.kind} />
                 </div>
@@ -69,13 +69,14 @@ export default class Collapsable extends React.Component {
         </div>
         {fields && opened && (
           <div className="fields">
-            {fields.map(field => (
+            {fields.map((field, i) => (
               <Collapsable
                 closable
                 object={field}
                 fragments={fragments}
                 opened={openChildren.indexOf(field.name) !== -1}
                 requestOpen={this.openIsRequested}
+                key={`field-${i}`}
               />
             ))}
           </div>
diff --git a/src/components/Computed.js b/src/components/Computed.js
index 16f4b2f..534127d 100644
--- a/src/components/Computed.js
+++ b/src/components/Computed.js
@@ -8,8 +8,8 @@ export default function Computed({
   const { operations } = request;
   return (
     <div className="computed">
-      {operations.map(x => (
-        <div className="computed-operation">
+      {operations.map((x, i) => (
+        <div className="computed-operation" key={`computed-operation-${i}`}>
           <Collapsable
             closable={false}
             object={x}
diff --git a/src/components/Request.js b/src/components/Request.js
index a47490a..89ba6c6 100644
--- a/src/components/Request.js
+++ b/src/components/Request.js
@@ -37,8 +37,8 @@ export default function Request({
   return (
     <div className={'request'}>
       <span>{`- ${name}`}</span>
-      {operations.map(x => (
-        <Operation operation={x} />
+      {operations.map((x, i) => (
+        <Operation operation={x} key={`operation-${i}`}/>
       ))}
     </div>
   );

From 14a0972cd676f5ee8f70beb41ab7b052e8beeb37 Mon Sep 17 00:00:00 2001
From: Mick Dekkers <mick.dekkers@tradecast.eu>
Date: Tue, 27 Nov 2018 14:46:50 +0100
Subject: [PATCH 5/5] feat: show response status in response tab

The status text wasn't displayed anywhere,
which made error responses difficult to debug
---
 src/components/LongInformation.js | 3 ++-
 src/components/Response.js        | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/LongInformation.js b/src/components/LongInformation.js
index 5f5c735..9b78f86 100644
--- a/src/components/LongInformation.js
+++ b/src/components/LongInformation.js
@@ -46,7 +46,8 @@ export default class LongInformation extends React.Component {
           )}
           {view === 'response' && (
             <Response
-              response={entry.responseBody}
+              response={entry.response}
+              responseBody={entry.responseBody}
             />
           )}
         </div>
diff --git a/src/components/Response.js b/src/components/Response.js
index 2b28a8e..9819bce 100644
--- a/src/components/Response.js
+++ b/src/components/Response.js
@@ -2,15 +2,19 @@ import React from 'react';
 import CollapsableObject from './CollapsableObject';
 
 export default function Response({
+  responseBody,
   response,
 }) {
   return (
     <div className="response">
       <h3>Response</h3>
-      {response != null ? (
+      <h4>Status</h4>
+      <p>{response.status}{response.statusText && (': ' + response.statusText)}</p>
+      <h4>Body</h4>
+      {responseBody != null ? (
         <div className="responseJson">
           <CollapsableObject
-            object={response}
+            object={responseBody}
             topLevel
             open
           />