mobile: fix notebook and tag shortcut count does not update in sidemenu

apps/mobile/app/components/properties/color-tags.tsx

@@ -27,7 +27,11 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import {
+  eSendEvent,
+  sendItemUpdateEvent,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
@@ -63,6 +67,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
     useRelationStore.getState().update();
     setColorNotes();
     Navigation.queueRoutesForUpdate();
+    sendItemUpdateEvent(item.id, "color");
     eSendEvent(refreshNotesPage);
   };
 
@@ -140,6 +145,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
           useRelationStore.getState().update();
           useMenuStore.getState().setColorNotes();
           Navigation.queueRoutesForUpdate();
+          sendItemUpdateEvent(color.id, "color");
           eSendEvent(refreshNotesPage);
         }}
       />

apps/mobile/app/components/sheets/publish-note/index.tsx

@@ -33,7 +33,11 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
 import { requestInAppReview } from "../../../services/app-review";
-import { presentSheet, ToastManager } from "../../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
 import { openLinkInBrowser } from "../../../utils/functions";
@@ -47,6 +51,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { useAsync } from "react-async-hook";
 import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import { eMenuItemUpdate } from "../../../utils/events";
 
 async function fetchMonographData(noteId: string) {
   const monographId = db.monographs.monograph(noteId);
@@ -55,7 +60,7 @@ async function fetchMonographData(noteId: string) {
     : undefined;
   return {
     monograph,
-    monographId,
+    monographId
   };
 }
 
@@ -112,6 +117,7 @@ const PublishNoteSheet = ({
 
         await monographData.execute();
         Navigation.queueRoutesForUpdate();
+        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
       requestInAppReview();
@@ -138,6 +144,7 @@ const PublishNoteSheet = ({
         await db.monographs.unpublish(note.id);
         monographData.execute();
         Navigation.queueRoutesForUpdate();
+        eSendEvent(eMenuItemUpdate);
         setPublishLoading(false);
       }
     } catch (e) {

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -24,18 +24,22 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useTotalNotes } from "../../hooks/use-db-item";
 
 import { db } from "../../common/database";
-import { eSubscribeEvent } from "../../services/event-manager";
+import {
+  eSubscribeEvent,
+  subscribeToItemUpdate
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import useNavigationStore, {
   RouteParams
 } from "../../stores/use-navigation-store";
-import { eAfterSync } from "../../utils/events";
+import { eAfterSync, eMenuItemUpdate } from "../../utils/events";
 import { SideMenuItem } from "../../utils/menu-items";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 import { useSideBarDraggingStore } from "./dragging-store";
+import { useRelationStore } from "../../stores/use-relation-store";
 
 export function MenuItem({
   item,
@@ -56,13 +60,19 @@ export function MenuItem({
   const totalNotes = useTotalNotes(
     item.dataType as "notebook" | "tag" | "color"
   );
+  const update = useRelationStore((state) => state.updater);
   const getTotalNotesRef = useRef(totalNotes.getTotalNotes);
   getTotalNotesRef.current = totalNotes.getTotalNotes;
-
   const menuItemCount = !item.data
     ? itemCount
     : totalNotes.totalNotes(item.data.id);
 
+  useEffect(() => {
+    if (item.data) {
+      getTotalNotesRef.current([item.data?.id]);
+    }
+  }, [update]);
+
   useEffect(() => {
     const onSyncComplete = async () => {
       try {
@@ -94,10 +104,20 @@ export function MenuItem({
         /** Empty */
       }
     };
-    const event = eSubscribeEvent(eAfterSync, onSyncComplete);
+    const events = [eSubscribeEvent(eAfterSync, onSyncComplete)];
+
+    if (!item.data) {
+      events.push(eSubscribeEvent(eMenuItemUpdate, onSyncComplete));
+    }
+
+    if (item.data?.id) {
+      events.push(
+        subscribeToItemUpdate(item?.data?.id, item?.data?.type, onSyncComplete)
+      );
+    }
     onSyncComplete();
     return () => {
-      event?.unsubscribe();
+      events?.forEach((e) => e?.unsubscribe());
     };
   }, [item.data, item.id]);
 
@@ -151,8 +171,8 @@ export function MenuItem({
               item.icon === "crown"
                 ? colors.static.yellow
                 : isFocused
-                ? colors.selected.icon
-                : colors.secondary.icon
+                  ? colors.selected.icon
+                  : colors.secondary.icon
             }
             size={AppFontSize.md}
           />

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -35,6 +35,7 @@ import AppIcon from "../ui/AppIcon";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
+import { useRelationStore } from "../../stores/use-relation-store";
 
 export const NotebookItem = ({
   index,
@@ -70,13 +71,14 @@ export const NotebookItem = ({
   const notebook = item.notebook;
   const isFocused = focused;
   const { totalNotes, getTotalNotes } = useTotalNotes("notebook");
+  const updater = useRelationStore(state => state.updater);
   const getTotalNotesRef = React.useRef(getTotalNotes);
   getTotalNotesRef.current = getTotalNotes;
   const { colors } = useThemeColors();
 
   useEffect(() => {
     getTotalNotesRef.current([item.notebook.id]);
-  }, [item.notebook]);
+  }, [item.notebook, updater]);
 
   useEffect(() => {
     const onNotebookUpdate = (id?: string) => {

apps/mobile/app/components/side-menu/side-menu-notebooks.tsx

@@ -40,6 +40,7 @@ import {
   useSideMenuNotebookTreeStore
 } from "./stores";
 import { LegendList } from "@legendapp/list";
+import { useRelationStore } from "../../stores/use-relation-store";
 useSideMenuNotebookSelectionStore.setState({
   multiSelect: true
 });
@@ -52,6 +53,7 @@ export const SideMenuNotebooks = () => {
   const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks);
   const searchTimer = React.useRef<NodeJS.Timeout>(undefined);
   const lastQuery = React.useRef<string>(undefined);
+  const updater = useRelationStore(state => state.updater);
   const loadRootNotebooks = React.useCallback(async () => {
     if (!filteredNotebooks) return;
     const _notebooks: Notebook[] = [];
@@ -66,9 +68,6 @@ export const SideMenuNotebooks = () => {
 
   const updateNotebooks = React.useCallback(() => {
     if (lastQuery.current) {
-      // useSideMenuNotebookTreeStore.setState({
-      //   isSearching: true
-      // });
       db.lookup
         .notebooks(lastQuery.current)
         .sorted(db.settings.getGroupOptions("notebooks"))
@@ -76,16 +75,13 @@ export const SideMenuNotebooks = () => {
           setFilteredNotebooks(filtered);
         });
     } else {
-      // useSideMenuNotebookTreeStore.setState({
-      //   isSearching: false
-      // });
       setFilteredNotebooks(notebooks);
     }
   }, [notebooks]);
 
   useEffect(() => {
     updateNotebooks();
-  }, [updateNotebooks]);
+  }, [updateNotebooks,updater]);
 
   useEffect(() => {
     (async () => {

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -38,6 +38,7 @@ import { SideMenuHeader } from "./side-menu-header";
 import { SideMenuListEmpty } from "./side-menu-list-empty";
 import { useSideMenuTagsSelectionStore } from "./stores";
 import { LegendList, LegendListRenderItemProps } from "@legendapp/list";
+import { useRelationStore } from "../../stores/use-relation-store";
 
 const TagItem = (props: {
   tags: VirtualizedGrouping<Tag>;
@@ -55,12 +56,13 @@ const TagItem = (props: {
   const totalNotes = useTotalNotes("tag");
   const totalNotesRef = React.useRef(totalNotes);
   totalNotesRef.current = totalNotes;
+  const updater = useRelationStore(state => state.updater);
 
   useEffect(() => {
     if (item?.id) {
       totalNotesRef.current?.getTotalNotes([item?.id]);
     }
-  }, [item]);
+  }, [item, updater]);
 
   return (
     <View

apps/mobile/app/screens/link-notebooks/index.tsx

@@ -45,7 +45,10 @@ import { AddNotebookSheet } from "../../components/sheets/add-notebook";
 import { Notice } from "../../components/ui/notice";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { isFeatureAvailable } from "@notesnook/common";
-import { ToastManager } from "../../services/event-manager";
+import {
+  sendItemUpdateEvent,
+  ToastManager
+} from "../../services/event-manager";
 import PaywallSheet from "../../components/sheets/paywall";
 
 const {
@@ -175,6 +178,7 @@ const LinkNotebooks = (props: NavigationProps<"LinkNotebooks">) => {
           updateNotebook(item.id);
         }
       }
+      sendItemUpdateEvent(id, "notebook");
     }
 
     Navigation.queueRoutesForUpdate();
@@ -237,9 +241,8 @@ const LinkNotebooks = (props: NavigationProps<"LinkNotebooks">) => {
               button={{
                 icon: "plus",
                 onPress: async () => {
-                  const notebooksFeature = await isFeatureAvailable(
-                    "notebooks"
-                  );
+                  const notebooksFeature =
+                    await isFeatureAvailable("notebooks");
                   if (!notebooksFeature.isAllowed) {
                     ToastManager.show({
                       message: notebooksFeature.error,
@@ -388,8 +391,8 @@ const NotebookItemWrapper = React.memo(
                 !selected
                   ? "selected"
                   : !state.initialState[item.notebook.id]
-                  ? undefined
-                  : "deselected"
+                    ? undefined
+                    : "deselected"
               );
           }}
           canDisableSelectionMode={false}

apps/mobile/app/screens/manage-tags/index.tsx

@@ -33,7 +33,10 @@ import { Pressable } from "../../components/ui/pressable";
 import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { ToastManager } from "../../services/event-manager";
+import {
+  sendItemUpdateEvent,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import {
   ItemSelection,
@@ -199,6 +202,7 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
       }
 
       useRelationStore.getState().update();
+      sendItemUpdateEvent(id, "tag");
       useTagStore.getState().refresh();
       setQuery(undefined);
     } catch (e) {
@@ -242,6 +246,7 @@ const ManageTags = (props: NavigationProps<"ManageTags">) => {
           console.error(e);
         }
       }
+      sendItemUpdateEvent(id, "tag");
       useTagStore.getState().refresh();
       useRelationStore.getState().update();
       refreshTags();
@@ -417,15 +422,15 @@ const TagItem = ({
             selection === "selected"
               ? "check-circle-outline"
               : selection === "intermediate"
-              ? "minus-circle-outline"
-              : "checkbox-blank-circle-outline"
+                ? "minus-circle-outline"
+                : "checkbox-blank-circle-outline"
           }
           name={
             selection === "selected"
               ? "check-circle-outline"
               : selection === "intermediate"
-              ? "minus-circle-outline"
-              : "checkbox-blank-circle-outline"
+                ? "minus-circle-outline"
+                : "checkbox-blank-circle-outline"
           }
         />
       )}

apps/mobile/app/screens/move-notes/index.tsx

@@ -39,6 +39,7 @@ import { createItemSelectionStore } from "../../stores/item-selection-store";
 import { updateNotebook } from "../../utils/notebooks";
 import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import { sendItemUpdateEvent } from "../../services/event-manager";
 const useItemSelectionStore = createItemSelectionStore(true);
 
 export const MoveNotes = (props: NavigationProps<"MoveNotes">) => {
@@ -198,6 +199,7 @@ export const MoveNotes = (props: NavigationProps<"MoveNotes">) => {
               );
 
               updateNotebook(currentNotebook.id);
+              sendItemUpdateEvent(currentNotebook.id, "notebook");
               Navigation.queueRoutesForUpdate();
               Navigation.goBack();
             }}
@@ -281,8 +283,8 @@ const SelectableNoteItem = React.memo(
                 selected
                   ? colors.selected.icon
                   : exists && !selected
-                  ? colors.static.red
-                  : colors.primary.icon
+                    ? colors.static.red
+                    : colors.primary.icon
               }
             />
           </>

apps/mobile/app/services/event-manager.ts

@@ -17,7 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { EventHandler, EventManager, Note, NoteContent } from "@notesnook/core";
+import {
+  EventHandler,
+  EventManager,
+  ItemType,
+  Note,
+  NoteContent
+} from "@notesnook/core";
 import Clipboard from "@react-native-clipboard/clipboard";
 import { RefObject } from "react";
 import { ActionSheetRef } from "react-native-actions-sheet";
@@ -84,6 +90,18 @@ export const eSubscribeEvent = <T = unknown>(
   return eventManager.subscribe(eventName, action);
 };
 
+export function sendItemUpdateEvent(id: string, type: ItemType) {
+  eSendEvent(`${type}:${id}`);
+}
+
+export function subscribeToItemUpdate(
+  id: string,
+  type: ItemType,
+  callback: EventHandler
+) {
+  return eSubscribeEvent(`${type}:${id}`, callback);
+}
+
 export const eUnSubscribeEvent = <T = unknown>(
   eventName: string,
   action: EventHandler

apps/mobile/app/stores/create-db-collection-store.ts

@@ -22,7 +22,8 @@ import create, { StoreApi, UseBoundStore } from "zustand";
 import { resolveItems } from "@notesnook/common";
 import { useSettingStore } from "./use-setting-store";
 import { DatabaseLogger } from "../common/database";
-import { ToastManager } from "../services/event-manager";
+import { eSendEvent, ToastManager } from "../services/event-manager";
+import { eMenuItemUpdate } from "../utils/events";
 
 export interface DBCollectionStore<Type extends Item> {
   items: VirtualizedGrouping<Type> | undefined;
@@ -67,6 +68,7 @@ export default function createDBCollectionStore<Type extends Item>({
           items,
           loading: false
         });
+        eSendEvent(eMenuItemUpdate);
       } catch (e) {
         DatabaseLogger.error(e as Error, "useDBCollectionStore.refresh", {
           useDBCollectionStore: "refresh"

apps/mobile/app/utils/events.js

@@ -176,3 +176,4 @@ export const eOnEnterEditor = "621";
 export const eOnExitEditor = "622";
 export const eEditorReset = "623";
 export const eAfterSync = "624";
+export const eMenuItemUpdate = "625";

apps/mobile/app/utils/functions.ts

@@ -211,6 +211,7 @@ export const deleteItems = async (
     useNotebookStore.getState().refresh();
   }
   useMenuStore.getState().setMenuPins();
+  useRelationStore.getState().update();
 };
 
 export const openLinkInBrowser = async (link: string) => {