diff --git a/renderer/components/Sidebar/CreateCollection/index.js b/renderer/components/Sidebar/CreateCollection/index.js index 7b041124e..f26f2a1bf 100644 --- a/renderer/components/Sidebar/CreateCollection/index.js +++ b/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, diff --git a/renderer/components/Sidebar/TitleBar/index.js b/renderer/components/Sidebar/TitleBar/index.js index f0f796b9b..f5f611e7e 100644 --- a/renderer/components/Sidebar/TitleBar/index.js +++ b/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 { saveCollectionToIdb } from 'providers/Store/idb'; -import { useStore } from 'providers/Store'; +import { useDispatch } from 'react-redux'; +import { createCollection } from 'providers/ReduxStore/slices/collections'; 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) { - 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' - }); - }); + dispatch(createCollection(values.collectionName)) }; return ( @@ -69,8 +37,6 @@ const TitleBar = () => { ) : null} diff --git a/renderer/providers/ReduxStore/slices/collections.js b/renderer/providers/ReduxStore/slices/collections.js index 662328f8a..818b01c7d 100644 --- a/renderer/providers/ReduxStore/slices/collections.js +++ b/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)); };