From a05649ae7da23e42b9f63465ee91ffaaa9f045ba Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Wed, 25 Nov 2020 19:33:55 +0500 Subject: [PATCH] fix pinned item highlighting & navigation --- .../mobile/src/components/Menu/TagsSection.js | 76 ++++++++++++------- apps/mobile/src/views/Home/index.js | 9 ++- apps/mobile/src/views/Notebook/index.js | 48 +++++------- apps/mobile/src/views/Notes/index.js | 16 +++- 4 files changed, 86 insertions(+), 63 deletions(-) diff --git a/apps/mobile/src/components/Menu/TagsSection.js b/apps/mobile/src/components/Menu/TagsSection.js index c2e91059a..1060742fc 100644 --- a/apps/mobile/src/components/Menu/TagsSection.js +++ b/apps/mobile/src/components/Menu/TagsSection.js @@ -1,50 +1,76 @@ import React, {useEffect, useState} from 'react'; import {FlatList, 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 NavigationService from '../../services/Navigation'; +import {getElevation} from '../../utils'; import {db} from '../../utils/DB'; import {refreshNotesPage} from '../../utils/Events'; +import {rootNavigatorRef} from '../../utils/Refs'; import {ph, pv, SIZE} from '../../utils/SizeUtils'; -import {NotebookItem} from '../NotebookItem'; +import BaseDialog from '../Dialog/base-dialog'; +import DialogButtons from '../Dialog/dialog-buttons'; +import DialogHeader from '../Dialog/dialog-header'; import {PressableButton} from '../PressableButton'; import Heading from '../Typography/Heading'; import Paragraph from '../Typography/Paragraph'; -import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import BaseDialog from '../Dialog/base-dialog'; -import DialogHeader from '../Dialog/dialog-header'; -import DialogButtons from '../Dialog/dialog-buttons'; -import {getElevation} from '../../utils'; -import {DDS} from '../../services/DeviceDetection'; export const TagsSection = () => { const [state, dispatch] = useTracked(); - const {colors, menuPins} = state; + const {colors, menuPins, currentScreen} = state; useEffect(() => { dispatch({type: Actions.MENU_PINS}); }, []); const onPress = (item) => { - let params = { - title: item.title, - tag: item, - type: 'tag', - menu: true, - }; - dispatch({ - type: Actions.HEADER_VERTICAL_MENU, - state: false, - }); + let params; + dispatch({ type: Actions.HEADER_TEXT_STATE, state: { heading: item.title, + id: item.id, }, }); - NavigationService.navigate('NotesPage', params); - eSendEvent(refreshNotesPage, params); + 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, + }); + } + } else if (item.type === 'tag') { + params = params = { + title: item.title, + tag: item, + type: 'tag', + menu: true, + }; + + NavigationService.navigate('NotesPage', params); + + eSendEvent(refreshNotesPage, params); + } else { + params = {...item, menu: true}; + + NavigationService.navigate('NotesPage', params); + + eSendEvent(refreshNotesPage, params); + } + NavigationService.closeDrawer(); }; @@ -82,7 +108,7 @@ export const TagsSection = () => { style={{ paddingHorizontal: 8, textAlignVertical: 'center', - height:35 + height: 35, }} size={SIZE.sm}> Your Pins{'\n'} @@ -104,7 +130,7 @@ export const TagsSection = () => { const PinItem = ({item, index, onPress}) => { const [state, dispatch] = useTracked(); - const {colors, currentScreen} = state; + const {colors, headerTextState} = state; const [visible, setVisible] = useState(false); return ( @@ -135,11 +161,7 @@ const PinItem = ({item, index, onPress}) => { )} { +export const Home = ({route,navigation}) => { const [state, dispatch] = useTracked(); const {notes, loading} = state; @@ -56,10 +57,11 @@ export const Home = ({navigation}) => { }, []); useEffect(() => { + console.log('rerender') if (navigation.isFocused()) { updateSearch(); } - }, [notes]); + }, [notes,route.params]); const updateSearch = () => { SearchService.update({ @@ -70,6 +72,7 @@ export const Home = ({navigation}) => { }; const _onPressBottomButton = (event) => { + if (!DDS.isLargeTablet()) { tabBarRef.current?.goToPage(1); } else { diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index f096fa6f8..72d970138 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -1,34 +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 {Actions} from '../../provider/Actions'; import { eSendEvent, eSubscribeEvent, - eUnSubscribeEvent + eUnSubscribeEvent, } from '../../services/EventManager'; 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([]); + const [topics, setTopics] = useState(route.params.notebook.topics); let params = route.params; const onLoad = () => { - let allTopics; - allTopics = db.notebooks.notebook(route.params.notebook.id).data.topics; - setTopics(allTopics); + setTopics(db.notebooks.notebook(route.params.notebook.id).data.topics); }; useEffect(() => { - eSendEvent(eScrollEvent, 0); - params = route.params; - setTopics([...params.notebook.topics]); - }, []); + onFocus(); + }, [route.params]); useEffect(() => { eSubscribeEvent(eOnNewTopicAdded, onLoad); @@ -44,6 +40,7 @@ export const Notebook = ({route, navigation}) => { type: Actions.HEADER_TEXT_STATE, state: { heading: params.title, + id:params.notebook.id }, }); @@ -51,7 +48,7 @@ export const Notebook = ({route, navigation}) => { dispatch({ type: Actions.CONTAINER_BOTTOM_BUTTON, state: { - onPress:_onPressBottomButton + onPress: _onPressBottomButton, }, }); @@ -59,20 +56,16 @@ export const Notebook = ({route, navigation}) => { type: Actions.CURRENT_SCREEN, screen: 'notebook', }); - } + }; useEffect(() => { navigation.addListener('focus', onFocus); + return () => { eSendEvent(eScrollEvent, {name: params.title, type: 'back'}); navigation.removeListener('focus', onFocus); }; - },[]); - - - - - + }, []); useEffect(() => { if (navigation.isFocused()) { updateSearch(); @@ -87,12 +80,9 @@ export const Notebook = ({route, navigation}) => { }); }; - - const _onPressBottomButton = () => { let n = route.params.notebook; AddTopicEvent(n); - }; return ( @@ -108,7 +98,7 @@ export const Notebook = ({route, navigation}) => { heading: route.params.notebook.title, paragraph: 'You have not added any topics yet.', button: 'Add a Topic', - action:_onPressBottomButton + action: _onPressBottomButton, }} /> @@ -160,4 +150,4 @@ const RenderItem = ({item, index}) => { ); }; - */ \ No newline at end of file + */ diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index 1467f598e..19b98d006 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/apps/mobile/src/views/Notes/index.js @@ -62,11 +62,11 @@ export const Notes = ({route, navigation}) => { dispatch({ type: Actions.CONTAINER_BOTTOM_BUTTON, state: { - onPress:_onPressBottomButton, - color:params.type == 'color' ? COLORS_NOTE[params.title] : null + onPress: _onPressBottomButton, + color: params.type == 'color' ? COLORS_NOTE[params.title] : null, }, }); - + updateSearch(); dispatch({ type: Actions.HEADER_TEXT_STATE, @@ -75,6 +75,14 @@ export const Notes = ({route, navigation}) => { 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, }, }); }; @@ -114,7 +122,7 @@ export const Notes = ({route, navigation}) => { navigation.removeListener('focus', onFocus); navigation.removeListener('blur', onBlur); }; - },[]); + }, []); useEffect(() => { if (navigation.isFocused()) {