application-amicale/src/screens/Amicale/VoteScreen.tsx

452 lines
12 KiB
TypeScript

/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {RefreshControl, View} from 'react-native';
import {StackNavigationProp} from '@react-navigation/stack';
import i18n from 'i18n-js';
import {Button} from 'react-native-paper';
import AuthenticatedScreen from '../../components/Amicale/AuthenticatedScreen';
import {getTimeOnlyString, stringToDate} from '../../utils/Planning';
import VoteTease from '../../components/Amicale/Vote/VoteTease';
import VoteSelect from '../../components/Amicale/Vote/VoteSelect';
import VoteResults from '../../components/Amicale/Vote/VoteResults';
import VoteWait from '../../components/Amicale/Vote/VoteWait';
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
import MascotPopup from '../../components/Mascot/MascotPopup';
import AsyncStorageManager from '../../managers/AsyncStorageManager';
import VoteNotAvailable from '../../components/Amicale/Vote/VoteNotAvailable';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
export type VoteTeamType = {
id: number;
name: string;
votes: number;
};
type TeamResponseType = {
has_voted: boolean;
teams: Array<VoteTeamType>;
};
type VoteDatesStringType = {
date_begin: string;
date_end: string;
date_result_begin: string;
date_result_end: string;
};
type VoteDatesObjectType = {
date_begin: Date;
date_end: Date;
date_result_begin: Date;
date_result_end: Date;
};
// const FAKE_DATE = {
// "date_begin": "2020-08-19 15:50",
// "date_end": "2020-08-19 15:50",
// "date_result_begin": "2020-08-19 19:50",
// "date_result_end": "2020-08-19 22:50",
// };
//
// const FAKE_DATE2 = {
// "date_begin": null,
// "date_end": null,
// "date_result_begin": null,
// "date_result_end": null,
// };
//
// const FAKE_TEAMS = {
// has_voted: false,
// teams: [
// {
// id: 1,
// name: "TEST TEAM1",
// },
// {
// id: 2,
// name: "TEST TEAM2",
// },
// ],
// };
// const FAKE_TEAMS2 = {
// has_voted: false,
// teams: [
// {
// id: 1,
// name: "TEST TEAM1",
// votes: 9,
// },
// {
// id: 2,
// name: "TEST TEAM2",
// votes: 9,
// },
// {
// id: 3,
// name: "TEST TEAM3",
// votes: 5,
// },
// ],
// };
const MIN_REFRESH_TIME = 5 * 1000;
type PropsType = {
navigation: StackNavigationProp<any>;
};
type StateType = {
hasVoted: boolean;
mascotDialogVisible: boolean;
};
/**
* Screen displaying vote information and controls
*/
export default class VoteScreen extends React.Component<PropsType, StateType> {
teams: Array<VoteTeamType>;
hasVoted: boolean;
datesString: null | VoteDatesStringType;
dates: null | VoteDatesObjectType;
today: Date;
mainFlatListData: Array<{key: string}>;
lastRefresh: Date | null;
authRef: {current: null | AuthenticatedScreen<any>};
constructor(props: PropsType) {
super(props);
this.teams = [];
this.datesString = null;
this.dates = null;
this.state = {
hasVoted: false,
mascotDialogVisible: AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.voteShowMascot.key,
),
};
this.hasVoted = false;
this.today = new Date();
this.authRef = React.createRef();
this.lastRefresh = null;
this.mainFlatListData = [{key: 'main'}, {key: 'info'}];
}
/**
* Gets the string representation of the given date.
*
* If the given date is the same day as today, only return the tile.
* Otherwise, return the full date.
*
* @param date The Date object representation of the wanted date
* @param dateString The string representation of the wanted date
* @returns {string}
*/
getDateString(date: Date, dateString: string): string {
if (this.today.getDate() === date.getDate()) {
const str = getTimeOnlyString(dateString);
return str != null ? str : '';
}
return dateString;
}
getMainRenderItem = ({item}: {item: {key: string}}) => {
if (item.key === 'info') {
return (
<View>
<Button
mode="contained"
icon="help-circle"
onPress={this.showMascotDialog}
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 20,
}}>
{i18n.t('screens.vote.mascotDialog.title')}
</Button>
</View>
);
}
return this.getContent();
};
getScreen = (data: Array<TeamResponseType | VoteDatesStringType | null>) => {
const {state} = this;
// data[0] = FAKE_TEAMS2;
// data[1] = FAKE_DATE;
this.lastRefresh = new Date();
const teams = data[0] as TeamResponseType | null;
const dateStrings = data[1] as VoteDatesStringType | null;
if (dateStrings != null && dateStrings.date_begin == null) {
this.datesString = null;
} else {
this.datesString = dateStrings;
}
if (teams != null) {
this.teams = teams.teams;
this.hasVoted = teams.has_voted;
}
this.generateDateObject();
return (
<CollapsibleFlatList
data={this.mainFlatListData}
refreshControl={
<RefreshControl refreshing={false} onRefresh={this.reloadData} />
}
extraData={state.hasVoted.toString()}
renderItem={this.getMainRenderItem}
/>
);
};
getContent() {
const {state} = this;
if (!this.isVoteStarted()) {
return this.getTeaseVoteCard();
}
if (this.isVoteRunning() && !this.hasVoted && !state.hasVoted) {
return this.getVoteCard();
}
if (!this.isResultStarted()) {
return this.getWaitVoteCard();
}
if (this.isResultRunning()) {
return this.getVoteResultCard();
}
return <VoteNotAvailable />;
}
onVoteSuccess = (): void => this.setState({hasVoted: true});
/**
* The user has not voted yet, and the votes are open
*/
getVoteCard() {
return (
<VoteSelect
teams={this.teams}
onVoteSuccess={this.onVoteSuccess}
onVoteError={this.reloadData}
/>
);
}
/**
* Votes have ended, results can be displayed
*/
getVoteResultCard() {
if (this.dates != null && this.datesString != null) {
return (
<VoteResults
teams={this.teams}
dateEnd={this.getDateString(
this.dates.date_result_end,
this.datesString.date_result_end,
)}
/>
);
}
return <VoteNotAvailable />;
}
/**
* Vote will open shortly
*/
getTeaseVoteCard() {
if (this.dates != null && this.datesString != null) {
return (
<VoteTease
startDate={this.getDateString(
this.dates.date_begin,
this.datesString.date_begin,
)}
/>
);
}
return <VoteNotAvailable />;
}
/**
* Votes have ended, or user has voted waiting for results
*/
getWaitVoteCard() {
const {state} = this;
let startDate = null;
if (
this.dates != null &&
this.datesString != null &&
this.dates.date_result_begin != null
) {
startDate = this.getDateString(
this.dates.date_result_begin,
this.datesString.date_result_begin,
);
}
return (
<VoteWait
startDate={startDate}
hasVoted={this.hasVoted || state.hasVoted}
justVoted={state.hasVoted}
isVoteRunning={this.isVoteRunning()}
/>
);
}
/**
* Reloads vote data if last refresh delta is smaller than the minimum refresh time
*/
reloadData = () => {
let canRefresh;
const {lastRefresh} = this;
if (lastRefresh != null) {
canRefresh =
new Date().getTime() - lastRefresh.getTime() > MIN_REFRESH_TIME;
} else {
canRefresh = true;
}
if (canRefresh && this.authRef.current != null) {
this.authRef.current.reload();
}
};
showMascotDialog = () => {
this.setState({mascotDialogVisible: true});
};
hideMascotDialog = () => {
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.voteShowMascot.key,
false,
);
this.setState({mascotDialogVisible: false});
};
isVoteStarted(): boolean {
return this.dates != null && this.today > this.dates.date_begin;
}
isResultRunning(): boolean {
return (
this.dates != null &&
this.today > this.dates.date_result_begin &&
this.today < this.dates.date_result_end
);
}
isResultStarted(): boolean {
return this.dates != null && this.today > this.dates.date_result_begin;
}
isVoteRunning(): boolean {
return (
this.dates != null &&
this.today > this.dates.date_begin &&
this.today < this.dates.date_end
);
}
/**
* Generates the objects containing string and Date representations of key vote dates
*/
generateDateObject() {
const strings = this.datesString;
if (strings != null) {
const dateBegin = stringToDate(strings.date_begin);
const dateEnd = stringToDate(strings.date_end);
const dateResultBegin = stringToDate(strings.date_result_begin);
const dateResultEnd = stringToDate(strings.date_result_end);
if (
dateBegin != null &&
dateEnd != null &&
dateResultBegin != null &&
dateResultEnd != null
) {
this.dates = {
date_begin: dateBegin,
date_end: dateEnd,
date_result_begin: dateResultBegin,
date_result_end: dateResultEnd,
};
} else {
this.dates = null;
}
} else {
this.dates = null;
}
}
/**
* Renders the authenticated screen.
*
* Teams and dates are not mandatory to allow showing the information box even if api requests fail
*
* @returns {*}
*/
render() {
const {props, state} = this;
return (
<View style={{flex: 1}}>
<AuthenticatedScreen<TeamResponseType | VoteDatesStringType>
navigation={props.navigation}
ref={this.authRef}
requests={[
{
link: 'elections/teams',
params: {},
mandatory: false,
},
{
link: 'elections/dates',
params: {},
mandatory: false,
},
]}
renderFunction={this.getScreen}
/>
<MascotPopup
visible={state.mascotDialogVisible}
title={i18n.t('screens.vote.mascotDialog.title')}
message={i18n.t('screens.vote.mascotDialog.message')}
icon="vote"
buttons={{
cancel: {
message: i18n.t('screens.vote.mascotDialog.button'),
icon: 'check',
onPress: this.hideMascotDialog,
},
}}
emotion={MASCOT_STYLE.CUTE}
/>
</View>
);
}
}