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 {RefreshControl, View} from 'react-native';
-import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
+import i18n from 'i18n-js';
-import VoteTease from "../../components/Amicale/Vote/VoteTease";
+import {Button} from 'react-native-paper';
-import VoteSelect from "../../components/Amicale/Vote/VoteSelect";
+import AuthenticatedScreen from '../../components/Amicale/AuthenticatedScreen';
-import VoteResults from "../../components/Amicale/Vote/VoteResults";
+import {getTimeOnlyString, stringToDate} from '../../utils/Planning';
-import VoteWait from "../../components/Amicale/Vote/VoteWait";
+import VoteTease from '../../components/Amicale/Vote/VoteTease';
-import {StackNavigationProp} from "@react-navigation/stack";
+import VoteSelect from '../../components/Amicale/Vote/VoteSelect';
-import i18n from "i18n-js";
+import VoteResults from '../../components/Amicale/Vote/VoteResults';
-import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import VoteWait from '../../components/Amicale/Vote/VoteWait';
-import MascotPopup from "../../components/Mascot/MascotPopup";
+import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import MascotPopup from '../../components/Mascot/MascotPopup';
-import {Button} from "react-native-paper";
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
+import VoteNotAvailable from '../../components/Amicale/Vote/VoteNotAvailable';
-import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
+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 = {
+type PropsType = {
-    navigation: StackNavigationProp
+  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}>;
+
   lastRefresh: Date | null;
 
   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 = [
+    this.mainFlatListData = [{key: 'main'}, {key: 'info'}];
-            {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;
   }
 
   /**
@@ -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 : "";
+      return str != null ? str : '';
-        } else
+    }
     return dateString;
   }
 
-    isVoteRunning() {
+  getMainRenderItem = ({item}: {item: {key: string}}): React.Node => {
-        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 } }) => {
     if (item.key === 'info')
       return (
         <View>
           <Button
-                        mode={"contained"}
+            mode="contained"
-                        icon={"help-circle"}
+            icon="help-circle"
             onPress={this.showMascotDialog}
             style={{
-                            marginLeft: "auto",
+              marginLeft: 'auto',
-                            marginRight: "auto",
+              marginRight: 'auto',
-                            marginTop: 20
+              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 teams: TeamResponseType | null = data[0];
-        const dateStrings: stringVoteDates | null = data[1];
+    const dateStrings: VoteDatesStringType | null = data[1];
 
     if (dateStrings != null && dateStrings.date_begin == null)
       this.datesString = null;
-        else
+    else this.datesString = dateStrings;
-            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
+          <RefreshControl refreshing={false} onRefresh={this.reloadData} />
-                        refreshing={false}
-                        onRefresh={this.reloadData}
-                    />
         }
-                extraData={this.state.hasVoted.toString()}
+        extraData={state.hasVoted.toString()}
-                renderItem={this.mainRenderItem}
+        renderItem={this.getMainRenderItem}
       />
     );
   };
 
-    getContent() {
+  getContent(): React.Node {
-        if (!this.isVoteStarted())
+    const {state} = this;
-            return this.getTeaseVoteCard();
+    if (!this.isVoteStarted()) return this.getTeaseVoteCard();
-        else if (this.isVoteRunning() && (!this.hasVoted && !this.state.hasVoted))
+    if (this.isVoteRunning() && !this.hasVoted && !state.hasVoted)
       return this.getVoteCard();
-        else if (!this.isResultStarted())
+    if (!this.isResultStarted()) return this.getWaitVoteCard();
-            return this.getWaitVoteCard();
+    if (this.isResultRunning()) return this.getVoteResultCard();
-        else if (this.isResultRunning())
-            return this.getVoteResultCard();
-        else
     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() {
+  getVoteCard(): React.Node {
-        return <VoteSelect teams={this.teams} onVoteSuccess={this.onVoteSuccess} onVoteError={this.reloadData}/>;
+    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)}
+            this.datesString.date_result_end,
-            />;
+          )}
-        else
+        />
+      );
     return <VoteNotAvailable />;
   }
 
   /**
    * Vote will open shortly
    */
-    getTeaseVoteCard() {
+  getTeaseVoteCard(): React.Node {
     if (this.dates != null && this.datesString != null)
-            return <VoteTease
+      return (
-                startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
+        <VoteTease
-        else
+          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)
+    if (
-            startDate = this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin);
+      this.dates != null &&
-        return <VoteWait startDate={startDate} hasVoted={this.hasVoted || this.state.hasVoted}
+      this.datesString != null &&
-                         justVoted={this.state.hasVoted}
+      this.dates.date_result_begin != null
-                         isVoteRunning={this.isVoteRunning()}/>;
+    )
+      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);
+    AsyncStorageManager.set(
-        this.setState({mascotDialogVisible: false})
+      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}
+          visible={state.mascotDialogVisible}
-                    title={i18n.t("screens.vote.mascotDialog.title")}
+          title={i18n.t('screens.vote.mascotDialog.title')}
-                    message={i18n.t("screens.vote.mascotDialog.message")}
+          message={i18n.t('screens.vote.mascotDialog.message')}
-                    icon={"vote"}
+          icon="vote"
           buttons={{
             action: null,
             cancel: {
-                            message: i18n.t("screens.vote.mascotDialog.button"),
+              message: i18n.t('screens.vote.mascotDialog.button'),
-                            icon: "check",
+              icon: 'check',
               onPress: this.hideMascotDialog,
-                        }
+            },
           }}
           emotion={MASCOT_STYLE.CUTE}
         />