mobile: refactor navigation

2026-02-24 04:00:59 +01:00 · 2025-11-24 11:25:56 +05:00
parent 927488706f
commit c19d9ea315
9 changed files with 106 additions and 68 deletions
--- a/apps/mobile/app/hooks/use-actions.tsx
+++ b/apps/mobile/app/hooks/use-actions.tsx
@@ -69,6 +69,7 @@ import { eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
+import { resetStoredState } from "./use-stored-state";

 export type ActionId =
  | "select"
@@ -705,6 +706,26 @@ export const useActions = ({
                type: item.type
              }
        );
+
+        resetStoredState(
+          "app-home-navigtion-key",
+          isHomepage
+            ? undefined
+            : {
+                name:
+                  item.type === "notebook"
+                    ? "Notebook"
+                    : item.type === "tag"
+                      ? "TaggedNotes"
+                      : item.type === "color"
+                        ? "ColorNotes"
+                        : undefined,
+                params: {
+                  item: item,
+                  id: item.id
+                }
+              }
+        );
      }
    });
  }
--- a/apps/mobile/app/hooks/use-stored-state.ts
+++ b/apps/mobile/app/hooks/use-stored-state.ts
@@ -44,6 +44,17 @@ export function useStoredValue<T>(
    },
    reset() {
      MMKV.removeItem(refKey);
+      setValue(initialValue);
    }
  };
 }
+
+export function resetStoredState(forKey: string, value?: any) {
+  if (value) {
+    MMKV.setMap(`storedState:${forKey}`, {
+      value: value
+    });
+  } else {
+    MMKV.removeItem(`storedState:${forKey}`);
+  }
+}
--- a/apps/mobile/app/navigation/navigation-stack.tsx
+++ b/apps/mobile/app/navigation/navigation-stack.tsx
@@ -21,7 +21,6 @@ import { useThemeColors } from "@notesnook/theme";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
-import { db } from "../common/database";
 import { hideAllTooltips } from "../hooks/use-tooltip";
 import SettingsService from "../services/settings";
 import useNavigationStore, {
@@ -33,6 +32,7 @@ import { rootNavigatorRef } from "../utils/global-refs";
 import Navigation from "../services/navigation";
 import { isFeatureAvailable } from "@notesnook/common";
 import { useStoredValue } from "../hooks/use-stored-state";
+import { db } from "../common/database";

 const RootStack = createNativeStackNavigator();
 const AppStack = createNativeStackNavigator();
@@ -64,9 +64,12 @@ const AppNavigation = React.memo(
        ? DEFAULT_HOME
        : undefined
    );
-
    const loading = useSettingStore((state) => state.isAppLoading);

+    if (!home.value && !homepageV2) {
+      home.value = DEFAULT_HOME;
+    }
+
    React.useEffect(() => {
      if (!homepageV2 || loading) return;
      (async () => {
@@ -76,67 +79,70 @@ const AppNavigation = React.memo(
            SettingsService.setProperty("homepageV2", undefined);
          }
        });
-        switch (homepageV2.type) {
-          case "notebook":
-            {
-              const notebook = await db.notebooks.notebook(homepageV2.id);
-              if (notebook) {
+
+        if (!home.value) {
+          switch (homepageV2.type) {
+            case "notebook":
+              {
+                const notebook = await db.notebooks.notebook(homepageV2.id);
+                if (notebook) {
+                  home.value = {
+                    name: "Notebook",
+                    params: {
+                      item: notebook,
+                      id: notebook.id,
+                      title: notebook.title
+                    }
+                  };
+                  return;
+                }
+              }
+              break;
+            case "color": {
+              const color = await db.colors.color(homepageV2.id);
+              if (color) {
                home.value = {
-                  name: "Notebook",
+                  name: "ColoredNotes",
                  params: {
-                    item: notebook,
-                    id: notebook.id,
-                    title: notebook.title
+                    item: color,
+                    id: color.id,
+                    title: color.title
                  }
                };
                return;
              }
-            }
-            break;
-          case "color": {
-            const color = await db.colors.color(homepageV2.id);
-            if (color) {
-              home.value = {
-                name: "ColoredNotes",
-                params: {
-                  item: color,
-                  id: color.id,
-                  title: color.title
-                }
-              };
-              return;
-            }

-            break;
-          }
-          case "tag": {
-            const tag = await db.tags.tag(homepageV2.id);
-            if (tag) {
-              home.value = {
-                name: "TaggedNotes",
-                params: {
-                  item: tag,
-                  id: tag.id,
-                  title: tag.title
-                }
-              };
+              break;
+            }
+            case "tag": {
+              const tag = await db.tags.tag(homepageV2.id);
+              if (tag) {
+                home.value = {
+                  name: "TaggedNotes",
+                  params: {
+                    item: tag,
+                    id: tag.id,
+                    title: tag.title
+                  }
+                };
+                return;
+              }
+              break;
+            }
+            case "default":
+              {
+                home.value = DEFAULT_HOME;
+              }
              return;
-            }
-            break;
          }
-          case "default":
-            {
-              home.value = DEFAULT_HOME;
-            }
-            return;
+
+          home.value = undefined;
+          setTimeout(() => {
+            home.value = DEFAULT_HOME;
+          });
        }
-
-        home.value = undefined;
-        setTimeout(() => {
-          home.value = DEFAULT_HOME;
-        });
      })();
-    }, [homepageV2, loading]);
+    }, [homepageV2, loading, home.value]);

    React.useEffect(() => {
      if (!home) return;
--- a/apps/mobile/app/screens/notebook/index.tsx
+++ b/apps/mobile/app/screens/notebook/index.tsx
@@ -41,6 +41,7 @@ import { View } from "react-native";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Notebooks } from "../../components/sheets/notebooks";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { rootNavigatorRef } from "../../utils/global-refs";

 const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
  const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
@@ -109,7 +110,6 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
      }

      if (data) params.current = data;
-      params.current.title = params.current.item.title;

      try {
        const notebook = await db.notebooks?.notebook(
@@ -127,7 +127,11 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
          await notes.item(0, resolveItems);
          syncWithNavigation();
        } else {
-          Navigation.goBack();
+          if (rootNavigatorRef.canGoBack()) {
+            Navigation.goBack();
+          } else {
+            Navigation.navigate("Notes");
+          }
        }
        setLoading(false);
      } catch (e) {
@@ -190,7 +194,7 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
          }}
          id={params.current.item?.id}
          renderedInRoute="Notebook"
-          headerTitle={params.current.title}
+          headerTitle={params.current.item.title}
          loading={loading}
          CustomLisHeader={
            <NotebookHeader
@@ -254,7 +258,6 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
  const { currentRoute, focusedRouteId } = useNavigationStore.getState();
  if (currentRoute === "Notebooks") {
    Navigation.push("Notebook", {
-      title: item.title,
      item: item,
      canGoBack
    });
@@ -278,7 +281,6 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
    } else {
      // Push a new route
      Navigation.push("Notebook", {
-        title: item.title,
        item: item,
        canGoBack
      });
@@ -286,7 +288,6 @@ NotebookScreen.navigate = async (item: Notebook, canGoBack?: boolean) => {
  } else {
    // Push a new route anyways
    Navigation.push("Notebook", {
-      title: item.title,
      item: item,
      canGoBack
    });
--- a/apps/mobile/app/screens/notes/colored.tsx
+++ b/apps/mobile/app/screens/notes/colored.tsx
@@ -64,8 +64,7 @@ ColoredNotes.navigate = (item: Color, canGoBack: boolean) => {

  Navigation.push<"ColoredNotes">("ColoredNotes", {
    item: item,
-    canGoBack,
-    title: toCamelCase(item.title)
+    canGoBack
  });
 };

--- a/apps/mobile/app/screens/notes/index.tsx
+++ b/apps/mobile/app/screens/notes/index.tsx
@@ -42,6 +42,7 @@ import useNavigationStore, {
 import { setOnFirstSave } from "./common";
 import { strings } from "@notesnook/intl";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { rootNavigatorRef } from "../../utils/global-refs";

 export interface RouteProps<T extends RouteName> extends NavigationProps<T> {
  get: (
@@ -146,12 +147,15 @@ const NotesPage = ({
          ](params.current.item.id);

          if (!item) {
-            Navigation.goBack();
+            if (rootNavigatorRef.canGoBack()) {
+              Navigation.goBack();
+            } else {
+              Navigation.navigate("Notes");
+            }
            return;
          }

          params.current.item = item;
-          params.current.title = item.title;
        }

        if (notes.placeholders.length === 0) setLoadingNotes(false);
--- a/apps/mobile/app/screens/notes/monographs.tsx
+++ b/apps/mobile/app/screens/notes/monographs.tsx
@@ -63,8 +63,7 @@ Monographs.get = async (params?: NotesScreenParams, grouped = true) => {
 Monographs.navigate = (canGoBack?: boolean) => {
  Navigation.navigate<"Monographs">("Monographs", {
    item: { type: "monograph" } as any,
-    canGoBack: canGoBack as boolean,
-    title: strings.dataTypesPluralCamelCase.monograph()
+    canGoBack: canGoBack as boolean
  });
 };
 export default Monographs;
--- a/apps/mobile/app/screens/notes/tagged.tsx
+++ b/apps/mobile/app/screens/notes/tagged.tsx
@@ -65,8 +65,7 @@ TaggedNotes.navigate = (item: Tag, canGoBack?: boolean) => {

  Navigation.push<"TaggedNotes">("TaggedNotes", {
    item: item,
-    canGoBack,
-    title: item.title
+    canGoBack
  });
 };

--- a/apps/mobile/app/stores/use-navigation-store.ts
+++ b/apps/mobile/app/stores/use-navigation-store.ts
@@ -37,13 +37,11 @@ export type GenericRouteParam = {

 export type NotebookScreenParams = {
  item: Notebook;
-  title: string;
  canGoBack?: boolean;
 };

 export type NotesScreenParams = {
  item: Note | Notebook | Tag | Color | TrashItem | Reminder;
-  title: string;
  canGoBack?: boolean;
 };