feat: hoisted response state in the top level store

This commit is contained in:
Anoop M D 2021-12-09 22:14:49 +05:30
parent 4a576665be
commit 17e755123e
6 changed files with 155 additions and 13 deletions

View File

@ -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",

View File

@ -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>

View File

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

View File

@ -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
};

View File

@ -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
}
]
}

View File

@ -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) {
collecton.collapsed = !collecton.collapsed;
if(collection) {
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) {
let flattenedItems = flattenItems(collecton.items);
if(collection) {
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) => {