Improve vote screen to match linter

src/screens/Amicale/VoteScreen.js

@@ -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";
-
-export type team = {
-    id: number,
-    name: string,
-    votes: number,
-}
+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 VoteTeamType = {
+  id: number,
+  name: string,
+  votes: number,
+};
 
-type teamResponse = {
-    has_voted: boolean,
-    teams: Array<team>,
+type TeamResponseType = {
+  has_voted: boolean,
+  teams: Array<VoteTeamType>,
 };
 
-type stringVoteDates = {
-    date_begin: string,
-    date_end: string,
-    date_result_begin: string,
-    date_result_end: string,
-}
+type VoteDatesStringType = {
+  date_begin: string,
+  date_end: string,
+  date_result_begin: string,
+  date_result_end: string,
+};
 
-type objectVoteDates = {
-    date_begin: Date,
-    date_end: Date,
-    date_result_begin: Date,
-    date_result_end: Date,
-}
+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,287 +93,322 @@ type objectVoteDates = {
 
 const MIN_REFRESH_TIME = 5 * 1000;
 
-type Props = {
-    navigation: StackNavigationProp
-}
+type PropsType = {
+  navigation: StackNavigationProp,
+};
 
-type State = {
-    hasVoted: boolean,
-    mascotDialogVisible: boolean,
-}
+type StateType = {
+  hasVoted: boolean,
+  mascotDialogVisible: boolean,
+};
 
 /**
  * Screen displaying vote information and controls
  */
-export default class VoteScreen extends React.Component<Props, State> {
-
-    state = {
-        hasVoted: false,
-        mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.voteShowBanner.key),
-    };
+export default class VoteScreen extends React.Component<PropsType, StateType> {
+  teams: Array<VoteTeamType>;
 
-    teams: Array<team>;
-    hasVoted: boolean;
-    datesString: null | stringVoteDates;
-    dates: null | objectVoteDates;
+  hasVoted: boolean;
 
-    today: Date;
+  datesString: null | VoteDatesStringType;
 
-    mainFlatListData: Array<{ key: string }>;
-    lastRefresh: Date | null;
+  dates: null | VoteDatesObjectType;
 
-    authRef: { current: null | AuthenticatedScreen };
+  today: Date;
 
-    constructor() {
-        super();
-        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;
-    }
-
-    /**
-     * 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 : "";
-        } else
-            return dateString;
-    }
-
-    isVoteRunning() {
-        return this.dates != null && this.today > this.dates.date_begin && this.today < this.dates.date_end;
-    }
+  mainFlatListData: Array<{key: string}>;
 
-    isVoteStarted() {
-        return this.dates != null && this.today > this.dates.date_begin;
-    }
+  lastRefresh: Date | null;
 
-    isResultRunning() {
-        return this.dates != null && this.today > this.dates.date_result_begin && this.today < this.dates.date_result_end;
-    }
+  authRef: {current: null | AuthenticatedScreen};
 
-    isResultStarted() {
-        return this.dates != null && this.today > this.dates.date_result_begin;
-    }
-
-    mainRenderItem = ({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>
-            );
-        else
-            return this.getContent();
-    };
-
-    getScreen = (data: Array<{ [key: string]: any } | null>) => {
-        // data[0] = FAKE_TEAMS2;
-        // data[1] = FAKE_DATE;
-        this.lastRefresh = new Date();
-
-        const teams: teamResponse | null = data[0];
-        const dateStrings: stringVoteDates | null = data[1];
-
-        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={this.state.hasVoted.toString()}
-                renderItem={this.mainRenderItem}
-            />
-        );
+  constructor() {
+    super();
+    this.state = {
+      hasVoted: false,
+      mascotDialogVisible: AsyncStorageManager.getBool(
+        AsyncStorageManager.PREFERENCES.voteShowBanner.key,
+      ),
     };
-
-    getContent() {
-        if (!this.isVoteStarted())
-            return this.getTeaseVoteCard();
-        else if (this.isVoteRunning() && (!this.hasVoted && !this.state.hasVoted))
-            return this.getVoteCard();
-        else if (!this.isResultStarted())
-            return this.getWaitVoteCard();
-        else if (this.isResultRunning())
-            return this.getVoteResultCard();
-        else
-            return <VoteNotAvailable/>;
+    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 : '';
     }
-
-    onVoteSuccess = () => 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}/>;
+    return dateString;
+  }
+
+  getMainRenderItem = ({item}: {item: {key: string}}): React.Node => {
+    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<ApiGenericDataType | null>): React.Node => {
+    const {state} = this;
+    // data[0] = FAKE_TEAMS2;
+    // data[1] = FAKE_DATE;
+    this.lastRefresh = new Date();
+
+    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;
+
+    if (teams != null) {
+      this.teams = teams.teams;
+      this.hasVoted = teams.has_voted;
     }
 
-    /**
-     * 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)}
-            />;
-        else
-            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)}/>;
-        else
-            return <VoteNotAvailable/>;
-    }
-
-    /**
-     * Votes have ended, or user has voted waiting for results
-     */
-    getWaitVoteCard() {
-        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()}/>;
-    }
-
-    showMascotDialog = () => {
-        this.setState({mascotDialogVisible: true})
-    };
-
-    hideMascotDialog = () => {
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.voteShowBanner.key, false);
-        this.setState({mascotDialogVisible: false})
-    };
-
-    /**
-     * Renders the authenticated screen.
-     *
-     * Teams and dates are not mandatory to allow showing the information box even if api requests fail
-     *
-     * @returns {*}
-     */
-    render() {
-        return (
-            <View style={{flex: 1}}>
-                <AuthenticatedScreen
-                    {...this.props}
-                    ref={this.authRef}
-                    requests={[
-                        {
-                            link: 'elections/teams',
-                            params: {},
-                            mandatory: false,
-                        },
-                        {
-                            link: 'elections/dates',
-                            params: {},
-                            mandatory: false,
-                        },
-                    ]}
-                    renderFunction={this.getScreen}
-                />
-                <MascotPopup
-                    visible={this.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",
-                            onPress: this.hideMascotDialog,
-                        }
-                    }}
-                    emotion={MASCOT_STYLE.CUTE}
-                />
-            </View>
-        );
-    }
+    this.generateDateObject();
+    return (
+      <CollapsibleFlatList
+        data={this.mainFlatListData}
+        refreshControl={
+          <RefreshControl refreshing={false} onRefresh={this.reloadData} />
+        }
+        extraData={state.hasVoted.toString()}
+        renderItem={this.getMainRenderItem}
+      />
+    );
+  };
+
+  getContent(): React.Node {
+    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(): React.Node {
+    return (
+      <VoteSelect
+        teams={this.teams}
+        onVoteSuccess={this.onVoteSuccess}
+        onVoteError={this.reloadData}
+      />
+    );
+  }
+
+  /**
+   * Votes have ended, results can be displayed
+   */
+  getVoteResultCard(): React.Node {
+    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(): React.Node {
+    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(): 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 || 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.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.
+   *
+   * Teams and dates are not mandatory to allow showing the information box even if api requests fail
+   *
+   * @returns {*}
+   */
+  render(): React.Node {
+    const {props, state} = this;
+    return (
+      <View style={{flex: 1}}>
+        <AuthenticatedScreen
+          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={{
+            action: null,
+            cancel: {
+              message: i18n.t('screens.vote.mascotDialog.button'),
+              icon: 'check',
+              onPress: this.hideMascotDialog,
+            },
+          }}
+          emotion={MASCOT_STYLE.CUTE}
+        />
+      </View>
+    );
+  }
 }