apply some optimizations

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

View File

@@ -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: [

View File

@@ -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) {

View File

@@ -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 (
<View style={styles.rightBtnContainer}>
{syncing && <ActivityIndicator size={SIZE.xl} color={colors.accent} />}

View File

@@ -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 (
<Animated.View
style={{
opacity: DDS.isTab ? 1 : opacity,
}}>
<Heading color={headerTextState?.color}>
<Heading color={headerColor}>
<Heading color={colors.accent}>
{headerTextState?.heading.slice(0, 1) === '#' ? '#' : null}
{heading.slice(0, 1) === '#' ? '#' : null}
</Heading>
{headerTextState?.heading.slice(0, 1) === '#'
? headerTextState?.heading.slice(1)
: headerTextState?.heading}
{heading.slice(0, 1) === '#'
? heading.slice(1)
: heading}
</Heading>
</Animated.View>
);

View File

@@ -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}) => {
},
]}>
<View style={styles.leftBtnContainer}>
<HeaderLeftMenu />
<HeaderLeftMenu
headerMenuState={headerTextState.verticalMenu}
currentScreen={currentScreen}
/>
{(Platform.OS === 'android' ||
Platform.isPad) && currentScreen !== 'Search' ? (
<HeaderTitle root={root} />
{(Platform.OS === 'android' || Platform.isPad) &&
currentScreen !== 'Search' ? (
<HeaderTitle
headerColor={headerTextState.color}
heading={headerTextState.heading}
currentScreen={currentScreen}
root={root}
/>
) : null}
</View>
{Platform.OS !== 'android' &&
!Platform.isPad &&
currentScreen !== 'Search' ? (
<HeaderTitle root={root} />
<HeaderTitle
headerColor={headerTextState.color}
heading={headerTextState.heading}
currentScreen={currentScreen}
root={root}
/>
) : null}
{currentScreen === 'Search' ? (
<View
style={{
width: '80%',
}}>
<SearchInput />
</View>
) : null}
{currentScreen === 'Search' ? (
<View style={[styles.rightBtnContainer, {right: 6}]}>
<ActionIcon
onPress={() => {
SearchService.search();
}}
name="magnify"
size={SIZE.xxxl}
color={colors.pri}
style={styles.rightBtn}
/>
</View>
<>
<View
style={{
width: '80%',
}}>
<SearchInput />
</View>
<View style={[styles.rightBtnContainer, {right: 6}]}>
<ActionIcon
onPress={() => {
SearchService.search();
}}
name="magnify"
size={SIZE.xxxl}
color={colors.pri}
style={styles.rightBtn}
/>
</View>
</>
) : (
<HeaderRightMenu />
<HeaderRightMenu currentScreen={currentScreen} />
)}
</View>
);

View File

@@ -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) {

View File

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

View File

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

View File

@@ -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();

View File

@@ -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();
});

View File

@@ -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;