Browse Source

Added basic vote display

Arnaud Vergnet 4 years ago
parent
commit
98b1d267ec
2 changed files with 70 additions and 17 deletions
  1. 1
    0
      src/components/Amicale/AuthenticatedScreen.js
  2. 69
    17
      src/screens/Amicale/VoteScreen.js

+ 1
- 0
src/components/Amicale/AuthenticatedScreen.js View File

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

+ 69
- 17
src/screens/Amicale/VoteScreen.js View File

@@ -1,8 +1,8 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {ScrollView, StyleSheet} from "react-native";
5
-import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
4
+import {FlatList, StyleSheet} from "react-native";
5
+import {Avatar, Button, Card, Paragraph, RadioButton, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7 7
 import {stringToDate} from "../../utils/Planning";
8 8
 
@@ -37,11 +37,15 @@ const FAKE_TEAMS = {
37 37
     ],
38 38
 };
39 39
 
40
-type State = {}
40
+type State = {
41
+    selectedTeam: string,
42
+}
41 43
 
42 44
 class VoteScreen extends React.Component<Props, State> {
43 45
 
44
-    state = {};
46
+    state = {
47
+        selectedTeam: "0",
48
+    };
45 49
 
46 50
     colors: Object;
47 51
 
@@ -52,14 +56,30 @@ class VoteScreen extends React.Component<Props, State> {
52 56
 
53 57
     today: Date;
54 58
 
59
+    mainFlatListData: Array<Object>;
60
+
55 61
     constructor(props) {
56 62
         super(props);
57 63
         this.colors = props.theme.colors;
58 64
         this.hasVoted = false;
59 65
         this.teams = null;
60 66
         this.today = new Date();
67
+
68
+        this.mainFlatListData = [
69
+            {key: 'main'},
70
+            {key: 'info'},
71
+        ]
61 72
     }
62 73
 
74
+    mainRenderItem = ({item}: Object) => {
75
+        if (item.key === 'info')
76
+            return this.getTitleCard();
77
+        else if (item.key === 'main' && this.isVoteAvailable())
78
+            return this.getContent();
79
+        else
80
+            return null;
81
+    };
82
+
63 83
     getScreen = (data: Array<Object>) => {
64 84
         data[0] = FAKE_TEAMS;
65 85
         data[1] = FAKE_DATE;
@@ -72,16 +92,12 @@ class VoteScreen extends React.Component<Props, State> {
72 92
         this.generateDateObject();
73 93
         console.log(this.teams);
74 94
         console.log(this.datesString);
75
-        console.log(this.dates);
76 95
         return (
77
-            <ScrollView>
78
-                {
79
-                    this.isVoteAvailable()
80
-                        ? this.getContent()
81
-                        : null
82
-                }
83
-                {this.getTitleCard()}
84
-            </ScrollView>
96
+            <FlatList
97
+                data={this.mainFlatListData}
98
+                extraData={this.state.selectedTeam}
99
+                renderItem={this.mainRenderItem}
100
+            />
85 101
         );
86 102
     };
87 103
 
@@ -156,6 +172,14 @@ class VoteScreen extends React.Component<Props, State> {
156 172
         );
157 173
     }
158 174
 
175
+    onVoteSelectionChange = (team: string) => {
176
+        this.setState({selectedTeam: team})
177
+    };
178
+
179
+    onVotePress = () => {
180
+        console.log("vote sent");
181
+    };
182
+
159 183
     /**
160 184
      * The user has not voted yet, and the votes are open
161 185
      */
@@ -163,17 +187,45 @@ class VoteScreen extends React.Component<Props, State> {
163 187
         return (
164 188
             <Card style={styles.card}>
165 189
                 <Card.Title
166
-                    title={"getVoteCard"}
167
-                    subtitle={"getVoteCard"}
190
+                    title={"VOTE OPEN"}
191
+                    subtitle={"VOTE NOW"}
192
+                    left={(props) => <Avatar.Icon
193
+                        {...props}
194
+                        icon={"alert-decagram"}
195
+                    />}
168 196
                 />
169 197
                 <Card.Content>
170
-                    <Paragraph>TEAM1</Paragraph>
171
-                    <Paragraph>TEAM2</Paragraph>
198
+                    <RadioButton.Group
199
+                        onValueChange={this.onVoteSelectionChange}
200
+                        value={this.state.selectedTeam}
201
+                    >
202
+                        <FlatList
203
+                            data={this.teams}
204
+                            keyExtractor={this.voteKeyExtractor}
205
+                            extraData={this.state.selectedTeam}
206
+                            renderItem={this.voteRenderItem}
207
+                        />
208
+                    </RadioButton.Group>
172 209
                 </Card.Content>
210
+                <Card.Actions>
211
+                    <Button
212
+                        icon="send"
213
+                        mode="contained"
214
+                        onPress={this.onVotePress}
215
+                        style={{marginLeft: 'auto'}}>
216
+                        SEND VOTE
217
+                    </Button>
218
+                </Card.Actions>
173 219
             </Card>
174 220
         );
175 221
     }
176 222
 
223
+    voteKeyExtractor = (item: Object) => item.id.toString();
224
+
225
+    voteRenderItem = ({item}: Object) => {
226
+        return <RadioButton.Item label={item.name} value={item.id.toString()}/>
227
+    };
228
+
177 229
     /**
178 230
      * Votes have ended, results can be displayed
179 231
      */

Loading…
Cancel
Save