Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 15:09:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

apply some optimizations

Browse Source
This commit is contained in:
ammarahm-ed
2021-04-09 10:27:46 +05:00
parent f4ccaf41d2
commit ddfb5ec2f0
11 changed files with 98 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -54,7 +54,7 @@ export const ContainerBottomButton = ({
right: 12, right: 12,
bottom: bottom:
Platform.OS === 'ios' && insets.bottom !== 0 Platform.OS === 'ios' && insets.bottom !== 0
? insets.bottom - 25 ? Platform.isPad ? insets.bottom - 12 : insets.bottom - 24
: insets.bottom + 12, : insets.bottom + 12,
zIndex: 10, zIndex: 10,
transform: [ transform: [

20
apps/mobile/src/components/Header/HeaderLeftMenu.js
View File

@@ -7,27 +7,9 @@ import Navigation from '../../services/Navigation';
import {SIZE} from '../../utils/SizeUtils'; import {SIZE} from '../../utils/SizeUtils';
import {ActionIcon} from '../ActionIcon'; import {ActionIcon} from '../ActionIcon';
export const HeaderLeftMenu = () => { export const HeaderLeftMenu = ({currentScreen,headerMenuState}) => {
const [state] = useTracked(); const [state] = useTracked();
const {colors, deviceMode} = state; 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 = () => { const onLeftButtonPress = () => {
if (headerMenuState) { if (headerMenuState) {

18
apps/mobile/src/components/Header/HeaderRightMenu.js
View File

@@ -10,25 +10,9 @@ import {SIZE} from '../../utils/SizeUtils';
import {ActionIcon} from '../ActionIcon'; import {ActionIcon} from '../ActionIcon';
import {Button} from '../Button'; import {Button} from '../Button';
export const HeaderRightMenu = () => { export const HeaderRightMenu = ({currentScreen}) => {
const [state] = useTracked(); const [state] = useTracked();
const {colors, containerBottomButton, syncing} = state; 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 ( return (
<View style={styles.rightBtnContainer}> <View style={styles.rightBtnContainer}>

27
apps/mobile/src/components/Header/HeaderTitle.js
View File

@@ -11,20 +11,9 @@ const opacity = new Animated.Value(DDS.isLargeTablet() ? 1 : 0);
let scrollPostions = {}; let scrollPostions = {};
export const HeaderTitle = () => { export const HeaderTitle = ({heading,headerColor}) => {
const [state] = useTracked(); const [state] = useTracked();
const {colors} = state; 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) => { const onScroll = async (y) => {
@@ -55,7 +44,7 @@ export const HeaderTitle = () => {
} else { } else {
opacity.setValue(0); opacity.setValue(0);
} }
scrollPostions[headerTextState?.heading] = y; scrollPostions[heading] = y;
}; };
useEffect(() => { useEffect(() => {
@@ -63,21 +52,21 @@ export const HeaderTitle = () => {
return () => { return () => {
eUnSubscribeEvent(eScrollEvent, onScroll); eUnSubscribeEvent(eScrollEvent, onScroll);
}; };
}, [headerTextState?.heading]); }, [heading]);
return ( return (
<Animated.View <Animated.View
style={{ style={{
opacity: DDS.isTab ? 1 : opacity, opacity: DDS.isTab ? 1 : opacity,
}}> }}>
<Heading color={headerTextState?.color}> <Heading color={headerColor}>
<Heading color={colors.accent}> <Heading color={colors.accent}>
{headerTextState?.heading.slice(0, 1) === '#' ? '#' : null} {heading.slice(0, 1) === '#' ? '#' : null}
</Heading> </Heading>
{headerTextState?.heading.slice(0, 1) === '#' {heading.slice(0, 1) === '#'
? headerTextState?.heading.slice(1) ? heading.slice(1)
: headerTextState?.heading} : heading}
</Heading> </Heading>
</Animated.View> </Animated.View>
); );

96
apps/mobile/src/components/Header/index.js
View File

@@ -1,18 +1,18 @@
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import { Platform, StyleSheet, View } from 'react-native'; import {Platform, StyleSheet, View} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import {useSafeAreaInsets} from 'react-native-safe-area-context';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager'; import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import Navigation from '../../services/Navigation'; import Navigation from '../../services/Navigation';
import SearchService from '../../services/SearchService'; import SearchService from '../../services/SearchService';
import { dWidth } from '../../utils'; import {dWidth} from '../../utils';
import { eScrollEvent } from '../../utils/Events'; import {eScrollEvent} from '../../utils/Events';
import { SIZE } from '../../utils/SizeUtils'; import {SIZE} from '../../utils/SizeUtils';
import { ActionIcon } from '../ActionIcon'; import {ActionIcon} from '../ActionIcon';
import { SearchInput } from '../SearchInput'; import {SearchInput} from '../SearchInput';
import { HeaderLeftMenu } from './HeaderLeftMenu'; import {HeaderLeftMenu} from './HeaderLeftMenu';
import { HeaderRightMenu } from './HeaderRightMenu'; import {HeaderRightMenu} from './HeaderRightMenu';
import { HeaderTitle } from './HeaderTitle'; import {HeaderTitle} from './HeaderTitle';
export const Header = ({root}) => { export const Header = ({root}) => {
const [state] = useTracked(); const [state] = useTracked();
@@ -24,9 +24,9 @@ export const Header = ({root}) => {
); );
const currentScreen = headerTextState.currentScreen; const currentScreen = headerTextState.currentScreen;
const onHeaderStateChange = (event) => { const onHeaderStateChange = event => {
if (!event) return; if (!event) return;
setHeaderTextState(event); setHeaderTextState(event);
}; };
useEffect(() => { useEffect(() => {
@@ -36,7 +36,7 @@ export const Header = ({root}) => {
}; };
}, []); }, []);
const onScroll = (y) => { const onScroll = y => {
if (y > 150) { if (y > 150) {
setHide(false); setHide(false);
} else { } else {
@@ -65,42 +65,54 @@ export const Header = ({root}) => {
}, },
]}> ]}>
<View style={styles.leftBtnContainer}> <View style={styles.leftBtnContainer}>
<HeaderLeftMenu /> <HeaderLeftMenu
headerMenuState={headerTextState.verticalMenu}
currentScreen={currentScreen}
/>
{(Platform.OS === 'android' || {(Platform.OS === 'android' || Platform.isPad) &&
Platform.isPad) && currentScreen !== 'Search' ? ( currentScreen !== 'Search' ? (
<HeaderTitle root={root} /> <HeaderTitle
headerColor={headerTextState.color}
heading={headerTextState.heading}
currentScreen={currentScreen}
root={root}
/>
) : null} ) : null}
</View> </View>
{Platform.OS !== 'android' && {Platform.OS !== 'android' &&
!Platform.isPad && !Platform.isPad &&
currentScreen !== 'Search' ? ( currentScreen !== 'Search' ? (
<HeaderTitle root={root} /> <HeaderTitle
headerColor={headerTextState.color}
heading={headerTextState.heading}
currentScreen={currentScreen}
root={root}
/>
) : null} ) : null}
{currentScreen === 'Search' ? ( {currentScreen === 'Search' ? (
<View <>
style={{ <View
width: '80%', style={{
}}> width: '80%',
<SearchInput /> }}>
</View> <SearchInput />
) : null} </View>
<View style={[styles.rightBtnContainer, {right: 6}]}>
{currentScreen === 'Search' ? ( <ActionIcon
<View style={[styles.rightBtnContainer, {right: 6}]}> onPress={() => {
<ActionIcon SearchService.search();
onPress={() => { }}
SearchService.search(); name="magnify"
}} size={SIZE.xxxl}
name="magnify" color={colors.pri}
size={SIZE.xxxl} style={styles.rightBtn}
color={colors.pri} />
style={styles.rightBtn} </View>
/> </>
</View>
) : ( ) : (
<HeaderRightMenu /> <HeaderRightMenu currentScreen={currentScreen} />
)} )}
</View> </View>
); );

8
apps/mobile/src/components/SimpleList/index.js
View File

@@ -67,10 +67,16 @@ const SimpleList = ({
), ),
); );
setLoading(false); setLoading(false);
sleep(100).then(() => setLoaded(true)); setTimeout(() => {
setLoaded(true)
},50);
} }
}, [listData, deviceMode, loading]); }, [listData, deviceMode, loading]);
useEffect(() => {
console.log("rerendering");
})
const _onRefresh = async () => { const _onRefresh = async () => {
await Sync.run(); await Sync.run();
if (refreshCallback) { if (refreshCallback) {

2
apps/mobile/src/navigation/NavigatorStack.js
View File

@@ -74,7 +74,7 @@ const forSlide = ({current, next, inverted, layouts: {screen}}) => {
}; };
const screenOptionsForAnimation = { const screenOptionsForAnimation = {
animationEnabled: true, animationEnabled: false,
cardStyleInterpolator: forSlide, cardStyleInterpolator: forSlide,
gestureEnabled: true, gestureEnabled: true,
}; };

1
apps/mobile/src/services/Navigation.js
View File

@@ -123,7 +123,6 @@ function setHeaderState(name, params, item) {
currentScreen = name; currentScreen = name;
headerState.currentScreen = name; headerState.currentScreen = name;
headerState.verticalMenu = params.menu; headerState.verticalMenu = params.menu;
if (headerState) { if (headerState) {
eSendEvent('onHeaderStateChange', {...headerState}); eSendEvent('onHeaderStateChange', {...headerState});
} }

18
apps/mobile/src/views/Folders/index.js
View File

@@ -10,7 +10,7 @@ import SearchService from '../../services/SearchService';
import {eScrollEvent} from '../../utils/Events'; import {eScrollEvent} from '../../utils/Events';
import Navigation from '../../services/Navigation'; import Navigation from '../../services/Navigation';
import {DDS} from '../../services/DeviceDetection'; import {DDS} from '../../services/DeviceDetection';
import { InteractionManager } from '../../utils'; import {InteractionManager} from '../../utils';
export const Folders = ({route, navigation}) => { export const Folders = ({route, navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -20,11 +20,6 @@ export const Folders = ({route, navigation}) => {
let ranAfterInteractions = false; let ranAfterInteractions = false;
const onFocus = useCallback(() => { const onFocus = useCallback(() => {
if (!ranAfterInteractions) {
ranAfterInteractions = true;
runAfterInteractions();
}
if (!pageIsLoaded) { if (!pageIsLoaded) {
pageIsLoaded = true; pageIsLoaded = true;
return; return;
@@ -39,7 +34,10 @@ export const Folders = ({route, navigation}) => {
id: 'notebooks_navigation', id: 'notebooks_navigation',
}, },
); );
if (!ranAfterInteractions) {
ranAfterInteractions = true;
runAfterInteractions();
}
}, []); }, []);
const runAfterInteractions = () => { const runAfterInteractions = () => {
@@ -47,9 +45,9 @@ export const Folders = ({route, navigation}) => {
if (loading) { if (loading) {
setLoading(false); setLoading(false);
} }
Navigation.routeNeedsUpdate('Notebooks',() => { Navigation.routeNeedsUpdate('Notebooks', () => {
dispatch({type:Actions.NOTEBOOKS}) dispatch({type: Actions.NOTEBOOKS});
}) });
eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'}); eSendEvent(eScrollEvent, {name: 'Notebooks', type: 'in'});
updateSearch(); updateSearch();

5
apps/mobile/src/views/Notebook/index.js
View File

@@ -32,12 +32,11 @@ export const Notebook = ({route, navigation}) => {
params.notebook = notebook; params.notebook = notebook;
params.title = params.notebook.title; params.title = params.notebook.title;
setTopics(notebook.topics); setTopics(notebook.topics);
sleep(10).then((r) => { setTimeout(() => {
if (loading) { if (loading) {
setLoading(false); setLoading(false);
} }
}); },10)
Navigation.routeNeedsUpdate('Notebook', () => { Navigation.routeNeedsUpdate('Notebook', () => {
onLoad(); onLoad();
}); });

24
apps/mobile/src/views/Notes/index.js
View File

@@ -22,7 +22,6 @@ import {
refreshNotesPage, refreshNotesPage,
} from '../../utils/Events'; } from '../../utils/Events';
import {tabBarRef} from '../../utils/Refs'; import {tabBarRef} from '../../utils/Refs';
import {sleep} from '../../utils/TimeUtils';
export const Notes = ({route, navigation}) => { export const Notes = ({route, navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -56,9 +55,9 @@ export const Notes = ({route, navigation}) => {
} }
setNotes(_notes); setNotes(_notes);
if (localLoad) { if (localLoad) {
sleep(10).then((r) => { setTimeout(() => {
setLocalLoad(false); setLocalLoad(false);
}); }, 10);
} }
if (params.menu) { if (params.menu) {
navigation.setOptions({ navigation.setOptions({
@@ -72,13 +71,16 @@ export const Notes = ({route, navigation}) => {
}); });
} }
updateSearch(); updateSearch();
dispatch({ if (DDS.isLargeTablet()) {
type: Actions.CONTAINER_BOTTOM_BUTTON, dispatch({
state: { type: Actions.CONTAINER_BOTTOM_BUTTON,
onPress: _onPressBottomButton, state: {
color: params.type == 'color' ? COLORS_NOTE[params.title] : null, onPress: _onPressBottomButton,
}, color: params.type == 'color' ? COLORS_NOTE[params.title] : null,
}); },
});
}
ranAfterInteractions = false; ranAfterInteractions = false;
}, time); }, time);
}; };
@@ -118,7 +120,7 @@ export const Notes = ({route, navigation}) => {
} }
}; };
const init = (data) => { const init = data => {
if (data) { if (data) {
setLocalLoad(true); setLocalLoad(true);
params = data; params = data;