ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Removed other arrow functions for increased performance

Browse source
This commit is contained in:
keplyx 2020-02-23 21:47:36 +01:00
parent 1a44465381
commit 2edef95361
12 changed files with 172 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
App.js
View file

@ -31,6 +31,10 @@ export default class App extends React.Component<Props, State> {
currentTheme: null,
};
onIntroDone: Function;
loadAssetsAsync: Function;
onLoadFinished: Function;
constructor(props: Object) {
super(props);
LocaleManager.initTranslations();

59
components/BaseContainer.js
View file

@ -46,47 +46,60 @@ export default class BaseContainer extends React.Component<Props, State> {
};
onDrawerPress: Function;
onWillFocus: Function;
onWillBlur: Function;
onChangeOrientation: Function;
constructor() {
super();
this.onDrawerPress = this.onDrawerPress.bind(this);
this.onWillFocus = this.onWillFocus.bind(this);
this.onWillBlur = this.onWillBlur.bind(this);
this.onChangeOrientation = this.onChangeOrientation.bind(this);
}
onDrawerPress() {
this.props.navigation.toggleDrawer();
}
onWillFocus() {
if (this.props.enableRotation) {
ScreenOrientation.unlockAsync();
ScreenOrientation.addOrientationChangeListener(this.onChangeOrientation);
}
}
onWillBlur() {
if (this.props.enableRotation)
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
}
onChangeOrientation(OrientationChangeEvent) {
if (this.props.hideHeaderOnLandscape) {
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
this.setState({isHeaderVisible: !isLandscape});
const setParamsAction = NavigationActions.setParams({
params: {showTabBar: !isLandscape},
key: this.props.navigation.state.key,
});
this.props.navigation.dispatch(setParamsAction);
StatusBar.setHidden(isLandscape);
}
}
/**
* Register for blur event to close side menu on screen change
*/
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
() => {
if (this.props.enableRotation) {
ScreenOrientation.unlockAsync();
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
if (this.props.hideHeaderOnLandscape) {
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
this.setState({isHeaderVisible: !isLandscape});
const setParamsAction = NavigationActions.setParams({
params: {showTabBar: !isLandscape},
key: this.props.navigation.state.key,
});
this.props.navigation.dispatch(setParamsAction);
StatusBar.setHidden(isLandscape);
}
});
}
});
this.onWillFocus
);
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
() => {
if (this.props.enableRotation)
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
}
this.onWillBlur
);
}

4
components/CustomHeader.js
View file

@ -35,7 +35,7 @@ export default class CustomHeader extends React.Component<Props> {
static defaultProps = {
hasBackButton: false,
hasSearchField: false,
searchCallback: () => null,
searchCallback: null,
shouldFocusSearchBar: false,
title: '',
subtitle: '',
@ -65,7 +65,7 @@ export default class CustomHeader extends React.Component<Props> {
componentDidMount() {
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
// does not work if called too early for some reason...
setTimeout(() => this.refs.searchInput._root.focus(), 500);
setTimeout(this.refs.searchInput._root.focus, 500);
}
}

6
components/CustomIntroSlider.js
View file

@ -117,7 +117,7 @@ export default class CustomIntroSlider extends React.Component<Props> {
* @param item
* @param dimensions
*/
static getIntroRenderItem(item: Object, dimensions: Object) {
static getIntroRenderItem({item, dimensions}: Object) {
return (
<LinearGradient
@ -143,9 +143,9 @@ export default class CustomIntroSlider extends React.Component<Props> {
render() {
return (
<AppIntroSlider
renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
renderItem={CustomIntroSlider.getIntroRenderItem}
slides={this.props.isUpdate ? this.updateSlides : this.introSlides}
onDone={() => this.props.onDone()}
onDone={this.props.onDone}
bottomButton
showSkipButton
skipLabel={i18n.t('intro.buttons.skip')}

40
components/FetchedDataSectionList.js
View file

@ -42,6 +42,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
};
onRefresh: Function;
onFetchSuccess: Function;
onFetchError: Function;
renderSectionHeaderEmpty: Function;
renderSectionHeaderNotEmpty: Function;
renderItemEmpty: Function;
@ -53,6 +55,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
this.refreshTime = refreshTime;
// creating references to functions used in render()
this.onRefresh = this.onRefresh.bind(this);
this.onFetchSuccess = this.onFetchSuccess.bind(this);
this.onFetchError = this.onFetchError.bind(this);
this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true);
this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false);
this.renderItemEmpty = this.renderItem.bind(this, true);
@ -124,6 +128,24 @@ export default class FetchedDataSectionList extends React.Component<Props, State
this.willFocusSubscription.remove();
}
onFetchSuccess(fetchedData: Object) {
this.setState({
fetchedData: fetchedData,
refreshing: false,
firstLoading: false
});
this.lastRefresh = new Date();
}
onFetchError() {
this.setState({
fetchedData: {},
refreshing: false,
firstLoading: false
});
this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
}
/**
* Refresh data and show a toast if any error occurred
* @private
@ -138,22 +160,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
if (canRefresh) {
this.setState({refreshing: true});
this.webDataManager.readData()
.then((fetchedData) => {
this.setState({
fetchedData: fetchedData,
refreshing: false,
firstLoading: false
});
this.lastRefresh = new Date();
})
.catch(() => {
this.setState({
fetchedData: {},
refreshing: false,
firstLoading: false
});
this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
});
.then(this.onFetchSuccess)
.catch(this.onFetchError);
}
}

20
components/Sidebar.js
View file

@ -40,7 +40,6 @@ export default class SideBar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
// Dataset used to render the drawer
// If the link field is defined, clicking on the item will open the link
this.dataSet = [
{
name: i18n.t('sidenav.divider1'),
@ -113,11 +112,8 @@ export default class SideBar extends React.Component<Props, State> {
}
onListItemPress(item: Object) {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
this.navigateToScreen(item.route);
onListItemPress(route: string) {
this.props.navigation.navigate(route);
}
@ -127,13 +123,15 @@ export default class SideBar extends React.Component<Props, State> {
getRenderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item.route);
if (item.icon !== undefined) {
return (
<ListItem
button
noBorder
selected={this.state.active === item.route}
onPress={this.onListItemPress.bind(this, item)}
onPress={onListItemPress}
>
<Left>
<CustomMaterialIcon
@ -171,14 +169,6 @@ export default class SideBar extends React.Component<Props, State> {
}
/**
* Navigate to the selected route
* @param route {string} The route name to navigate to
*/
navigateToScreen(route: string) {
this.props.navigation.navigate(route);
};
render() {
// console.log("rendering SideBar");
return (

75
components/WebViewScreen.js
View file

@ -35,6 +35,21 @@ export default class WebViewScreen extends React.Component<Props> {
};
webviewArray: Array<WebView> = [];
onRefreshClicked: Function;
onWebviewRef: Function;
onGoBackWebview: Function;
onGoForwardWebview: Function;
onOpenWebLink: Function;
constructor() {
super();
this.onRefreshClicked = this.onRefreshClicked.bind(this);
this.onWebviewRef = this.onWebviewRef.bind(this);
this.onGoBackWebview = this.onGoBackWebview.bind(this);
this.onGoForwardWebview = this.onGoForwardWebview.bind(this);
this.onOpenWebLink = this.onOpenWebLink.bind(this);
}
openWebLink(url: string) {
Linking.openURL(url).catch((err) => console.error('Error opening link', err));
}
@ -43,7 +58,7 @@ export default class WebViewScreen extends React.Component<Props> {
return (
<Touchable
style={{padding: 6}}
onPress={() => clickAction()}>
onPress={clickAction}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={icon}/>
@ -54,36 +69,62 @@ export default class WebViewScreen extends React.Component<Props> {
getRefreshButton() {
return (
<View style={{flexDirection: 'row'}}>
{this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
{this.getHeaderButton(this.onRefreshClicked, 'refresh')}
</View>
);
};
refreshWebview() {
onRefreshClicked() {
for (let view of this.webviewArray) {
if (view !== null)
view.reload();
}
}
goBackWebview() {
onGoBackWebview() {
for (let view of this.webviewArray) {
if (view !== null)
view.goBack();
}
}
goForwardWebview() {
onGoForwardWebview() {
for (let view of this.webviewArray) {
if (view !== null)
view.goForward();
}
}
onOpenWebLink() {
this.openWebLink(this.props.data[0]['url'])
}
onWebviewRef(ref: WebView) {
this.webviewArray.push(ref)
}
getRenderLoading() {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
position: 'absolute',
top: 0,
right: 0,
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Spinner/>
</View>
);
}
getWebview(obj: Object) {
return (
<WebView
ref={ref => (this.webviewArray.push(ref))}
ref={this.onWebviewRef}
source={{uri: obj['url']}}
style={{
width: '100%',
@ -92,21 +133,7 @@ export default class WebViewScreen extends React.Component<Props> {
startInLoadingState={true}
injectedJavaScript={obj['customJS']}
javaScriptEnabled={true}
renderLoading={() =>
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
position: 'absolute',
top: 0,
right: 0,
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Spinner/>
</View>
}
renderLoading={this.getRenderLoading}
/>
);
}
@ -167,7 +194,7 @@ export default class WebViewScreen extends React.Component<Props> {
<Left style={{
paddingLeft: 6,
}}>
{this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')}
{this.getHeaderButton(this.onOpenWebLink, 'open-in-new')}
</Left>
<Body/>
<Right style={{
@ -180,8 +207,8 @@ export default class WebViewScreen extends React.Component<Props> {
marginRight: 0,
marginLeft: 'auto'
}}>
{this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
{this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
{this.getHeaderButton(this.onGoBackWebview, 'chevron-left')}
{this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')}
</View>
</Right>
</Footer> : <View/>}

50
screens/About/AboutScreen.js
View file

@ -187,9 +187,14 @@ export default class AboutScreen extends React.Component<Props, State> {
},
];
getCardItem: Function;
getMainCard: Function;
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.getCardItem = this.getCardItem.bind(this);
this.getMainCard = this.getMainCard.bind(this);
}
getAppCard() {
@ -211,9 +216,7 @@ export default class AboutScreen extends React.Component<Props, State> {
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"app"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
renderItem={this.getCardItem}
/>
</Card>
);
@ -242,9 +245,7 @@ export default class AboutScreen extends React.Component<Props, State> {
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"team1"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
renderItem={this.getCardItem}
/>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
@ -254,9 +255,7 @@ export default class AboutScreen extends React.Component<Props, State> {
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"team2"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
renderItem={this.getCardItem}
/>
</Card>
);
@ -273,9 +272,7 @@ export default class AboutScreen extends React.Component<Props, State> {
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"techno"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
renderItem={this.getCardItem}
/>
</Card>
);
@ -284,24 +281,19 @@ export default class AboutScreen extends React.Component<Props, State> {
/**
* Get a clickable card item to be rendered inside a card.
*
* @param onPressCallback The callback to use when the item is clicked
* @param icon The icon name to use from MaterialCommunityIcons
* @param text The text to show
* @param showChevron Whether to show a chevron indicating this button will change screen
* @param showOnlyInDebug Should we show te current item only in debug mode?
* @returns {React.Node}
*/
getCardItem(onPressCallback: Function, icon: string, text: string, showChevron: boolean, showOnlyInDebug: boolean) {
let shouldShow = !showOnlyInDebug || (showOnlyInDebug && this.state.isDebugUnlocked);
getCardItem({item}: Object) {
let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
if (shouldShow) {
return (
<CardItem button
onPress={onPressCallback}>
onPress={item.onPressCallback}>
<Left>
<CustomMaterialIcon icon={icon}/>
<Text>{text}</Text>
<CustomMaterialIcon icon={item.icon}/>
<Text>{item.text}</Text>
</Left>
{showChevron ?
{item.showChevron ?
<Right>
<CustomMaterialIcon icon="chevron-right"
fontSize={20}/>
@ -331,6 +323,8 @@ export default class AboutScreen extends React.Component<Props, State> {
}
getBugReportModal() {
const onPressMail = openWebLink.bind(this, links.bugsMail);
const onPressGit = openWebLink.bind(this, links.bugsGit);
return (
<Modalize ref={this.modalRef}
adjustToContentHeight
@ -349,7 +343,7 @@ export default class AboutScreen extends React.Component<Props, State> {
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={() => openWebLink(links.bugsMail)}>
onPress={onPressMail}>
<CustomMaterialIcon
icon={'email'}
color={'#fff'}/>
@ -361,7 +355,7 @@ export default class AboutScreen extends React.Component<Props, State> {
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={() => openWebLink(links.bugsGit)}>
onPress={onPressGit}>
<CustomMaterialIcon
icon={'git'}
color={'#fff'}/>
@ -378,7 +372,7 @@ export default class AboutScreen extends React.Component<Props, State> {
}
}
getMainCard(item: Object) {
getMainCard({item}: Object) {
switch (item.id) {
case 'app':
return this.getAppCard();
@ -401,9 +395,7 @@ export default class AboutScreen extends React.Component<Props, State> {
data={this.dataOrder}
extraData={this.state}
keyExtractor={(item) => item.id}
renderItem={({item}) =>
this.getMainCard(item)
}
renderItem={this.getMainCard}
/>
</Container>
);

8
screens/Proximo/ProximoListScreen.js
View file

@ -78,6 +78,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
onSelectSortModePrice: Function;
onSortMenuPress: Function;
renderItem: Function;
onListItemPress: Function;
constructor(props: any) {
super(props);
@ -90,6 +91,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
this.onSortMenuPress = this.onSortMenuPress.bind(this);
this.renderItem = this.renderItem.bind(this);
this.onListItemPress = this.onListItemPress.bind(this);
}
/**
@ -265,7 +267,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
);
}
showItemDetails(item: Object) {
onListItemPress(item: Object) {
this.setState({
modalCurrentDisplayItem: item
});
@ -318,9 +320,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
renderItem({item}: Object) {
return (<ListItem
thumbnail
onPress={() => {
this.showItemDetails(item);
}}
onPress={this.onListItemPress}
>
<Left>
<Thumbnail square source={{uri: item.image}}/>

5
screens/Proximo/ProximoMainScreen.js
View file

@ -154,14 +154,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
shouldFocusSearchBar: false,
data: item,
};
const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
if (item.data.length > 0) {
return (
<ListItem
button
thumbnail
onPress={() => {
this.props.navigation.navigate('ProximoListScreen', dataToSend);
}}
onPress={onPress}
>
<Left>
<CustomMaterialIcon

7
screens/Proxiwash/ProxiwashScreen.js
View file

@ -86,7 +86,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
*/
componentDidMount() {
super.componentDidMount();
if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') {
// Get latest watchlist from server
NotificationsManager.getMachineNotificationWatchlist((fetchedList) => {
@ -245,13 +244,14 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
showAlert(title: string, item: Object, isDryer: boolean) {
let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
let message = modalStateStrings[MACHINE_STATES[item.state]];
const onPress = this.setupNotifications.bind(this, item.number);
if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) {
buttons = [
{
text: this.isMachineWatched(item.number) ?
i18n.t("proxiwashScreen.modal.disableNotifications") :
i18n.t("proxiwashScreen.modal.enableNotifications"),
onPress: () => this.setupNotifications(item.number)
onPress: onPress
},
{
text: i18n.t("proxiwashScreen.modal.cancel")
@ -303,6 +303,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"];
let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
const onPress = this.showAlert.bind(this, machineName, item, isDryer);
return (
<Card style={{
flex: 0,
@ -327,7 +328,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor
}}/>
<PlatformTouchable
onPress={() => this.showAlert(machineName, item, isDryer)}
onPress={onPress}
style={{
height: 64,
position: 'absolute',

21
screens/SettingsScreen.js
View file

@ -43,6 +43,17 @@ export default class SettingsScreen extends React.Component<Props, State> {
startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
};
onProxiwashNotifPickerValueChange: Function;
onStartScreenPickerValueChange: Function;
onToggleNightMode: Function;
constructor() {
super();
this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this);
this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this);
this.onToggleNightMode = this.onToggleNightMode.bind(this);
}
/**
* Get a list item using the specified control
*
@ -118,7 +129,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
mode="dropdown"
style={{width: 120}}
selectedValue={this.state.proxiwashNotifPickerSelected}
onValueChange={(value) => this.onProxiwashNotifPickerValueChange(value)}
onValueChange={this.onProxiwashNotifPickerValueChange}
>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
@ -141,7 +152,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
mode="dropdown"
style={{width: 120}}
selectedValue={this.state.startScreenPickerSelected}
onValueChange={(value) => this.onStartScreenPickerValueChange(value)}
onValueChange={this.onStartScreenPickerValueChange}
>
<Picker.Item label={i18n.t('screens.home')} value="Home"/>
<Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
@ -155,7 +166,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
/**
* Toggle night mode and save it to preferences
*/
toggleNightMode() {
onToggleNightMode() {
ThemeManager.getInstance().setNightMode(!this.state.nightMode);
this.setState({nightMode: !this.state.nightMode});
this.resetStack();
@ -203,7 +214,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
<Right>
<CheckBox
checked={this.state.nightMode}
onPress={() => this.toggleNightMode()}
onPress={onPressCallback}
style={{marginRight: 20}}/>
</Right>
</ListItem>
@ -221,7 +232,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
<Text>{i18n.t('settingsScreen.generalCard')}</Text>
</CardItem>
<List>
{this.getToggleItem(() => this.toggleNightMode(), 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
{this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
{SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
</List>
</Card>