feat(#111): refactor new request auto open logic

packages/bruno-app/src/providers/App/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import useTelemetry from './useTelemetry';
 import useCollectionTreeSync from './useCollectionTreeSync';
+import useCollectionNextAction from './useCollectionNextAction';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
@@ -10,6 +11,7 @@ export const AppContext = React.createContext();
 export const AppProvider = (props) => {
   useTelemetry();
   useCollectionTreeSync();
+  useCollectionNextAction();
 
   const dispatch = useDispatch();
 

packages/bruno-app/src/providers/App/useCollectionNextAction.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import get from 'lodash/get';
+import each from 'lodash/each';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { getDefaultRequestPaneTab, findItemInCollectionByPathname } from 'utils/collections/index';
+import { hideHomePage } from 'providers/ReduxStore/slices/app';
+import { updateNextAction } from 'providers/ReduxStore/slices/collections/index';
+import { useSelector, useDispatch } from 'react-redux';
+
+const useCollectionNextAction = () => {
+  const collections = useSelector((state) => state.collections.collections);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    each(collections, (collection) => {
+      if (collection.nextAction && collection.nextAction.type === 'OPEN_REQUEST') {
+        const item = findItemInCollectionByPathname(collection, get(collection, 'nextAction.payload.pathname'));
+
+        if (item) {
+          dispatch(updateNextAction(collection.uid, null));
+          dispatch(
+            addTab({
+              uid: item.uid,
+              collectionUid: collection.uid,
+              requestPaneTab: getDefaultRequestPaneTab(item.type)
+            })
+          );
+          dispatch(hideHomePage());
+        }
+      }
+    });
+  }, [collections, each, dispatch, updateNextAction, hideHomePage, addTab]);
+};
+
+export default useCollectionNextAction;

packages/bruno-app/src/providers/App/useCollectionTreeSync.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import {
   collectionAddDirectoryEvent,
   collectionAddFileEvent,
@@ -17,15 +17,9 @@ import {
 import toast from 'react-hot-toast';
 import { openCollectionEvent, collectionAddEnvFileEvent } from 'providers/ReduxStore/slices/collections/actions';
 import { isElectron } from 'utils/common/platform';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
-import { findCollectionByUid, getDefaultRequestPaneTab } from 'utils/collections/index';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
-import { updateLastAction } from 'providers/ReduxStore/slices/collections/index';
 
 const useCollectionTreeSync = () => {
   const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const collections = useSelector((state) => state.collections.collections);
 
   useEffect(() => {
     if (!isElectron()) {
@@ -56,25 +50,6 @@ const useCollectionTreeSync = () => {
             file: val
           })
         );
-
-        const collectionUid = val.meta.collectionUid;
-        const lastAction = findCollectionByUid(collections, collectionUid)?.lastAction;
-
-        // When the request was just created open it in a new tab
-        if (lastAction && lastAction.type === 'ADD_REQUEST') {
-          dispatch(updateLastAction({ lastAction: null, collectionUid }));
-
-          if (lastAction.payload === val.data.name) {
-            dispatch(
-              addTab({
-                uid: val.data.uid,
-                collectionUid: collectionUid,
-                requestPaneTab: getDefaultRequestPaneTab(val.data)
-              })
-            );
-            dispatch(hideHomePage());
-          }
-        }
       }
       if (type === 'change') {
         dispatch(
@@ -140,6 +115,8 @@ const useCollectionTreeSync = () => {
       dispatch(runRequestEvent(val));
     };
 
+    ipcRenderer.invoke('renderer:ready');
+
     const removeListener1 = ipcRenderer.on('main:collection-opened', _openCollection);
     const removeListener2 = ipcRenderer.on('main:collection-tree-updated', _collectionTreeUpdated);
     const removeListener3 = ipcRenderer.on('main:collection-already-opened', _collectionAlreadyOpened);
@@ -167,16 +144,7 @@ const useCollectionTreeSync = () => {
       removeListener10();
       removeListener11();
     };
-  }, [isElectron, tabs, collections]);
-
-  useEffect(() => {
-    if (!isElectron()) {
-      return () => {};
-    }
-
-    const { ipcRenderer } = window;
-    ipcRenderer.invoke('renderer:ready');
-  }, []);
+  }, [isElectron]);
 };
 
 export default useCollectionTreeSync;

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -26,6 +26,7 @@ import { sendNetworkRequest, cancelNetworkRequest } from 'utils/network';
 
 import {
   updateLastAction,
+  updateNextAction,
   resetRunResults,
   requestCancelled,
   responseReceived,
@@ -39,8 +40,7 @@ import {
   renameCollection as _renameCollection,
   removeCollection as _removeCollection,
   sortCollections as _sortCollections,
-  collectionAddEnvFileEvent as _collectionAddEnvFileEvent,
-  updateNewRequest
+  collectionAddEnvFileEvent as _collectionAddEnvFileEvent
 } from './index';
 
 import { closeAllCollectionTabs } from 'providers/ReduxStore/slices/tabs';
@@ -596,8 +596,19 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
         const { ipcRenderer } = window;
 
         ipcRenderer.invoke('renderer:new-request', fullName, item).then(resolve).catch(reject);
-        // Add the new request name here so it can be opened in a new tab in useCollectionTreeSync.js
-        dispatch(updateLastAction({ lastAction: { type: 'ADD_REQUEST', payload: item.name }, collectionUid }));
+        // the useCollectionNextAction() will track this and open the new request in a new tab
+        // once the request is created
+        dispatch(
+          updateNextAction({
+            nextAction: {
+              type: 'OPEN_REQUEST',
+              payload: {
+                pathname: fullName
+              }
+            },
+            collectionUid
+          })
+        );
       } else {
         return reject(new Error('Duplicate request names are not allowed under the same folder'));
       }
@@ -615,8 +626,20 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
           const { ipcRenderer } = window;
 
           ipcRenderer.invoke('renderer:new-request', fullName, item).then(resolve).catch(reject);
-          // Add the new request name here so it can be opened in a new tab in useCollectionTreeSync.js
-          dispatch(updateLastAction({ lastAction: { type: 'ADD_REQUEST', payload: item.name }, collectionUid }));
+
+          // the useCollectionNextAction() will track this and open the new request in a new tab
+          // once the request is created
+          dispatch(
+            updateNextAction({
+              nextAction: {
+                type: 'OPEN_REQUEST',
+                payload: {
+                  pathname: fullName
+                }
+              },
+              collectionUid
+            })
+          );
         } else {
           return reject(new Error('Duplicate request names are not allowed under the same folder'));
         }

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -39,6 +39,8 @@ export const collectionsSlice = createSlice({
     createCollection: (state, action) => {
       const collectionUids = map(state.collections, (c) => c.uid);
       const collection = action.payload;
+
+      // TODO: move this to use the nextAction approach
       // last action is used to track the last action performed on the collection
       // this is optional
       // this is used in scenarios where we want to know the last action performed on the collection
@@ -47,6 +49,10 @@ export const collectionsSlice = createSlice({
       collection.importedAt = new Date().getTime();
       collection.lastAction = null;
 
+      // an improvement over the above approach.
+      // this defines an action that need to be performed next and is executed vy the useCollectionNextAction()
+      collection.nextAction = null;
+
       collapseCollection(collection);
       addDepth(collection.items);
       if (!collectionUids.includes(collection.uid)) {
@@ -93,6 +99,14 @@ export const collectionsSlice = createSlice({
         collection.lastAction = lastAction;
       }
     },
+    updateNextAction: (state, action) => {
+      const { collectionUid, nextAction } = action.payload;
+      const collection = findCollectionByUid(state.collections, collectionUid);
+
+      if (collection) {
+        collection.nextAction = nextAction;
+      }
+    },
     collectionUnlinkEnvFileEvent: (state, action) => {
       const { data: environment, meta } = action.payload;
       const collection = findCollectionByUid(state.collections, meta.collectionUid);
@@ -1197,10 +1211,10 @@ export const {
   removeCollection,
   sortCollections,
   updateLastAction,
+  updateNextAction,
   collectionUnlinkEnvFileEvent,
   saveEnvironment,
   selectEnvironment,
-  updateNewRequest,
   newItem,
   deleteItem,
   renameItem,