mobile: fix topic sheet related state issues

apps/mobile/app/components/dialogs/add-topic/index.js

@@ -22,6 +22,7 @@ import { View } from "react-native";
 
 import { useMenuStore } from "../../../stores/use-menu-store";
 import {
+  eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
   ToastEvent
@@ -30,6 +31,7 @@ import Navigation from "../../../services/navigation";
 import { db } from "../../../common/database";
 import {
   eCloseAddTopicDialog,
+  eOnTopicSheetUpdate,
   eOpenAddTopicDialog
 } from "../../../utils/events";
 import { sleep } from "../../../utils/time";
@@ -40,6 +42,7 @@ import DialogHeader from "../../dialog/dialog-header";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { Toast } from "../../toast";
+import { useRelationStore } from "../../../stores/use-relation-store";
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
@@ -81,6 +84,8 @@ export class AddTopicDialog extends React.Component {
         Navigation.queueRoutesForUpdate("Notebooks", "Notebook", "TopicNotes");
         useMenuStore.getState().setMenuPins();
       });
+      eSendEvent(eOnTopicSheetUpdate);
+      useRelationStore.getState().update();
     } catch (e) {
       console.error(e);
     }

apps/mobile/app/components/list-items/note/index.js

@@ -27,6 +27,7 @@ import { db } from "../../../common/database";
 import Notebook from "../../../screens/notebook";
 import { TaggedNotes } from "../../../screens/notes/tagged";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
+import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
@@ -52,12 +53,14 @@ const showActionSheet = (item) => {
 
 function getNotebook(item) {
   const isTrash = item.type === "trash";
+  const currentId = useNavigationStore.getState().currentScreen.id;
   if (isTrash) return [];
   const items = [];
   const notebooks = db.relations.to(item, "notebook") || [];
 
   for (let notebook of notebooks) {
     if (items.length > 1) break;
+    if (notebook.id === currentId) continue;
     items.push(notebook);
   }
 
@@ -68,6 +71,7 @@ function getNotebook(item) {
       if (!notebook) continue;
       for (let topicId of nb.topics) {
         if (items.length > 1) break;
+        if (topicId === currentId) continue;
         const topic = notebook.topics.find((t) => t.id === topicId);
         if (!topic) continue;
         items.push(topic);
@@ -117,7 +121,12 @@ const NoteItem = ({
           >
             {notebooks?.map((item) => (
               <Button
-                title={item.title}
+                title={
+                  item.title.length > 25
+                    ? item.title.slice(0, 25) + "..."
+                    : item.title
+                }
+                tooltipText={item.title}
                 key={item.id}
                 height={25}
                 icon={item.type === "topic" ? "bookmark" : "book-outline"}

apps/mobile/app/components/sheets/add-to/index.js

@@ -21,13 +21,18 @@ import React, { useCallback, useEffect, useMemo } from "react";
 import { Keyboard, TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../../common/database";
-import { presentSheet, ToastEvent } from "../../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastEvent
+} from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import SearchService from "../../../services/search";
 import { useNotebookStore } from "../../../stores/use-notebook-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useThemeStore } from "../../../stores/use-theme-store";
+import { eOnTopicSheetUpdate } from "../../../utils/events";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
 import { presentDialog } from "../../dialog/functions";
@@ -296,6 +301,7 @@ const MoveNoteSheet = ({ note, actionSheetRef }) => {
       "Notebook"
     );
     setNotebooks();
+    eSendEvent(eOnTopicSheetUpdate);
     SearchService.updateAndSearch();
     actionSheetRef.current?.hide();
   };

apps/mobile/app/components/sheets/topic-sheet/index.tsx

@@ -66,16 +66,19 @@ import { Properties } from "../../properties";
 import Sort from "../sort";
 import { MMKV } from "../../../common/database/mmkv";
 
+type ConfigItem = { id: string; type: string };
 class TopicSheetConfig {
   static storageKey: "$$sp";
-  static makeId(item: any) {
+
+  static makeId(item: ConfigItem) {
     return `${TopicSheetConfig.storageKey}:${item.type}:${item.id}`;
   }
-  static get(item: any) {
+
+  static get(item: ConfigItem) {
     return MMKV.getInt(TopicSheetConfig.makeId(item)) || 0;
   }
 
-  static set(item: any, index = 0) {
+  static set(item: ConfigItem, index = 0) {
     MMKV.setInt(TopicSheetConfig.makeId(item), index);
   }
 }
@@ -109,17 +112,6 @@ export const TopicsSheet = () => {
     db.settings?.getGroupOptions("topics")
   );
 
-  const onUpdate = useCallback(() => {
-    setGroupOptions({ ...(db.settings?.getGroupOptions("topics") as any) });
-  }, []);
-
-  useEffect(() => {
-    eSubscribeEvent("groupOptionsUpdate", onUpdate);
-    return () => {
-      eUnSubscribeEvent("groupOptionsUpdate", onUpdate);
-    };
-  }, [onUpdate]);
-
   const onRequestUpdate = React.useCallback(
     (data?: NotebookScreenParams) => {
       if (!canShow) return;
@@ -139,9 +131,23 @@ export const TopicsSheet = () => {
     [canShow, notebook]
   );
 
+  const onUpdate = useCallback(() => {
+    setGroupOptions({ ...(db.settings?.getGroupOptions("topics") as any) });
+    onRequestUpdate();
+  }, [onRequestUpdate]);
+
+  useEffect(() => {
+    eSubscribeEvent("groupOptionsUpdate", onUpdate);
+    return () => {
+      eUnSubscribeEvent("groupOptionsUpdate", onUpdate);
+    };
+  }, [onUpdate]);
+
   useEffect(() => {
     const onTopicUpdate = () => {
-      onRequestUpdate();
+      setTimeout(() => {
+        onRequestUpdate();
+      }, 1);
     };
     eSubscribeEvent(eOnTopicSheetUpdate, onTopicUpdate);
     eSubscribeEvent(eOnNewTopicAdded, onRequestUpdate);
@@ -199,12 +205,20 @@ export const TopicsSheet = () => {
     if (canShow) {
       const id = isTopic ? currentScreen?.notebookId : currentScreen?.id;
       const notebook = db.notebooks?.notebook(id as string)?.data;
-      ref.current?.show(
-        TopicSheetConfig.get({
-          type: isTopic ? "topic" : "notebook",
-          id: currentScreen.id
-        })
-      );
+      const snapPoint = TopicSheetConfig.get({
+        type: isTopic ? "topic" : "notebook",
+        id: currentScreen.id as string
+      });
+      if (ref.current?.isOpen()) {
+        if (!isTopic) {
+          ref.current?.snapToIndex(snapPoint);
+        } else {
+          ref.current?.snapToIndex(0);
+        }
+      } else {
+        ref.current?.show(snapPoint);
+      }
+
       setTimeout(() => {
         if (notebook) {
           onRequestUpdate({
@@ -245,7 +259,7 @@ export const TopicsSheet = () => {
         TopicSheetConfig.set(
           {
             type: isTopic ? "topic" : "notebook",
-            id: currentScreen.id
+            id: currentScreen.id as string
           },
           index
         );
@@ -331,7 +345,7 @@ export const TopicsSheet = () => {
                       selection.length > 1 ? "topics" : "topics"
                     }`,
                     paragraph: `Are you sure you want to delete ${
-                      selection.length > 1 ? "these topicss?" : "this topics?"
+                      selection.length > 1 ? "these topics?" : "this topic?"
                     }`,
                     positiveText: "Delete",
                     negativeText: "Cancel",
@@ -452,8 +466,8 @@ const SelectionContext = createContext<{
 }>({
   selection: [],
   enabled: false,
-  setEnabled: (value: boolean) => {},
-  toggleSelection: (item: TopicType) => {}
+  setEnabled: (_value: boolean) => {},
+  toggleSelection: (_item: TopicType) => {}
 });
 const useSelection = () => useContext(SelectionContext);
 
@@ -489,7 +503,6 @@ const TopicItem = ({
           return;
         }
         TopicNotes.navigate(item, true);
-        sheetRef.current?.snapToIndex(0);
       }}
       customStyle={{
         justifyContent: "space-between",

apps/mobile/app/hooks/use-actions.js

@@ -52,7 +52,11 @@ import { useThemeStore } from "../stores/use-theme-store";
 import { useUserStore } from "../stores/use-user-store";
 import { toTXT } from "../utils";
 import { toggleDarkMode } from "../utils/color-scheme/utils";
-import { eOpenAddTopicDialog, eOpenLoginDialog } from "../utils/events";
+import {
+  eOnTopicSheetUpdate,
+  eOpenAddTopicDialog,
+  eOpenLoginDialog
+} from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { sleep } from "../utils/time";
 
@@ -512,6 +516,7 @@ export const useActions = ({ close = () => null, item }) => {
       "Notebook",
       "Notebooks"
     );
+    eSendEvent(eOnTopicSheetUpdate);
     close();
   }
 

apps/mobile/app/utils/functions.js

@@ -25,7 +25,7 @@ import SearchService from "../services/search";
 import { useSelectionStore } from "../stores/use-selection-store";
 import { useMenuStore } from "../stores/use-menu-store";
 import { db } from "../common/database";
-import { eClearEditor } from "./events";
+import { eClearEditor, eOnTopicSheetUpdate } from "./events";
 import { useRelationStore } from "../stores/use-relation-store";
 import { presentDialog } from "../components/dialog/functions";
 
@@ -38,11 +38,14 @@ function deleteConfirmDialog(items, type, context) {
       positiveText: "Delete",
       negativeText: "Cancel",
       positivePress: (value) => {
-        console.log(value);
-        resolve({ delete: true, deleteNotes: value });
+        setTimeout(() => {
+          resolve({ delete: true, deleteNotes: value });
+        });
       },
       onClose: () => {
-        resolve({ delete: false });
+        setTimeout(() => {
+          resolve({ delete: false });
+        });
       },
       context: context,
       check: {
@@ -196,6 +199,7 @@ export const deleteItems = async (item, context) => {
   useMenuStore.getState().setMenuPins();
   useMenuStore.getState().setColorNotes();
   SearchService.updateAndSearch();
+  eSendEvent(eOnTopicSheetUpdate);
 };
 
 export const openLinkInBrowser = async (link) => {