refactor Navigation

apps/mobile/src/components/Header/HeaderLeftMenu.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
 import { SIZE } from '../../utils/SizeUtils';
 import { ActionIcon } from '../ActionIcon';
 
@@ -10,10 +10,10 @@ export const HeaderLeftMenu = () => {
 
   const onLeftButtonPress = () => {
     if (headerMenuState) {
-      NavigationService.openDrawer()
+      Navigation.openDrawer()
       return;
     }
-    NavigationService.goBack();
+    Navigation.goBack();
   };
 
   return (

apps/mobile/src/components/Header/HeaderRightMenu.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
 import {dWidth} from '../../utils';
 import {SIZE} from '../../utils/SizeUtils';
 import {ActionIcon} from '../ActionIcon';
@@ -18,7 +18,9 @@ export const HeaderRightMenu = () => {
 
       <ActionIcon
         onPress={async () => {
-          NavigationService.navigate('Search');
+          Navigation.navigate('Search',{
+            menu:false
+          });
         }}
         name="magnify"
         size={SIZE.xxxl}

apps/mobile/src/components/Header/index.js

@@ -3,7 +3,8 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
+
 import { dWidth } from '../../utils';
 import { eScrollEvent } from '../../utils/Events';
 import { SIZE } from '../../utils/SizeUtils';
@@ -71,7 +72,9 @@ export const Header = ({root}) => {
         <View style={styles.rightBtnContainer}>
           <ActionIcon
             onPress={async () => {
-              NavigationService.navigate('Search');
+              Navigation.navigate('Search',{
+                menu:false
+              });
             }}
             name="tune"
             size={SIZE.xxxl}

apps/mobile/src/components/Menu/ColorSection.js

@@ -1,22 +1,21 @@
 import React, {useEffect} from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {eSendEvent} from '../../services/EventManager';
-import {refreshNotesPage} from '../../utils/Events';
+import Navigation from '../../services/Navigation';
-import NavigationService from '../../services/Navigation';
-import {PressableButton} from '../PressableButton';
 import {COLORS_NOTE} from '../../utils/Colors';
-import {SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {refreshNotesPage} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
+import {PressableButton} from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
-import {sideMenuRef} from '../../utils/Refs';
 
 export const ColorSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
-  const {colors, colorNotes, currentScreen} = state;
+  const {colors, colorNotes, headerTextState} = state;
 
   useEffect(() => {
-    dispatch({type: Actions.TAGS});
+    dispatch({type: Actions.COLORS});
   }, []);
 
   const onPress = (item) => {
@@ -26,26 +25,13 @@ export const ColorSection = ({noTextMode}) => {
       color: item,
       menu: true,
     };
-    dispatch({
+    Navigation.navigate('NotesPage', params, {
-      type: Actions.HEADER_VERTICAL_MENU,
+      heading: item.title.slice(0, 1).toUpperCase() + item.title.slice(1),
-      state: false,
+      id: item.id,
+      type: 'color',
     });
-
-    dispatch({
-      type: Actions.CURRENT_SCREEN,
-      screen: item.title,
-    });
-
-    dispatch({
-      type: Actions.HEADER_TEXT_STATE,
-      state: {
-        heading: item.title.slice(0, 1).toUpperCase() + item.title.slice(1),
-      },
-    });
-
-    NavigationService.navigate('NotesPage', params);
     eSendEvent(refreshNotesPage, params);
-    NavigationService.closeDrawer();
+    Navigation.closeDrawer();
   };
 
   return (
@@ -57,7 +43,7 @@ export const ColorSection = ({noTextMode}) => {
         <PressableButton
           key={item.id}
           color={
-            currentScreen === item.title
+            headerTextState.id === item.id && item.type === headerTextState.type
               ? COLORS_NOTE[item.title]
               : 'transparent'
           }

apps/mobile/src/components/Menu/MenuListItem.js

@@ -2,12 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
-import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
-import NavigationService from '../../services/Navigation';
-import {eClearSearch} from '../../utils/Events';
-import { sideMenuRef } from '../../utils/Refs';
 import {SIZE} from '../../utils/SizeUtils';
 import {PressableButton} from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
@@ -17,25 +13,22 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
   const {currentScreen, colors} = state;
 
   const _onPress = (event) => {
-    if (!ignore && currentScreen !== item.name.toLowerCase()) {
-      dispatch({
-        type: Actions.HEADER_TEXT_STATE,
-        state: {
-          heading: item.name,
-        },
-      });
-      eSendEvent(eClearSearch);
-    }
-    if (item.name.toLowerCase() === currentScreen) {
-      console.log('already here');
-    }
     if (item.func) {
       item.func();
     } else {
-      NavigationService.navigate(item.name);
+      Navigation.navigate(
+        item.name,
+        {
+          menu: true,
+        },
+        {
+          heading: item.name,
+          id: item.name.toLowerCase() + '_navigation',
+        },
+      );
     }
     if (item.close) {
-      NavigationService.closeDrawer()
+      Navigation.closeDrawer();
     }
   };
 

apps/mobile/src/components/Menu/TagsSection.js

@@ -5,7 +5,7 @@ import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
 import {getElevation} from '../../utils';
 import {db} from '../../utils/DB';
 import {refreshNotesPage} from '../../utils/Events';
@@ -28,28 +28,20 @@ export const TagsSection = () => {
 
   const onPress = (item) => {
     let params;
-
-    dispatch({
-      type: Actions.HEADER_TEXT_STATE,
-      state: {
-        heading: item.title,
-        id: item.id,
-      },
-    });
     if (item.type === 'notebook') {
       params = {
         notebook: item,
         title: item.title,
-        root: true,
         menu: true,
       };
+
       if (currentScreen === 'notebook') {
         rootNavigatorRef.current?.setParams(params);
       } else {
-        NavigationService.navigate('Notebook', {
+        Navigation.navigate('Notebook', params, {
-          notebook: item,
+          heading: item.title,
-          title: item.title,
+          id: item.id,
-          root: true,
+          type: item.type,
         });
       }
     } else if (item.type === 'tag') {
@@ -59,19 +51,23 @@ export const TagsSection = () => {
         type: 'tag',
         menu: true,
       };
-
+      Navigation.navigate('NotesPage', params, {
-      NavigationService.navigate('NotesPage', params);
+        heading: '#' + item.title,
-
+        id: item.id,
+        type: item.type,
+      });
       eSendEvent(refreshNotesPage, params);
     } else {
       params = {...item, menu: true};
-
+      Navigation.navigate('NotesPage', params, {
-      NavigationService.navigate('NotesPage', params);
+        heading: item.title,
-
+        id: item.id,
+        type: item.type,
+      });
       eSendEvent(refreshNotesPage, params);
     }
 
-    NavigationService.closeDrawer();
+    Navigation.closeDrawer();
   };
 
   return (
@@ -81,6 +77,12 @@ export const TagsSection = () => {
       }}>
       <FlatList
         data={menuPins}
+        style={{
+          flexGrow: 1,
+        }}
+        contentContainerStyle={{
+          flexGrow: 1,
+        }}
         ListEmptyComponent={
           <View
             style={{
@@ -102,8 +104,9 @@ export const TagsSection = () => {
             </Paragraph>
           </View>
         }
+        keyExtractor={(item, index) => item.id}
         renderItem={({item, index}) => (
-          <PinItem key={item.id} item={item} index={index} onPress={onPress} />
+          <PinItem item={item} index={index} onPress={onPress} />
         )}
       />
     </View>
@@ -112,7 +115,7 @@ export const TagsSection = () => {
 
 const PinItem = ({item, index, onPress}) => {
   const [state, dispatch] = useTracked();
-  const {colors, headerTextState} = state;
+  const {colors, headerTextState, currentScreen} = state;
   const [visible, setVisible] = useState(false);
 
   return (
@@ -143,7 +146,11 @@ const PinItem = ({item, index, onPress}) => {
         </BaseDialog>
       )}
       <PressableButton
-        color={headerTextState.id === item.id ? colors.shade : 'transparent'}
+        color={
+          headerTextState.id === item.id && headerTextState.type === item.type
+            ? colors.shade
+            : 'transparent'
+        }
         selectedColor={colors.accent}
         alpha={!colors.night ? -0.02 : 0.02}
         opacity={0.12}

apps/mobile/src/components/NoteItem/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import {Dimensions, Text, View, TouchableOpacity} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {ActionIcon} from '../ActionIcon';
+import { Actions } from '../../provider/Actions';
-import {ActionSheetEvent, updateEvent} from '../DialogManager/recievers';
+import Navigation from '../../services/Navigation';
-import {timeSince} from '../../utils/TimeUtils';
+import { COLORS_NOTE } from '../../utils/Colors';
-import {ph, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import { db } from '../../utils/DB';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/SizeUtils';
+import { timeSince } from '../../utils/TimeUtils';
+import { ActionIcon } from '../ActionIcon';
+import { ActionSheetEvent, updateEvent } from '../DialogManager/recievers';
 import Heading from '../Typography/Heading';
-import {db} from '../../utils/DB';
+import Paragraph from '../Typography/Paragraph';
-import {Actions} from '../../provider/Actions';
-import NavigationService from '../../services/Navigation';
-import {COLORS_NOTE} from '../../utils/Colors';
 
 export default class NoteItem extends React.Component {
   constructor(props) {
@@ -97,7 +97,7 @@ export default class NoteItem extends React.Component {
                     type: Actions.HEADER_STATE,
                     state: false,
                   });
-                  NavigationService.navigate('Notebook', {
+                  Navigation.navigate('Notebook', {
                     notebook: db.notebooks.notebook(item.notebook.id).data,
                     title: notebook.title,
                     root: true,

apps/mobile/src/components/NotebookItem/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
-import {ActionSheetEvent} from '../DialogManager/recievers';
+import { ph, pv, SIZE, WEIGHT } from '../../utils/SizeUtils';
+import { ActionIcon } from '../ActionIcon';
+import { ActionSheetEvent } from '../DialogManager/recievers';
 import Seperator from '../Seperator';
-import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
-import {ActionIcon} from '../ActionIcon';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -76,7 +76,7 @@ export const NotebookItem = ({
               item.topics.slice(1, 3).map((topic) => (
                 <TouchableOpacity
                   onPress={() => {
-                    NavigationService.navigate('NotesPage', {
+                    Navigation.navigate('NotesPage', {
                       ...topic,
                     });
                   }}

apps/mobile/src/components/SimpleList/NotebookItemWrapper.js

@@ -3,7 +3,7 @@ import {NotebookItem} from '../../components/NotebookItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
 
 export const NotebookItemWrapper = ({
   item,
@@ -38,30 +38,20 @@ export const NotebookItemWrapper = ({
       onLongPress();
       return;
     }
-
+    let routeName = isTopic ? 'NotesPage' : 'Notebook';
-    if (isTopic) {
+    let params = isTopic
-      NavigationService.navigate('NotesPage', {
+      ? {...item, menu: false}
-        ...item,
+      : {
-      });
+          menu: false,
-      return;
+          notebook: item,
-    }
+          title: item.title,
-
+        };
-    dispatch({
+    let headerState = {
-      type: Actions.HEADER_TEXT_STATE,
+      heading: item.title,
-      state: {
+      id: item.id,
-        heading: item.title,
+      type: item.type,
-      },
+    };
-    });
+    Navigation.navigate(routeName, params, headerState);
-    dispatch({
-      type: Actions.HEADER_STATE,
-      state: false,
-    });
-
-    NavigationService.navigate('Notebook', {
-      notebook: item,
-      title: item.title,
-      root: true,
-    });
   };
 
   return (

apps/mobile/src/components/SimpleList/index.js

@@ -7,7 +7,10 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
-import {initialWindowMetrics, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  initialWindowMetrics,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
@@ -74,9 +77,7 @@ const SimpleList = ({
   const loadData = () => {
     let mainData = [header, {type: 'empty'}];
     mainData =
-      !listData || listData.length === 0
+      !listData || listData.length === 0 ? mainData : [header, ...listData];
-        ? mainData
-        : [header, ...listData];
     setDataProvider(dataProvider.cloneWithRows(mainData));
   };
 
@@ -178,9 +179,9 @@ const SimpleList = ({
             type="transparent"
             fontSize={SIZE.md}
           />
-        ) : (
+        ) : loading ? (
           <ActivityIndicator color={colors.accent} />
-        )}
+        ) : null}
       </View>
     </View>
   );

apps/mobile/src/components/TagItem/index.js

@@ -1,26 +1,37 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {View} from 'react-native';
 import {PressableButton} from '../../components/PressableButton';
 import {useTracked} from '../../provider';
-import NavigationService from '../../services/Navigation';
+import Navigation from '../../services/Navigation';
-import {SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {SIZE} from '../../utils/SizeUtils';
 import {ActionIcon} from '../ActionIcon';
-import { ActionSheetEvent } from '../DialogManager/recievers';
+import {ActionSheetEvent} from '../DialogManager/recievers';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
 const TagItem = ({item, index}) => {
   const [state] = useTracked();
   const {colors} = state;
+
+  const onPress = () => {
+    Navigation.navigate(
+      'NotesPage',
+      {
+        type: 'tag',
+        title: item.title,
+        tag: item,
+      },
+      {
+        heading: '#' + item.title,
+        id: item.id,
+        type: item.type,
+      },
+    );
+  };
+
   return (
     <PressableButton
-      onPress={() => {
+      onPress={onPress}
-        NavigationService.navigate('NotesPage', {
-          type: 'tag',
-          title: item.title,
-          tag: item,
-        });
-      }}
       selectedColor={colors.nav}
       alpha={!colors.night ? -0.02 : 0.02}
       opacity={1}
@@ -31,8 +42,8 @@ const TagItem = ({item, index}) => {
         alignItems: 'center',
         borderBottomWidth: 1.5,
         borderBottomColor: colors.nav,
-        width:"100%",
+        width: '100%',
-        justifyContent:"space-between"
+        justifyContent: 'space-between',
       }}>
       <View>
         <Heading size={SIZE.md}>

apps/mobile/src/provider/Reducer.js

@@ -212,13 +212,10 @@ export const reducer = (state, action) => {
       };
     }
     case Actions.HEADER_TEXT_STATE: {
-      let stat = {
+    
-        ...state.headerTextState,
-        ...action.state,
-      };
       return {
         ...state,
-        headerTextState: stat,
+        headerTextState: action.state,
       };
     }
     case Actions.HEADER_VERTICAL_MENU: {

apps/mobile/src/services/Navigation.js

@@ -1,9 +1,63 @@
 import {DrawerActions, StackActions} from '@react-navigation/native';
+import {updateEvent} from '../components/DialogManager/recievers';
+import {Actions} from '../provider/Actions';
 import {rootNavigatorRef, sideMenuRef} from '../utils/Refs';
 
-function navigate(name, params) {
+let currentScreen = null;
+
+function getCurrentScreen() {
+  return currentScreen;
+}
+
+/**
+ * @typedef {Object} screenParams
+ * @property {string} heading
+ * @property {string} id
+ * @property {string} type
+ *
+ * @param {string} name
+ * @param {Object} params
+ * @param {screenParams} item
+ */
+
+function navigate(name, params, item) {
+  currentScreen = name;
+  setHeaderState(name, params, item);
   rootNavigatorRef.current?.navigate(name, params);
 }
+
+/**
+ * @typedef {Object} screenParams
+ * @property {string} heading
+ * @property {string} id
+ * @property {string} type
+ *
+ * @param {string} name
+ * @param {Object} params
+ * @param {screenParams} item
+ */
+function setHeaderState(name, params, item) {
+  currentScreen = name;
+  if (item) {
+    updateEvent({
+      type: Actions.HEADER_TEXT_STATE,
+      state: item,
+    });
+  }
+  if (name) {
+    updateEvent({
+      type: Actions.CURRENT_SCREEN,
+      screen: name.toLowerCase(),
+    });
+  }
+  if (params) {
+    updateEvent({
+      type: Actions.HEADER_STATE,
+      state: params.menu,
+    });
+  }
+}
+
 function goBack() {
   rootNavigatorRef.current?.goBack();
 }
@@ -13,10 +67,10 @@ function push(...args) {
 }
 
 function openDrawer() {
- sideMenuRef.current?.dispatch(DrawerActions.openDrawer());
+  sideMenuRef.current?.dispatch(DrawerActions.openDrawer());
 }
 function closeDrawer() {
-   sideMenuRef.current?.dispatch(DrawerActions.closeDrawer());
+  sideMenuRef.current?.dispatch(DrawerActions.closeDrawer());
 }
 
 export default {
@@ -25,4 +79,6 @@ export default {
   push,
   openDrawer,
   closeDrawer,
+  getCurrentScreen,
+  setHeaderState,
 };

apps/mobile/src/views/Favorites/index.js

@@ -1,54 +1,53 @@
-import React, { useCallback, useEffect } from 'react';
+import React, {useCallback, useEffect} from 'react';
-import { Placeholder } from '../../components/ListPlaceholders';
+import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
-import { eSendEvent } from "../../services/EventManager";
+import {DDS} from '../../services/DeviceDetection';
+import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from "../../utils/Events";
+import {eScrollEvent} from '../../utils/Events';
 export const Favorites = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {favorites} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
     eSendEvent(eScrollEvent, {name: 'Favorites', type: 'in'});
-    dispatch({
+    updateSearch();
-      type: Actions.HEADER_STATE,
+    if (DDS.isLargeTablet()) {
-      state: {
+      dispatch({
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
+        state: {
+          onPress: null,
+        },
+      });
+    }
+    if (!pageIsLoaded) {
+      pageIsLoaded = true;
+      return;
+    }
+    Navigation.setHeaderState(
+      'favorites',
+      {
         menu: true,
       },
-    });
+      {
-    dispatch({
+        heading: 'Favorites',
-      type: Actions.HEADER_TEXT_STATE,
+        id: 'favorites_navigation',
-      state: {
-        heading: "Favorites",
       },
-    });
+    );
-    updateSearch();
-
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress:null
-      },
-    });
-
-    dispatch({
-      type: Actions.CURRENT_SCREEN,
-      screen: 'favorites',
-    });
-    dispatch({type: Actions.FAVORITES});
   }, []);
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
     return () => {
+      pageIsLoaded = false;
       eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'back'});
       navigation.removeListener('focus', onFocus);
     };
-  },[]);
+  }, []);
-
-
 
   useEffect(() => {
     if (navigation.isFocused()) {
@@ -56,7 +55,6 @@ export const Favorites = ({route, navigation}) => {
     }
   }, [favorites]);
 
-
   const updateSearch = () => {
     SearchService.update({
       placeholder: 'Search in favorites',
@@ -73,9 +71,9 @@ export const Favorites = ({route, navigation}) => {
         dispatch({type: Actions.FAVORITES});
       }}
       placeholderData={{
-        heading:"Your Favorites",
+        heading: 'Your Favorites',
-        paragraph:"You have not added any notes to favorites yet.",
+        paragraph: 'You have not added any notes to favorites yet.',
-        button:null,
+        button: null,
       }}
       focused={() => navigation.isFocused()}
       placeholder={<Placeholder type="favorites" />}

apps/mobile/src/views/Folders/index.js

@@ -8,49 +8,50 @@ import {Actions} from '../../provider/Actions';
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {eSendEvent} from '../../services/EventManager';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from '../../utils/Events';
+import {eScrollEvent} from '../../utils/Events';
-
+import Navigation from '../../services/Navigation';
+import {DDS} from '../../services/DeviceDetection';
 
 export const Folders = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {notebooks} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
     eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'});
-    dispatch({
-      type: Actions.HEADER_STATE,
-      state: true,
-    });
-    dispatch({
-      type: Actions.HEADER_TEXT_STATE,
-      state: {
-        heading: 'Notebooks',
-      },
-    });
-
-    dispatch({type: Actions.NOTEBOOKS});
-    dispatch({
-      type: Actions.CURRENT_SCREEN,
-      screen: 'notebooks',
-    });
-
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress:_onPressBottomButton
-      },
-    });
-
     updateSearch();
-  }, [notebooks]);
+    if (DDS.isLargeTablet()) {
+      dispatch({
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
+        state: {
+          onPress: _onPressBottomButton,
+        },
+      });
+    }
+    if (!pageIsLoaded) {
+      pageIsLoaded = true;
+      return;
+    }
+    Navigation.setHeaderState(
+      'notebooks',
+      {
+        menu: true,
+      },
+      {
+        heading: 'Notebooks',
+        id: 'notebooks_navigation',
+      },
+    );
+  }, []);
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
     return () => {
+      pageIsLoaded = false;
       navigation.removeListener('focus', onFocus);
       eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'back'});
     };
-  },[]);
+  }, []);
 
   useEffect(() => {
     if (navigation.isFocused()) {
@@ -60,7 +61,7 @@ export const Folders = ({route, navigation}) => {
 
   const updateSearch = () => {
     SearchService.update({
-      placeholder: 'Search in notebooks',
+      placeholder: 'Type a keyword to search in notebooks',
       data: notebooks,
       type: 'notebooks',
     });

apps/mobile/src/views/Home/index.js

@@ -1,46 +1,49 @@
-import React, { useCallback, useEffect } from 'react';
+import React, {useCallback, useEffect} from 'react';
-import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
+import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
-import { DDS } from '../../services/DeviceDetection';
+import {DDS} from '../../services/DeviceDetection';
-import { eSendEvent } from '../../services/EventManager';
+import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { scrollRef } from '../../utils';
+import {scrollRef} from '../../utils';
-import { eOnLoadNote, eScrollEvent } from '../../utils/Events';
+import {eOnLoadNote, eScrollEvent} from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
+import {tabBarRef} from '../../utils/Refs';
 
 export const Home = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {notes, loading} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
-    eSendEvent(eScrollEvent, {name: 'Notes', type: 'in'});
-    dispatch({
-      type: Actions.HEADER_TEXT_STATE,
-      state: {
-        heading: 'Notes',
-      },
-    });
-    dispatch({
-      type: Actions.CURRENT_SCREEN,
-      screen: 'notes',
-    });
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress: _onPressBottomButton,
-      },
-    });
-
-    dispatch({
-      type: Actions.HEADER_STATE,
-      state: true,
-    });
     updateSearch();
+    eSendEvent(eScrollEvent, {name: 'Notes', type: 'in'});
+    if (DDS.isLargeTablet()) {
+      dispatch({
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
+        state: {
+          onPress: _onPressBottomButton,
+        },
+      });
+    }
 
-    dispatch({type: Actions.COLORS});
+    if (!pageIsLoaded) {
-    dispatch({type: Actions.NOTES});
+      pageIsLoaded = true;
+      return;
+    }
+
+    Navigation.setHeaderState(
+      'notes',
+      {
+        menu: true,
+      },
+      {
+        heading: 'Notes',
+        id: 'notes_navigation',
+      },
+    );
+    //dispatch({type: Actions.NOTES});
   }, [notes]);
 
   const onBlur = useCallback(() => {}, []);
@@ -49,6 +52,7 @@ export const Home = ({route, navigation}) => {
     navigation.addListener('focus', onFocus);
     navigation.addListener('blur', onBlur);
     return () => {
+      pageIsLoaded = false;
       eSendEvent(eScrollEvent, {name: 'Notes', type: 'back'});
       navigation.removeListener('focus', onFocus);
       navigation.removeListener('blur', onBlur);

apps/mobile/src/views/Notebook/index.js

@@ -1,29 +1,30 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import {AddTopicEvent} from '../../components/DialogManager/recievers';
+import { AddTopicEvent } from '../../components/DialogManager/recievers';
 import SimpleList from '../../components/SimpleList';
-import {useTracked} from '../../provider';
+import { useTracked } from '../../provider';
-import {Actions} from '../../provider/Actions';
 import {
   eSendEvent,
   eSubscribeEvent,
-  eUnSubscribeEvent,
+  eUnSubscribeEvent
 } from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import {db} from '../../utils/DB';
+import { db } from '../../utils/DB';
-import {eOnNewTopicAdded, eScrollEvent} from '../../utils/Events';
+import { eOnNewTopicAdded, eScrollEvent } from '../../utils/Events';
 
 export const Notebook = ({route, navigation}) => {
   const [, dispatch] = useTracked();
   const [topics, setTopics] = useState(route.params.notebook.topics);
   let params = route.params;
+  let pageIsLoaded = false;
 
   const onLoad = () => {
     setTopics(db.notebooks.notebook(route.params.notebook.id).data.topics);
   };
 
   useEffect(() => {
-    onFocus();
+    onLoad();
   }, [route.params]);
 
   useEffect(() => {
@@ -33,39 +34,29 @@ export const Notebook = ({route, navigation}) => {
     };
   }, []);
 
-  const onFocus = () => {
+  const onFocus = async () => {
     eSendEvent(eScrollEvent, {name: params.title, type: 'in'});
-    onLoad();
-    dispatch({
-      type: Actions.HEADER_TEXT_STATE,
-      state: {
-        heading: params.title,
-        id:params.notebook.id
-      },
-    });
-
     updateSearch();
-    dispatch({
+    if (!pageIsLoaded) {
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
+      console.log('returning since page is not loaded');
-      state: {
+      pageIsLoaded = true;
-        onPress: _onPressBottomButton,
+      return;
-      },
+    }
-    });
+    Navigation.setHeaderState('notebooks', params, {
-
+      heading: params.title,
-    dispatch({
+      id: params.notebook.id,
-      type: Actions.CURRENT_SCREEN,
+      type: 'notebook',
-      screen: 'notebook',
     });
   };
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
-
     return () => {
       eSendEvent(eScrollEvent, {name: params.title, type: 'back'});
       navigation.removeListener('focus', onFocus);
     };
   }, []);
+
   useEffect(() => {
     if (navigation.isFocused()) {
       updateSearch();
@@ -111,43 +102,3 @@ export const Notebook = ({route, navigation}) => {
 };
 
 export default Notebook;
-/* 
-const RenderItem = ({item, index}) => {
-  const [state, dispatch] = useTracked();
-  const {colors,selectionMode } = state;
-
-  return (
-    <SelectionWrapper
-      onPress={() => {
-        NavigationService.navigate('NotesPage', {
-          ...item,
-        });
-      }}
-      onLongPress={() => {
-        if (!selectionMode) {
-          dispatch({
-            type: Actions.SELECTION_MODE,
-            enabled: !selectionMode,
-          });
-        }
-        dispatch({
-          type: Actions.SELECTED_ITEMS,
-          item: item,
-        });
-      }}
-      item={item}>
-      <NotebookItem
-        isTopic={true}
-        customStyle={{
-          width: '100%',
-          marginHorizontal: 0,
-        }}
-        selectionMode={selectionMode}
-        item={item}
-        index={index}
-        colors={colors}
-      />
-    </SelectionWrapper>
-  );
-};
- */

apps/mobile/src/views/Notes/index.js

@@ -10,6 +10,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent,
 } from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import {editing} from '../../utils';
 import {COLORS_NOTE} from '../../utils/Colors';
@@ -18,9 +19,10 @@ import {eOnLoadNote, eScrollEvent, refreshNotesPage} from '../../utils/Events';
 import {tabBarRef} from '../../utils/Refs';
 
 export const Notes = ({route, navigation}) => {
-  const [state, dispatch] = useTracked();
+  const [, dispatch] = useTracked();
   const [notes, setNotes] = useState([]);
   let params = route.params ? route.params : null;
+  let pageIsLoaded = false;
 
   useEffect(() => {
     eSubscribeEvent(refreshNotesPage, init);
@@ -50,15 +52,7 @@ export const Notes = ({route, navigation}) => {
     if (allNotes && allNotes.length > 0) {
       setNotes([...allNotes]);
     }
-
+    updateSearch();
-    dispatch({
-      type: Actions.CURRENT_SCREEN,
-      screen: params.title,
-    });
-    dispatch({
-      type: Actions.HEADER_STATE,
-      state: params.menu,
-    });
     dispatch({
       type: Actions.CONTAINER_BOTTOM_BUTTON,
       state: {
@@ -67,23 +61,25 @@ export const Notes = ({route, navigation}) => {
       },
     });
 
-    updateSearch();
+    if (!pageIsLoaded) {
-    dispatch({
+      pageIsLoaded = true;
-      type: Actions.HEADER_TEXT_STATE,
+      return;
-      state: {
+    }
-        heading:
+
-          params.type === 'tag'
+    Navigation.setHeaderState('Notes', params, {
-            ? '#' + params.title
+      heading:
-            : params.title.slice(0, 1).toUpperCase() + params.title.slice(1),
+        params.type === 'tag'
-        id:
+          ? '#' + params.title
-          params.type === 'tag'
+          : params.title.slice(0, 1).toUpperCase() + params.title.slice(1),
-            ? params.tag.id
+      id:
-            : params.type === 'topic'
+        params.type === 'tag'
-            ? params.id
+          ? params.tag.id
-            : params.type === 'color'
+          : params.type === 'topic'
-            ? params.color.title
+          ? params.id
-            : null,
+          : params.type === 'color'
-      },
+          ? params.color.id
+          : null,
+      type: params.type,
     });
   };
 

apps/mobile/src/views/Search/index.js

@@ -1,35 +1,41 @@
-import React, { useCallback, useEffect } from 'react';
+import React, {useCallback, useEffect} from 'react';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
-import { inputRef } from '../../utils/Refs';
+import SearchService from '../../services/SearchService';
-import { sleep } from '../../utils/TimeUtils';
+import {inputRef} from '../../utils/Refs';
+import {sleep} from '../../utils/TimeUtils';
 
 export const Search = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, searchResults} = state;
+  const {searchResults} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
+    sleep(300).then(() => inputRef.current?.focus());
+    if (!pageIsLoaded) {
+      console.log('returning since page is not loaded search');
+      pageIsLoaded = true;
+      return;
+    }
     dispatch({
       type: Actions.CURRENT_SCREEN,
       screen: 'search',
     });
-
     dispatch({
       type: Actions.HEADER_STATE,
       state: false,
     });
-
+    pageIsLoaded = true;
-
-    sleep(300).then(() => inputRef.current?.focus());
   }, []);
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
     return () => {
+      pageIsLoaded = false;
       navigation.removeListener('focus', onFocus);
     };
-  },[]);
+  }, []);
 
   return (
     <>
@@ -42,7 +48,7 @@ export const Search = ({route, navigation}) => {
         CustomHeader={true}
         placeholderData={{
           heading: 'Search',
-          paragraph: 'Type a keyword to search in notes.',
+          paragraph: SearchService.getSearchInformation().placeholder,
           button: null,
         }}
       />

apps/mobile/src/views/Settings/index.js

@@ -62,6 +62,7 @@ import {sleep} from '../../utils/TimeUtils';
 import Paragraph from '../../components/Typography/Paragraph';
 import Heading from '../../components/Typography/Heading';
 import {enabled} from 'react-native-privacy-snapshot';
+import Navigation from '../../services/Navigation';
 
 let menuRef = createRef();
 export const Settings = ({navigation}) => {
@@ -72,6 +73,7 @@ export const Settings = ({navigation}) => {
     biometryEnrolled: false,
     isBiometryAvailable: false,
   });
+  let pageIsLoaded = false;
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     dispatch({type: Actions.THEME, colors: newColors});
@@ -85,27 +87,16 @@ export const Settings = ({navigation}) => {
 
   const onFocus = useCallback(() => {
     eSendEvent(eScrollEvent, {name: 'Settings', type: 'in'});
-    dispatch({
-      type: Actions.HEADER_STATE,
-      state: true,
-    });
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress: null,
-      },
-    });
 
-    dispatch({
+    if (DDS.isLargeTablet()) {
-      type: Actions.HEADER_TEXT_STATE,
+      dispatch({
-      state: {
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
-        heading: 'Settings',
+        state: {
-      },
+          onPress: null,
-    });
+        },
-    dispatch({
+      });
-      type: Actions.CURRENT_SCREEN,
+    }
-      screen: 'settings',
+
-    });
     eSendEvent(eUpdateSearchState, {
       placeholder: '',
       data: [],
@@ -113,6 +104,21 @@ export const Settings = ({navigation}) => {
       type: '',
       color: null,
     });
+
+    if (!pageIsLoaded) {
+      pageIsLoaded = true;
+      return;
+    }
+    Navigation.setHeaderState(
+      'settings',
+      {
+        menu: true,
+      },
+      {
+        heading: 'Settings',
+        id: 'settings_navigation',
+      },
+    );
   }, []);
 
   const checkVaultStatus = useCallback(() => {
@@ -148,6 +154,7 @@ export const Settings = ({navigation}) => {
     eSubscribeEvent('vaultUpdated', () => checkVaultStatus());
     navigation.addListener('focus', onFocus);
     return () => {
+      pageIsLoaded = false;
       eSendEvent(eScrollEvent, {name: 'Settings', type: 'back'});
       eUnSubscribeEvent('vaultUpdated', () => checkVaultStatus());
       navigation.removeListener('focus', onFocus);
@@ -970,9 +977,7 @@ export const Settings = ({navigation}) => {
                 'global',
                 6000,
                 () => {
-                  NavigationService.navigate('Login', {
+                  eSendEvent(eOpenLoginDialog);
-                    root: true,
-                  });
                 },
                 'Login',
               );

apps/mobile/src/views/Tags/index.js

@@ -1,52 +1,54 @@
-import React, { useCallback, useEffect } from 'react';
+import React, {useCallback, useEffect} from 'react';
-import { Placeholder } from '../../components/ListPlaceholders';
+import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
-import { eSendEvent } from '../../services/EventManager';
+import {DDS} from '../../services/DeviceDetection';
+import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from '../../utils/Events';
+import {eScrollEvent} from '../../utils/Events';
 
 export const Tags = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {tags} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
-    eSendEvent(eScrollEvent, {name:'Tags', type: 'in'});
+    eSendEvent(eScrollEvent, {name: 'Tags', type: 'in'});
-    dispatch({
+    if (DDS.isLargeTablet()) {
-      type: Actions.HEADER_STATE,
+      dispatch({
-      state: true,
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
-    });
+        state: {
-    dispatch({
+          onPress: null,
-      type: Actions.HEADER_TEXT_STATE,
+        },
-      state: {
+      });
-        heading: 'Tags',
+    }
-      },
-    });
-
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress:null
-      },
-    });
-
     updateSearch();
-    dispatch({type: Actions.TAGS});
+    if (!pageIsLoaded) {
-    dispatch({
+      pageIsLoaded = true;
-      type: Actions.CURRENT_SCREEN,
+      return;
-      screen: 'tags',
+    }
-    });
+    Navigation.setHeaderState(
+      'Tags',
+      {
+        menu: true,
+      },
+      {
+        heading: 'Tags',
+        id: 'tags_navigation',
+      },
+    );
   }, []);
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
     return () => {
-      eSendEvent(eScrollEvent, {name:'Tags', type: 'back'});
+      pageIsLoaded = false;
+      eSendEvent(eScrollEvent, {name: 'Tags', type: 'back'});
       navigation.removeListener('focus', onFocus);
     };
-  },[]);
+  }, []);
-
 
   useEffect(() => {
     if (navigation.isFocused()) {
@@ -54,7 +56,6 @@ export const Tags = ({route, navigation}) => {
     }
   }, [tags]);
 
-
   const updateSearch = () => {
     SearchService.update({
       placeholder: 'Search in tags',
@@ -63,16 +64,15 @@ export const Tags = ({route, navigation}) => {
     });
   };
 
-
   return (
     <SimpleList
       data={tags}
       type="tags"
       focused={() => navigation.isFocused()}
       placeholderData={{
-        heading:"Your Tags",
+        heading: 'Your Tags',
-        paragraph:"You have not created any tags for your notes yet.",
+        paragraph: 'You have not created any tags for your notes yet.',
-        button:null,
+        button: null,
       }}
       placeholder={<Placeholder type="tags" />}
       placeholderText="Tags added to notes appear here"
@@ -81,5 +81,3 @@ export const Tags = ({route, navigation}) => {
 };
 
 export default Tags;
-
-

apps/mobile/src/views/Trash/index.js

@@ -6,47 +6,49 @@ import {Placeholder} from '../../components/ListPlaceholders';
 import SimpleList from '../../components/SimpleList';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
+import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
 import {eScrollEvent} from '../../utils/Events';
 
 export const Trash = ({route, navigation}) => {
   const [state, dispatch] = useTracked();
   const {trash} = state;
+  let pageIsLoaded = false;
 
   const onFocus = useCallback(() => {
     eSendEvent(eScrollEvent, {name: 'Trash', type: 'in'});
-    dispatch({
+    if (DDS.isLargeTablet()) {
-      type: Actions.HEADER_STATE,
+      dispatch({
-      state: true,
+        type: Actions.CONTAINER_BOTTOM_BUTTON,
-    });
+        state: {
-    dispatch({
+          onPress: null,
-      type: Actions.HEADER_TEXT_STATE,
+        },
-      state: {
+      });
-        heading: 'Trash',
+    }
-      },
-    });
-
-    dispatch({
-      type: Actions.CONTAINER_BOTTOM_BUTTON,
-      state: {
-        onPress: null,
-      },
-    });
-
     updateSearch();
-    dispatch({
+    if (!pageIsLoaded) {
-      type: Actions.TRASH,
+      pageIsLoaded = true;
-    });
+      return;
-    dispatch({
+    }
-      type: Actions.CURRENT_SCREEN,
+    Navigation.setHeaderState(
-      screen: 'trash',
+      'trash',
-    });
+      {
+        menu: true,
+      },
+      {
+        heading: 'Trash',
+        id: 'trash_navigation',
+      },
+    );
   }, []);
 
   useEffect(() => {
     navigation.addListener('focus', onFocus);
     return () => {
+      pageIsLoaded = false;
+
       eSendEvent(eScrollEvent, {name: 'Trash', type: 'back'});
       navigation.removeListener('focus', onFocus);
     };