diff --git a/apps/mobile/src/components/Header/HeaderLeftMenu.js b/apps/mobile/src/components/Header/HeaderLeftMenu.js index 060b651c7..9b7bb1fea 100644 --- a/apps/mobile/src/components/Header/HeaderLeftMenu.js +++ b/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 ( diff --git a/apps/mobile/src/components/Header/HeaderRightMenu.js b/apps/mobile/src/components/Header/HeaderRightMenu.js index 4ce284712..9d3ae9496 100644 --- a/apps/mobile/src/components/Header/HeaderRightMenu.js +++ b/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 = () => { { - NavigationService.navigate('Search'); + Navigation.navigate('Search',{ + menu:false + }); }} name="magnify" size={SIZE.xxxl} diff --git a/apps/mobile/src/components/Header/index.js b/apps/mobile/src/components/Header/index.js index ceedaaef4..227f1e7fc 100644 --- a/apps/mobile/src/components/Header/index.js +++ b/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}) => { { - NavigationService.navigate('Search'); + Navigation.navigate('Search',{ + menu:false + }); }} name="tune" size={SIZE.xxxl} diff --git a/apps/mobile/src/components/Menu/ColorSection.js b/apps/mobile/src/components/Menu/ColorSection.js index 4f8766acc..8bea7a5d3 100644 --- a/apps/mobile/src/components/Menu/ColorSection.js +++ b/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 NavigationService from '../../services/Navigation'; -import {PressableButton} from '../PressableButton'; +import Navigation from '../../services/Navigation'; 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({ - type: Actions.HEADER_VERTICAL_MENU, - state: false, + Navigation.navigate('NotesPage', params, { + heading: item.title.slice(0, 1).toUpperCase() + item.title.slice(1), + 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}) => { { 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(); } }; diff --git a/apps/mobile/src/components/Menu/TagsSection.js b/apps/mobile/src/components/Menu/TagsSection.js index 7711c10a0..44719b97f 100644 --- a/apps/mobile/src/components/Menu/TagsSection.js +++ b/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', { - notebook: item, - title: item.title, - root: true, + Navigation.navigate('Notebook', params, { + heading: item.title, + id: item.id, + type: item.type, }); } } else if (item.type === 'tag') { @@ -59,19 +51,23 @@ export const TagsSection = () => { type: 'tag', menu: true, }; - - NavigationService.navigate('NotesPage', params); - + Navigation.navigate('NotesPage', params, { + heading: '#' + item.title, + id: item.id, + type: item.type, + }); eSendEvent(refreshNotesPage, params); } else { params = {...item, menu: true}; - - NavigationService.navigate('NotesPage', params); - + Navigation.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 = () => { }}> { } + keyExtractor={(item, index) => item.id} renderItem={({item, index}) => ( - + )} /> @@ -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}) => { )} ( { - NavigationService.navigate('NotesPage', { + Navigation.navigate('NotesPage', { ...topic, }); }} diff --git a/apps/mobile/src/components/SimpleList/NotebookItemWrapper.js b/apps/mobile/src/components/SimpleList/NotebookItemWrapper.js index e69734910..869dbaa1f 100644 --- a/apps/mobile/src/components/SimpleList/NotebookItemWrapper.js +++ b/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; } - - if (isTopic) { - NavigationService.navigate('NotesPage', { - ...item, - }); - return; - } - - dispatch({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: item.title, - }, - }); - dispatch({ - type: Actions.HEADER_STATE, - state: false, - }); - - NavigationService.navigate('Notebook', { - notebook: item, - title: item.title, - root: true, - }); + let routeName = isTopic ? 'NotesPage' : 'Notebook'; + let params = isTopic + ? {...item, menu: false} + : { + menu: false, + notebook: item, + title: item.title, + }; + let headerState = { + heading: item.title, + id: item.id, + type: item.type, + }; + Navigation.navigate(routeName, params, headerState); }; return ( diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js index 875f48133..6fad02d90 100644 --- a/apps/mobile/src/components/SimpleList/index.js +++ b/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 - ? mainData - : [header, ...listData]; + !listData || listData.length === 0 ? mainData : [header, ...listData]; setDataProvider(dataProvider.cloneWithRows(mainData)); }; @@ -178,9 +179,9 @@ const SimpleList = ({ type="transparent" fontSize={SIZE.md} /> - ) : ( + ) : loading ? ( - )} + ) : null} ); diff --git a/apps/mobile/src/components/TagItem/index.js b/apps/mobile/src/components/TagItem/index.js index eac61f90b..0772adc51 100644 --- a/apps/mobile/src/components/TagItem/index.js +++ b/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 {SIZE, WEIGHT} from '../../utils/SizeUtils'; +import Navigation from '../../services/Navigation'; +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 ( { - NavigationService.navigate('NotesPage', { - type: 'tag', - title: item.title, - tag: item, - }); - }} + onPress={onPress} 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%", - justifyContent:"space-between" + width: '100%', + justifyContent: 'space-between', }}> diff --git a/apps/mobile/src/provider/Reducer.js b/apps/mobile/src/provider/Reducer.js index aea456b04..caa214dc5 100644 --- a/apps/mobile/src/provider/Reducer.js +++ b/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: { diff --git a/apps/mobile/src/services/Navigation.js b/apps/mobile/src/services/Navigation.js index 014ac30ca..451d100c7 100755 --- a/apps/mobile/src/services/Navigation.js +++ b/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, }; diff --git a/apps/mobile/src/views/Favorites/index.js b/apps/mobile/src/views/Favorites/index.js index bead11ee8..5cb8e7553 100644 --- a/apps/mobile/src/views/Favorites/index.js +++ b/apps/mobile/src/views/Favorites/index.js @@ -1,54 +1,53 @@ -import React, { useCallback, useEffect } from 'react'; -import { Placeholder } from '../../components/ListPlaceholders'; +import React, {useCallback, useEffect} from 'react'; +import {Placeholder} from '../../components/ListPlaceholders'; import SimpleList from '../../components/SimpleList'; -import { useTracked } from '../../provider'; -import { Actions } from '../../provider/Actions'; -import { eSendEvent } from "../../services/EventManager"; +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"; +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({ - type: Actions.HEADER_STATE, - state: { + updateSearch(); + if (DDS.isLargeTablet()) { + dispatch({ + type: Actions.CONTAINER_BOTTOM_BUTTON, + state: { + onPress: null, + }, + }); + } + if (!pageIsLoaded) { + pageIsLoaded = true; + return; + } + Navigation.setHeaderState( + 'favorites', + { menu: true, }, - }); - dispatch({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: "Favorites", + { + heading: 'Favorites', + id: 'favorites_navigation', }, - }); - 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", - paragraph:"You have not added any notes to favorites yet.", - button:null, + heading: 'Your Favorites', + paragraph: 'You have not added any notes to favorites yet.', + button: null, }} focused={() => navigation.isFocused()} placeholder={} diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 1c4c9bd76..a3fa10f41 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/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', }); diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 9e21d0b16..86132b251 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -1,46 +1,49 @@ -import React, { useCallback, useEffect } from 'react'; -import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton'; +import React, {useCallback, useEffect} from 'react'; +import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton'; 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 {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 { scrollRef } from '../../utils'; -import { eOnLoadNote, eScrollEvent } from '../../utils/Events'; -import { tabBarRef } from '../../utils/Refs'; +import {scrollRef} from '../../utils'; +import {eOnLoadNote, eScrollEvent} from '../../utils/Events'; +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}); - dispatch({type: Actions.NOTES}); + if (!pageIsLoaded) { + 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); diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 72d970138..de2bdd91e 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -1,29 +1,30 @@ -import React, {useEffect, useState} from 'react'; -import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton'; -import {AddTopicEvent} from '../../components/DialogManager/recievers'; +import React, { useEffect, useState } from 'react'; +import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton'; +import { AddTopicEvent } from '../../components/DialogManager/recievers'; import SimpleList from '../../components/SimpleList'; -import {useTracked} from '../../provider'; -import {Actions} from '../../provider/Actions'; +import { useTracked } from '../../provider'; import { eSendEvent, eSubscribeEvent, - eUnSubscribeEvent, + eUnSubscribeEvent } from '../../services/EventManager'; +import Navigation from '../../services/Navigation'; import SearchService from '../../services/SearchService'; -import {db} from '../../utils/DB'; -import {eOnNewTopicAdded, eScrollEvent} from '../../utils/Events'; +import { db } from '../../utils/DB'; +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({ - type: Actions.CONTAINER_BOTTOM_BUTTON, - state: { - onPress: _onPressBottomButton, - }, - }); - - dispatch({ - type: Actions.CURRENT_SCREEN, - screen: 'notebook', + if (!pageIsLoaded) { + console.log('returning since page is not loaded'); + pageIsLoaded = true; + return; + } + Navigation.setHeaderState('notebooks', params, { + heading: params.title, + id: params.notebook.id, + type: '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 ( - { - NavigationService.navigate('NotesPage', { - ...item, - }); - }} - onLongPress={() => { - if (!selectionMode) { - dispatch({ - type: Actions.SELECTION_MODE, - enabled: !selectionMode, - }); - } - dispatch({ - type: Actions.SELECTED_ITEMS, - item: item, - }); - }} - item={item}> - - - ); -}; - */ diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index 19b98d006..b99a7bc33 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/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]); } - - dispatch({ - type: Actions.CURRENT_SCREEN, - screen: params.title, - }); - dispatch({ - type: Actions.HEADER_STATE, - state: params.menu, - }); + updateSearch(); dispatch({ type: Actions.CONTAINER_BOTTOM_BUTTON, state: { @@ -67,23 +61,25 @@ export const Notes = ({route, navigation}) => { }, }); - updateSearch(); - dispatch({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: - params.type === 'tag' - ? '#' + params.title - : params.title.slice(0, 1).toUpperCase() + params.title.slice(1), - id: - params.type === 'tag' - ? params.tag.id - : params.type === 'topic' - ? params.id - : params.type === 'color' - ? params.color.title - : null, - }, + if (!pageIsLoaded) { + pageIsLoaded = true; + return; + } + + Navigation.setHeaderState('Notes', params, { + heading: + params.type === 'tag' + ? '#' + params.title + : params.title.slice(0, 1).toUpperCase() + params.title.slice(1), + id: + params.type === 'tag' + ? params.tag.id + : params.type === 'topic' + ? params.id + : params.type === 'color' + ? params.color.id + : null, + type: params.type, }); }; diff --git a/apps/mobile/src/views/Search/index.js b/apps/mobile/src/views/Search/index.js index c544244a2..3f5698101 100644 --- a/apps/mobile/src/views/Search/index.js +++ b/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 { Actions } from '../../provider/Actions'; -import { inputRef } from '../../utils/Refs'; -import { sleep } from '../../utils/TimeUtils'; +import {useTracked} from '../../provider'; +import {Actions} from '../../provider/Actions'; +import SearchService from '../../services/SearchService'; +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, }); - - - sleep(300).then(() => inputRef.current?.focus()); + pageIsLoaded = true; }, []); 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, }} /> diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 67888836b..c17746aa0 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/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({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: 'Settings', - }, - }); - dispatch({ - type: Actions.CURRENT_SCREEN, - screen: 'settings', - }); + if (DDS.isLargeTablet()) { + dispatch({ + type: Actions.CONTAINER_BOTTOM_BUTTON, + state: { + onPress: null, + }, + }); + } + 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', { - root: true, - }); + eSendEvent(eOpenLoginDialog); }, 'Login', ); diff --git a/apps/mobile/src/views/Tags/index.js b/apps/mobile/src/views/Tags/index.js index 0eb4e8a3b..a08aa6d8d 100644 --- a/apps/mobile/src/views/Tags/index.js +++ b/apps/mobile/src/views/Tags/index.js @@ -1,52 +1,54 @@ -import React, { useCallback, useEffect } from 'react'; -import { Placeholder } from '../../components/ListPlaceholders'; +import React, {useCallback, useEffect} from 'react'; +import {Placeholder} from '../../components/ListPlaceholders'; import SimpleList from '../../components/SimpleList'; -import { useTracked } from '../../provider'; -import { Actions } from '../../provider/Actions'; -import { eSendEvent } from '../../services/EventManager'; +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'; +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'}); - dispatch({ - type: Actions.HEADER_STATE, - state: true, - }); - dispatch({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: 'Tags', - }, - }); - - dispatch({ - type: Actions.CONTAINER_BOTTOM_BUTTON, - state: { - onPress:null - }, - }); - + eSendEvent(eScrollEvent, {name: 'Tags', type: 'in'}); + if (DDS.isLargeTablet()) { + dispatch({ + type: Actions.CONTAINER_BOTTOM_BUTTON, + state: { + onPress: null, + }, + }); + } updateSearch(); - dispatch({type: Actions.TAGS}); - dispatch({ - type: Actions.CURRENT_SCREEN, - screen: 'tags', - }); + if (!pageIsLoaded) { + pageIsLoaded = true; + return; + } + 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 ( navigation.isFocused()} placeholderData={{ - heading:"Your Tags", - paragraph:"You have not created any tags for your notes yet.", - button:null, + heading: 'Your Tags', + paragraph: 'You have not created any tags for your notes yet.', + button: null, }} placeholder={} placeholderText="Tags added to notes appear here" @@ -81,5 +81,3 @@ export const Tags = ({route, navigation}) => { }; export default Tags; - - diff --git a/apps/mobile/src/views/Trash/index.js b/apps/mobile/src/views/Trash/index.js index 2bb557491..c8eeb437a 100644 --- a/apps/mobile/src/views/Trash/index.js +++ b/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({ - type: Actions.HEADER_STATE, - state: true, - }); - dispatch({ - type: Actions.HEADER_TEXT_STATE, - state: { - heading: 'Trash', - }, - }); - - dispatch({ - type: Actions.CONTAINER_BOTTOM_BUTTON, - state: { - onPress: null, - }, - }); - + if (DDS.isLargeTablet()) { + dispatch({ + type: Actions.CONTAINER_BOTTOM_BUTTON, + state: { + onPress: null, + }, + }); + } updateSearch(); - dispatch({ - type: Actions.TRASH, - }); - dispatch({ - type: Actions.CURRENT_SCREEN, - screen: 'trash', - }); + if (!pageIsLoaded) { + pageIsLoaded = true; + return; + } + Navigation.setHeaderState( + '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); };