feat: response headers

packages/grafnode-components/src/components/RequestHeaders/index.js

@@ -45,7 +45,7 @@ const RequestHeaders = () => {
           </tr>
         </thead>
         <tbody>
-          {headers && headers.length && headers.map((header, index) => {
+          {headers && headers.length ? headers.map((header, index) => {
             return (
               <tr key={header.uid}>
                 <td>
@@ -87,7 +87,7 @@ const RequestHeaders = () => {
                 </td>
               </tr>
             );
-          })}
+          }) : null}
         </tbody>
       </table>
       <button className="btn-add-header" onClick={addHeader}>+ Add Header</button>

packages/grafnode-components/src/components/RequestTabPanel/index.js

@@ -81,29 +81,17 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     const { data, errors, extensions, headers, status } = await rawRequest(item.request.url, query);
     setData(data);
     setIsLoading(false);
-    console.log(data);
     console.log(headers);
 
     if(data && !errors) {
       dispatch({
         type: actions.RESPONSE_RECEIVED,
         response: data,
+        responseHeaders: Object.entries(headers.map),
         requestTab: focusedTab,
         collectionId: collection.id
       });
     }
-
-    // request(item.request.url, gql`${item.request.body.graphql.query}`)
-    //   .then((data, stuff) => {
-    //     console.log(data);
-    //     console.log(stuff);
-    //     setData(data);
-    //     setIsLoading(false);
-    //   })
-    //   .catch((err) => {
-    //     setIsLoading(false);
-    //     console.log(err);
-      // });
   };
 
   return (
@@ -141,6 +129,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
           <ResponsePane
             rightPaneWidth={rightPaneWidth}
             data={item.response}
+            headers={item.responseHeaders}
             isLoading={isLoading}
           />
         </section>

packages/grafnode-components/src/components/ResponseHeaders/StyledWrapper.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    thead, td {
+      border: 1px solid #efefef;
+    }
+
+    thead {
+      color: #777777;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    td {
+      padding: 6px 10px;
+    }
+  }
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/ResponseHeaders/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseHeaders = ({headers}) => {
+  return (
+    <StyledWrapper className="mt-4">
+      <table>
+        <thead>
+          <tr>
+            <td>Name</td>
+            <td>Value</td>
+          </tr>
+        </thead>
+        <tbody>
+          {headers && headers.length ? headers.map((header, index) => {
+            return (
+              <tr key={index}>
+                <td>{header[0]}</td>
+                <td>{header[1]}</td>
+              </tr>
+            );
+          }) : null}
+        </tbody>
+      </table>
+    </StyledWrapper>
+  )
+};
+export default ResponseHeaders;

packages/grafnode-components/src/components/ResponsePane/index.js

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import classnames from 'classnames';
 import QueryResult from '../QueryResult';
+import ResponseHeaders from '../ResponseHeaders';
 import StyledWrapper from './StyledWrapper';
 
-const ResponsePane = ({rightPaneWidth, data, isLoading}) => {
+const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
   const [selectedTab, setSelectedTab] = useState('response');
 
   const getTabClassname = (tabName) => {
@@ -24,7 +25,9 @@ const ResponsePane = ({rightPaneWidth, data, isLoading}) => {
         );
       }
       case 'headers': {
-        return <div>Headers</div>;
+        return (
+          <ResponseHeaders headers={headers}/>
+        );
       }
 
       default: {

packages/grafnode-run/src/providers/Store/reducer.js

@@ -67,6 +67,7 @@ const reducer = (state, action) => {
           
           if(item) {
             item.response = action.response;
+            item.responseHeaders = action.responseHeaders;
           }
         }
       });