From 3133f5e2538887dd08e8ef026622ef2cd99d403f Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Tue, 18 Jan 2022 21:55:22 +0530
Subject: [PATCH] feat: moved up the state logic for graphql query change

---
 .../src/components/RequestPane/index.js           |  2 +-
 .../src/components/RequestTabPanel/index.js       | 13 ++++++++++---
 .../grafnode-run/src/providers/Store/actions.js   |  2 ++
 .../grafnode-run/src/providers/Store/reducer.js   | 15 +++++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/grafnode-components/src/components/RequestPane/index.js b/packages/grafnode-components/src/components/RequestPane/index.js
index e4169213..42b486ef 100644
--- a/packages/grafnode-components/src/components/RequestPane/index.js
+++ b/packages/grafnode-components/src/components/RequestPane/index.js
@@ -18,7 +18,7 @@ const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange})
             width={leftPaneWidth}
             value={value}
             onRunQuery={onRunQuery}
-            onChange={onQueryChange}
+            onEdit={onQueryChange}
           />
         </TabPanel>
         <TabPanel>
diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js
index 69d89251..3d5cd6a8 100644
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js
@@ -21,7 +21,6 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
   let {
     schema 
   } = useGraphqlSchema('https://api.spacex.land/graphql');
-  let [query, setQuery] = useState('');
   const [leftPaneWidth, setLeftPaneWidth] = useState(500);
   const [rightPaneWidth, setRightPaneWidth] = useState(window.innerWidth - 700 - asideWidth);
   const [dragging, setDragging] = useState(false);
@@ -59,7 +58,15 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     });
   };
 
-  const onQueryChange = (value) => setQuery(value);
+  const onGraphqlQueryChange = (value) => {
+    console.log(value);
+    dispatch({
+      type: actions.REQUEST_GQL_QUERY_CHANGED,
+      query: value,
+      requestTab: focusedTab,
+      collectionId: collection ? collection.id : null
+    });
+  };
 
   if(!activeRequestTabId) {
     return (
@@ -118,7 +125,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
               schema={schema}
               leftPaneWidth={leftPaneWidth}
               value={item.request.body.graphql.query}
-              onQueryChange={onQueryChange}
+              onQueryChange={onGraphqlQueryChange}
             />
           </div>
         </section>
diff --git a/packages/grafnode-run/src/providers/Store/actions.js b/packages/grafnode-run/src/providers/Store/actions.js
index 390e74c2..069d2e52 100644
--- a/packages/grafnode-run/src/providers/Store/actions.js
+++ b/packages/grafnode-run/src/providers/Store/actions.js
@@ -3,6 +3,7 @@ const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK";
 const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK";
 const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE";
 const REQUEST_URL_CHANGED = "REQUEST_URL_CHANGED";
+const REQUEST_GQL_QUERY_CHANGED = "REQUEST_GQL_QUERY_CHANGED";
 const RESPONSE_RECEIVED = "RESPONSE_RECEIVED";
 const SEND_REQUEST = "SEND_REQUEST";
 const SENDING_REQUEST = "SENDING_REQUEST";
@@ -16,6 +17,7 @@ export default {
   REQUEST_TAB_CLICK,
   REQUEST_TAB_CLOSE,
   REQUEST_URL_CHANGED,
+  REQUEST_GQL_QUERY_CHANGED,
   RESPONSE_RECEIVED,
   SEND_REQUEST,
   SENDING_REQUEST,
diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js
index 8ef05b3e..74c7f8c6 100644
--- a/packages/grafnode-run/src/providers/Store/reducer.js
+++ b/packages/grafnode-run/src/providers/Store/reducer.js
@@ -73,6 +73,21 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.REQUEST_GQL_QUERY_CHANGED: {
+      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.request.body.graphql.query = action.query;
+          }
+        }
+      });
+    }
+
     case actions.ADD_NEW_HTTP_REQUEST: {
       return produce(state, (draft) => {
         const uid = nanoid();