feat: save collection to indexedDB

renderer/components/Sidebar/TitleBar/index.js

@@ -1,11 +1,17 @@
 import React, { useState, forwardRef, useRef } from 'react';
-import Dropdown from '../../Dropdown';
-import CreateCollection from '../CreateCollection';
+import {nanoid} from 'nanoid';
+import Toast from 'components/Toast';
+import Dropdown from 'components/Dropdown';
+import { saveCollectionToIdb } from 'providers/Store/idb';
+import { useStore } from 'providers/Store';
 import { IconDots } from '@tabler/icons';
+import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 
-const Navbar = ({dispatch, actions}) => {
+const TitleBar = ({dispatch, actions}) => {
   const [modalOpen, setModalOpen] = useState(false);
+  const [store, storeDispatch] = useStore();
+  const [showToast, setShowToast] = useState({show: false});
 
   const menuDropdownTippyRef = useRef();
   const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
@@ -17,20 +23,51 @@ const Navbar = ({dispatch, actions}) => {
     );
   });
 
-  const handleCancel = () => {
-    setModalOpen(false);
-  };
+  const handleCancel = () => setModalOpen(false);
+  const handleCloseToast = () => setShowToast({show: false});
 
   const handleConfirm = (values) => {
-    dispatch({
-      name: values.collectionName,
-      type: actions.COLLECTION_CREATE
-    });
+    // dispatch({
+    //   name: values.collectionName,
+    //   type: actions.COLLECTION_CREATE
+    // });
     setModalOpen(false);
+    console.log(store.idbConnection);
+    if(!store.idbConnection) {
+      setShowToast({
+        show: true,
+        type: 'error',
+        text: 'IndexedDB Error: idb connection is null'
+      });
+      return;
+    }
+
+    const collectionUid = nanoid();
+    const newCollection = {
+      uid: collectionUid,
+      base: null,
+      current: {
+        id: collectionUid,
+        name: values.collectionName,
+        items: []
+      },
+      requestSync: true
+    };
+
+    saveCollectionToIdb(store.idbConnection, newCollection)
+      .then(() => console.log('Collection created'))
+      .catch((err) => {
+        setShowToast({
+          show: true,
+          type: 'error',
+          text: 'IndexedDB Error: Unable to save collection'
+        });
+      });
   };
 
   return (
     <StyledWrapper className="px-2 py-2 flex items-center">
+      {showToast.show && <Toast text={showToast.text} type={showToast.type}  duration={showToast.duration} handleClose={handleCloseToast}/>}
       {modalOpen ? (
         <CreateCollection
           handleCancel={handleCancel}
@@ -67,4 +104,4 @@ const Navbar = ({dispatch, actions}) => {
   )
 };
 
-export default Navbar;
+export default TitleBar;

renderer/providers/Store/idb.js

@@ -1,4 +1,4 @@
-export const saveCollectionToIdb = (connection, domain, collection) => {
+export const saveCollectionToIdb = (connection, collection) => {
   return new Promise((resolve, reject) => {
     connection
       .then((db) => {

renderer/providers/Store/reducer.js

@@ -18,8 +18,6 @@ const reducer = (state, action) => {
     case actions.IDB_CONNECTION_READY: {
       return produce(state, (draft) => {
         draft.idbConnection = action.connection;
-
-        console.log("here");
       });
     }
 

renderer/providers/Store/useIdb.js

@@ -9,7 +9,7 @@ const useIdb = (dispatch) => {
       upgrade(db, oldVersion, newVersion, transaction) {
         switch(oldVersion) {
           case 0:
-            const collectionStore = db.createObjectStore('collection', { keyPath: 'id' });
+            const collectionStore = db.createObjectStore('collection', { keyPath: 'uid' });
             collectionStore.createIndex('transactionIdIndex', 'transaction_id');
         }
       }