src/components/Amicale/AuthenticatedScreen.js

@@ -36,7 +36,6 @@ class AuthenticatedScreen extends React.Component<Props, State> {
         this.connectionManager = ConnectionManager.getInstance();
         this.props.navigation.addListener('focus', this.onScreenFocus.bind(this));
         this.data = new Array(this.props.links.length);
-        this.fetchData(); // TODO remove in prod (only use for fast refresh)
     }
 
     onScreenFocus() {

src/screens/Amicale/VoteScreen.js

@@ -1,21 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, StyleSheet} from "react-native";
+import {ScrollView, StyleSheet} from "react-native";
-import {
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
-    ActivityIndicator,
-    Avatar,
-    Button,
-    Card,
-    List,
-    Paragraph,
-    ProgressBar,
-    RadioButton,
-    Subheading,
-    withTheme
-} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
-import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
+import {stringToDate} from "../../utils/Planning";
 
 const ICON_AMICALE = require('../../../assets/amicale.png');
 
@@ -25,10 +14,10 @@ type Props = {
 }
 
 const FAKE_DATE = {
-    "date_begin": "2020-04-06 21:50",
+    "date_begin": "2020-04-06 13:00",
-    "date_end": "2020-04-06 21:50",
+    "date_end": "2020-04-06 20:00",
-    "date_result_begin": "2020-04-06 21:50",
+    "date_result_begin": "2020-04-06 20:15",
-    "date_result_end": "2020-04-06 21:50",
+    "date_result_end": "2020-04-07 12:00",
 };
 
 const FAKE_DATE2 = {
@@ -43,75 +32,36 @@ const FAKE_TEAMS = {
     teams: [
         {
             id: 1,
-            name: "TEST TEAM1",
+            name: "TEST TEAM",
-        },
-        {
-            id: 2,
-            name: "TEST TEAM2",
-        },
-    ],
-};
-const FAKE_TEAMS2 = {
-    has_voted: false,
-    teams: [
-        {
-            id: 1,
-            name: "TEST TEAM1",
-            votes: 1,
-        },
-        {
-            id: 2,
-            name: "TEST TEAM2",
-            votes: 9,
         },
     ],
 };
 
-type State = {
+type State = {}
-    selectedTeam: string,
-}
 
 class VoteScreen extends React.Component<Props, State> {
 
-    state = {
+    state = {};
-        selectedTeam: "none",
-    };
 
     colors: Object;
 
-    teams: Array<Object>;
+    teams: Array<Object> | null;
     hasVoted: boolean;
     datesString: Object;
     dates: Object;
 
     today: Date;
 
-    mainFlatListData: Array<Object>;
-    totalVotes: number;
-
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
         this.hasVoted = false;
+        this.teams = null;
         this.today = new Date();
-
-        this.mainFlatListData = [
-            {key: 'main'},
-            {key: 'info'},
-        ]
     }
 
-    mainRenderItem = ({item}: Object) => {
-        if (item.key === 'info')
-            return this.getTitleCard();
-        else if (item.key === 'main' && this.isVoteAvailable())
-            return this.getContent();
-        else
-            return null;
-    };
-
     getScreen = (data: Array<Object>) => {
-        data[0] = FAKE_TEAMS2;
+        data[0] = FAKE_TEAMS;
         data[1] = FAKE_DATE;
 
         if (data[0] !== null) {
@@ -122,13 +72,16 @@ class VoteScreen extends React.Component<Props, State> {
         this.generateDateObject();
         console.log(this.teams);
         console.log(this.datesString);
+        console.log(this.dates);
         return (
-            //$FlowFixMe
+            <ScrollView>
-            <FlatList
+                {
-                data={this.mainFlatListData}
+                    this.isVoteAvailable()
-                extraData={this.state.selectedTeam}
+                        ? this.getContent()
-                renderItem={this.mainRenderItem}
+                        : null
-            />
+                }
+                {this.getTitleCard()}
+            </ScrollView>
         );
     };
 
@@ -203,18 +156,6 @@ class VoteScreen extends React.Component<Props, State> {
         );
     }
 
-    onVoteSelectionChange = (team: string) => {
-        this.setState({selectedTeam: team})
-    };
-
-    onVotePress = () => {
-        console.log("vote sent");
-    };
-
-    voteKeyExtractor = (item: Object) => item.id.toString();
-
-    voteRenderItem = ({item}: Object) => <RadioButton.Item label={item.name} value={item.id.toString()}/>;
-
     /**
      * The user has not voted yet, and the votes are open
      */
@@ -222,110 +163,35 @@ class VoteScreen extends React.Component<Props, State> {
         return (
             <Card style={styles.card}>
                 <Card.Title
-                    title={"VOTE OPEN"}
+                    title={"getVoteCard"}
-                    subtitle={"VOTE NOW"}
+                    subtitle={"getVoteCard"}
-                    left={(props) => <Avatar.Icon
-                        {...props}
-                        icon={"alert-decagram"}
-                    />}
                 />
                 <Card.Content>
-                    <RadioButton.Group
+                    <Paragraph>TEAM1</Paragraph>
-                        onValueChange={this.onVoteSelectionChange}
+                    <Paragraph>TEAM2</Paragraph>
-                        value={this.state.selectedTeam}
-                    >
-                        {/*$FlowFixMe*/}
-                        <FlatList
-                            data={this.teams}
-                            keyExtractor={this.voteKeyExtractor}
-                            extraData={this.state.selectedTeam}
-                            renderItem={this.voteRenderItem}
-                        />
-                    </RadioButton.Group>
                 </Card.Content>
-                <Card.Actions>
-                    <Button
-                        icon="send"
-                        mode="contained"
-                        onPress={this.onVotePress}
-                        style={{marginLeft: 'auto'}}
-                        disabled={this.state.selectedTeam === "none"}
-                    >
-                        SEND VOTE
-                    </Button>
-                </Card.Actions>
             </Card>
         );
     }
 
-    sortByVotes = (a: Object, b: Object) => b.votes - a.votes;
-
-    getTotalVotes() {
-        let count = 0;
-        for (let i = 0; i < this.teams.length; i++) {
-            count += this.teams[i].votes;
-        }
-        return count;
-    }
-
-    getWinnerId() {
-        return this.teams[0].id;
-    }
-
     /**
      * Votes have ended, results can be displayed
      */
     getVoteResultCard() {
-        this.totalVotes = this.getTotalVotes();
-        this.teams.sort(this.sortByVotes);
         return (
             <Card style={styles.card}>
                 <Card.Title
-                    title={"RESULTS"}
+                    title={"getVoteResultCard"}
-                    subtitle={"AVAILABLE UNTIL " + this.getDateString(this.dates.date_result_end, this.datesString.date_result_end)}
+                    subtitle={"getVoteResultCard"}
-                    left={(props) => <Avatar.Icon
-                        {...props}
-                        icon={"podium-gold"}
-                    />}
                 />
                 <Card.Content>
-                    <Subheading>TOTAL VOTES : {this.totalVotes}</Subheading>
+                    <Paragraph>TEAM1</Paragraph>
-                    {/*$FlowFixMe*/}
+                    <Paragraph>TEAM2</Paragraph>
-                    <FlatList
-                        data={this.teams}
-                        keyExtractor={this.voteKeyExtractor}
-                        renderItem={this.resultRenderItem}
-                    />
                 </Card.Content>
             </Card>
         );
     }
 
-    resultRenderItem = ({item}: Object) => {
-        const isWinner = this.getWinnerId() === item.id;
-        return (
-            <Card style={{
-                marginTop: 10,
-                elevation: isWinner ? 5 : 3,
-            }}>
-                <List.Item
-                    title={item.name}
-                    description={item.votes + " VOTES"}
-                    left={props => isWinner
-                        ? <List.Icon {...props} icon="trophy" color={this.colors.primary}/>
-                        : null}
-                    titleStyle={{
-                        color: isWinner
-                            ? this.colors.primary
-                            : this.colors.text
-                    }}
-                    style={{padding: 0}}
-                />
-                <ProgressBar progress={item.votes / this.totalVotes} color={this.colors.primary}/>
-            </Card>
-        );
-    };
-
     /**
      * Vote will open shortly
      */
@@ -333,59 +199,31 @@ class VoteScreen extends React.Component<Props, State> {
         return (
             <Card style={styles.card}>
                 <Card.Title
-                    title={"VOTE INCOMING"}
+                    title={"getTeaseVoteCard"}
-                    subtitle={"GET READY"}
+                    subtitle={"getTeaseVoteCard"}
-                    left={props => <Avatar.Icon
-                        {...props}
-                        icon="vote"/>}
                 />
                 <Card.Content>
-                    <Paragraph>
-                        VOTE STARTS
-                        AT {this.getDateString(this.dates.date_begin, this.datesString.date_begin)}
-                    </Paragraph>
                 </Card.Content>
             </Card>
         );
     }
 
     /**
-     * Votes have ended waiting for results
+     * User has voted, waiting for results
      */
     getWaitVoteCard() {
         return (
             <Card style={styles.card}>
                 <Card.Title
-                    title={"VOTES HAVE ENDED"}
+                    title={"getWaitVoteCard"}
-                    subtitle={"WAITING FOR RESULTS"}
+                    subtitle={"getWaitVoteCard"}
-                    left={(props) => <ActivityIndicator {...props}/>}
                 />
                 <Card.Content>
-                    {
-                        this.hasVoted
-                            ? <Paragraph>THX FOR THE VOTE</Paragraph>
-                            : null
-                    }
-                    {
-                        this.dates.date_result_begin !== null
-                            ? <Paragraph>
-                                RESULTS AVAILABLE
-                                AT {this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin)}
-                            </Paragraph>
-                            : <Paragraph>RESULTS AVAILABLE SHORTLY</Paragraph>
-                    }
                 </Card.Content>
             </Card>
         );
     }
 
-    getDateString(date: Date, dateString: string) {
-        if (this.today.getDate() === date.getDate())
-            return getTimeOnlyString(dateString);
-        else
-            return dateString;
-    }
-
     render() {
         return (
             <AuthenticatedScreen

src/utils/Planning.js

@@ -55,20 +55,6 @@ export function getDateOnlyString(dateString: string): string | null {
         return null;
 }
 
-/**
- * Gets only the time part of the given event date string in the format
- * YYYY-MM-DD HH:MM
- *
- * @param dateString The string to get the date from
- * @return {string|null} Time in format HH:MM or null if given string is invalid
- */
-export function getTimeOnlyString(dateString: string): string | null {
-    if (isEventDateStringFormatValid(dateString))
-        return dateString.split(" ")[1];
-    else
-        return null;
-}
-
 /**
  * Checks if the given date string is in the format
  * YYYY-MM-DD HH:MM