feat: response status code

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

@@ -86,8 +86,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     if(data && !errors) {
       dispatch({
         type: actions.RESPONSE_RECEIVED,
-        response: data,
+        response: {
-        responseHeaders: Object.entries(headers.map),
+          data: data,
+          headers: Object.entries(headers.map),
+          status: status
+        },
         requestTab: focusedTab,
         collectionId: collection.id
       });
@@ -128,8 +131,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
         <section className="response-pane px-4 flex-grow">
           <ResponsePane
             rightPaneWidth={rightPaneWidth}
-            data={item.response}
+            response={item.response}
-            headers={item.responseHeaders}
             isLoading={isLoading}
           />
         </section>

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({headers}) => {
   return (
-    <StyledWrapper className="mt-4">
+    <StyledWrapper className="mt-3">
       <table>
         <thead>
           <tr>

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseSize = () => {
   return (
-    <StyledWrapper className="mt-4 ml-4">
+    <StyledWrapper className="mt-3 ml-4">
       8.31KB
     </StyledWrapper>
   )

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseTime = () => {
   return (
-    <StyledWrapper className="mt-4 ml-4">
+    <StyledWrapper className="mt-3 ml-4">
       2.8s
     </StyledWrapper>
   )

packages/grafnode-components/src/components/ResponsePane/StatusCode/get-status-code-phrase.js

@@ -0,0 +1,68 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
+const statusCodePhraseMap = {
+  100: 'Continue',
+  101: 'Switching Protocols',
+  102: 'Processing',
+  103: 'Early Hints',
+  200: 'OK',
+  201: 'Created',
+  202: 'Accepted',
+  203: 'Non-Authoritative Information',
+  204: 'No Content',
+  205: 'Reset Content',
+  206: 'Partial Content',
+  207: 'Multi-Status',
+  208: 'Already Reported',
+  226: 'IM Used',
+  300: 'Multiple Choice',
+  301: 'Moved Permanently',
+  302: 'Found',
+  303: 'See Other',
+  304: 'Not Modified',
+  305: 'Use Proxy',
+  306: 'unused',
+  307: 'Temporary Redirect',
+  308: 'Permanent Redirect',
+  400: 'Bad Request',
+  401: 'Unauthorized',
+  402: 'Payment Required',
+  403: 'Forbidden',
+  404: 'Not Found',
+  405: 'Method Not Allowed',
+  406: 'Not Acceptable',
+  407: 'Proxy Authentication Required',
+  408: 'Request Timeout',
+  409: 'Conflict',
+  410: 'Gone',
+  411: 'Length Required',
+  412: 'Precondition Failed',
+  413: 'Payload Too Large',
+  414: 'URI Too Long',
+  415: 'Unsupported Media Type',
+  416: 'Range Not Satisfiable',
+  417: 'Expectation Failed',
+  418: 'I\'m a teapot',
+  421: 'Misdirected Request',
+  422: 'Unprocessable Entity',
+  423: 'Locked',
+  424: 'Failed Dependency',
+  425: 'Too Early',
+  426: 'Upgrade Required',
+  428: 'Precondition Required',
+  429: 'Too Many Requests',
+  431: 'Request Header Fields Too Large',
+  451: 'Unavailable For Legal Reasons',
+  500: 'Internal Server Error',
+  501: 'Not Implemented',
+  502: 'Bad Gateway',
+  503: 'Service Unavailable',
+  504: 'Gateway Timeout',
+  505: 'HTTP Version Not Supported',
+  506: 'Variant Also Negotiates',
+  507: 'Insufficient Storage',
+  508: 'Loop Detected',
+  510: 'Not Extended',
+  511: 'Network Authentication Required'
+};
+
+export default statusCodePhraseMap;

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

@@ -1,10 +1,22 @@
 import React from 'react';
+import classnames from 'classnames';
+import statusCodePhraseMap from './get-status-code-phrase';
 import StyledWrapper from './StyledWrapper';
 
-const StatusCode = () => {
+const StatusCode = ({status}) => {
+  const getTabClassname = () => {
+    return classnames('mt-3', {
+      'text-blue-700': status >= 100 && status < 200,
+      'text-green-700': status >= 200 && status < 300,
+      'text-purple-700': status >= 300 && status < 400,
+      'text-yellow-700': status >= 400 && status < 500,
+      'text-red-700': status >= 500 && status < 600
+    });
+  };
+
   return (
-    <StyledWrapper className="text-green-700 mt-4">
+    <StyledWrapper className={getTabClassname()}>
-      200 OK
+      {status} {statusCodePhraseMap[status]}
     </StyledWrapper>
   )
 };

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

@@ -7,9 +7,11 @@ import ResponseTime from './ResponseTime';
 import ResponseSize from './ResponseSize';
 import StyledWrapper from './StyledWrapper';
 
-const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
+const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
   const [selectedTab, setSelectedTab] = useState('response');
 
+  response = response || {};
+
   const getTabClassname = (tabName) => {
     return classnames(`tab select-none ${tabName}`, {
       'active': tabName === selectedTab
@@ -22,14 +24,14 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
         return (
           <QueryResult
             width={rightPaneWidth}
-            data={data}
+            data={response.data}
             isLoading={isLoading}
           />
         );
       }
       case 'headers': {
         return (
-          <ResponseHeaders headers={headers}/>
+          <ResponseHeaders headers={response.headers}/>
         );
       }
 
@@ -44,11 +46,13 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
       <div className="flex items-center tabs mt-1" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
+        {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
-          <StatusCode />
+            <StatusCode status={response.status}/>
             <ResponseTime />
             <ResponseSize />
           </div>
+        ) : null }
       </div>
       <section>
         {getTabPanel(selectedTab)}

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

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