forked from vergnet/application-amicale
Improve vote screen to match linter
This commit is contained in:
parent
142b861ccb
commit
3d9bfdea4c
1 changed files with 330 additions and 294 deletions
|
|
@ -1,46 +1,47 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {RefreshControl, View} from "react-native";
|
||||
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 {StackNavigationProp} from "@react-navigation/stack";
|
||||
import i18n from "i18n-js";
|
||||
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../components/Mascot/MascotPopup";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import {Button} from "react-native-paper";
|
||||
import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
|
||||
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
|
||||
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';
|
||||
import type {ApiGenericDataType} from '../../utils/WebData';
|
||||
|
||||
export type team = {
|
||||
export type VoteTeamType = {
|
||||
id: number,
|
||||
name: string,
|
||||
votes: number,
|
||||
}
|
||||
|
||||
type teamResponse = {
|
||||
has_voted: boolean,
|
||||
teams: Array<team>,
|
||||
};
|
||||
|
||||
type stringVoteDates = {
|
||||
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 objectVoteDates = {
|
||||
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",
|
||||
|
|
@ -92,84 +93,48 @@ type objectVoteDates = {
|
|||
|
||||
const MIN_REFRESH_TIME = 5 * 1000;
|
||||
|
||||
type Props = {
|
||||
navigation: StackNavigationProp
|
||||
}
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
};
|
||||
|
||||
type State = {
|
||||
type StateType = {
|
||||
hasVoted: boolean,
|
||||
mascotDialogVisible: boolean,
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Screen displaying vote information and controls
|
||||
*/
|
||||
export default class VoteScreen extends React.Component<Props, State> {
|
||||
export default class VoteScreen extends React.Component<PropsType, StateType> {
|
||||
teams: Array<VoteTeamType>;
|
||||
|
||||
state = {
|
||||
hasVoted: false,
|
||||
mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.voteShowBanner.key),
|
||||
};
|
||||
|
||||
teams: Array<team>;
|
||||
hasVoted: boolean;
|
||||
datesString: null | stringVoteDates;
|
||||
dates: null | objectVoteDates;
|
||||
|
||||
datesString: null | VoteDatesStringType;
|
||||
|
||||
dates: null | VoteDatesObjectType;
|
||||
|
||||
today: Date;
|
||||
|
||||
mainFlatListData: Array<{ key: string }>;
|
||||
mainFlatListData: Array<{key: string}>;
|
||||
|
||||
lastRefresh: Date | null;
|
||||
|
||||
authRef: { current: null | AuthenticatedScreen };
|
||||
authRef: {current: null | AuthenticatedScreen};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hasVoted: false,
|
||||
mascotDialogVisible: AsyncStorageManager.getBool(
|
||||
AsyncStorageManager.PREFERENCES.voteShowBanner.key,
|
||||
),
|
||||
};
|
||||
this.hasVoted = false;
|
||||
this.today = new Date();
|
||||
this.authRef = React.createRef();
|
||||
this.lastRefresh = null;
|
||||
this.mainFlatListData = [
|
||||
{key: 'main'},
|
||||
{key: 'info'},
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads vote data if last refresh delta is smaller than the minimum refresh time
|
||||
*/
|
||||
reloadData = () => {
|
||||
let canRefresh;
|
||||
const lastRefresh = this.lastRefresh;
|
||||
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()
|
||||
};
|
||||
|
||||
/**
|
||||
* 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;
|
||||
this.mainFlatListData = [{key: 'main'}, {key: 'info'}];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -185,60 +150,43 @@ export default class VoteScreen extends React.Component<Props, State> {
|
|||
getDateString(date: Date, dateString: string): string {
|
||||
if (this.today.getDate() === date.getDate()) {
|
||||
const str = getTimeOnlyString(dateString);
|
||||
return str != null ? str : "";
|
||||
} else
|
||||
return str != null ? str : '';
|
||||
}
|
||||
return dateString;
|
||||
}
|
||||
|
||||
isVoteRunning() {
|
||||
return this.dates != null && this.today > this.dates.date_begin && this.today < this.dates.date_end;
|
||||
}
|
||||
|
||||
isVoteStarted() {
|
||||
return this.dates != null && this.today > this.dates.date_begin;
|
||||
}
|
||||
|
||||
isResultRunning() {
|
||||
return this.dates != null && this.today > this.dates.date_result_begin && this.today < this.dates.date_result_end;
|
||||
}
|
||||
|
||||
isResultStarted() {
|
||||
return this.dates != null && this.today > this.dates.date_result_begin;
|
||||
}
|
||||
|
||||
mainRenderItem = ({item}: { item: { key: string } }) => {
|
||||
getMainRenderItem = ({item}: {item: {key: string}}): React.Node => {
|
||||
if (item.key === 'info')
|
||||
return (
|
||||
<View>
|
||||
<Button
|
||||
mode={"contained"}
|
||||
icon={"help-circle"}
|
||||
mode="contained"
|
||||
icon="help-circle"
|
||||
onPress={this.showMascotDialog}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
marginTop: 20
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 20,
|
||||
}}>
|
||||
{i18n.t("screens.vote.mascotDialog.title")}
|
||||
{i18n.t('screens.vote.mascotDialog.title')}
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
else
|
||||
return this.getContent();
|
||||
};
|
||||
|
||||
getScreen = (data: Array<{ [key: string]: any } | null>) => {
|
||||
getScreen = (data: Array<ApiGenericDataType | null>): React.Node => {
|
||||
const {state} = this;
|
||||
// data[0] = FAKE_TEAMS2;
|
||||
// data[1] = FAKE_DATE;
|
||||
this.lastRefresh = new Date();
|
||||
|
||||
const teams: teamResponse | null = data[0];
|
||||
const dateStrings: stringVoteDates | null = data[1];
|
||||
const teams: TeamResponseType | null = data[0];
|
||||
const dateStrings: VoteDatesStringType | null = data[1];
|
||||
|
||||
if (dateStrings != null && dateStrings.date_begin == null)
|
||||
this.datesString = null;
|
||||
else
|
||||
this.datesString = dateStrings;
|
||||
else this.datesString = dateStrings;
|
||||
|
||||
if (teams != null) {
|
||||
this.teams = teams.teams;
|
||||
|
|
@ -250,86 +198,173 @@ export default class VoteScreen extends React.Component<Props, State> {
|
|||
<CollapsibleFlatList
|
||||
data={this.mainFlatListData}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={false}
|
||||
onRefresh={this.reloadData}
|
||||
/>
|
||||
<RefreshControl refreshing={false} onRefresh={this.reloadData} />
|
||||
}
|
||||
extraData={this.state.hasVoted.toString()}
|
||||
renderItem={this.mainRenderItem}
|
||||
extraData={state.hasVoted.toString()}
|
||||
renderItem={this.getMainRenderItem}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
getContent() {
|
||||
if (!this.isVoteStarted())
|
||||
return this.getTeaseVoteCard();
|
||||
else if (this.isVoteRunning() && (!this.hasVoted && !this.state.hasVoted))
|
||||
getContent(): React.Node {
|
||||
const {state} = this;
|
||||
if (!this.isVoteStarted()) return this.getTeaseVoteCard();
|
||||
if (this.isVoteRunning() && !this.hasVoted && !state.hasVoted)
|
||||
return this.getVoteCard();
|
||||
else if (!this.isResultStarted())
|
||||
return this.getWaitVoteCard();
|
||||
else if (this.isResultRunning())
|
||||
return this.getVoteResultCard();
|
||||
else
|
||||
return <VoteNotAvailable/>;
|
||||
if (!this.isResultStarted()) return this.getWaitVoteCard();
|
||||
if (this.isResultRunning()) return this.getVoteResultCard();
|
||||
return <VoteNotAvailable />;
|
||||
}
|
||||
|
||||
onVoteSuccess = () => this.setState({hasVoted: true});
|
||||
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}/>;
|
||||
getVoteCard(): React.Node {
|
||||
return (
|
||||
<VoteSelect
|
||||
teams={this.teams}
|
||||
onVoteSuccess={this.onVoteSuccess}
|
||||
onVoteError={this.reloadData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Votes have ended, results can be displayed
|
||||
*/
|
||||
getVoteResultCard() {
|
||||
getVoteResultCard(): React.Node {
|
||||
if (this.dates != null && this.datesString != null)
|
||||
return <VoteResults
|
||||
return (
|
||||
<VoteResults
|
||||
teams={this.teams}
|
||||
dateEnd={this.getDateString(
|
||||
this.dates.date_result_end,
|
||||
this.datesString.date_result_end)}
|
||||
/>;
|
||||
else
|
||||
return <VoteNotAvailable/>;
|
||||
this.datesString.date_result_end,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
return <VoteNotAvailable />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vote will open shortly
|
||||
*/
|
||||
getTeaseVoteCard() {
|
||||
getTeaseVoteCard(): React.Node {
|
||||
if (this.dates != null && this.datesString != null)
|
||||
return <VoteTease
|
||||
startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
|
||||
else
|
||||
return <VoteNotAvailable/>;
|
||||
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() {
|
||||
getWaitVoteCard(): React.Node {
|
||||
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 || this.state.hasVoted}
|
||||
justVoted={this.state.hasVoted}
|
||||
isVoteRunning={this.isVoteRunning()}/>;
|
||||
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})
|
||||
this.setState({mascotDialogVisible: true});
|
||||
};
|
||||
|
||||
hideMascotDialog = () => {
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.voteShowBanner.key, false);
|
||||
this.setState({mascotDialogVisible: false})
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.voteShowBanner.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.
|
||||
*
|
||||
|
|
@ -337,11 +372,12 @@ export default class VoteScreen extends React.Component<Props, State> {
|
|||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
render() {
|
||||
render(): React.Node {
|
||||
const {props, state} = this;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<AuthenticatedScreen
|
||||
{...this.props}
|
||||
navigation={props.navigation}
|
||||
ref={this.authRef}
|
||||
requests={[
|
||||
{
|
||||
|
|
@ -358,17 +394,17 @@ export default class VoteScreen extends React.Component<Props, State> {
|
|||
renderFunction={this.getScreen}
|
||||
/>
|
||||
<MascotPopup
|
||||
visible={this.state.mascotDialogVisible}
|
||||
title={i18n.t("screens.vote.mascotDialog.title")}
|
||||
message={i18n.t("screens.vote.mascotDialog.message")}
|
||||
icon={"vote"}
|
||||
visible={state.mascotDialogVisible}
|
||||
title={i18n.t('screens.vote.mascotDialog.title')}
|
||||
message={i18n.t('screens.vote.mascotDialog.message')}
|
||||
icon="vote"
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t("screens.vote.mascotDialog.button"),
|
||||
icon: "check",
|
||||
message: i18n.t('screens.vote.mascotDialog.button'),
|
||||
icon: 'check',
|
||||
onPress: this.hideMascotDialog,
|
||||
}
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.CUTE}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue