From 142b861ccbc30a15a21c7c19d1a5b65c650dff85 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Sun, 2 Aug 2020 19:51:19 +0200 Subject: [PATCH] Improve vote screens to match linter --- .../Amicale/Vote/VoteNotAvailable.js | 54 ++-- src/components/Amicale/Vote/VoteResults.js | 230 ++++++++------- src/components/Amicale/Vote/VoteSelect.js | 265 +++++++++--------- src/components/Amicale/Vote/VoteTease.js | 74 ++--- src/components/Amicale/Vote/VoteWait.js | 130 +++++---- 5 files changed, 394 insertions(+), 359 deletions(-) diff --git a/src/components/Amicale/Vote/VoteNotAvailable.js b/src/components/Amicale/Vote/VoteNotAvailable.js index 0593c5c..7240009 100644 --- a/src/components/Amicale/Vote/VoteNotAvailable.js +++ b/src/components/Amicale/Vote/VoteNotAvailable.js @@ -2,36 +2,38 @@ import * as React from 'react'; import {View} from 'react-native'; -import {Headline, withTheme} from "react-native-paper"; +import {Headline, withTheme} from 'react-native-paper'; import i18n from 'i18n-js'; -import type {CustomTheme} from "../../../managers/ThemeManager"; +import type {CustomTheme} from '../../../managers/ThemeManager'; -type Props = { - theme: CustomTheme -} +type PropsType = { + theme: CustomTheme, +}; -class VoteNotAvailable extends React.Component { +class VoteNotAvailable extends React.Component { + shouldComponentUpdate(): boolean { + return false; + } - shouldComponentUpdate() { - return false; - } - - render() { - return ( - - {i18n.t("screens.vote.noVote")} - - ); - } + render(): React.Node { + const {props} = this; + return ( + + + {i18n.t('screens.vote.noVote')} + + + ); + } } export default withTheme(VoteNotAvailable); diff --git a/src/components/Amicale/Vote/VoteResults.js b/src/components/Amicale/Vote/VoteResults.js index 83b5ff0..931e3d0 100644 --- a/src/components/Amicale/Vote/VoteResults.js +++ b/src/components/Amicale/Vote/VoteResults.js @@ -1,116 +1,134 @@ // @flow import * as React from 'react'; -import {Avatar, Card, List, ProgressBar, Subheading, withTheme} from "react-native-paper"; -import {FlatList, StyleSheet} from "react-native"; +import { + Avatar, + Card, + List, + ProgressBar, + Subheading, + withTheme, +} from 'react-native-paper'; +import {FlatList, StyleSheet} from 'react-native'; import i18n from 'i18n-js'; -import type {team} from "../../../screens/Amicale/VoteScreen"; -import type {CustomTheme} from "../../../managers/ThemeManager"; +import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen'; +import type {CustomTheme} from '../../../managers/ThemeManager'; - -type Props = { - teams: Array, - dateEnd: string, - theme: CustomTheme, -} - -class VoteResults extends React.Component { - - totalVotes: number; - winnerIds: Array; - - constructor(props) { - super(); - props.teams.sort(this.sortByVotes); - this.getTotalVotes(props.teams); - this.getWinnerIds(props.teams); - } - - shouldComponentUpdate() { - return false; - } - - sortByVotes = (a: team, b: team) => b.votes - a.votes; - - getTotalVotes(teams: Array) { - this.totalVotes = 0; - for (let i = 0; i < teams.length; i++) { - this.totalVotes += teams[i].votes; - } - } - - getWinnerIds(teams: Array) { - let max = teams[0].votes; - this.winnerIds = []; - for (let i = 0; i < teams.length; i++) { - if (teams[i].votes === max) - this.winnerIds.push(teams[i].id); - else - break; - } - } - - voteKeyExtractor = (item: team) => item.id.toString(); - - resultRenderItem = ({item}: { item: team }) => { - const isWinner = this.winnerIds.indexOf(item.id) !== -1; - const isDraw = this.winnerIds.length > 1; - const colors = this.props.theme.colors; - return ( - - isWinner - ? - : null} - titleStyle={{ - color: isWinner - ? colors.primary - : colors.text - }} - style={{padding: 0}} - /> - - - ); - }; - - render() { - return ( - - } - /> - - {i18n.t('screens.vote.results.totalVotes') + ' ' + this.totalVotes} - {/*$FlowFixMe*/} - - - - ); - } -} +type PropsType = { + teams: Array, + dateEnd: string, + theme: CustomTheme, +}; const styles = StyleSheet.create({ - card: { - margin: 10, - }, - icon: { - backgroundColor: 'transparent' - }, + card: { + margin: 10, + }, + icon: { + backgroundColor: 'transparent', + }, }); +class VoteResults extends React.Component { + totalVotes: number; + + winnerIds: Array; + + constructor(props: PropsType) { + super(); + props.teams.sort(this.sortByVotes); + this.getTotalVotes(props.teams); + this.getWinnerIds(props.teams); + } + + shouldComponentUpdate(): boolean { + return false; + } + + getTotalVotes(teams: Array) { + this.totalVotes = 0; + for (let i = 0; i < teams.length; i += 1) { + this.totalVotes += teams[i].votes; + } + } + + getWinnerIds(teams: Array) { + const max = teams[0].votes; + this.winnerIds = []; + for (let i = 0; i < teams.length; i += 1) { + if (teams[i].votes === max) this.winnerIds.push(teams[i].id); + else break; + } + } + + sortByVotes = (a: VoteTeamType, b: VoteTeamType): number => b.votes - a.votes; + + voteKeyExtractor = (item: VoteTeamType): string => item.id.toString(); + + resultRenderItem = ({item}: {item: VoteTeamType}): React.Node => { + const isWinner = this.winnerIds.indexOf(item.id) !== -1; + const isDraw = this.winnerIds.length > 1; + const {props} = this; + return ( + + + isWinner ? ( + + ) : null + } + titleStyle={{ + color: isWinner + ? props.theme.colors.primary + : props.theme.colors.text, + }} + style={{padding: 0}} + /> + + + ); + }; + + render(): React.Node { + const {props} = this; + return ( + + ( + + )} + /> + + {`${i18n.t('screens.vote.results.totalVotes')} ${ + this.totalVotes + }`} + {/* $FlowFixMe */} + + + + ); + } +} + export default withTheme(VoteResults); diff --git a/src/components/Amicale/Vote/VoteSelect.js b/src/components/Amicale/Vote/VoteSelect.js index 23ee430..68df5ec 100644 --- a/src/components/Amicale/Vote/VoteSelect.js +++ b/src/components/Amicale/Vote/VoteSelect.js @@ -1,137 +1,146 @@ // @flow import * as React from 'react'; -import {Avatar, Button, Card, RadioButton} from "react-native-paper"; -import {FlatList, StyleSheet, View} from "react-native"; -import ConnectionManager from "../../../managers/ConnectionManager"; -import LoadingConfirmDialog from "../../Dialogs/LoadingConfirmDialog"; -import ErrorDialog from "../../Dialogs/ErrorDialog"; +import {Avatar, Button, Card, RadioButton} from 'react-native-paper'; +import {FlatList, StyleSheet, View} from 'react-native'; import i18n from 'i18n-js'; -import type {team} from "../../../screens/Amicale/VoteScreen"; +import ConnectionManager from '../../../managers/ConnectionManager'; +import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog'; +import ErrorDialog from '../../Dialogs/ErrorDialog'; +import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen'; -type Props = { - teams: Array, - onVoteSuccess: () => void, - onVoteError: () => void, -} +type PropsType = { + teams: Array, + onVoteSuccess: () => void, + onVoteError: () => void, +}; -type State = { - selectedTeam: string, - voteDialogVisible: boolean, - errorDialogVisible: boolean, - currentError: number, -} - - -export default class VoteSelect extends React.PureComponent { - - state = { - selectedTeam: "none", - voteDialogVisible: false, - errorDialogVisible: false, - currentError: 0, - }; - - onVoteSelectionChange = (team: string) => this.setState({selectedTeam: team}); - - voteKeyExtractor = (item: team) => item.id.toString(); - - voteRenderItem = ({item}: { item: team }) => ; - - showVoteDialog = () => this.setState({voteDialogVisible: true}); - - onVoteDialogDismiss = () => this.setState({voteDialogVisible: false,}); - - onVoteDialogAccept = async () => { - return new Promise((resolve) => { - ConnectionManager.getInstance().authenticatedRequest( - "elections/vote", - {"team": parseInt(this.state.selectedTeam)}) - .then(() => { - this.onVoteDialogDismiss(); - this.props.onVoteSuccess(); - resolve(); - }) - .catch((error: number) => { - this.onVoteDialogDismiss(); - this.showErrorDialog(error); - resolve(); - }); - }); - }; - - showErrorDialog = (error: number) => this.setState({ - errorDialogVisible: true, - currentError: error, - }); - - onErrorDialogDismiss = () => { - this.setState({errorDialogVisible: false}); - this.props.onVoteError(); - }; - - render() { - return ( - - - - } - /> - - - {/*$FlowFixMe*/} - - - - - - - - - - - ); - } -} +type StateType = { + selectedTeam: string, + voteDialogVisible: boolean, + errorDialogVisible: boolean, + currentError: number, +}; const styles = StyleSheet.create({ - card: { - margin: 10, - }, - icon: { - backgroundColor: 'transparent' - }, + card: { + margin: 10, + }, + icon: { + backgroundColor: 'transparent', + }, }); + +export default class VoteSelect extends React.PureComponent< + PropsType, + StateType, +> { + constructor() { + super(); + this.state = { + selectedTeam: 'none', + voteDialogVisible: false, + errorDialogVisible: false, + currentError: 0, + }; + } + + onVoteSelectionChange = (teamName: string): void => + this.setState({selectedTeam: teamName}); + + voteKeyExtractor = (item: VoteTeamType): string => item.id.toString(); + + voteRenderItem = ({item}: {item: VoteTeamType}): React.Node => ( + + ); + + showVoteDialog = (): void => this.setState({voteDialogVisible: true}); + + onVoteDialogDismiss = (): void => this.setState({voteDialogVisible: false}); + + onVoteDialogAccept = async (): Promise => { + return new Promise((resolve: () => void) => { + const {state} = this; + ConnectionManager.getInstance() + .authenticatedRequest('elections/vote', { + team: parseInt(state.selectedTeam, 10), + }) + .then(() => { + this.onVoteDialogDismiss(); + const {props} = this; + props.onVoteSuccess(); + resolve(); + }) + .catch((error: number) => { + this.onVoteDialogDismiss(); + this.showErrorDialog(error); + resolve(); + }); + }); + }; + + showErrorDialog = (error: number): void => + this.setState({ + errorDialogVisible: true, + currentError: error, + }); + + onErrorDialogDismiss = () => { + this.setState({errorDialogVisible: false}); + const {props} = this; + props.onVoteError(); + }; + + render(): React.Node { + const {state, props} = this; + return ( + + + ( + + )} + /> + + + {/* $FlowFixMe */} + + + + + + + + + + + ); + } +} diff --git a/src/components/Amicale/Vote/VoteTease.js b/src/components/Amicale/Vote/VoteTease.js index 1152d32..21b6eb3 100644 --- a/src/components/Amicale/Vote/VoteTease.js +++ b/src/components/Amicale/Vote/VoteTease.js @@ -1,45 +1,45 @@ // @flow import * as React from 'react'; -import {Avatar, Card, Paragraph} from "react-native-paper"; -import {StyleSheet} from "react-native"; +import {Avatar, Card, Paragraph} from 'react-native-paper'; +import {StyleSheet} from 'react-native'; import i18n from 'i18n-js'; -type Props = { - startDate: string, -} - -export default class VoteTease extends React.Component { - - shouldComponentUpdate() { - return false; - } - - render() { - return ( - - } - /> - - - {i18n.t('screens.vote.tease.message') + ' ' + this.props.startDate} - - - - ); - } -} +type PropsType = { + startDate: string, +}; const styles = StyleSheet.create({ - card: { - margin: 10, - }, - icon: { - backgroundColor: 'transparent' - }, + card: { + margin: 10, + }, + icon: { + backgroundColor: 'transparent', + }, }); + +export default class VoteTease extends React.Component { + shouldComponentUpdate(): boolean { + return false; + } + + render(): React.Node { + const {props} = this; + return ( + + ( + + )} + /> + + + {`${i18n.t('screens.vote.tease.message')} ${props.startDate}`} + + + + ); + } +} diff --git a/src/components/Amicale/Vote/VoteWait.js b/src/components/Amicale/Vote/VoteWait.js index 638cc3c..e882aaf 100644 --- a/src/components/Amicale/Vote/VoteWait.js +++ b/src/components/Amicale/Vote/VoteWait.js @@ -1,72 +1,78 @@ // @flow import * as React from 'react'; -import {ActivityIndicator, Card, Paragraph, withTheme} from "react-native-paper"; -import {StyleSheet} from "react-native"; +import { + ActivityIndicator, + Card, + Paragraph, + withTheme, +} from 'react-native-paper'; +import {StyleSheet} from 'react-native'; import i18n from 'i18n-js'; -import type {CustomTheme} from "../../../managers/ThemeManager"; +import type {CustomTheme} from '../../../managers/ThemeManager'; -type Props = { - startDate: string | null, - justVoted: boolean, - hasVoted: boolean, - isVoteRunning: boolean, - theme: CustomTheme, -} - -class VoteWait extends React.Component { - - shouldComponentUpdate() { - return false; - } - - render() { - const colors = this.props.theme.colors; - const startDate = this.props.startDate; - return ( - - } - /> - - { - this.props.justVoted - ? - {i18n.t('screens.vote.wait.messageSubmitted')} - - : null - } - { - this.props.hasVoted - ? - {i18n.t('screens.vote.wait.messageVoted')} - - : null - } - { - startDate != null - ? - {i18n.t('screens.vote.wait.messageDate') + ' ' + startDate} - - : {i18n.t('screens.vote.wait.messageDateUndefined')} - } - - - ); - } -} +type PropsType = { + startDate: string | null, + justVoted: boolean, + hasVoted: boolean, + isVoteRunning: boolean, + theme: CustomTheme, +}; const styles = StyleSheet.create({ - card: { - margin: 10, - }, - icon: { - backgroundColor: 'transparent' - }, + card: { + margin: 10, + }, + icon: { + backgroundColor: 'transparent', + }, }); +class VoteWait extends React.Component { + shouldComponentUpdate(): boolean { + return false; + } + + render(): React.Node { + const {props} = this; + const {startDate} = props; + return ( + + ( + + )} + /> + + {props.justVoted ? ( + + {i18n.t('screens.vote.wait.messageSubmitted')} + + ) : null} + {props.hasVoted ? ( + + {i18n.t('screens.vote.wait.messageVoted')} + + ) : null} + {startDate != null ? ( + + {`${i18n.t('screens.vote.wait.messageDate')} ${startDate}`} + + ) : ( + + {i18n.t('screens.vote.wait.messageDateUndefined')} + + )} + + + ); + } +} + export default withTheme(VoteWait);