From ddfb5ec2f05fcae6dc985e55601fff75dabdfd28 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Fri, 9 Apr 2021 10:27:46 +0500 Subject: [PATCH] apply some optimizations --- .../Container/ContainerBottomButton.js | 2 +- .../src/components/Header/HeaderLeftMenu.js | 20 +--- .../src/components/Header/HeaderRightMenu.js | 20 +--- .../src/components/Header/HeaderTitle.js | 29 ++---- apps/mobile/src/components/Header/index.js | 96 +++++++++++-------- .../mobile/src/components/SimpleList/index.js | 8 +- apps/mobile/src/navigation/NavigatorStack.js | 2 +- apps/mobile/src/services/Navigation.js | 1 - apps/mobile/src/views/Folders/index.js | 18 ++-- apps/mobile/src/views/Notebook/index.js | 5 +- apps/mobile/src/views/Notes/index.js | 24 ++--- 11 files changed, 98 insertions(+), 127 deletions(-) diff --git a/apps/mobile/src/components/Container/ContainerBottomButton.js b/apps/mobile/src/components/Container/ContainerBottomButton.js index 01a77d999..9f131a964 100644 --- a/apps/mobile/src/components/Container/ContainerBottomButton.js +++ b/apps/mobile/src/components/Container/ContainerBottomButton.js @@ -54,7 +54,7 @@ export const ContainerBottomButton = ({ right: 12, bottom: Platform.OS === 'ios' && insets.bottom !== 0 - ? insets.bottom - 25 + ? Platform.isPad ? insets.bottom - 12 : insets.bottom - 24 : insets.bottom + 12, zIndex: 10, transform: [ diff --git a/apps/mobile/src/components/Header/HeaderLeftMenu.js b/apps/mobile/src/components/Header/HeaderLeftMenu.js index f32531bfc..5e8ca0809 100644 --- a/apps/mobile/src/components/Header/HeaderLeftMenu.js +++ b/apps/mobile/src/components/Header/HeaderLeftMenu.js @@ -7,27 +7,9 @@ import Navigation from '../../services/Navigation'; import {SIZE} from '../../utils/SizeUtils'; import {ActionIcon} from '../ActionIcon'; -export const HeaderLeftMenu = () => { +export const HeaderLeftMenu = ({currentScreen,headerMenuState}) => { const [state] = useTracked(); const {colors, deviceMode} = state; - const [headerTextState, setHeaderTextState] = useState( - Navigation.getHeaderState(), - ); - - const currentScreen = headerTextState.currentScreen; - const headerMenuState = headerTextState.verticalMenu; - - const onHeaderStateChange = (event) => { - if (!event) return; - setHeaderTextState(event); - }; - - useEffect(() => { - eSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - return () => { - eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - }; - }, []); const onLeftButtonPress = () => { if (headerMenuState) { diff --git a/apps/mobile/src/components/Header/HeaderRightMenu.js b/apps/mobile/src/components/Header/HeaderRightMenu.js index 26e9b8400..7e253fcc7 100644 --- a/apps/mobile/src/components/Header/HeaderRightMenu.js +++ b/apps/mobile/src/components/Header/HeaderRightMenu.js @@ -10,26 +10,10 @@ import {SIZE} from '../../utils/SizeUtils'; import {ActionIcon} from '../ActionIcon'; import {Button} from '../Button'; -export const HeaderRightMenu = () => { +export const HeaderRightMenu = ({currentScreen}) => { const [state] = useTracked(); const {colors, containerBottomButton, syncing} = state; - const [headerTextState, setHeaderTextState] = useState( - Navigation.getHeaderState(), - ); - const currentScreen = headerTextState.currentScreen; - - const onHeaderStateChange = (event) => { - if (!event) return; - setHeaderTextState(event); - }; - - useEffect(() => { - eSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - return () => { - eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - }; - }, []); - + return ( {syncing && } diff --git a/apps/mobile/src/components/Header/HeaderTitle.js b/apps/mobile/src/components/Header/HeaderTitle.js index a5b889689..bd8c169a0 100644 --- a/apps/mobile/src/components/Header/HeaderTitle.js +++ b/apps/mobile/src/components/Header/HeaderTitle.js @@ -11,21 +11,10 @@ const opacity = new Animated.Value(DDS.isLargeTablet() ? 1 : 0); let scrollPostions = {}; -export const HeaderTitle = () => { +export const HeaderTitle = ({heading,headerColor}) => { const [state] = useTracked(); const {colors} = state; - const [headerTextState, setHeaderTextState] = useState(Navigation.getHeaderState()); - - const onHeaderStateChange = (event) => { - setHeaderTextState(event); - }; - useEffect(() => { - eSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - return () => { - eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange); - }; - }, []); - + const onScroll = async (y) => { if (DDS.isTab) return; @@ -55,7 +44,7 @@ export const HeaderTitle = () => { } else { opacity.setValue(0); } - scrollPostions[headerTextState?.heading] = y; + scrollPostions[heading] = y; }; useEffect(() => { @@ -63,21 +52,21 @@ export const HeaderTitle = () => { return () => { eUnSubscribeEvent(eScrollEvent, onScroll); }; - }, [headerTextState?.heading]); + }, [heading]); return ( - + - {headerTextState?.heading.slice(0, 1) === '#' ? '#' : null} + {heading.slice(0, 1) === '#' ? '#' : null} - {headerTextState?.heading.slice(0, 1) === '#' - ? headerTextState?.heading.slice(1) - : headerTextState?.heading} + {heading.slice(0, 1) === '#' + ? heading.slice(1) + : heading} ); diff --git a/apps/mobile/src/components/Header/index.js b/apps/mobile/src/components/Header/index.js index 80884f59e..ec81889f0 100644 --- a/apps/mobile/src/components/Header/index.js +++ b/apps/mobile/src/components/Header/index.js @@ -1,18 +1,18 @@ -import React, { useEffect, useState } from 'react'; -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 React, {useEffect, useState} from 'react'; +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 Navigation from '../../services/Navigation'; import SearchService from '../../services/SearchService'; -import { dWidth } from '../../utils'; -import { eScrollEvent } from '../../utils/Events'; -import { SIZE } from '../../utils/SizeUtils'; -import { ActionIcon } from '../ActionIcon'; -import { SearchInput } from '../SearchInput'; -import { HeaderLeftMenu } from './HeaderLeftMenu'; -import { HeaderRightMenu } from './HeaderRightMenu'; -import { HeaderTitle } from './HeaderTitle'; +import {dWidth} from '../../utils'; +import {eScrollEvent} from '../../utils/Events'; +import {SIZE} from '../../utils/SizeUtils'; +import {ActionIcon} from '../ActionIcon'; +import {SearchInput} from '../SearchInput'; +import {HeaderLeftMenu} from './HeaderLeftMenu'; +import {HeaderRightMenu} from './HeaderRightMenu'; +import {HeaderTitle} from './HeaderTitle'; export const Header = ({root}) => { const [state] = useTracked(); @@ -24,9 +24,9 @@ export const Header = ({root}) => { ); const currentScreen = headerTextState.currentScreen; - const onHeaderStateChange = (event) => { + const onHeaderStateChange = event => { if (!event) return; - setHeaderTextState(event); + setHeaderTextState(event); }; useEffect(() => { @@ -36,7 +36,7 @@ export const Header = ({root}) => { }; }, []); - const onScroll = (y) => { + const onScroll = y => { if (y > 150) { setHide(false); } else { @@ -65,42 +65,54 @@ export const Header = ({root}) => { }, ]}> - + - {(Platform.OS === 'android' || - Platform.isPad) && currentScreen !== 'Search' ? ( - + {(Platform.OS === 'android' || Platform.isPad) && + currentScreen !== 'Search' ? ( + ) : null} {Platform.OS !== 'android' && !Platform.isPad && currentScreen !== 'Search' ? ( - + ) : null} {currentScreen === 'Search' ? ( - - - - ) : null} - - {currentScreen === 'Search' ? ( - - { - SearchService.search(); - }} - name="magnify" - size={SIZE.xxxl} - color={colors.pri} - style={styles.rightBtn} - /> - + <> + + + + + { + SearchService.search(); + }} + name="magnify" + size={SIZE.xxxl} + color={colors.pri} + style={styles.rightBtn} + /> + + ) : ( - + )} ); diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js index d9ed027b0..dbd23c31d 100644 --- a/apps/mobile/src/components/SimpleList/index.js +++ b/apps/mobile/src/components/SimpleList/index.js @@ -67,10 +67,16 @@ const SimpleList = ({ ), ); setLoading(false); - sleep(100).then(() => setLoaded(true)); + setTimeout(() => { + setLoaded(true) + },50); } }, [listData, deviceMode, loading]); + useEffect(() => { + console.log("rerendering"); + }) + const _onRefresh = async () => { await Sync.run(); if (refreshCallback) { diff --git a/apps/mobile/src/navigation/NavigatorStack.js b/apps/mobile/src/navigation/NavigatorStack.js index c10276c95..4ff4148a9 100644 --- a/apps/mobile/src/navigation/NavigatorStack.js +++ b/apps/mobile/src/navigation/NavigatorStack.js @@ -74,7 +74,7 @@ const forSlide = ({current, next, inverted, layouts: {screen}}) => { }; const screenOptionsForAnimation = { - animationEnabled: true, + animationEnabled: false, cardStyleInterpolator: forSlide, gestureEnabled: true, }; diff --git a/apps/mobile/src/services/Navigation.js b/apps/mobile/src/services/Navigation.js index f41da8726..f8df4089b 100755 --- a/apps/mobile/src/services/Navigation.js +++ b/apps/mobile/src/services/Navigation.js @@ -123,7 +123,6 @@ function setHeaderState(name, params, item) { currentScreen = name; headerState.currentScreen = name; headerState.verticalMenu = params.menu; - if (headerState) { eSendEvent('onHeaderStateChange', {...headerState}); } diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 32a02f5b9..971603967 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -10,7 +10,7 @@ import SearchService from '../../services/SearchService'; import {eScrollEvent} from '../../utils/Events'; import Navigation from '../../services/Navigation'; import {DDS} from '../../services/DeviceDetection'; -import { InteractionManager } from '../../utils'; +import {InteractionManager} from '../../utils'; export const Folders = ({route, navigation}) => { const [state, dispatch] = useTracked(); @@ -20,11 +20,6 @@ export const Folders = ({route, navigation}) => { let ranAfterInteractions = false; const onFocus = useCallback(() => { - if (!ranAfterInteractions) { - ranAfterInteractions = true; - runAfterInteractions(); - } - if (!pageIsLoaded) { pageIsLoaded = true; return; @@ -39,7 +34,10 @@ export const Folders = ({route, navigation}) => { id: 'notebooks_navigation', }, ); - + if (!ranAfterInteractions) { + ranAfterInteractions = true; + runAfterInteractions(); + } }, []); const runAfterInteractions = () => { @@ -47,9 +45,9 @@ export const Folders = ({route, navigation}) => { if (loading) { setLoading(false); } - Navigation.routeNeedsUpdate('Notebooks',() => { - dispatch({type:Actions.NOTEBOOKS}) - }) + Navigation.routeNeedsUpdate('Notebooks', () => { + dispatch({type: Actions.NOTEBOOKS}); + }); eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'}); updateSearch(); diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 5659e0d97..3ab456ae0 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -32,12 +32,11 @@ export const Notebook = ({route, navigation}) => { params.notebook = notebook; params.title = params.notebook.title; setTopics(notebook.topics); - sleep(10).then((r) => { + setTimeout(() => { if (loading) { setLoading(false); } - }); - + },10) Navigation.routeNeedsUpdate('Notebook', () => { onLoad(); }); diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index eaa07b4ce..bdacbccc1 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/apps/mobile/src/views/Notes/index.js @@ -22,7 +22,6 @@ import { refreshNotesPage, } from '../../utils/Events'; import {tabBarRef} from '../../utils/Refs'; -import {sleep} from '../../utils/TimeUtils'; export const Notes = ({route, navigation}) => { const [state, dispatch] = useTracked(); @@ -56,9 +55,9 @@ export const Notes = ({route, navigation}) => { } setNotes(_notes); if (localLoad) { - sleep(10).then((r) => { + setTimeout(() => { setLocalLoad(false); - }); + }, 10); } if (params.menu) { navigation.setOptions({ @@ -72,13 +71,16 @@ export const Notes = ({route, navigation}) => { }); } updateSearch(); - dispatch({ - type: Actions.CONTAINER_BOTTOM_BUTTON, - state: { - onPress: _onPressBottomButton, - color: params.type == 'color' ? COLORS_NOTE[params.title] : null, - }, - }); + if (DDS.isLargeTablet()) { + dispatch({ + type: Actions.CONTAINER_BOTTOM_BUTTON, + state: { + onPress: _onPressBottomButton, + color: params.type == 'color' ? COLORS_NOTE[params.title] : null, + }, + }); + } + ranAfterInteractions = false; }, time); }; @@ -118,7 +120,7 @@ export const Notes = ({route, navigation}) => { } }; - const init = (data) => { + const init = data => { if (data) { setLocalLoad(true); params = data;