refactor: cleanup appstore and convert it into a class

apps/web/src/app.js

@@ -13,7 +13,7 @@ import NavigationMenu from "./components/navigationmenu";
 function App() {
   const [show, setShow] = usePersistentState("isContainerVisible", true);
   const refreshColors = useStore(store => store.refreshColors);
-  const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);
+  const isFocusMode = useAppStore(store => store.isFocusMode);
   const initUser = useUserStore(store => store.init);
 
   useEffect(() => {
@@ -22,13 +22,13 @@ function App() {
   }, [refreshColors, initUser]);
 
   useEffect(() => {
-    if (isFocusModeEnabled) {
+    if (isFocusMode) {
       setShow(false);
     } else {
       setShow(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFocusModeEnabled]);
+  }, [isFocusMode]);
 
   return (
     <ThemeProvider>

apps/web/src/components/editor/index.js

@@ -30,10 +30,9 @@ function Editor() {
   const saveSession = useStore(store => store.saveSession);
   const newSession = useStore(store => store.newSession);
   const reopenLastSession = useStore(store => store.reopenLastSession);
-  const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);
+  const isFocusMode = useAppStore(store => store.isFocusMode);
   const hideProperties = useAppStore(store => store.hideProperties);
   const quillRef = useRef();
-
   useEffect(() => {
     // move the toolbar outside (easiest way)
     const toolbar = document.querySelector(".ql-toolbar.ql-snow");
@@ -52,11 +51,11 @@ function Editor() {
       width={["0%", "0%", "100%"]}
       initial={{ marginRight: 0 }}
       animate={{
-        marginRight: isFocusModeEnabled ? "25%" : 0
+        marginRight: isFocusMode ? "25%" : 0
       }}
       transition={{ duration: 0.3, ease: "easeIn" }}
       sx={{
-        marginLeft: isFocusModeEnabled ? "25%" : 0,
+        marginLeft: isFocusMode ? "25%" : 0,
         position: "relative"
       }}
     >

apps/web/src/components/editor/titlebox.js

@@ -50,14 +50,8 @@ class TitleBox extends React.Component {
           alignItems="center"
           pr={3}
           onClick={() => {
-            const { enableFocusMode, disableFocusMode } = appStore.getState();
-            if (!this.state.isFocusMode) {
-              enableFocusMode();
-              this.setState({ isFocusMode: true });
-            } else {
-              disableFocusMode();
-              this.setState({ isFocusMode: false });
-            }
+            appStore.getState().toggleFocusMode();
+            this.setState({ isFocusMode: !this.state.isFocusMode });
           }}
         >
           {this.state.isFocusMode ? (

apps/web/src/components/navigation-menu/index.js

@@ -17,7 +17,7 @@ import { objectMap } from "../../utils/object";
 function NavigationMenu(props) {
   const { toggleNavigationContainer } = props;
   const [selectedRoute, setSelectedRoute] = usePersistentState("route", "home");
-  const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);
+  const isFocusMode = useAppStore(store => store.isFocusMode);
   const colors = useStore(store => store.colors);
   const isSideMenuOpen = useStore(store => store.isSideMenuOpen);
 
@@ -32,8 +32,8 @@ function NavigationMenu(props) {
       justifyContent="space-between"
       initial={{ opacity: 1 }}
       animate={{
-        opacity: isFocusModeEnabled ? 0 : 1,
-        visibility: isFocusModeEnabled ? "hidden" : "visible"
+        opacity: isFocusMode ? 0 : 1,
+        visibility: isFocusMode ? "hidden" : "visible"
       }}
       transition={{ duration: 0.3, ease: "easeOut" }}
       sx={{

apps/web/src/components/properties/index.js

@@ -23,7 +23,7 @@ function Properties() {
   const hideProperties = useAppStore(store => store.hideProperties);
   //const showProperties = useAppStore(store => store.showProperties);
   const arePropertiesVisible = useAppStore(store => store.arePropertiesVisible);
-  const isFocusModeEnabled = useAppStore(store => store.isFocusModeEnabled);
+  const isFocusMode = useAppStore(store => store.isFocusMode);
 
   function changeState(prop, value) {
     setSession(state => {
@@ -32,7 +32,7 @@ function Properties() {
   }
 
   return (
-    !isFocusModeEnabled && (
+    !isFocusMode && (
       <>
         <motion.div
           animate={{ x: arePropertiesVisible ? 0 : 800 }}

apps/web/src/stores/app-store.js

@@ -1,114 +1,37 @@
 import createStore from "../common/store";
 import { db } from "../common";
-import { showPasswordDialog } from "../components/dialogs/passworddialog";
 import { store as noteStore } from "./note-store";
 import { store as notebookStore } from "./notebook-store";
 import { store as trashStore } from "./trash-store";
+import BaseStore from "./index";
 
-function appStore(set, get) {
-  return {
-    isSideMenuOpen: false,
-    isFocusModeEnabled: false,
-    arePropertiesVisible: false,
-    isSelectionMode: false,
-    shouldSelectAll: false,
-    selectedItems: [],
-    colors: [],
-    refreshApp: function() {
-      noteStore.getState().refresh();
-      notebookStore.getState().refresh();
-      noteStore.getState().refreshSelectedContext();
-      trashStore.getState().refresh();
-      get().refreshColors();
-    },
-    closeSideMenu: function() {
-      set(state => {
-        state.isSideMenuOpen = false;
-      });
-    },
-    openSideMenu: function() {
-      set(state => {
-        state.isSideMenuOpen = true;
-      });
-    },
-    refreshColors: function() {
-      set(state => {
-        state.colors = db.colors.all;
-      });
-    },
-    enableFocusMode: function() {
-      set(state => {
-        state.isFocusModeEnabled = true;
-      });
-    },
-    disableFocusMode: function() {
-      set(state => {
-        state.isFocusModeEnabled = false;
-      });
-    },
-    hideProperties: function() {
-      set(state => {
-        state.arePropertiesVisible = false;
-      });
-    },
-    showProperties: function() {
-      set(state => {
-        state.arePropertiesVisible = true;
-      });
-    },
-    enterSelectionMode: function() {
-      set(state => {
-        state.isSelectionMode = true;
-        state.shouldSelectAll = false;
-      });
-    },
-    exitSelectionMode: function() {
-      set(state => {
-        state.isSelectionMode = false;
-        state.shouldSelectAll = false;
-        state.selectedItems = [];
-      });
-    },
-    selectItem: function(item) {
-      const index = get().selectedItems.findIndex(v => item.id === v.id);
-      set(state => {
-        if (index >= 0) {
-          state.selectedItems.splice(index, 1);
-        } else {
-          state.selectedItems.push(item);
-        }
-      });
-      if (get().selectedItems.length <= 0) {
-        get().exitSelectionMode();
-      }
-    },
-    setSelectedItems: function(items) {
-      set(state => {
-        state.selectedItems = items;
-      });
-    },
-    selectAll() {
-      if (!get().isSelectionMode) return;
-      set(state => {
-        state.shouldSelectAll = true;
-      });
-    },
-    createVault: function() {
-      return showPasswordDialog("create_vault", password =>
-        db.vault.create(password)
-      );
-    },
-    unlockVault: function() {
-      return showPasswordDialog("unlock_vault", password => {
-        return db.vault
-          .unlock(password)
-          .then(() => true)
-          .catch(() => false);
-      });
-    }
+class AppStore extends BaseStore {
+  // default state
+  isSideMenuOpen = false;
+  isFocusMode = false;
+  colors = [];
+
+  refresh = () => {
+    noteStore.getState().refresh();
+    notebookStore.getState().refresh();
+    noteStore.getState().refreshSelectedContext();
+    trashStore.getState().refresh();
+    this.refreshColors();
+  };
+
+  refreshColors = () => {
+    this.set(state => (state.colors = db.colors.all));
+  };
+
+  toggleFocusMode = () => {
+    this.set(state => (state.isFocusMode = !state.isFocusMode));
+  };
+
+  toggleSideMenu = () => {
+    this.set(state => (state.isSideMenuOpen = !state.isSideMenuOpen));
   };
 }
 
-const [useStore, store] = createStore(appStore);
+const [useStore, store] = createStore(AppStore);
 
 export { useStore, store };

apps/web/src/stores/index.js

@@ -0,0 +1,12 @@
+class BaseStore {
+  static new(set, get) {
+    return new this(set, get);
+  }
+
+  constructor(set, get) {
+    this.set = set;
+    this.get = get;
+  }
+}
+
+export default BaseStore;