application-amicale/src/screens/Planning/PlanningDisplayScreen.js

126 lines
4 KiB
JavaScript

// @flow
import * as React from 'react';
import {ScrollView, View} from 'react-native';
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
import {Card, withTheme} from 'react-native-paper';
import DateManager from "../../managers/DateManager";
import ImageModal from 'react-native-image-modal';
import BasicLoadingScreen from "../../components/Custom/BasicLoadingScreen";
import {apiRequest} from "../../utils/WebData";
import ErrorView from "../../components/Custom/ErrorView";
import CustomHTML from "../../components/Custom/CustomHTML";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
type Props = {
navigation: Object,
route: Object
};
type State = {
loading: boolean
};
const CLUB_INFO_PATH = "event/info";
/**
* Class defining a planning event information page.
*/
class PlanningDisplayScreen extends React.Component<Props, State> {
displayData: Object;
shouldFetchData: boolean;
eventId: number;
errorCode: number;
colors: Object;
constructor(props) {
super(props);
this.colors = props.theme.colors;
if (this.props.route.params.data !== undefined) {
this.displayData = this.props.route.params.data;
this.eventId = this.displayData.id;
this.shouldFetchData = false;
this.errorCode = 0;
this.state = {
loading: false,
};
} else {
this.displayData = null;
this.eventId = this.props.route.params.eventId;
this.shouldFetchData = true;
this.errorCode = 0;
this.state = {
loading: true,
};
this.fetchData();
}
}
fetchData = () => {
this.setState({loading: true});
apiRequest(CLUB_INFO_PATH, 'POST', {id: this.eventId})
.then(this.onFetchSuccess)
.catch(this.onFetchError);
};
onFetchSuccess = (data: Object) => {
this.displayData = data;
this.setState({loading: false});
};
onFetchError = (error: number) => {
this.errorCode = error;
this.setState({loading: false});
};
getContent() {
let subtitle = getFormattedEventTime(
this.displayData["date_begin"], this.displayData["date_end"]);
let dateString = getDateOnlyString(this.displayData["date_begin"]);
if (dateString !== null)
subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
return (
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
<Card.Title
title={this.displayData.title}
subtitle={subtitle}
/>
{this.displayData.logo !== null ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={this.colors.background}
style={{
width: 300,
height: 300,
}}
source={{
uri: this.displayData.logo,
}}
/></View>
: <View/>}
{this.displayData.description !== null ?
<Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<CustomHTML html={this.displayData.description}/>
</Card.Content>
: <View/>}
</ScrollView>
);
}
render() {
if (this.state.loading)
return <BasicLoadingScreen/>;
else if (this.errorCode === 0)
return this.getContent();
else
return <ErrorView {...this.props} errorCode={this.errorCode} onRefresh={this.fetchData}/>;
}
}
export default withTheme(PlanningDisplayScreen);