Fix NotebookListScreen stuck when Notebook is not found

src/RootStackParamList.tsx

@@ -2,7 +2,7 @@
 import { StackNavigationProp } from "@react-navigation/stack";
 
 export type RootStackParamList = {
-  Home: undefined;
+  Home: { colUid: string } | undefined;
   Login: undefined;
   Signup: undefined;
   CollectionCreate: undefined;

src/screens/CollectionEditScreen.tsx

@@ -5,13 +5,13 @@ import * as React from "react";
 import { useSelector } from "react-redux";
 import { TextInput as NativeTextInput } from "react-native";
 import { HelperText, Paragraph } from "react-native-paper";
-import { useNavigation, RouteProp, useNavigationState, CommonActions } from "@react-navigation/native";
+import { useNavigation, RouteProp } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 
 import { useSyncGate } from "../SyncGate";
 import { useCredentials } from "../credentials";
 import { StoreState, useAsyncDispatch } from "../store";
-import { collectionUpload, pushMessage } from "../store/actions";
+import { collectionUpload, pushMessage, setActiveNotebook } from "../store/actions";
 
 import TextInput from "../widgets/TextInput";
 import ScrollView from "../widgets/ScrollView";
@@ -48,7 +48,6 @@ export default function CollectionEditScreen(props: PropsType) {
   const cacheCollections = useSelector((state: StoreState) => state.cache.collections);
   const syncGate = useSyncGate();
   const navigation = useNavigation<NavigationProp>();
-  const navigationState = useNavigationState((state) => (state.index > 0) ? state.routes[state.index - 1] : null);
   const etebase = useCredentials()!;
   const [loading, error, setPromise] = useLoading();
   const colType = C.colType;
@@ -126,17 +125,12 @@ export default function CollectionEditScreen(props: PropsType) {
         navigation.goBack();
       } else {
         dispatch(pushMessage({ message: "Notebook created", severity: "success" }));
+        dispatch(setActiveNotebook({ meta, uid: collection.uid }));
 
-        const previousScreen = navigationState?.name;
-        if (navigationState && previousScreen === "NoteCreate") {
-          // We change the colUid 
-          navigation.dispatch({
-            ...CommonActions.setParams({ colUid: collection.uid }),
-            source: navigationState.key,
-          });
+        if (navigation.canGoBack()) {
+          navigation.goBack();
         } else {
-          // We're gonna navigate to the notebook's page
-          navigation.replace("Collection", { colUid: collection.uid });
+          navigation.replace("Home");
         }
       }
     });

src/screens/NotebookListScreen.tsx

@@ -3,12 +3,11 @@ import { StyleSheet, FlatList, Platform, View, BackHandler } from "react-native"
 import { Appbar as PaperAppbar, List, FAB, Avatar } from "react-native-paper";
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { useDispatch, useSelector } from "react-redux";
-import * as Etebase from "etebase";
 
 import { useSyncGate } from "../SyncGate";
-import { StoreState } from "../store";
+import { Notebook, StoreState, useAsyncDispatch } from "../store";
 import { SyncManager } from "../sync/SyncManager";
-import { performSync } from "../store/actions";
+import { performSync, setActiveNotebook } from "../store/actions";
 import { useCredentials } from "../credentials";
 
 import NoteList from "../components/NoteList";
@@ -26,25 +25,27 @@ interface PropsType {
   active: boolean;
 }
 
-type Notebook = {
-  meta: Etebase.ItemMetadata;
-  uid: string;
-};
-
 export default function NotebookListScreen(props: PropsType) {
   const cacheCollections = useSelector((state: StoreState) => state.cache.collections);
+  const notebook = useSelector((state: StoreState) => state.activeNotebook);
   const notebooks: Notebook[] = React.useMemo(() => Array.from(cacheCollections
     .sort((a, b) => (a.meta!.name!.toUpperCase() >= b.meta!.name!.toUpperCase()) ? 1 : -1)
     .map(({ meta }, uid) => {return { meta, uid }})
     .values()
   ), [cacheCollections]);
   const navigation = useNavigation<DefaultNavigationProp>();
+  const dispatch = useAsyncDispatch();
   const syncGate = useSyncGate();
   const theme = useTheme();
 
   const { colUid, active } = props;
   const cacheCollection = (colUid) ? notebooks.find((col) => col.uid === colUid) : undefined;
-  const [notebook, setNotebook] = React.useState(cacheCollection);
+
+  React.useEffect(() => {
+    if (cacheCollection) {
+      dispatch(setActiveNotebook(cacheCollection));
+    }
+  }, [cacheCollection]);
 
   React.useEffect(() => {
     if (!active) {
@@ -54,16 +55,16 @@ export default function NotebookListScreen(props: PropsType) {
     navigation.setOptions({
       header: (props) => <Appbar {...props} menuFallback />,
       title: notebook?.meta.name || "Notebooks",
-      headerLeft: (notebook) ? () => <PaperAppbar.BackAction onPress={() => setNotebook(undefined)} /> : undefined,
+      headerLeft: (notebook) ? () => <PaperAppbar.BackAction onPress={() => dispatch(setActiveNotebook(cacheCollection))} /> : undefined,
       headerRight: () => (
         <RightAction colUid={notebook?.uid} />
       ),
     });
-  }, [active, navigation, notebook]);
+  }, [active, colUid, navigation, notebook]);
 
   const onBackPress = React.useCallback(() => {
     if (active && notebook) {
-      setNotebook(undefined);
+      dispatch(setActiveNotebook(undefined));
       return true;
     } else {
       return false;
@@ -81,6 +82,10 @@ export default function NotebookListScreen(props: PropsType) {
   }
 
   if (colUid && !cacheCollection) {
+    navigation.setOptions({
+      title: "Not Found",
+      headerLeft: () => <PaperAppbar.BackAction onPress={() => navigation.navigate("Home", { colUid: "" })} />,
+    });
     return <NotFound />;
   }
 
@@ -95,7 +100,7 @@ export default function NotebookListScreen(props: PropsType) {
           </View>
         )}
         onPress={() => {
-          setNotebook(item);
+          dispatch(setActiveNotebook(item));
         }}
       />
     );

src/store/actions.ts

@@ -6,7 +6,7 @@ import { createAction as origCreateAction, ActionMeta } from "redux-actions";
 import * as Etebase from "etebase";
 
 import { ConnectionInfo, SettingsType } from "./";
-import { Message } from "./reducers";
+import { Message, Notebook } from "./reducers";
 
 type FunctionAny = (...args: any[]) => any;
 
@@ -245,3 +245,14 @@ export const setSettings = createAction(
     return { ...settings };
   }
 );
+
+export const setActiveNotebook = createAction(
+  "SET_ACTIVE_NOTEBOOK",
+  (activeNotebook: Notebook | undefined) => {
+    if (activeNotebook) {
+      return { ...activeNotebook };
+    } else {
+      return null;
+    }
+  }
+);

src/store/construct.ts

@@ -14,9 +14,9 @@ import { List, Map as ImmutableMap } from "immutable";
 
 import {
   SettingsType,
-  fetchCount, syncCount, credentials, settingsReducer, syncStatusReducer, lastSyncReducer, connectionReducer, errorsReducer,
+  fetchCount, syncCount, credentials, settingsReducer, syncStatusReducer, lastSyncReducer, connectionReducer, errorsReducer, activeNotebookReducer,
   CredentialsData, SyncCollectionsData, SyncGeneralData,
-  collections, items, syncCollections, syncItems, syncGeneral, CachedCollectionsData, CachedItemsData, SyncItemsData, messagesReducer, Message,
+  collections, items, syncCollections, syncItems, syncGeneral, CachedCollectionsData, CachedItemsData, SyncItemsData, messagesReducer, Message, Notebook,
 } from "./reducers";
 
 export interface StoreState {
@@ -39,6 +39,7 @@ export interface StoreState {
   connection: NetInfoStateType | null;
   errors: List<Error>;
   messages: List<Message>;
+  activeNotebook: Notebook;
 }
 
 const settingsMigrations = {
@@ -168,6 +169,7 @@ const reducers = combineReducers({
   connection: connectionReducer,
   errors: errorsReducer,
   messages: messagesReducer,
+  activeNotebook: activeNotebookReducer,
 });
 
 export default reducers;

src/store/reducers.ts

@@ -369,3 +369,17 @@ export const settingsReducer = handleActions(
     },
   }
 );
+
+export type Notebook = {
+  meta: Etebase.ItemMetadata;
+  uid: string;
+};
+
+export const activeNotebookReducer = handleActions(
+  {
+    [actions.setActiveNotebook.toString()]: (_state: Notebook | null, action: Action<Notebook | null>) => {
+      return action.payload;
+    },
+  },
+  null
+);