feat: persist request url changes upon saving them

renderer/components/QueryUrl/index.js

@@ -84,7 +84,7 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
       </div>
       <div className="flex items-center flex-grow input-container h-full">
         <input
-          className="px-3 w-full"
+          className="px-3 w-full mousetrap"
           type="text" defaultValue={value}
           onChange={(event) => onChange(event.target.value)}
         />

renderer/components/RequestTabPanel/index.js

@@ -63,15 +63,6 @@ const RequestTabPanel = () => {
     };
   }, [dragging, leftPaneWidth]);
 
-  const onUrlChange = (value) => {
-    storeDispatch({
-      type: actions.REQUEST_URL_CHANGED,
-      url: value,
-      requestTab: focusedTab,
-      collectionUid: collection ? collection.uid : null
-    });
-  };
-
   const onGraphqlQueryChange = (value) => {
     storeDispatch({
       type: actions.REQUEST_GQL_QUERY_CHANGED,
@@ -105,6 +96,15 @@ const RequestTabPanel = () => {
   let flattenedItems = flattenItems(collection.items);
   let item = findItem(flattenedItems, activeRequestTabUid);
 
+  const onUrlChange = (value) => {
+    storeDispatch({
+      type: actions.REQUEST_URL_CHANGED,
+      url: value,
+      itemUid: item.uid,
+      collectionUid: collection ? collection.uid : null
+    });
+  };
+
   const runQuery = async () => {
     storeDispatch({
       type: actions.SEND_REQUEST,

renderer/pages/_app.js

@@ -22,11 +22,11 @@ function MyApp({ Component, pageProps }) {
   return (
     <SafeHydrate>
       <AuthProvider>
-        <HotkeysProvider>
-          <StoreProvider>
+        <StoreProvider>
+          <HotkeysProvider>
             <Component {...pageProps} />
-          </StoreProvider>
-        </HotkeysProvider>
+          </HotkeysProvider>
+        </StoreProvider>
       </AuthProvider>
     </SafeHydrate>
   );

renderer/providers/Hotkeys/index.js

@@ -1,13 +1,21 @@
 import React, { useEffect } from 'react';
 import Mousetrap from 'mousetrap';
+import { useStore } from 'providers/Store';
+import actions from 'providers/Store/actions';
 
 export const HotkeysContext = React.createContext();
 
 export const HotkeysProvider = props => {
+  const [store, storeDispatch] = useStore();
+
   useEffect(() => {
     Mousetrap.bind(['command+s', 'ctrl+s'], (e) => {
       console.log("Save hotkey");
 
+      storeDispatch({
+        type: actions.HOTKEY_SAVE
+      });
+
       return false; // this stops the event bubbling
     });
 

renderer/providers/Store/actions.js

@@ -18,6 +18,7 @@ const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
 const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED";
 const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR";
 const TOGGLE_LEFT_MENUBAR = "TOGGLE_LEFT_MENUBAR";
+const HOTKEY_SAVE = "HOTKEY_SAVE";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
@@ -39,5 +40,6 @@ export default {
   IDB_CONNECTION_READY,
   IDB_COLLECTIONS_SYNC_STARTED,
   IDB_COLLECTIONS_SYNC_ERROR,
-  TOGGLE_LEFT_MENUBAR
+  TOGGLE_LEFT_MENUBAR,
+  HOTKEY_SAVE
 };

renderer/providers/Store/reducer.js

@@ -1,6 +1,7 @@
 import produce from 'immer';
 import {nanoid} from 'nanoid';
 import union from 'lodash/union';
+import find from 'lodash/find';
 import filter from 'lodash/filter';
 import last from 'lodash/last';
 import actions from './actions';
@@ -154,14 +155,14 @@ const reducer = (state, action) => {
 
         if(collection) {
           let flattenedItems = flattenItems(collection.items);
-          let item = findItem(flattenedItems, action.requestTab.id);
+          let item = findItem(flattenedItems, action.itemUid);
           
           if(item) {
             if(!item.draft) {
               item.draft = cloneItem(item);
             }
             item.draft.request.url = action.url;
-            updateRequestTabAsChanged(draft.requestTabs, item.id);
+            updateRequestTabAsChanged(draft.requestTabs, item.uid);
           }
         }
       });
@@ -340,6 +341,35 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.HOTKEY_SAVE: {
+      return produce(state, (draft) => {
+        if(!draft.activeRequestTabUid) {
+          return;
+        }
+
+        // find request tab
+        const activeRequestTab = find(draft.requestTabs, (t) => t.uid === draft.activeRequestTabUid);
+
+        // resolve item, save and delete draft
+        if(activeRequestTab) {
+          const collection = findCollectionByUid(draft.collections, activeRequestTab.collectionUid);
+
+          if(collection) {
+            let flattenedItems = flattenItems(collection.items);
+            let item = findItem(flattenedItems, activeRequestTab.uid);
+            
+            if(item && item.draft) {
+              item.name = item.draft.name;
+              item.request = item.draft.request;
+              item.draft = null;
+              activeRequestTab.hasChanges = false;
+              draft.collectionsToSyncToIdb.push(collection.uid);
+            }
+          }
+        }
+      });
+    }
+
     default: {
       return state;
     }

renderer/providers/Store/useSyncCollectionsToIdb.js

@@ -4,6 +4,8 @@ import filter from 'lodash/filter';
 import actions from './actions';
 import { saveCollectionToIdb } from './idb';
 
+// This hook listens to changes in 'collectionsToSyncToIdb' and syncs them to idb
+// The app uses this when collections are created as well as when collections get updated
 const useSyncCollectionsToIdb = (collectionsToSyncToIdb, collections, idbConnection, dispatch) => {
 	const [collectionsSyncingToIdb, setCollectionsSyncingToIdb] = useState(false);