feat: load workspaces from idb

packages/bruno-app/src/components/Workspaces/WorkspaceConfigurer/index.js

@@ -19,7 +19,7 @@ const WorkspaceConfigurer = ({onClose}) => {
     >
       <ul className="mb-2" >
         {workspaces && workspaces.length && workspaces.map((workspace) => (
-          <WorkspaceItem workspace={workspace} />
+          <WorkspaceItem workspace={workspace} key={workspace.uid} />
         ))}
       </ul>
       {openAddModal && <AddWorkspace onClose={() => setOpenAddModal(false)}/>}

packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js

@@ -26,7 +26,7 @@ const WorkspaceSelector = () => {
             <IconBox size={18} strokeWidth={1.5}/>
           </span>
           <span>
-            {activeWorkspace.name}
+            {activeWorkspace ? activeWorkspace.name : ''}
           </span>
         </div>
         <IconCaretDown className="caret" size={14} strokeWidth={2}/>
@@ -45,7 +45,7 @@ const WorkspaceSelector = () => {
       <div className="items-center cursor-pointer">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-end'>
           {workspaces && workspaces.length && workspaces.map((workspace) => (
-            <div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)}>
+            <div className="dropdown-item" onClick={() => handleSelectWorkspace(workspace)} key={workspace.uid}>
               <span>{workspace.name}</span>
             </div>
           ))}

packages/bruno-app/src/providers/App/useIdb.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { openDB } from 'idb';
 import { idbConnectionReady } from 'providers/ReduxStore/slices/app'
 import { loadCollectionsFromIdb } from 'providers/ReduxStore/slices/collections'
+import { loadWorkspacesFromIdb } from 'providers/ReduxStore/slices/workspaces/actions'
 import { useDispatch } from 'react-redux';
 
 const useIdb = () => {
@@ -9,12 +10,14 @@ const useIdb = () => {
 
   useEffect(() => {
     let dbName = `grafnode`;
-    let connection = openDB(dbName, 1, {
+    let connection = openDB(dbName, 2, {
       upgrade(db, oldVersion, newVersion, transaction) {
         switch(oldVersion) {
           case 0:
             const collectionStore = db.createObjectStore('collection', { keyPath: 'uid' });
             collectionStore.createIndex('transactionIdIndex', 'transaction_id');
+          case 1:
+            const workspaceStore = db.createObjectStore('workspace', { keyPath: 'uid' });
         }
       }
     });
@@ -24,6 +27,7 @@ const useIdb = () => {
         window.__idb = connection;
         dispatch(idbConnectionReady());
         dispatch(loadCollectionsFromIdb());
+        dispatch(loadWorkspacesFromIdb());
       })
       .catch((err) => console.log(err));
   }, []);

packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js

@@ -0,0 +1,15 @@
+import { getWorkspacesFromIdb } from 'utils/idb/workspaces';
+import {
+  loadWorkspaces
+} from './index';
+
+export const loadWorkspacesFromIdb = () => (dispatch) => {
+  return new Promise((resolve, reject) => {
+    getWorkspacesFromIdb(window.__idb)
+      .then((workspaces) => dispatch(loadWorkspaces({
+        workspaces: workspaces
+      })))
+      .then(resolve)
+      .catch(reject);
+  });
+};

packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js

@@ -1,24 +1,31 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { each } from 'lodash';
 import { uuid } from 'utils/common';
 
 const initialState = {
-  workspaces: [{
-    uid: 123,
-    name: 'My Workspace'
-  },{
-    uid: 234,
-    name: 'workspace B'
-  },{
-    uid: 345,
-    name: 'workspace C'
-  }],
-  activeWorkspaceUid: 123
+  workspaces: [],
+  activeWorkspaceUid: null
 };
 
 export const workspacesSlice = createSlice({
   name: 'workspaces',
   initialState,
   reducers: {
+    loadWorkspaces: (state, action) => {
+      const workspaces = action.payload.workspaces;
+
+      if(!workspaces || !workspaces.length) {
+        const uid = uuid();
+        state.workspaces.push({
+          uid: uid,
+          name: 'My workspace'
+        });
+        state.activeWorkspaceUid = uid;
+        return;
+      }
+
+      each(workspaces, w => state.workspaces.push(w));
+    },
     selectWorkspace: (state, action) => {
       state.activeWorkspaceUid = action.payload.uid;
     },
@@ -45,6 +52,7 @@ export const workspacesSlice = createSlice({
 });
 
 export const {
+  loadWorkspaces,
   selectWorkspace,
   renameWorkspace,
   deleteWorkspace,

packages/bruno-app/src/utils/idb/workspaces.js

@@ -0,0 +1,55 @@
+import isArray from 'lodash/isArray';
+
+export const saveWorkspaceToIdb = (connection, workspace) => {
+  return new Promise((resolve, reject) => {
+    connection
+      .then((db) => {
+        let tx = db.transaction(`workspace`, 'readwrite');
+        let workspaceStore = tx.objectStore('workspace');
+
+        if(isArray(workspace)) {
+          for(let c of workspace) {
+            workspaceStore.put(c);
+          }
+        } else {
+          workspaceStore.put(workspace);
+        }
+
+        resolve();
+      })
+      .catch((err) => reject(err));
+  });
+};
+
+export const deleteWorkspaceInIdb = (connection, workspaceUid) => {
+  return new Promise((resolve, reject) => {
+    connection
+      .then((db) => {
+        let tx = db.transaction(`workspace`, 'readwrite');
+        tx.objectStore('workspace').delete(workspaceUid);
+
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      })
+      .catch((err) => reject(err));
+  });
+};
+
+export const getWorkspacesFromIdb = (connection) => {
+  return new Promise((resolve, reject) => {
+    connection
+      .then((db) => {
+        let tx = db.transaction('workspace');
+        let workspaceStore = tx.objectStore('workspace');
+        return workspaceStore.getAll();
+      })
+      .then((workspaces) => {
+        if(!Array.isArray(workspaces)) {
+          return new Error('IDB Corrupted');
+        }
+
+        return resolve(workspaces);
+      })
+      .catch((err) => reject(err));
+  });
+};