refactor: redux migration - new request

renderer/components/Sidebar/NewRequest/index.js

@@ -2,11 +2,12 @@ import React, { useRef, useEffect } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import Modal from 'components/Modal';
-import actions from 'providers/Store/actions'
-import { useStore } from 'providers/Store';
+import { useDispatch } from 'react-redux';
+import { newHttpRequest } from 'providers/ReduxStore/slices/collections';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
 
 const NewRequest = ({collectionUid, handleCancel, handleClose}) => {
-  const [store, storeDispatch] = useStore();
+  const dispatch = useDispatch();
   const inputRef = useRef();
   const formik = useFormik({
 		enableReinitialize: true,
@@ -20,11 +21,13 @@ const NewRequest = ({collectionUid, handleCancel, handleClose}) => {
         .required('name is required')
     }),
     onSubmit: (values) => {
-      storeDispatch({
-        type: actions.SIDEBAR_COLLECTION_NEW_REQUEST,
-        collectionUid: collectionUid,
-        requestName: values.requestName
-      });
+      dispatch(newHttpRequest(values.requestName, collectionUid))
+        .then((action) => {
+          dispatch(addTab({
+            uid: action.payload.item.uid,
+            collectionUid: collectionUid
+          }));
+        });
       handleClose();
     }
   });

renderer/providers/ReduxStore/slices/collections.js

@@ -67,6 +67,13 @@ export const collectionsSlice = createSlice({
         });
       }
     },
+    _newRequest: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if(collection) {
+        collection.items.push(action.payload.item);
+      }
+    },
     collectionClicked: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload);
 
@@ -98,6 +105,7 @@ export const {
   _responseReceived,
   _saveRequest,
   _newFolder,
+  _newRequest,
   collectionClicked,
   requestUrlChanged,
 } = collectionsSlice.actions;
@@ -180,4 +188,43 @@ export const newFolder = (folderName, collectionUid) => (dispatch, getState) =>
   }
 };
 
+export const newHttpRequest = (requestName, collectionUid) => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const state = getState();
+    const collection = findCollectionByUid(state.collections.collections, collectionUid);
+  
+    if(collection) {
+      const collectionCopy = cloneDeep(collection);
+      const uid = nanoid();
+      const item = {
+        uid: uid,
+        name: requestName,
+        type: 'http-request',
+        request: {
+          method: 'GET',
+          url: 'https://reqbin.com/echo/get/json',
+          headers: [],
+          body: null
+        }
+      };
+      collectionCopy.items.push(item);
+      const collectionToSave = transformCollectionToSaveToIdb(collectionCopy);
+  
+      saveCollectionToIdb(window.__idb, collectionToSave)
+        .then(() => {
+          Promise.resolve(dispatch(_newRequest({
+            item: item,
+            collectionUid: collectionUid
+          })))
+            .then((val) => resolve(val))
+            .catch((err) => reject(err));
+        })
+        .catch((err) => {
+          reject(err);
+          console.log(err)
+        });
+    }
+  });
+};
+
 export default collectionsSlice.reducer;

renderer/providers/Store/actions.js

@@ -1,13 +1,7 @@
-const SIDEBAR_COLLECTION_NEW_REQUEST = "SIDEBAR_COLLECTION_NEW_REQUEST";
-const LOAD_COLLECTIONS_FROM_IDB = "LOAD_COLLECTIONS_FROM_IDB";
 const REQUEST_GQL_QUERY_CHANGED = "REQUEST_GQL_QUERY_CHANGED";
 const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST";
-const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
 
 export default {
-  SIDEBAR_COLLECTION_NEW_REQUEST,
-  LOAD_COLLECTIONS_FROM_IDB,
   REQUEST_GQL_QUERY_CHANGED,
   ADD_NEW_GQL_REQUEST,
-  IDB_CONNECTION_READY,
 };

renderer/providers/Store/reducer.js

@@ -19,39 +19,6 @@ const reducer = (state, action) => {
       });
     }
 
-    case actions.SIDEBAR_COLLECTION_NEW_REQUEST: {
-      return produce(state, (draft) => {
-        const collection = findCollectionByUid(draft.collections, action.collectionUid);
-
-        if(collection) {
-          const uid = nanoid();
-          const item = {
-            uid: uid,
-            name: action.requestName,
-            type: 'http-request',
-            request: {
-              method: 'GET',
-              url: 'https://reqbin.com/echo/get/json',
-              headers: [],
-              body: null
-            },
-            depth: 1
-          };
-          collection.items.push(item);
-
-          draft.requestTabs.push({
-            uid: item.uid,
-            name: item.name,
-            method: item.request.method,
-            collectionUid: collection.uid,
-            hasChanges: false
-          });
-          draft.activeRequestTabUid = uid;
-          draft.collectionsToSyncToIdb.push(collection.uid);
-        }
-      });
-    }
-
     case actions.REQUEST_GQL_QUERY_CHANGED: {
       return produce(state, (draft) => {
         const collection = findCollectionByUid(draft.collections, action.collectionUid);