vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Tried to improve performance...

Browse source
This commit is contained in:
Yohan Simard 2020-02-11 01:05:24 +01:00
parent 878ff1b308
commit 01f8a7c558
15 changed files with 284 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
App.js
View file

@ -34,6 +34,9 @@ export default class App extends React.Component<Props, State> {
constructor(props: Object) {
super(props);
LocaleManager.initTranslations();
this.onIntroDone = this.onIntroDone.bind(this);
this.loadAssetsAsync = this.loadAssetsAsync.bind(this);
this.onLoadFinished = this.onLoadFinished.bind(this);
}
/**
@ -102,14 +105,14 @@ export default class App extends React.Component<Props, State> {
if (this.state.isLoading) {
return (
<AppLoading
startAsync={() => this.loadAssetsAsync()}
onFinish={() => this.onLoadFinished()}
startAsync={this.loadAssetsAsync}
onFinish={this.onLoadFinished}
onError={console.warn}
/>
);
}
if (this.state.showIntro || this.state.showUpdate) {
return <CustomIntroSlider onDone={() => this.onIntroDone()}
return <CustomIntroSlider onDone={this.onIntroDone}
isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
} else {
const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);

18
components/BaseContainer.js
View file

@ -30,7 +30,6 @@ type State = {
export default class BaseContainer extends React.Component<Props, State> {
static defaultProps = {
headerRightButton: <View/>,
hasTabs: false,
@ -46,9 +45,15 @@ export default class BaseContainer extends React.Component<Props, State> {
isHeaderVisible: true,
};
constructor() {
super();
this.toggle = this.toggle.bind(this);
}
toggle() {
this.props.navigation.toggleDrawer();
}
/**
* Register for blur event to close side menu on screen change
*/
@ -93,7 +98,9 @@ export default class BaseContainer extends React.Component<Props, State> {
this.willFocusSubscription.remove();
}
getMainContainer() {
render() {
// console.log("rendering BaseContainer");
return (
<Container>
{this.state.isHeaderVisible ?
@ -104,7 +111,7 @@ export default class BaseContainer extends React.Component<Props, State> {
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
onPress={this.toggle}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
@ -118,9 +125,4 @@ export default class BaseContainer extends React.Component<Props, State> {
</Container>
);
}
render() {
return (this.getMainContainer());
}
}

32
components/CustomHeader.js
View file

@ -32,7 +32,6 @@ type Props = {
* @prop navigation {Object} The navigation object from react navigation
*/
export default class CustomHeader extends React.Component<Props> {
static defaultProps = {
hasBackButton: false,
hasSearchField: false,
@ -45,9 +44,25 @@ export default class CustomHeader extends React.Component<Props> {
hasTabs: false,
};
constructor() {
super();
this.onPressBack = this.onPressBack.bind(this);
}
shouldComponentUpdate(nextProps: Props): boolean {
return nextProps.title !== this.props.title ||
nextProps.subtitle !== this.props.subtitle ||
nextProps.hasBackButton !== this.props.hasBackButton ||
nextProps.hasSearchField !== this.props.hasSearchField ||
nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar ||
nextProps.hasTabs !== this.props.hasTabs ||
nextProps.rightButton !== this.props.rightButton ||
nextProps.leftButton !== this.props.leftButton;
}
componentDidMount() {
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
// does not work if called to early for some reason...
// does not work if called too early for some reason...
setTimeout(() => this.refs.searchInput._root.focus(), 500);
}
}
@ -67,7 +82,7 @@ export default class CustomHeader extends React.Component<Props> {
ref="searchInput"
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/>
onChangeText={this.props.searchCallback}/>
</Item>
</Body>
);
@ -87,17 +102,20 @@ export default class CustomHeader extends React.Component<Props> {
}
onPressBack() {
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);
}
render() {
console.log("rendering CustomHeader");
let button;
// Does the app have a back button or a burger menu ?
if (this.props.hasBackButton)
button =
<Touchable
style={{padding: 6}}
onPress={() => {
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);
}}>
onPress={this.onPressBack}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}/>

9
components/CustomMaterialIcon.js
View file

@ -30,7 +30,16 @@ export default class CustomMaterialIcon extends React.Component<Props> {
width: 30,
};
shouldComponentUpdate(nextProps: Props): boolean {
return nextProps.icon !== this.props.icon ||
nextProps.active !== this.props.active ||
nextProps.width !== this.props.width ||
nextProps.fontSize !== this.props.fontSize ||
nextProps.color !== this.props.color;
}
render() {
// console.log("rendering icon " + this.props.icon);
return (
<Icon
active

8
components/DashboardItem.js
View file

@ -25,13 +25,18 @@ type Props = {
}
export default class DashboardItem extends React.Component<Props> {
static defaultProps = {
isSquare: false,
isSquareLeft: true,
displayEvent: undefined,
};
shouldComponentUpdate(nextProps: Props): boolean {
return nextProps.isAvailable !== this.props.isAvailable ||
nextProps.subtitle !== this.props.subtitle;
}
/**
* Convert the date string given by in the event list json to a date object
* @param dateString
@ -203,6 +208,7 @@ export default class DashboardItem extends React.Component<Props> {
render() {
// console.log("rendering DashboardItem " + this.props.title);
let marginRight = 10;
if (this.props.isSquare) {
if (this.props.isSquareLeft)

75
components/FetchedDataSectionList.js
View file

@ -25,7 +25,6 @@ type State = {
* Used by inheriting from it and redefining getters.
*/
export default class FetchedDataSectionList extends React.Component<Props, State> {
webDataManager: WebDataManager;
willFocusSubscription: function;
@ -46,8 +45,22 @@ export default class FetchedDataSectionList extends React.Component<Props, State
super();
this.webDataManager = new WebDataManager(fetchUrl);
this.refreshTime = refreshTime;
// creating references to functions used in render()
this._onRefresh = this._onRefresh.bind(this);
this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true);
this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false);
this.renderItemEmpty = this.renderItem.bind(this, true);
this.renderItemNotEmpty = this.renderItem.bind(this, false);
}
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
return this.state.refreshing !== nextState.refreshing ||
nextState.firstLoading !== this.state.firstLoading ||
nextState.machinesWatched.length !== this.state.machinesWatched.length ||
nextState.fetchedData.len !== this.state.fetchedData.len;
}
/**
* Get the translation for the header in the current language
* @return {string}
@ -74,17 +87,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
*/
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
() => {
this.onScreenFocus();
}
);
'willFocus', this.onScreenFocus.bind(this));
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
() => {
this.onScreenBlur();
}
);
'willBlur', this.onScreenBlur.bind(this));
}
/**
@ -93,7 +98,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
onScreenFocus() {
this._onRefresh();
if (this.refreshTime > 0)
this.refreshInterval = setInterval(() => this._onRefresh(), this.refreshTime)
this.refreshInterval = setInterval(this._onRefresh.bind(this), this.refreshTime)
}
/**
@ -117,7 +122,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
* Refresh data and show a toast if any error occurred
* @private
*/
_onRefresh = () => {
_onRefresh() {
let canRefresh;
if (this.lastRefresh !== undefined)
canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh;
@ -144,8 +149,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
});
}
};
}
/**
* Get the render item to be used for display in the list.
@ -153,10 +157,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
*
* @param item
* @param section
* @param data
* @return {*}
*/
getRenderItem(item: Object, section: Object, data: Object) {
getRenderItem(item: Object, section: Object) {
return <View/>;
}
@ -222,6 +225,11 @@ export default class FetchedDataSectionList extends React.Component<Props, State
return [];
}
datasetKeyExtractor(item: Object) {
return item.text
}
/**
* Create the dataset when no fetched data is available.
* No need to be overridden, has good defaults.
@ -243,7 +251,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
'access-point-network-off'
}
],
keyExtractor: (item: Object) => item.text,
keyExtractor: this.datasetKeyExtractor,
}
];
}
@ -275,6 +283,19 @@ export default class FetchedDataSectionList extends React.Component<Props, State
return true;
}
renderSectionHeader(isEmpty, {section: {title}}) {
return isEmpty ?
<View/> :
this.getRenderSectionHeader(title)
}
renderItem(isEmpty, {item, section}) {
return isEmpty ?
this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
this.getRenderItem(item, section)
}
/**
* Get the section list render using the generated dataset
*
@ -295,16 +316,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
onRefresh={this._onRefresh}
/>
}
renderSectionHeader={({section: {title}}) =>
isEmpty ?
<View/> :
this.getRenderSectionHeader(title)
}
renderItem={({item, section}) =>
isEmpty ?
this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
this.getRenderItem(item, section, dataset)
}
renderSectionHeader={isEmpty ? this.renderSectionHeaderEmpty : this.renderSectionHeaderNotEmpty}
renderItem={isEmpty ? this.renderItemEmpty : this.renderItemNotEmpty}
style={{minHeight: 300, width: '100%'}}
contentContainerStyle={
isEmpty ?
@ -351,11 +364,12 @@ export default class FetchedDataSectionList extends React.Component<Props, State
}
render() {
const nav = this.props.navigation;
// console.log("rendering FetchedDataSectionList");
const dataset = this.createDataset(this.state.fetchedData);
return (
<BaseContainer
navigation={nav} headerTitle={this.getHeaderTranslation()}
navigation={this.props.navigation}
headerTitle={this.getHeaderTranslation()}
headerRightButton={this.getRightButton()}
hasTabs={this.hasTabs()}
hasBackButton={this.hasBackButton()}
@ -375,5 +389,4 @@ export default class FetchedDataSectionList extends React.Component<Props, State
</BaseContainer>
);
}
}

33
components/Sidebar.js
View file

@ -103,21 +103,35 @@ export default class SideBar extends React.Component<Props, State> {
icon: "information",
},
];
this.getRenderItem = this.getRenderItem.bind(this);
}
getRenderItem(item: Object) {
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
return nextState.active !== this.state.active;
}
onListItemPress(item) {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
this.navigateToScreen(item.route);
}
listKeyExtractor(item) {
return item.route;
}
getRenderItem({item}: Object) {
if (item.icon !== undefined) {
return (
<ListItem
button
noBorder
selected={this.state.active === item.route}
onPress={() => {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
this.navigateToScreen(item.route);
}}
onPress={this.onListItemPress.bind(this, item)}
>
<Left>
<CustomMaterialIcon
@ -164,6 +178,7 @@ export default class SideBar extends React.Component<Props, State> {
};
render() {
// console.log("rendering SideBar");
return (
<Container style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@ -172,8 +187,8 @@ export default class SideBar extends React.Component<Props, State> {
<FlatList
data={this.dataSet}
extraData={this.state}
keyExtractor={(item) => item.route}
renderItem={({item}) => this.getRenderItem(item)}
keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem}
/>
</Container>
);

1
components/WebViewScreen.js
View file

@ -133,6 +133,7 @@ export default class WebViewScreen extends React.Component<Props> {
}
render() {
// console.log("rendering WebViewScreen");
const nav = this.props.navigation;
this.webviewArray = [];
return (

55
screens/HomeScreen.js
View file

@ -40,6 +40,10 @@ export default class HomeScreen extends FetchedDataSectionList {
constructor() {
super(DATA_URL, REFRESH_TIME);
this.proxiwashClickAction = this.proxiwashClickAction.bind(this);
this.tutorinsaClickAction = this.tutorinsaClickAction.bind(this);
this.menuClickAction = this.menuClickAction.bind(this);
this.proximoClickAction = this.proximoClickAction.bind(this);
}
/**
@ -289,6 +293,14 @@ export default class HomeScreen extends FetchedDataSectionList {
}
clickAction(isAvailable, displayEvent) {
if (isAvailable)
this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
else
this.props.navigation.navigate('PlanningScreen');
};
getDashboardEventItem(content: Array<Object>) {
let icon = 'calendar-range';
let color = ThemeManager.getCurrentThemeVariables().planningColor;
@ -310,12 +322,6 @@ export default class HomeScreen extends FetchedDataSectionList {
</Text>;
} else
subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
let clickAction = () => {
if (isAvailable)
this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
else
this.props.navigation.navigate('PlanningScreen');
};
let displayEvent = this.getDisplayEvent(futureEvents);
@ -324,7 +330,7 @@ export default class HomeScreen extends FetchedDataSectionList {
subtitle={subtitle}
color={color}
icon={icon}
clickAction={() => clickAction()}
clickAction={this.clickAction.bind(this, isAvailable, displayEvent)}
title={title}
isAvailable={isAvailable}
displayEvent={displayEvent}
@ -332,6 +338,14 @@ export default class HomeScreen extends FetchedDataSectionList {
);
}
proximoClickAction() {
this.props.navigation.navigate('Proximo');
}
menuClickAction() {
this.props.navigation.navigate('SelfMenuScreen');
}
getDashboardBottomItem(content: Array<Object>) {
let proximoData = content[0]['data'];
@ -355,7 +369,6 @@ export default class HomeScreen extends FetchedDataSectionList {
</Text>;
} else
proximoSubtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
let proximoClickAction = () => this.props.navigation.navigate('Proximo');
let menuIcon = 'silverware-fork-knife';
@ -367,7 +380,6 @@ export default class HomeScreen extends FetchedDataSectionList {
menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
} else
menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
let menuClickAction = () => this.props.navigation.navigate('SelfMenuScreen');
return (
<View style={{
flexDirection: 'row',
@ -379,7 +391,7 @@ export default class HomeScreen extends FetchedDataSectionList {
subtitle={menuSubtitle}
color={menuColor}
icon={menuIcon}
clickAction={() => menuClickAction()}
clickAction={this.menuClickAction}
title={menuTitle}
isAvailable={isMenuAvailable}
isSquareLeft={true}/>
@ -388,13 +400,22 @@ export default class HomeScreen extends FetchedDataSectionList {
subtitle={proximoSubtitle}
color={proximoColor}
icon={proximoIcon}
clickAction={() => proximoClickAction()}
clickAction={this.proximoClickAction}
title={proximoTitle}
isAvailable={isProximoAvailable}/>
</View>
);
}
proxiwashClickAction() {
this.props.navigation.navigate('Proxiwash');
}
tutorinsaClickAction() {
this.props.navigation.navigate('TutorInsaScreen');
}
getDashboardMiddleItem(content: Array<Object>) {
let proxiwashData = content[0]['data'];
let tutorinsaData = content[1]['data'];
@ -449,7 +470,6 @@ export default class HomeScreen extends FetchedDataSectionList {
</Text>;
} else
proxiwashSubtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
let proxiwashClickAction = () => this.props.navigation.navigate('Proxiwash');
let tutorinsaIcon = 'school';
let tutorinsaColor = ThemeManager.getCurrentThemeVariables().tutorinsaColor;
@ -470,7 +490,6 @@ export default class HomeScreen extends FetchedDataSectionList {
</Text>;
} else
tutorinsaSubtitle = i18n.t('homeScreen.dashboard.tutorinsaSubtitleNA');
let tutorinsaClickAction = () => this.props.navigation.navigate('TutorInsaScreen');
return (
<View style={{
@ -483,7 +502,7 @@ export default class HomeScreen extends FetchedDataSectionList {
subtitle={proxiwashSubtitle}
color={proxiwashColor}
icon={proxiwashIcon}
clickAction={() => proxiwashClickAction()}
clickAction={this.proxiwashClickAction}
title={proxiwashTitle}
isAvailable={proxiwashIsAvailable}
isSquareLeft={true}/>
@ -492,7 +511,7 @@ export default class HomeScreen extends FetchedDataSectionList {
subtitle={tutorinsaSubtitle}
color={tutorinsaColor}
icon={tutorinsaIcon}
clickAction={() => tutorinsaClickAction()}
clickAction={this.tutorinsaClickAction}
title={tutorinsaTitle}
isAvailable={tutorinsaIsAvailable}/>
</View>
@ -500,7 +519,7 @@ export default class HomeScreen extends FetchedDataSectionList {
}
getRenderItem(item: Object, section: Object, data: Object) {
getRenderItem(item: Object, section: Object) {
return (
section['id'] === SECTIONS_ID[0] ? this.getDashboardItem(item) :
<Card style={{
@ -525,7 +544,7 @@ export default class HomeScreen extends FetchedDataSectionList {
}}>
<Body>
{item.full_picture !== '' && item.full_picture !== undefined ?
<TouchableOpacity onPress={() => openWebLink(item.full_picture)}
<TouchableOpacity onPress={openWebLink.bind(null, item.full_picture)}
style={{width: '100%', height: 250, marginBottom: 5}}>
<Image source={{uri: item.full_picture}}
style={{flex: 1, resizeMode: "contain"}}
@ -547,7 +566,7 @@ export default class HomeScreen extends FetchedDataSectionList {
}}>
<Left>
<Button transparent
onPress={() => openWebLink(item.permalink_url)}>
onPress={openWebLink.bind(null, item.permalink_url)}>
<CustomMaterialIcon
icon="facebook"
color="#57aeff"

6
screens/PlanningDisplayScreen.js
View file

@ -14,7 +14,7 @@ type Props = {
navigation: Object,
};
function openWebLink(link) {
function openWebLink(event, link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}
@ -22,8 +22,8 @@ function openWebLink(link) {
* Class defining an about screen. This screen shows the user information about the app and it's author.
*/
export default class PlanningDisplayScreen extends React.Component<Props> {
render() {
// console.log("rendering planningDisplayScreen");
const nav = this.props.navigation;
const displayData = nav.getParam('data', []);
return (
@ -60,7 +60,7 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
},
div: {color: ThemeManager.getCurrentThemeVariables().textColor}
}}
onLinkPress={(event, link) => openWebLink(link)}/>
onLinkPress={openWebLink}/>
: <View/>}
</Content>
</Container>

57
screens/PlanningScreen.js
View file

@ -56,6 +56,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
didFocusSubscription: Function;
willBlurSubscription: Function;
state = {
refreshing: false,
agendaItems: {},
@ -76,6 +77,22 @@ export default class PlanningScreen extends React.Component<Props, State> {
if (i18n.currentLocale().startsWith("fr")) {
LocaleConfig.defaultLocale = 'fr';
}
// Create references for functions required in the render function
this._onRefresh = this._onRefresh.bind(this);
this.onCalendarToggled = this.onCalendarToggled.bind(this);
this.getRenderItem = this.getRenderItem.bind(this);
this.getRenderEmptyDate = this.getRenderEmptyDate.bind(this);
this.setAgendaRef = this.setAgendaRef.bind(this);
this.onCalendarToggled = this.onCalendarToggled.bind(this);
this.onCalendarToggled = this.onCalendarToggled.bind(this);
this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
}
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
return nextState.refreshing === false && this.state.refreshing === true ||
nextState.agendaItems !== this.state.agendaItems ||
nextState.calendarShowing !== this.state.calendarShowing;
}
componentDidMount() {
@ -90,7 +107,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
);
}
onBackButtonPressAndroid = () => {
onBackButtonPressAndroid() {
if (this.state.calendarShowing) {
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
return true;
@ -126,10 +143,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
getRenderItem(item: Object) {
let navData = {
data: item
};
const nav = this.props.navigation;
return (
<Touchable
style={{
@ -138,7 +151,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
marginRight: 10,
marginTop: 17,
}}
onPress={() => nav.navigate('PlanningDisplayScreen', navData)}>
onPress={() => this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}>
<View style={{
padding: 10,
flex: 1,
@ -252,38 +265,46 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
}
setAgendaRef(ref) {
this.agendaRef = ref;
}
onCalendarToggled(calendarOpened) {
this.setState({calendarShowing: calendarOpened});
}
currentDate = this.getCurrentDate();
render() {
const nav = this.props.navigation;
// console.log("rendering PlanningScreen");
return (
<BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
<BaseContainer navigation={this.props.navigation} headerTitle={i18n.t('screens.planning')}>
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={this.state.agendaItems}
// initially selected day
selected={this.getCurrentDate()}
selected={this.currentDate}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={this.getCurrentDate()}
minDate={this.currentDate}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={1}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={AGENDA_MONTH_SPAN}
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
onRefresh={() => this._onRefresh()}
onRefresh={this._onRefresh}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {
this.setState({calendarShowing: calendarOpened})
}}
onCalendarToggled={this.onCalendarToggled}
// Set this true while waiting for new data from a refresh
refreshing={this.state.refreshing}
renderItem={(item) => this.getRenderItem(item)}
renderEmptyDate={() => this.getRenderEmptyDate()}
rowHasChanged={() => this.rowHasChanged()}
renderItem={this.getRenderItem}
renderEmptyDate={this.getRenderEmptyDate}
rowHasChanged={this.rowHasChanged}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// ref to this agenda in order to handle back button event
ref={(ref) => this.agendaRef = ref}
ref={this.setAgendaRef}
// agenda theme
theme={{
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,

92
screens/Proximo/ProximoListScreen.js
View file

@ -76,6 +76,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
super(props);
this.modalRef = React.createRef();
this.originalData = this.navData['data'];
this.search = this.search.bind(this);
this.selectSortModeName = this.selectSortModeName.bind(this);
this.selectSortModePrice = this.selectSortModePrice.bind(this);
this.showMenu = this.showMenu.bind(this);
this.renderItem = this.renderItem.bind(this);
}
/**
@ -260,6 +265,19 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
}
selectSortModeName() {
this.sortModeSelected(sortMode.name);
}
selectSortModePrice() {
this.sortModeSelected(sortMode.price);
}
showMenu() {
this._menu.show();
}
getSortMenu() {
return (
<Menu
@ -267,9 +285,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
onPress={this.showMenu}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
@ -277,12 +293,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.name)}>
onPress={this.selectSortModeName}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.price)}>
onPress={this.selectSortModePrice}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
@ -290,7 +306,41 @@ export default class ProximoListScreen extends React.Component<Props, State> {
);
}
renderItem({item}) {
return (<ListItem
thumbnail
onPress={() => {
this.showItemDetails(item);
}}
>
<Left>
<Thumbnail square source={{uri: item.image}}/>
</Left>
<Body>
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
<Text note style={{
marginLeft: 20,
color: this.getStockColor(parseInt(item.quantity))
}}>
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Text>
</Body>
<Right>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>
</Right>
</ListItem>);
}
keyExtractor(item) {
return item.name + item.code;
}
render() {
// console.log("rendering ProximoListScreen");
const nav = this.props.navigation;
return (
<Container>
@ -303,7 +353,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
hasBackButton={true}
navigation={nav}
hasSearchField={true}
searchCallback={(text) => this.search(text)}
searchCallback={this.search}
shouldFocusSearchBar={this.shouldFocusSearchBar}
rightButton={this.getSortMenu()}
/>
@ -311,35 +361,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
<FlatList
data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData}
keyExtractor={(item) => item.name + item.code}
keyExtractor={this.keyExtractor}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>
<ListItem
thumbnail
onPress={() => {
this.showItemDetails(item);
}}
>
<Left>
<Thumbnail square source={{uri: item.image}}/>
</Left>
<Body>
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
<Text note style={{
marginLeft: 20,
color: this.getStockColor(parseInt(item.quantity))
}}>
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Text>
</Body>
<Right>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>
</Right>
</ListItem>}
renderItem={this.renderItem}
/>
</Container>
);

16
screens/Proximo/ProximoMainScreen.js
View file

@ -20,6 +20,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
constructor() {
super(DATA_URL, 0);
this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
}
static sortFinalData(a: Object, b: Object) {
@ -100,7 +102,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
return availableArticles;
}
getRightButton() {
onPressSearchBtn() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
@ -113,8 +115,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
},
};
this.props.navigation.navigate('ProximoListScreen', searchScreenData);
}
onPressAboutBtn() {
this.props.navigation.navigate('ProximoAboutScreen');
}
getRightButton() {
return (
<View
style={{
@ -122,14 +130,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
}}>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
onPress={this.onPressSearchBtn}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
onPress={this.onPressAboutBtn}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
@ -138,7 +146,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
);
}
getRenderItem(item: Object, section: Object, data: Object) {
getRenderItem(item: Object, section: Object) {
let dataToSend = {
shouldFocusSearchBar: false,
data: item,

11
screens/Proxiwash/ProxiwashScreen.js
View file

@ -75,6 +75,8 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
machinesWatched: [],
};
this.setMinTimeRefresh(30);
this.navigateToAboutScreen = this.navigateToAboutScreen.bind(this);
}
/**
@ -272,11 +274,15 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
);
}
navigateToAboutScreen() {
this.props.navigation.navigate('ProxiwashAboutScreen');
}
getRightButton(): * {
return (
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProxiwashAboutScreen')}>
onPress={this.navigateToAboutScreen}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
@ -289,10 +295,9 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
*
* @param item The object containing the item's FetchedData
* @param section The object describing the current SectionList section
* @param data The full FetchedData used by the SectionList
* @returns {React.Node}
*/
getRenderItem(item: Object, section: Object, data: Object) {
getRenderItem(item: Object, section: Object) {
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');

2
screens/SelfMenuScreen.js
View file

@ -119,7 +119,7 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
);
}
getRenderItem(item: Object, section: Object, data: Object) {
getRenderItem(item: Object, section: Object) {
return (
<Card style={{
flex: 0,