feat: hoisted response state in the top level store

packages/grafnode-components/package-lock.json

@@ -14,6 +14,8 @@
         "@fortawesome/react-fontawesome": "^0.1.16",
         "classnames": "^2.3.1",
         "codemirror": "^5.64.0",
+        "escape-html": "^1.0.3",
+        "markdown-it": "^12.2.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-tabs": "^3.2.3",
@@ -383,6 +385,12 @@
       "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
       "peer": true
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "peer": true
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@@ -815,6 +823,15 @@
       "integrity": "sha512-2OhsaYgsWGhWjx2et8kaUcdktPbBGjKM2X0BReUCKcSCPttEY+hz2zie820JLbttU8jwL92+JJysWwkut3wZgA==",
       "peer": true
     },
+    "node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -833,6 +850,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "peer": true
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1244,6 +1267,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "peer": true
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "peer": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1275,6 +1307,28 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/markdown-it": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
+      "integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "peer": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2119,6 +2173,12 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "peer": true
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -2447,6 +2507,12 @@
       "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
       "peer": true
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "peer": true
+    },
     "autoprefixer": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
@@ -2786,6 +2852,12 @@
       "integrity": "sha512-2OhsaYgsWGhWjx2et8kaUcdktPbBGjKM2X0BReUCKcSCPttEY+hz2zie820JLbttU8jwL92+JJysWwkut3wZgA==",
       "peer": true
     },
+    "entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "peer": true
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -2801,6 +2873,12 @@
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "peer": true
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "peer": true
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -3127,6 +3205,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "peer": true
     },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "peer": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3155,6 +3242,25 @@
       "optional": true,
       "peer": true
     },
+    "markdown-it": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
+      "integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
+      "peer": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "peer": true
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3763,6 +3869,12 @@
       "optional": true,
       "peer": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "peer": true
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

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

@@ -12,7 +12,7 @@ import useGraphqlSchema from '../../hooks/useGraphqlSchema';
 
 import StyledWrapper from './StyledWrapper';
 
-const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
+const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, requestTabs}) => {
   if(typeof window == 'undefined') {
     return <div></div>;
   }
@@ -84,6 +84,15 @@ const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
     console.log(data);
     console.log(headers);
 
+    if(data && !errors) {
+      dispatch({
+        type: actions.RESPONSE_RECEIVED,
+        response: data,
+        requestTab: focusedTab,
+        collectionId: collection.id
+      });
+    }
+
     // request(item.request.url, gql`${item.request.body.graphql.query}`)
     //   .then((data, stuff) => {
     //     console.log(data);
@@ -131,7 +140,7 @@ const RequestTabPanel = ({collections, activeRequestTabId, requestTabs}) => {
         <section className="response-pane px-4 flex-grow">
           <ResponsePane
             rightPaneWidth={rightPaneWidth}
-            data={data}
+            data={item.response}
             isLoading={isLoading}
           />
         </section>

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -65,6 +65,8 @@ export default function Main() {
             activeRequestTabId={activeRequestTabId}
           />
           <RequestTabPanel
+            actions={actions}
+            dispatch={dispatch}
             collections={collections}
             requestTabs={requestTabs}
             activeRequestTabId={activeRequestTabId}

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

@@ -2,10 +2,12 @@ const SIDEBAR_COLLECTION_CLICK = "SIDEBAR_COLLECTION_CLICK";
 const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK";
 const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK";
 const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE";
+const RESPONSE_RECEIVED = "RESPONSE_RECEIVED";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
   SIDEBAR_COLLECTION_ITEM_CLICK,
   REQUEST_TAB_CLICK,
-  REQUEST_TAB_CLOSE
+  REQUEST_TAB_CLOSE,
+  RESPONSE_RECEIVED
 };

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

@@ -30,7 +30,8 @@ const collection = {
 								"variables": ""
 							}
 						}
-					}
+					},
+					"response": null
 				},
 				{
           "id": nanoid(),
@@ -43,11 +44,12 @@ const collection = {
 						"body": {
 							"mimeType": "application/graphql",
 							"graphql": {
-								"query": "{\n  launches {\n    launch_site {\n      site_id\n      site_name\n      site_name_long\n    }\n    launch_success\n  }\n}",
+								"query": "{\n  launches {\n    launch_site {\n      site_id\n      site_name\n    }\n    launch_success\n  }\n}",
 								"variables": ""
 							}
 						}
-					}
+					},
+					"response": null
 				}
 			]
 		}

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

@@ -13,20 +13,20 @@ const reducer = (state, action) => {
   switch (action.type) {
     case actions.SIDEBAR_COLLECTION_CLICK: {
       return produce(state, (draft) => {
-        const collecton = find(draft.collections, (c) => c.id === action.id);
+        const collection = find(draft.collections, (c) => c.id === action.id);
 
-        if(collecton) {
+        if(collection) {
-          collecton.collapsed = !collecton.collapsed;
+          collection.collapsed = !collection.collapsed;
         }
       });
     }
 
     case actions.SIDEBAR_COLLECTION_ITEM_CLICK: {
       return produce(state, (draft) => {
-        const collecton = find(draft.collections, (c) => c.id === action.collectionId);
+        const collection = find(draft.collections, (c) => c.id === action.collectionId);
 
-        if(collecton) {
+        if(collection) {
-          let flattenedItems = flattenItems(collecton.items);
+          let flattenedItems = flattenItems(collection.items);
           let item = findItem(flattenedItems, action.itemId);
           
           if(item) {
@@ -40,7 +40,7 @@ const reducer = (state, action) => {
                   id: item.id,
                   name: item.name,
                   method: item.request.method,
-                  collectionId: collecton.id
+                  collectionId: collection.id
                 });
                 draft.activeRequestTabId = item.id;
               }
@@ -56,6 +56,21 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.RESPONSE_RECEIVED: {
+      return produce(state, (draft) => {
+        const collection = find(draft.collections, (c) => c.id === action.collectionId);
+
+        if(collection) {
+          let flattenedItems = flattenItems(collection.items);
+          let item = findItem(flattenedItems, action.requestTab.id);
+          
+          if(item) {
+            item.response = action.response;
+          }
+        }
+      });
+    }
+
 
     case actions.REQUEST_TAB_CLOSE: {
       return produce(state, (draft) => {