Browse Source

Moved vote cards in own component files

Arnaud Vergnet 4 years ago
parent
commit
9fc3620044

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

@@ -48,7 +48,7 @@ class AuthenticatedScreen extends React.Component<Props, State> {
48 48
             this.setState({loading: true});
49 49
         if (this.connectionManager.isLoggedIn()) {
50 50
             for (let i = 0; i < this.props.links.length; i++) {
51
-                this.connectionManager.authenticatedRequest(this.props.links[i].link)
51
+                this.connectionManager.authenticatedRequest(this.props.links[i].link, null, null)
52 52
                     .then((data) => {
53 53
                         this.onFinishedLoading(data, i, -1);
54 54
                     })

+ 104
- 0
src/components/Amicale/Vote/VoteResults.js View File

@@ -0,0 +1,104 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Avatar, Card, List, ProgressBar, Subheading, withTheme} from "react-native-paper";
5
+import {FlatList, StyleSheet} from "react-native";
6
+
7
+type Props = {
8
+    teams: Array<Object>,
9
+    dateEnd: string,
10
+}
11
+
12
+class VoteResults extends React.Component<Props> {
13
+
14
+    totalVotes: number;
15
+    winnerId: number;
16
+    colors: Object;
17
+
18
+    constructor(props) {
19
+        super();
20
+        this.colors = props.theme.colors;
21
+        props.teams.sort(this.sortByVotes);
22
+        this.getTotalVotes(props.teams);
23
+        this.getWinnerId(props.teams);
24
+    }
25
+
26
+    shouldComponentUpdate() {
27
+        return false;
28
+    }
29
+
30
+    sortByVotes = (a: Object, b: Object) => b.votes - a.votes;
31
+
32
+    getTotalVotes(teams: Array<Object>) {
33
+        this.totalVotes = 0;
34
+        for (let i = 0; i < teams.length; i++) {
35
+            this.totalVotes += teams[i].votes;
36
+        }
37
+    }
38
+
39
+    getWinnerId(teams: Array<Object>) {
40
+        this.winnerId = teams[0].id;
41
+    }
42
+
43
+    voteKeyExtractor = (item: Object) => item.id.toString();
44
+
45
+    resultRenderItem = ({item}: Object) => {
46
+        const isWinner = this.winnerId === item.id;
47
+        return (
48
+            <Card style={{
49
+                marginTop: 10,
50
+                elevation: isWinner ? 5 : 3,
51
+            }}>
52
+                <List.Item
53
+                    title={item.name}
54
+                    description={item.votes + " VOTES"}
55
+                    left={props => isWinner
56
+                        ? <List.Icon {...props} icon="trophy" color={this.colors.primary}/>
57
+                        : null}
58
+                    titleStyle={{
59
+                        color: isWinner
60
+                            ? this.colors.primary
61
+                            : this.colors.text
62
+                    }}
63
+                    style={{padding: 0}}
64
+                />
65
+                <ProgressBar progress={item.votes / this.totalVotes} color={this.colors.primary}/>
66
+            </Card>
67
+        );
68
+    };
69
+
70
+    render() {
71
+        return (
72
+            <Card style={styles.card}>
73
+                <Card.Title
74
+                    title={"RESULTS"}
75
+                    subtitle={"AVAILABLE UNTIL " + this.props.dateEnd}
76
+                    left={(props) => <Avatar.Icon
77
+                        {...props}
78
+                        icon={"podium-gold"}
79
+                    />}
80
+                />
81
+                <Card.Content>
82
+                    <Subheading>TOTAL VOTES : {this.totalVotes}</Subheading>
83
+                    {/*$FlowFixMe*/}
84
+                    <FlatList
85
+                        data={this.props.teams}
86
+                        keyExtractor={this.voteKeyExtractor}
87
+                        renderItem={this.resultRenderItem}
88
+                    />
89
+                </Card.Content>
90
+            </Card>
91
+        );
92
+    }
93
+}
94
+
95
+const styles = StyleSheet.create({
96
+    card: {
97
+        margin: 10,
98
+    },
99
+    icon: {
100
+        backgroundColor: 'transparent'
101
+    },
102
+});
103
+
104
+export default withTheme(VoteResults);

+ 135
- 0
src/components/Amicale/Vote/VoteSelect.js View File

@@ -0,0 +1,135 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Avatar, Button, Card, RadioButton} from "react-native-paper";
5
+import {FlatList, StyleSheet, View} from "react-native";
6
+import ConnectionManager from "../../../managers/ConnectionManager";
7
+import LoadingConfirmDialog from "../../Dialog/LoadingConfirmDialog";
8
+import ErrorDialog from "../../Dialog/ErrorDialog";
9
+
10
+type Props = {
11
+    teams: Array<Object>,
12
+    onVoteSuccess: Function,
13
+    onVoteError: Function,
14
+}
15
+
16
+type State = {
17
+    selectedTeam: string,
18
+    voteDialogVisible: boolean,
19
+    errorDialogVisible: boolean,
20
+    currentError: number,
21
+}
22
+
23
+
24
+export default class VoteSelect extends React.PureComponent<Props, State> {
25
+
26
+    state = {
27
+        selectedTeam: "none",
28
+        voteDialogVisible: false,
29
+        errorDialogVisible: false,
30
+        currentError: 0,
31
+    };
32
+
33
+    onVoteSelectionChange = (team: string) => this.setState({selectedTeam: team});
34
+
35
+    voteKeyExtractor = (item: Object) => item.id.toString();
36
+
37
+    voteRenderItem = ({item}: Object) => <RadioButton.Item label={item.name} value={item.id.toString()}/>;
38
+
39
+    showVoteDialog = () => this.setState({voteDialogVisible: true});
40
+
41
+    onVoteDialogDismiss = () => this.setState({voteDialogVisible: false,});
42
+
43
+    onVoteDialogAccept = async () => {
44
+        return new Promise((resolve, reject) => {
45
+            ConnectionManager.getInstance().authenticatedRequest(
46
+                "elections/vote",
47
+                ["vote"],
48
+                [parseInt(this.state.selectedTeam)])
49
+                .then(() => {
50
+                    this.onVoteDialogDismiss();
51
+                    this.props.onVoteSuccess();
52
+                    resolve();
53
+                })
54
+                .catch((error: number) => {
55
+                    this.onVoteDialogDismiss();
56
+                    this.showErrorDialog(error);
57
+                    resolve();
58
+                });
59
+        });
60
+    };
61
+
62
+    showErrorDialog = (error: number) => this.setState({
63
+        errorDialogVisible: true,
64
+        currentError: error,
65
+    });
66
+
67
+    onErrorDialogDismiss = () => {
68
+        this.setState({errorDialogVisible: false});
69
+        this.props.onVoteError();
70
+    };
71
+
72
+    render() {
73
+        return (
74
+            <View>
75
+                <Card style={styles.card}>
76
+                    <Card.Title
77
+                        title={"VOTE OPEN"}
78
+                        subtitle={"VOTE NOW"}
79
+                        left={(props) => <Avatar.Icon
80
+                            {...props}
81
+                            icon={"alert-decagram"}
82
+                        />}
83
+                    />
84
+                    <Card.Content>
85
+                        <RadioButton.Group
86
+                            onValueChange={this.onVoteSelectionChange}
87
+                            value={this.state.selectedTeam}
88
+                        >
89
+                            {/*$FlowFixMe*/}
90
+                            <FlatList
91
+                                data={this.props.teams}
92
+                                keyExtractor={this.voteKeyExtractor}
93
+                                extraData={this.state.selectedTeam}
94
+                                renderItem={this.voteRenderItem}
95
+                            />
96
+                        </RadioButton.Group>
97
+                    </Card.Content>
98
+                    <Card.Actions>
99
+                        <Button
100
+                            icon="send"
101
+                            mode="contained"
102
+                            onPress={this.showVoteDialog}
103
+                            style={{marginLeft: 'auto'}}
104
+                            disabled={this.state.selectedTeam === "none"}
105
+                        >
106
+                            SEND VOTE
107
+                        </Button>
108
+                    </Card.Actions>
109
+                </Card>
110
+                <LoadingConfirmDialog
111
+                    visible={this.state.voteDialogVisible}
112
+                    onDismiss={this.onVoteDialogDismiss}
113
+                    onAccept={this.onVoteDialogAccept}
114
+                    title={"VOTE?"}
115
+                    titleLoading={"SENDING VOTE..."}
116
+                    message={"SURE?"}
117
+                />
118
+                <ErrorDialog
119
+                    visible={this.state.errorDialogVisible}
120
+                    onDismiss={this.onErrorDialogDismiss}
121
+                    errorCode={this.state.currentError}
122
+                />
123
+            </View>
124
+        );
125
+    }
126
+}
127
+
128
+const styles = StyleSheet.create({
129
+    card: {
130
+        margin: 10,
131
+    },
132
+    icon: {
133
+        backgroundColor: 'transparent'
134
+    },
135
+});

+ 45
- 0
src/components/Amicale/Vote/VoteTease.js View File

@@ -0,0 +1,45 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Avatar, Card, Paragraph} from "react-native-paper";
5
+import {StyleSheet} from "react-native";
6
+
7
+type Props = {
8
+    startDate: string,
9
+}
10
+
11
+export default class VoteTease extends React.Component<Props> {
12
+
13
+    shouldComponentUpdate() {
14
+        return false;
15
+    }
16
+
17
+    render() {
18
+        return (
19
+            <Card style={styles.card}>
20
+                <Card.Title
21
+                    title={"VOTE INCOMING"}
22
+                    subtitle={"GET READY"}
23
+                    left={props => <Avatar.Icon
24
+                        {...props}
25
+                        icon="vote"/>}
26
+                />
27
+                <Card.Content>
28
+                    <Paragraph>
29
+                        VOTE STARTS
30
+                        AT {this.props.startDate}
31
+                    </Paragraph>
32
+                </Card.Content>
33
+            </Card>
34
+        );
35
+    }
36
+}
37
+
38
+const styles = StyleSheet.create({
39
+    card: {
40
+        margin: 10,
41
+    },
42
+    icon: {
43
+        backgroundColor: 'transparent'
44
+    },
45
+});

+ 54
- 0
src/components/Amicale/Vote/VoteTitle.js View File

@@ -0,0 +1,54 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Avatar, Card, Paragraph} from "react-native-paper";
5
+import {StyleSheet} from "react-native";
6
+
7
+const ICON_AMICALE = require('../../../../assets/amicale.png');
8
+
9
+type Props = {}
10
+
11
+export default class VoteTitle extends React.Component<Props> {
12
+
13
+    shouldComponentUpdate() {
14
+        return false;
15
+    }
16
+
17
+    render() {
18
+        return (
19
+            <Card style={styles.card}>
20
+                <Card.Title
21
+                    title={"VOTE"}
22
+                    subtitle={"WHY"}
23
+                    left={(props) => <Avatar.Image
24
+                        {...props}
25
+                        source={ICON_AMICALE}
26
+                        style={styles.icon}
27
+                    />}
28
+                />
29
+                <Card.Content>
30
+                    <Paragraph>
31
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus porttitor
32
+                        suscipit. Quisque hendrerit, quam id vestibulum vestibulum, lorem nisi hendrerit nisi, a
33
+                        eleifend sapien diam ut elit. Curabitur sit amet vulputate lectus. Donec semper cursus sapien
34
+                        vel finibus.
35
+                    </Paragraph>
36
+                    <Paragraph>
37
+                        Sed et venenatis turpis. Fusce malesuada magna urna, sed vehicula sem luctus in. Vivamus
38
+                        faucibus vel eros a ultricies. In sed laoreet ante, luctus mattis tellus. Etiam vitae ipsum
39
+                        sagittis, consequat purus sed, blandit risus.
40
+                    </Paragraph>
41
+                </Card.Content>
42
+            </Card>
43
+        );
44
+    }
45
+}
46
+
47
+const styles = StyleSheet.create({
48
+    card: {
49
+        margin: 10,
50
+    },
51
+    icon: {
52
+        backgroundColor: 'transparent'
53
+    },
54
+});

+ 73
- 0
src/components/Amicale/Vote/VoteWait.js View File

@@ -0,0 +1,73 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {ActivityIndicator, Card, Paragraph, withTheme} from "react-native-paper";
5
+import {StyleSheet} from "react-native";
6
+
7
+type Props = {
8
+    startDate: string | null,
9
+    justVoted: boolean,
10
+    hasVoted: boolean,
11
+    isVoteRunning: boolean,
12
+}
13
+
14
+class VoteWait extends React.Component<Props> {
15
+
16
+    colors: Object;
17
+
18
+    constructor(props) {
19
+        super(props);
20
+        this.colors = props.theme.colors;
21
+    }
22
+
23
+    shouldComponentUpdate() {
24
+        return false;
25
+    }
26
+
27
+    render() {
28
+        return (
29
+            <Card style={styles.card}>
30
+                <Card.Title
31
+                    title={this.props.isVoteRunning ? "VOTE SUBMITTED" : "VOTES HAVE ENDED"}
32
+                    subtitle={"WAITING FOR RESULTS"}
33
+                    left={(props) => <ActivityIndicator {...props}/>}
34
+                />
35
+                <Card.Content>
36
+                    {
37
+                        this.props.justVoted
38
+                            ? <Paragraph style={{color: this.colors.success}}>
39
+                                VOTE SUBMITTED. THX FOR YOUR PARTICIPATION
40
+                            </Paragraph>
41
+                            : null
42
+                    }
43
+                    {
44
+                        this.props.hasVoted
45
+                            ? <Paragraph style={{color: this.colors.success}}>
46
+                                THX FOR THE VOTE
47
+                            </Paragraph>
48
+                            : null
49
+                    }
50
+                    {
51
+                        this.props.startDate !== null
52
+                            ? <Paragraph>
53
+                                RESULTS AVAILABLE
54
+                                AT {this.props.startDate}
55
+                            </Paragraph>
56
+                            : <Paragraph>RESULTS AVAILABLE SHORTLY</Paragraph>
57
+                    }
58
+                </Card.Content>
59
+            </Card>
60
+        );
61
+    }
62
+}
63
+
64
+const styles = StyleSheet.create({
65
+    card: {
66
+        margin: 10,
67
+    },
68
+    icon: {
69
+        backgroundColor: 'transparent'
70
+    },
71
+});
72
+
73
+export default withTheme(VoteWait);

+ 2
- 2
src/managers/ConnectionManager.js View File

@@ -190,11 +190,11 @@ export default class ConnectionManager {
190 190
         return data;
191 191
     }
192 192
 
193
-    async authenticatedRequest(path: string, keys: Array<string>, values: Array<any>) {
193
+    async authenticatedRequest(path: string, keys: Array<string>|null, values: Array<any>|null) {
194 194
         return new Promise((resolve, reject) => {
195 195
             if (this.getToken() !== null) {
196 196
                 let data = {};
197
-                if (keys !== undefined && values !== undefined && keys.length === values.length)
197
+                if (keys !== null && values !== null && keys.length === values.length)
198 198
                     data = this.generatePostArguments(keys, values);
199 199
                 console.log(data);
200 200
                 fetch(API_ENDPOINT + path, {

+ 29
- 296
src/screens/Amicale/VoteScreen.js View File

@@ -1,32 +1,20 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList, StyleSheet, View} from "react-native";
5
-import {
6
-    ActivityIndicator,
7
-    Avatar,
8
-    Button,
9
-    Card,
10
-    List,
11
-    Paragraph,
12
-    ProgressBar,
13
-    RadioButton,
14
-    Subheading,
15
-    withTheme
16
-} from 'react-native-paper';
4
+import {FlatList, View} from "react-native";
17 5
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
18 6
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
19
-import LoadingConfirmDialog from "../../components/Dialog/LoadingConfirmDialog";
20
-import ConnectionManager from "../../managers/ConnectionManager";
21
-import ErrorDialog from "../../components/Dialog/ErrorDialog";
22
-
23
-const ICON_AMICALE = require('../../../assets/amicale.png');
7
+import VoteTitle from "../../components/Amicale/Vote/VoteTitle";
8
+import VoteTease from "../../components/Amicale/Vote/VoteTease";
9
+import VoteSelect from "../../components/Amicale/Vote/VoteSelect";
10
+import VoteResults from "../../components/Amicale/Vote/VoteResults";
11
+import VoteWait from "../../components/Amicale/Vote/VoteWait";
24 12
 
25 13
 const FAKE_DATE = {
26 14
     "date_begin": "2020-04-06 21:50",
27 15
     "date_end": "2020-04-07 23:50",
28 16
     "date_result_begin": "2020-04-07 21:50",
29
-    "date_result_end": "2020-04-07 21:50",
17
+    "date_result_end": "2020-04-07 22:50",
30 18
 };
31 19
 
32 20
 const FAKE_DATE2 = {
@@ -65,31 +53,18 @@ const FAKE_TEAMS2 = {
65 53
     ],
66 54
 };
67 55
 
68
-type Props = {
69
-    navigation: Object,
70
-    theme: Object,
71
-}
56
+type Props = {}
72 57
 
73 58
 type State = {
74
-    selectedTeam: string,
75 59
     hasVoted: boolean,
76
-    voteDialogVisible: boolean,
77
-    errorDialogVisible: boolean,
78
-    currentError: number,
79 60
 }
80 61
 
81
-class VoteScreen extends React.Component<Props, State> {
62
+export default class VoteScreen extends React.Component<Props, State> {
82 63
 
83 64
     state = {
84
-        selectedTeam: "none",
85
-        voteDialogVisible: false,
86
-        errorDialogVisible: false,
87
-        currentError: 0,
88 65
         hasVoted: false,
89 66
     };
90 67
 
91
-    colors: Object;
92
-
93 68
     teams: Array<Object>;
94 69
     hasVoted: boolean;
95 70
     datesString: Object;
@@ -98,13 +73,11 @@ class VoteScreen extends React.Component<Props, State> {
98 73
     today: Date;
99 74
 
100 75
     mainFlatListData: Array<Object>;
101
-    totalVotes: number;
102 76
 
103 77
     authRef: Object;
104 78
 
105
-    constructor(props) {
106
-        super(props);
107
-        this.colors = props.theme.colors;
79
+    constructor() {
80
+        super();
108 81
         this.hasVoted = false;
109 82
         this.today = new Date();
110 83
         this.authRef = React.createRef();
@@ -125,10 +98,11 @@ class VoteScreen extends React.Component<Props, State> {
125 98
         };
126 99
     }
127 100
 
128
-    getDateString(date: Date, dateString: string) {
129
-        if (this.today.getDate() === date.getDate())
130
-            return getTimeOnlyString(dateString);
131
-        else
101
+    getDateString(date: Date, dateString: string): string {
102
+        if (this.today.getDate() === date.getDate()) {
103
+            const str = getTimeOnlyString(dateString);
104
+            return str !== null ? str : "";
105
+        } else
132 106
             return dateString;
133 107
     }
134 108
 
@@ -154,7 +128,7 @@ class VoteScreen extends React.Component<Props, State> {
154 128
 
155 129
     mainRenderItem = ({item}: Object) => {
156 130
         if (item.key === 'info')
157
-            return this.getTitleCard();
131
+            return <VoteTitle/>;
158 132
         else if (item.key === 'main' && this.isVoteAvailable())
159 133
             return this.getContent();
160 134
         else
@@ -176,64 +150,13 @@ class VoteScreen extends React.Component<Props, State> {
176 150
                 {/*$FlowFixMe*/}
177 151
                 <FlatList
178 152
                     data={this.mainFlatListData}
179
-                    extraData={this.state.selectedTeam + this.state.hasVoted.toString()}
153
+                    extraData={this.state.hasVoted.toString()}
180 154
                     renderItem={this.mainRenderItem}
181 155
                 />
182
-                <LoadingConfirmDialog
183
-                    visible={this.state.voteDialogVisible}
184
-                    onDismiss={this.onVoteDialogDismiss}
185
-                    onAccept={this.onVoteDialogAccept}
186
-                    title={"VOTE?"}
187
-                    titleLoading={"SENDING VOTE..."}
188
-                    message={"SURE?"}
189
-                />
190
-                <ErrorDialog
191
-                    visible={this.state.errorDialogVisible}
192
-                    onDismiss={this.onErrorDialogDismiss}
193
-                    errorCode={this.state.currentError}
194
-                />
195 156
             </View>
196 157
         );
197 158
     };
198 159
 
199
-    showVoteDialog = () => this.setState({voteDialogVisible: true});
200
-
201
-    onVoteDialogDismiss = (voteStatus: boolean) => {
202
-        voteStatus = voteStatus === undefined ? false : voteStatus;
203
-        this.setState({
204
-            voteDialogVisible: false,
205
-            hasVoted: voteStatus,
206
-        })
207
-    };
208
-
209
-    onVoteDialogAccept = async () => {
210
-        return new Promise((resolve, reject) => {
211
-            ConnectionManager.getInstance().authenticatedRequest(
212
-                "elections/vote",
213
-                ["vote"],
214
-                [parseInt(this.state.selectedTeam)])
215
-                .then(() => {
216
-                    this.onVoteDialogDismiss(true);
217
-                    resolve();
218
-                })
219
-                .catch((error: number) => {
220
-                    this.onVoteDialogDismiss(false);
221
-                    this.showErrorDialog(error);
222
-                    resolve();
223
-                });
224
-        });
225
-    };
226
-
227
-    showErrorDialog = (error: number) => this.setState({
228
-        errorDialogVisible: true,
229
-        currentError: error,
230
-    });
231
-
232
-    onErrorDialogDismiss = () => {
233
-        this.setState({errorDialogVisible: false});
234
-        this.reloadData();
235
-    };
236
-
237 160
     getContent() {
238 161
         if (!this.isVoteStarted())
239 162
             return this.getTeaseVoteCard();
@@ -247,218 +170,39 @@ class VoteScreen extends React.Component<Props, State> {
247 170
             return null;
248 171
     }
249 172
 
250
-    getTitleCard() {
251
-        return (
252
-            <Card style={styles.card}>
253
-                <Card.Title
254
-                    title={"VOTE"}
255
-                    subtitle={"WHY"}
256
-                    left={(props) => <Avatar.Image
257
-                        {...props}
258
-                        source={ICON_AMICALE}
259
-                        style={styles.icon}
260
-                    />}
261
-                />
262
-                <Card.Content>
263
-                    <Paragraph>
264
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus porttitor
265
-                        suscipit. Quisque hendrerit, quam id vestibulum vestibulum, lorem nisi hendrerit nisi, a
266
-                        eleifend sapien diam ut elit. Curabitur sit amet vulputate lectus. Donec semper cursus sapien
267
-                        vel finibus.
268
-                    </Paragraph>
269
-                    <Paragraph>
270
-                        Sed et venenatis turpis. Fusce malesuada magna urna, sed vehicula sem luctus in. Vivamus
271
-                        faucibus vel eros a ultricies. In sed laoreet ante, luctus mattis tellus. Etiam vitae ipsum
272
-                        sagittis, consequat purus sed, blandit risus.
273
-                    </Paragraph>
274
-                </Card.Content>
275
-            </Card>
276
-        );
277
-    }
278
-
279
-    onVoteSelectionChange = (team: string) => {
280
-        this.setState({selectedTeam: team})
281
-    };
282
-
283
-    onVotePress = () => {
284
-        this.showVoteDialog();
285
-    };
286
-
287
-    voteKeyExtractor = (item: Object) => item.id.toString();
288
-
289
-    voteRenderItem = ({item}: Object) => <RadioButton.Item label={item.name} value={item.id.toString()}/>;
173
+    onVoteSuccess = () => this.setState({hasVoted: true});
290 174
 
291 175
     /**
292 176
      * The user has not voted yet, and the votes are open
293 177
      */
294 178
     getVoteCard() {
295
-        return (
296
-            <Card style={styles.card}>
297
-                <Card.Title
298
-                    title={"VOTE OPEN"}
299
-                    subtitle={"VOTE NOW"}
300
-                    left={(props) => <Avatar.Icon
301
-                        {...props}
302
-                        icon={"alert-decagram"}
303
-                    />}
304
-                />
305
-                <Card.Content>
306
-                    <RadioButton.Group
307
-                        onValueChange={this.onVoteSelectionChange}
308
-                        value={this.state.selectedTeam}
309
-                    >
310
-                        {/*$FlowFixMe*/}
311
-                        <FlatList
312
-                            data={this.teams}
313
-                            keyExtractor={this.voteKeyExtractor}
314
-                            extraData={this.state.selectedTeam}
315
-                            renderItem={this.voteRenderItem}
316
-                        />
317
-                    </RadioButton.Group>
318
-                </Card.Content>
319
-                <Card.Actions>
320
-                    <Button
321
-                        icon="send"
322
-                        mode="contained"
323
-                        onPress={this.onVotePress}
324
-                        style={{marginLeft: 'auto'}}
325
-                        disabled={this.state.selectedTeam === "none"}
326
-                    >
327
-                        SEND VOTE
328
-                    </Button>
329
-                </Card.Actions>
330
-            </Card>
331
-        );
332
-    }
333
-
334
-    sortByVotes = (a: Object, b: Object) => b.votes - a.votes;
335
-
336
-    getTotalVotes() {
337
-        let count = 0;
338
-        for (let i = 0; i < this.teams.length; i++) {
339
-            count += this.teams[i].votes;
340
-        }
341
-        return count;
342
-    }
343
-
344
-    getWinnerId() {
345
-        return this.teams[0].id;
179
+        return <VoteSelect teams={this.teams} onVoteSuccess={this.onVoteSuccess} onVoteError={this.reloadData}/>;
346 180
     }
347 181
 
348 182
     /**
349 183
      * Votes have ended, results can be displayed
350 184
      */
351 185
     getVoteResultCard() {
352
-        this.totalVotes = this.getTotalVotes();
353
-        this.teams.sort(this.sortByVotes);
354
-        return (
355
-            <Card style={styles.card}>
356
-                <Card.Title
357
-                    title={"RESULTS"}
358
-                    subtitle={"AVAILABLE UNTIL " + this.getDateString(this.dates.date_result_end, this.datesString.date_result_end)}
359
-                    left={(props) => <Avatar.Icon
360
-                        {...props}
361
-                        icon={"podium-gold"}
362
-                    />}
363
-                />
364
-                <Card.Content>
365
-                    <Subheading>TOTAL VOTES : {this.totalVotes}</Subheading>
366
-                    {/*$FlowFixMe*/}
367
-                    <FlatList
368
-                        data={this.teams}
369
-                        keyExtractor={this.voteKeyExtractor}
370
-                        renderItem={this.resultRenderItem}
371
-                    />
372
-                </Card.Content>
373
-            </Card>
374
-        );
186
+        return <VoteResults teams={this.teams}
187
+                            dateEnd={this.getDateString(this.dates.date_result_end, this.datesString.date_result_end)}/>;
375 188
     }
376 189
 
377
-    resultRenderItem = ({item}: Object) => {
378
-        const isWinner = this.getWinnerId() === item.id;
379
-        return (
380
-            <Card style={{
381
-                marginTop: 10,
382
-                elevation: isWinner ? 5 : 3,
383
-            }}>
384
-                <List.Item
385
-                    title={item.name}
386
-                    description={item.votes + " VOTES"}
387
-                    left={props => isWinner
388
-                        ? <List.Icon {...props} icon="trophy" color={this.colors.primary}/>
389
-                        : null}
390
-                    titleStyle={{
391
-                        color: isWinner
392
-                            ? this.colors.primary
393
-                            : this.colors.text
394
-                    }}
395
-                    style={{padding: 0}}
396
-                />
397
-                <ProgressBar progress={item.votes / this.totalVotes} color={this.colors.primary}/>
398
-            </Card>
399
-        );
400
-    };
401
-
402 190
     /**
403 191
      * Vote will open shortly
404 192
      */
405 193
     getTeaseVoteCard() {
406
-        return (
407
-            <Card style={styles.card}>
408
-                <Card.Title
409
-                    title={"VOTE INCOMING"}
410
-                    subtitle={"GET READY"}
411
-                    left={props => <Avatar.Icon
412
-                        {...props}
413
-                        icon="vote"/>}
414
-                />
415
-                <Card.Content>
416
-                    <Paragraph>
417
-                        VOTE STARTS
418
-                        AT {this.getDateString(this.dates.date_begin, this.datesString.date_begin)}
419
-                    </Paragraph>
420
-                </Card.Content>
421
-            </Card>
422
-        );
194
+        return <VoteTease startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
423 195
     }
424 196
 
425 197
     /**
426
-     * Votes have ended waiting for results
198
+     * Votes have ended, or user has voted waiting for results
427 199
      */
428 200
     getWaitVoteCard() {
429
-        return (
430
-            <Card style={styles.card}>
431
-                <Card.Title
432
-                    title={this.isVoteRunning() ? "VOTE SUBMITTED" : "VOTES HAVE ENDED"}
433
-                    subtitle={"WAITING FOR RESULTS"}
434
-                    left={(props) => <ActivityIndicator {...props}/>}
435
-                />
436
-                <Card.Content>
437
-                    {
438
-                        this.state.hasVoted
439
-                            ? <Paragraph style={{color: this.colors.success}}>
440
-                                VOTE SUBMITTED. THX FOR YOUR PARTICIPATION
441
-                            </Paragraph>
442
-                            : null
443
-                    }
444
-                    {
445
-                        this.hasVoted
446
-                            ? <Paragraph style={{color: this.colors.success}}>
447
-                                THX FOR THE VOTE
448
-                            </Paragraph>
449
-                            : null
450
-                    }
451
-                    {
452
-                        this.dates.date_result_begin !== null
453
-                            ? <Paragraph>
454
-                                RESULTS AVAILABLE
455
-                                AT {this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin)}
456
-                            </Paragraph>
457
-                            : <Paragraph>RESULTS AVAILABLE SHORTLY</Paragraph>
458
-                    }
459
-                </Card.Content>
460
-            </Card>
461
-        );
201
+        let startDate = null;
202
+        if (this.dates.date_result_begin !== null)
203
+            startDate = this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin);
204
+        return <VoteWait startDate={startDate} hasVoted={this.hasVoted} justVoted={this.state.hasVoted}
205
+                         isVoteRunning={this.isVoteRunning()}/>;
462 206
     }
463 207
 
464 208
     render() {
@@ -481,14 +225,3 @@ class VoteScreen extends React.Component<Props, State> {
481 225
         );
482 226
     }
483 227
 }
484
-
485
-const styles = StyleSheet.create({
486
-    card: {
487
-        margin: 10,
488
-    },
489
-    icon: {
490
-        backgroundColor: 'transparent'
491
-    },
492
-});
493
-
494
-export default withTheme(VoteScreen);

Loading…
Cancel
Save