From 98b1d267ec466b85c66a08ded947880ef1a5131c Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Mon, 6 Apr 2020 19:49:32 +0200
Subject: [PATCH] Added basic vote display

---
 src/components/Amicale/AuthenticatedScreen.js |  1 +
 src/screens/Amicale/VoteScreen.js             | 86 +++++++++++++++----
 2 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/src/components/Amicale/AuthenticatedScreen.js b/src/components/Amicale/AuthenticatedScreen.js
index 634adbb..8d70a35 100644
--- a/src/components/Amicale/AuthenticatedScreen.js
+++ b/src/components/Amicale/AuthenticatedScreen.js
@@ -36,6 +36,7 @@ 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() {
diff --git a/src/screens/Amicale/VoteScreen.js b/src/screens/Amicale/VoteScreen.js
index 14c90eb..38844fe 100644
--- a/src/screens/Amicale/VoteScreen.js
+++ b/src/screens/Amicale/VoteScreen.js
@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, StyleSheet} from "react-native";
-import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
+import {FlatList, StyleSheet} from "react-native";
+import {Avatar, Button, Card, Paragraph, RadioButton, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {stringToDate} from "../../utils/Planning";
 
@@ -37,11 +37,15 @@ const FAKE_TEAMS = {
     ],
 };
 
-type State = {}
+type State = {
+    selectedTeam: string,
+}
 
 class VoteScreen extends React.Component<Props, State> {
 
-    state = {};
+    state = {
+        selectedTeam: "0",
+    };
 
     colors: Object;
 
@@ -52,14 +56,30 @@ class VoteScreen extends React.Component<Props, State> {
 
     today: Date;
 
+    mainFlatListData: Array<Object>;
+
     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_TEAMS;
         data[1] = FAKE_DATE;
@@ -72,16 +92,12 @@ class VoteScreen extends React.Component<Props, State> {
         this.generateDateObject();
         console.log(this.teams);
         console.log(this.datesString);
-        console.log(this.dates);
         return (
-            <ScrollView>
-                {
-                    this.isVoteAvailable()
-                        ? this.getContent()
-                        : null
-                }
-                {this.getTitleCard()}
-            </ScrollView>
+            <FlatList
+                data={this.mainFlatListData}
+                extraData={this.state.selectedTeam}
+                renderItem={this.mainRenderItem}
+            />
         );
     };
 
@@ -156,6 +172,14 @@ class VoteScreen extends React.Component<Props, State> {
         );
     }
 
+    onVoteSelectionChange = (team: string) => {
+        this.setState({selectedTeam: team})
+    };
+
+    onVotePress = () => {
+        console.log("vote sent");
+    };
+
     /**
      * The user has not voted yet, and the votes are open
      */
@@ -163,17 +187,45 @@ class VoteScreen extends React.Component<Props, State> {
         return (
             <Card style={styles.card}>
                 <Card.Title
-                    title={"getVoteCard"}
-                    subtitle={"getVoteCard"}
+                    title={"VOTE OPEN"}
+                    subtitle={"VOTE NOW"}
+                    left={(props) => <Avatar.Icon
+                        {...props}
+                        icon={"alert-decagram"}
+                    />}
                 />
                 <Card.Content>
-                    <Paragraph>TEAM1</Paragraph>
-                    <Paragraph>TEAM2</Paragraph>
+                    <RadioButton.Group
+                        onValueChange={this.onVoteSelectionChange}
+                        value={this.state.selectedTeam}
+                    >
+                        <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'}}>
+                        SEND VOTE
+                    </Button>
+                </Card.Actions>
             </Card>
         );
     }
 
+    voteKeyExtractor = (item: Object) => item.id.toString();
+
+    voteRenderItem = ({item}: Object) => {
+        return <RadioButton.Item label={item.name} value={item.id.toString()}/>
+    };
+
     /**
      * Votes have ended, results can be displayed
      */