refactor: redux migration - collection create

renderer/components/Sidebar/CreateCollection/index.js

@@ -3,7 +3,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import Modal from '../../Modal';
 
-const CreateCollection = ({handleConfirm, handleCancel, actions, dispatch}) => {
+const CreateCollection = ({handleConfirm, handleCancel}) => {
   const inputRef = useRef();
   const formik = useFormik({
 		enableReinitialize: true,

renderer/components/Sidebar/TitleBar/index.js

@@ -1,18 +1,16 @@
 import React, { useState, forwardRef, useRef } from 'react';
-import {nanoid} from 'nanoid';
 import Toast from 'components/Toast';
 import Dropdown from 'components/Dropdown';
-import actions from 'providers/Store/actions'
+import { useDispatch } from 'react-redux';
-import { saveCollectionToIdb } from 'providers/Store/idb';
+import { createCollection } from 'providers/ReduxStore/slices/collections';
-import { useStore } from 'providers/Store';
 import { IconDots } from '@tabler/icons';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 
 const TitleBar = () => {
   const [modalOpen, setModalOpen] = useState(false);
-  const [store, storeDispatch] = useStore();
   const [showToast, setShowToast] = useState({show: false});
+  const dispatch = useDispatch();
 
   const menuDropdownTippyRef = useRef();
   const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
@@ -28,38 +26,8 @@ const TitleBar = () => {
   const handleCloseToast = () => setShowToast({show: false});
 
   const handleConfirm = (values) => {
-    // dispatch({
-    //   name: values.collectionName,
-    //   type: actions.COLLECTION_CREATE
-    // });
     setModalOpen(false);
-    if(!store.idbConnection) {
+    dispatch(createCollection(values.collectionName))
-      setShowToast({
-        show: true,
-        type: 'error',
-        text: 'IndexedDB Error: idb connection is null'
-      });
-      return;
-    }
-
-    const newCollection = {
-      uid: nanoid(),
-      name: values.collectionName,
-      items: [],
-      environments: [],
-      userId: null
-    };
-
-    saveCollectionToIdb(store.idbConnection, newCollection)
-      .then(() => console.log('Collection created'))
-      .catch((err) => {
-        console.error(err);
-        setShowToast({
-          show: true,
-          type: 'error',
-          text: 'IndexedDB Error: Unable to save collection'
-        });
-      });
   };
 
   return (
@@ -69,8 +37,6 @@ const TitleBar = () => {
         <CreateCollection
           handleCancel={handleCancel}
           handleConfirm={handleConfirm}
-          actions={actions}
-          dispatch={storeDispatch}
         />
       ) : null}
 

renderer/providers/ReduxStore/slices/collections.js

@@ -1,7 +1,10 @@
+import { nanoid } from 'nanoid';
 import { createSlice } from '@reduxjs/toolkit'
-import { getCollectionsFromIdb } from 'utils/idb';
+import { getCollectionsFromIdb, saveCollectionToIdb } from 'utils/idb';
 import { findCollectionByUid } from 'utils/collections';
 
+// todo: errors should be tracked in each slice and displayed as toasts
+
 const initialState = {
   collections: []
 };
@@ -10,9 +13,12 @@ export const collectionsSlice = createSlice({
   name: 'app',
   initialState,
   reducers: {
-    loadCollections: (state, action) => {
+    _loadCollections: (state, action) => {
       state.collections = action.payload;
     },
+    _createCollection: (state, action) => {
+      state.collections.push(action.payload);
+    },
     collectionClicked: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload);
 
@@ -23,11 +29,29 @@ export const collectionsSlice = createSlice({
   }
 });
 
-export const { loadCollections, collectionClicked } = collectionsSlice.actions;
+export const {
+  _loadCollections,
+  _createCollection,
+  collectionClicked
+} = collectionsSlice.actions;
 
 export const loadCollectionsFromIdb = () => (dispatch) => {
   getCollectionsFromIdb(window.__idb)
-    .then((collections) => dispatch(loadCollections(collections)))
+    .then((collections) => dispatch(_loadCollections(collections)))
+    .catch((err) => console.log(err));
+};
+
+export const createCollection = (collectionName) => (dispatch) => {
+  const newCollection = {
+    uid: nanoid(),
+    name: collectionName,
+    items: [],
+    environments: [],
+    userId: null
+  };
+
+  saveCollectionToIdb(window.__idb, newCollection)
+    .then(() => dispatch(_createCollection(newCollection)))
     .catch((err) => console.log(err));
 };