refactor: redux migration new folder in collection

renderer/components/Sidebar/NewFolder/index.js

@@ -2,11 +2,11 @@ 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 { newFolder } from 'providers/ReduxStore/slices/collections';
 
 const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
-  const [store, storeDispatch] = useStore();
+  const dispatch = useDispatch();
   const inputRef = useRef();
   const formik = useFormik({
 		enableReinitialize: true,
@@ -20,11 +20,7 @@ const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
         .required('name is required')
     }),
     onSubmit: (values) => {
-      storeDispatch({
-        type: actions.SIDEBAR_COLLECTION_NEW_FOLDER,
-        collectionUid: collectionUid,
-        folderName: values.folderName
-      });
+      dispatch(newFolder(values.folderName, collectionUid));
       handleClose();
     }
   });

renderer/providers/ReduxStore/slices/collections.js

@@ -55,6 +55,18 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    _newFolder: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if(collection) {
+        collection.items.push({
+          uid: nanoid(),
+          name: action.payload.folderName,
+          type: 'folder',
+          items: []
+        });
+      }
+    },
     collectionClicked: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload);
 
@@ -85,6 +97,7 @@ export const {
   _requestSent,
   _responseReceived,
   _saveRequest,
+  _newFolder,
   collectionClicked,
   requestUrlChanged,
 } = collectionsSlice.actions;
@@ -142,4 +155,29 @@ export const saveRequest = (itemUid, collectionUid) => (dispatch, getState) => {
   }
 };
 
+export const newFolder = (folderName, collectionUid) => (dispatch, getState) => {
+  const state = getState();
+  const collection = findCollectionByUid(state.collections.collections, collectionUid);
+
+  if(collection) {
+    const collectionCopy = cloneDeep(collection);
+    collectionCopy.items.push({
+      uid: nanoid(),
+      name: folderName,
+      type: 'folder',
+      items: []
+    });
+    const collectionToSave = transformCollectionToSaveToIdb(collectionCopy);
+
+    saveCollectionToIdb(window.__idb, collectionToSave)
+      .then(() => {
+        dispatch(_newFolder({
+          folderName: folderName,
+          collectionUid: collectionUid
+        }));
+      })
+      .catch((err) => console.log(err));
+  }
+};
+
 export default collectionsSlice.reducer;

renderer/providers/Store/actions.js

@@ -1,4 +1,3 @@
-const SIDEBAR_COLLECTION_NEW_FOLDER = "SIDEBAR_COLLECTION_NEW_FOLDER";
 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";
@@ -6,7 +5,6 @@ const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST";
 const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
 
 export default {
-  SIDEBAR_COLLECTION_NEW_FOLDER,
   SIDEBAR_COLLECTION_NEW_REQUEST,
   LOAD_COLLECTIONS_FROM_IDB,
   REQUEST_GQL_QUERY_CHANGED,

renderer/providers/Store/reducer.js

@@ -52,24 +52,6 @@ const reducer = (state, action) => {
       });
     }
 
-    case actions.SIDEBAR_COLLECTION_NEW_FOLDER: {
-      return produce(state, (draft) => {
-        const collection = findCollectionByUid(draft.collections, action.collectionUid);
-
-        if(collection) {
-          collection.items.push({
-            uid: nanoid(),
-            name: action.folderName,
-            type: 'folder',
-            items: [],
-            // todo: this will be autoassigned
-            depth: 1
-          });
-          draft.collectionsToSyncToIdb.push(collection.uid);
-        }
-      });
-    }
-
     case actions.REQUEST_GQL_QUERY_CHANGED: {
       return produce(state, (draft) => {
         const collection = findCollectionByUid(draft.collections, action.collectionUid);