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

Improved layout

Browse source
This commit is contained in:
keplyx 2020-03-07 09:15:25 +01:00
parent 1f64c734aa
commit 38ada0c027
6 changed files with 69 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
components/WebSectionList.js
View file

@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager';
import WebDataManager from "../utils/WebDataManager";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js";
import {ActivityIndicator, Subheading} from 'react-native-paper';
import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper';
import {RefreshControl, SectionList, View} from "react-native";
type Props = {
@ -16,13 +16,13 @@ type Props = {
renderSectionHeader: React.Node,
stickyHeader: boolean,
createDataset: Function,
updateErrorText: string,
}
type State = {
refreshing: boolean,
firstLoading: boolean,
fetchedData: Object,
snackbarVisible: boolean
};
/**
@ -37,7 +37,7 @@ type State = {
export default class WebSectionList extends React.Component<Props, State> {
static defaultProps = {
renderSectionHeader: undefined,
renderSectionHeader: null,
stickyHeader: false,
};
@ -50,6 +50,7 @@ export default class WebSectionList extends React.Component<Props, State> {
refreshing: false,
firstLoading: true,
fetchedData: {},
snackbarVisible: false
};
onRefresh: Function;
@ -57,6 +58,8 @@ export default class WebSectionList extends React.Component<Props, State> {
onFetchError: Function;
getEmptyRenderItem: Function;
getEmptySectionHeader: Function;
showSnackBar: Function;
hideSnackBar: Function;
constructor() {
super();
@ -66,6 +69,8 @@ export default class WebSectionList extends React.Component<Props, State> {
this.onFetchError = this.onFetchError.bind(this);
this.getEmptyRenderItem = this.getEmptyRenderItem.bind(this);
this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
this.showSnackBar = this.showSnackBar.bind(this);
this.hideSnackBar = this.hideSnackBar.bind(this);
}
/**
@ -112,7 +117,8 @@ export default class WebSectionList extends React.Component<Props, State> {
refreshing: false,
firstLoading: false
});
this.webDataManager.showUpdateToast(this.props.updateErrorText);
this.showSnackBar();
// this.webDataManager.showUpdateToast(this.props.updateErrorText);
}
/**
@ -194,30 +200,51 @@ export default class WebSectionList extends React.Component<Props, State> {
return item.text
}
showSnackBar() {
this.setState({snackbarVisible: true})
}
hideSnackBar() {
this.setState({snackbarVisible: false})
}
render() {
let dataset = this.props.createDataset(this.state.fetchedData);
const isEmpty = dataset[0].data.length === 0;
const shouldRenderHeader = isEmpty || (this.props.renderSectionHeader !== undefined);
const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null);
if (isEmpty)
dataset = this.createEmptyDataset();
return (
<SectionList
sections={dataset}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>
}
renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader}
renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem}
style={{minHeight: 300, width: '100%'}}
stickySectionHeadersEnabled={this.props.stickyHeader}
contentContainerStyle={
isEmpty ?
{flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
}
/>
<View>
<Snackbar
visible={this.state.snackbarVisible}
onDismiss={this.hideSnackBar}
action={{
label: 'OK',
onPress: this.hideSnackBar,
}}
duration={4000}
>
{i18n.t("homeScreen.listUpdateFail")}
</Snackbar>
<SectionList
sections={dataset}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>
}
renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader}
renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem}
style={{minHeight: 300, width: '100%'}}
stickySectionHeadersEnabled={this.props.stickyHeader}
contentContainerStyle={
isEmpty ?
{flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
}
/>
</View>
);
}
}

3
screens/HomeScreen.js
View file

@ -552,8 +552,7 @@ export default class HomeScreen extends React.Component<Props> {
navigation={nav}
refreshTime={REFRESH_TIME}
fetchUrl={DATA_URL}
renderItem={this.getRenderItem}
updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
renderItem={this.getRenderItem}/>
);
}
}

2
screens/Proximo/ProximoListScreen.js
View file

@ -327,7 +327,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
onPress={onPress}
left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} source={{uri: item.image}}/>}
right={props =>
<Text style={{fontWeight: "bold"}}>
{item.price}€

3
screens/Proximo/ProximoMainScreen.js
View file

@ -205,8 +205,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
navigation={nav}
refreshTime={0}
fetchUrl={DATA_URL}
renderItem={this.getRenderItem}
updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
renderItem={this.getRenderItem}/>
);
}
}

18
screens/Proxiwash/ProxiwashScreen.js
View file

@ -8,7 +8,7 @@ import WebSectionList from "../../components/WebSectionList";
import NotificationsManager from "../../utils/NotificationsManager";
import AsyncStorageManager from "../../utils/AsyncStorageManager";
import * as Expo from "expo";
import {Divider, IconButton, List, Text} from 'react-native-paper';
import {Divider, IconButton, List, Text, Title} from 'react-native-paper';
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
@ -47,6 +47,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
onAboutPress: Function;
getRenderItem: Function;
getRenderSectionHeader: Function;
createDataset: Function;
state = {
@ -88,9 +89,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
stateIcons[MACHINE_STATES.ERREUR] = 'alert';
// let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current;
// this.setMinTimeRefresh(30);
this.onAboutPress = this.onAboutPress.bind(this);
this.getRenderItem = this.getRenderItem.bind(this);
this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
this.createDataset = this.createDataset.bind(this);
}
@ -303,7 +304,18 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
refreshTime={REFRESH_TIME}
fetchUrl={DATA_URL}
renderItem={this.getRenderItem}
updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
renderSectionHeader={this.getRenderSectionHeader}/>
);
}
getRenderSectionHeader({section}: Object) {
return (
<Title style={{
marginTop: 10,
textAlign: 'center'
}}>
{section.title}
</Title>
);
}

17
screens/SelfMenuScreen.js
View file

@ -95,19 +95,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
getRenderSectionHeader({section}: Object) {
return (
<Card style={{
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10,
borderRadius: 50
}}>
<Title style={{
textAlign: 'center',
marginTop: 10,
marginBottom: 10
}}>{section.title}</Title>
</Card>
<Title>{section.title}</Title>
);
}
@ -119,7 +107,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
}}>
<Card.Title
title={item.name}
titleStyle={{textAlign: 'center'}}/>
/>
<View style={{
width: '80%',
marginLeft: 'auto',
@ -159,7 +147,6 @@ export default class SelfMenuScreen extends React.Component<Props> {
fetchUrl={DATA_URL}
renderItem={this.getRenderItem}
renderSectionHeader={this.getRenderSectionHeader}
updateErrorText={i18n.t("homeScreen.listUpdateFail")}
stickyHeader={true}/>
);
}