|
@@ -17,8 +17,6 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-// @flow
|
21
|
|
-
|
22
|
20
|
import * as React from 'react';
|
23
|
21
|
import {FlatList, StyleSheet, View} from 'react-native';
|
24
|
22
|
import {
|
|
@@ -38,42 +36,37 @@ import MaterialHeaderButtons, {
|
38
|
36
|
Item,
|
39
|
37
|
} from '../../components/Overrides/CustomHeaderButton';
|
40
|
38
|
import CardList from '../../components/Lists/CardList/CardList';
|
41
|
|
-import type {CustomThemeType} from '../../managers/ThemeManager';
|
42
|
39
|
import AvailableWebsites from '../../constants/AvailableWebsites';
|
43
|
40
|
import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
44
|
41
|
import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
|
45
|
42
|
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
46
|
43
|
import type {ServiceItemType} from '../../managers/ServicesManager';
|
47
|
|
-import type {
|
48
|
|
- CardTitleIconPropsType,
|
49
|
|
- ListIconPropsType,
|
50
|
|
-} from '../../constants/PaperStyles';
|
51
|
44
|
|
52
|
45
|
type PropsType = {
|
53
|
|
- navigation: StackNavigationProp,
|
54
|
|
- theme: CustomThemeType,
|
|
46
|
+ navigation: StackNavigationProp<any>;
|
|
47
|
+ theme: ReactNativePaper.Theme;
|
55
|
48
|
};
|
56
|
49
|
|
57
|
50
|
type StateType = {
|
58
|
|
- dialogVisible: boolean,
|
|
51
|
+ dialogVisible: boolean;
|
59
|
52
|
};
|
60
|
53
|
|
61
|
54
|
type ClubType = {
|
62
|
|
- id: number,
|
63
|
|
- name: string,
|
64
|
|
- is_manager: boolean,
|
|
55
|
+ id: number;
|
|
56
|
+ name: string;
|
|
57
|
+ is_manager: boolean;
|
65
|
58
|
};
|
66
|
59
|
|
67
|
60
|
type ProfileDataType = {
|
68
|
|
- first_name: string,
|
69
|
|
- last_name: string,
|
70
|
|
- email: string,
|
71
|
|
- birthday: string,
|
72
|
|
- phone: string,
|
73
|
|
- branch: string,
|
74
|
|
- link: string,
|
75
|
|
- validity: boolean,
|
76
|
|
- clubs: Array<ClubType>,
|
|
61
|
+ first_name: string;
|
|
62
|
+ last_name: string;
|
|
63
|
+ email: string;
|
|
64
|
+ birthday: string;
|
|
65
|
+ phone: string;
|
|
66
|
+ branch: string;
|
|
67
|
+ link: string;
|
|
68
|
+ validity: boolean;
|
|
69
|
+ clubs: Array<ClubType>;
|
77
|
70
|
};
|
78
|
71
|
|
79
|
72
|
const styles = StyleSheet.create({
|
|
@@ -89,7 +82,7 @@ const styles = StyleSheet.create({
|
89
|
82
|
});
|
90
|
83
|
|
91
|
84
|
class ProfileScreen extends React.Component<PropsType, StateType> {
|
92
|
|
- data: ProfileDataType;
|
|
85
|
+ data: ProfileDataType | null;
|
93
|
86
|
|
94
|
87
|
flatListData: Array<{id: string}>;
|
95
|
88
|
|
|
@@ -97,6 +90,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
97
|
90
|
|
98
|
91
|
constructor(props: PropsType) {
|
99
|
92
|
super(props);
|
|
93
|
+ this.data = null;
|
100
|
94
|
this.flatListData = [{id: '0'}, {id: '1'}, {id: '2'}, {id: '3'}];
|
101
|
95
|
const services = new ServicesManager(props.navigation);
|
102
|
96
|
this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
|
|
@@ -117,7 +111,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
117
|
111
|
*
|
118
|
112
|
* @returns {*}
|
119
|
113
|
*/
|
120
|
|
- getHeaderButton = (): React.Node => (
|
|
114
|
+ getHeaderButton = () => (
|
121
|
115
|
<MaterialHeaderButtons>
|
122
|
116
|
<Item
|
123
|
117
|
title="logout"
|
|
@@ -133,12 +127,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
133
|
127
|
* @param data The data fetched from the server
|
134
|
128
|
* @returns {*}
|
135
|
129
|
*/
|
136
|
|
- getScreen = (data: Array<ProfileDataType | null>): React.Node => {
|
|
130
|
+ getScreen = (data: Array<ProfileDataType | null>) => {
|
137
|
131
|
const {dialogVisible} = this.state;
|
138
|
|
- const {navigation} = this.props;
|
139
|
|
- // eslint-disable-next-line prefer-destructuring
|
140
|
|
- if (data[0] != null) this.data = data[0];
|
141
|
|
-
|
|
132
|
+ this.data = data[0];
|
142
|
133
|
return (
|
143
|
134
|
<View style={{flex: 1}}>
|
144
|
135
|
<CollapsibleFlatList
|
|
@@ -146,7 +137,6 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
146
|
137
|
data={this.flatListData}
|
147
|
138
|
/>
|
148
|
139
|
<LogoutDialog
|
149
|
|
- navigation={navigation}
|
150
|
140
|
visible={dialogVisible}
|
151
|
141
|
onDismiss={this.hideDisconnectDialog}
|
152
|
142
|
/>
|
|
@@ -154,7 +144,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
154
|
144
|
);
|
155
|
145
|
};
|
156
|
146
|
|
157
|
|
- getRenderItem = ({item}: {item: {id: string}}): React.Node => {
|
|
147
|
+ getRenderItem = ({item}: {item: {id: string}}) => {
|
158
|
148
|
switch (item.id) {
|
159
|
149
|
case '0':
|
160
|
150
|
return this.getWelcomeCard();
|
|
@@ -172,7 +162,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
172
|
162
|
*
|
173
|
163
|
* @returns {*}
|
174
|
164
|
*/
|
175
|
|
- getServicesList(): React.Node {
|
|
165
|
+ getServicesList() {
|
176
|
166
|
return <CardList dataset={this.amicaleDataset} isHorizontal />;
|
177
|
167
|
}
|
178
|
168
|
|
|
@@ -181,15 +171,15 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
181
|
171
|
*
|
182
|
172
|
* @returns {*}
|
183
|
173
|
*/
|
184
|
|
- getWelcomeCard(): React.Node {
|
|
174
|
+ getWelcomeCard() {
|
185
|
175
|
const {navigation} = this.props;
|
186
|
176
|
return (
|
187
|
177
|
<Card style={styles.card}>
|
188
|
178
|
<Card.Title
|
189
|
179
|
title={i18n.t('screens.profile.welcomeTitle', {
|
190
|
|
- name: this.data.first_name,
|
|
180
|
+ name: this.data?.first_name,
|
191
|
181
|
})}
|
192
|
|
- left={(): React.Node => (
|
|
182
|
+ left={() => (
|
193
|
183
|
<Mascot
|
194
|
184
|
style={{
|
195
|
185
|
width: 60,
|
|
@@ -233,8 +223,8 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
233
|
223
|
* @param field The field to get the value from
|
234
|
224
|
* @return {*}
|
235
|
225
|
*/
|
236
|
|
- static getFieldValue(field: ?string): string {
|
237
|
|
- return field != null ? field : i18n.t('screens.profile.noData');
|
|
226
|
+ static getFieldValue(field?: string): string {
|
|
227
|
+ return field ? field : i18n.t('screens.profile.noData');
|
238
|
228
|
}
|
239
|
229
|
|
240
|
230
|
/**
|
|
@@ -244,7 +234,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
244
|
234
|
* @param icon The icon to use
|
245
|
235
|
* @return {*}
|
246
|
236
|
*/
|
247
|
|
- getPersonalListItem(field: ?string, icon: string): React.Node {
|
|
237
|
+ getPersonalListItem(field: string | undefined, icon: string) {
|
248
|
238
|
const {theme} = this.props;
|
249
|
239
|
const title = field != null ? ProfileScreen.getFieldValue(field) : ':(';
|
250
|
240
|
const subtitle = field != null ? '' : ProfileScreen.getFieldValue(field);
|
|
@@ -252,7 +242,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
252
|
242
|
<List.Item
|
253
|
243
|
title={title}
|
254
|
244
|
description={subtitle}
|
255
|
|
- left={(props: ListIconPropsType): React.Node => (
|
|
245
|
+ left={(props) => (
|
256
|
246
|
<List.Icon
|
257
|
247
|
style={props.style}
|
258
|
248
|
icon={icon}
|
|
@@ -268,14 +258,14 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
268
|
258
|
*
|
269
|
259
|
* @return {*}
|
270
|
260
|
*/
|
271
|
|
- getPersonalCard(): React.Node {
|
|
261
|
+ getPersonalCard() {
|
272
|
262
|
const {theme, navigation} = this.props;
|
273
|
263
|
return (
|
274
|
264
|
<Card style={styles.card}>
|
275
|
265
|
<Card.Title
|
276
|
|
- title={`${this.data.first_name} ${this.data.last_name}`}
|
277
|
|
- subtitle={this.data.email}
|
278
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
266
|
+ title={`${this.data?.first_name} ${this.data?.last_name}`}
|
|
267
|
+ subtitle={this.data?.email}
|
|
268
|
+ left={(iconProps) => (
|
279
|
269
|
<Avatar.Icon
|
280
|
270
|
size={iconProps.size}
|
281
|
271
|
icon="account"
|
|
@@ -290,10 +280,10 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
290
|
280
|
<List.Subheader>
|
291
|
281
|
{i18n.t('screens.profile.personalInformation')}
|
292
|
282
|
</List.Subheader>
|
293
|
|
- {this.getPersonalListItem(this.data.birthday, 'cake-variant')}
|
294
|
|
- {this.getPersonalListItem(this.data.phone, 'phone')}
|
295
|
|
- {this.getPersonalListItem(this.data.email, 'email')}
|
296
|
|
- {this.getPersonalListItem(this.data.branch, 'school')}
|
|
283
|
+ {this.getPersonalListItem(this.data?.birthday, 'cake-variant')}
|
|
284
|
+ {this.getPersonalListItem(this.data?.phone, 'phone')}
|
|
285
|
+ {this.getPersonalListItem(this.data?.email, 'email')}
|
|
286
|
+ {this.getPersonalListItem(this.data?.branch, 'school')}
|
297
|
287
|
</List.Section>
|
298
|
288
|
<Divider />
|
299
|
289
|
<Card.Actions>
|
|
@@ -303,7 +293,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
303
|
293
|
onPress={() => {
|
304
|
294
|
navigation.navigate('website', {
|
305
|
295
|
host: AvailableWebsites.websites.AMICALE,
|
306
|
|
- path: this.data.link,
|
|
296
|
+ path: this.data?.link,
|
307
|
297
|
title: i18n.t('screens.websites.amicale'),
|
308
|
298
|
});
|
309
|
299
|
}}
|
|
@@ -321,14 +311,14 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
321
|
311
|
*
|
322
|
312
|
* @return {*}
|
323
|
313
|
*/
|
324
|
|
- getClubCard(): React.Node {
|
|
314
|
+ getClubCard() {
|
325
|
315
|
const {theme} = this.props;
|
326
|
316
|
return (
|
327
|
317
|
<Card style={styles.card}>
|
328
|
318
|
<Card.Title
|
329
|
319
|
title={i18n.t('screens.profile.clubs')}
|
330
|
320
|
subtitle={i18n.t('screens.profile.clubsSubtitle')}
|
331
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
321
|
+ left={(iconProps) => (
|
332
|
322
|
<Avatar.Icon
|
333
|
323
|
size={iconProps.size}
|
334
|
324
|
icon="account-group"
|
|
@@ -339,7 +329,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
339
|
329
|
/>
|
340
|
330
|
<Card.Content>
|
341
|
331
|
<Divider />
|
342
|
|
- {this.getClubList(this.data.clubs)}
|
|
332
|
+ {this.getClubList(this.data?.clubs)}
|
343
|
333
|
</Card.Content>
|
344
|
334
|
</Card>
|
345
|
335
|
);
|
|
@@ -350,14 +340,14 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
350
|
340
|
*
|
351
|
341
|
* @return {*}
|
352
|
342
|
*/
|
353
|
|
- getMembershipCar(): React.Node {
|
|
343
|
+ getMembershipCar() {
|
354
|
344
|
const {theme} = this.props;
|
355
|
345
|
return (
|
356
|
346
|
<Card style={styles.card}>
|
357
|
347
|
<Card.Title
|
358
|
348
|
title={i18n.t('screens.profile.membership')}
|
359
|
349
|
subtitle={i18n.t('screens.profile.membershipSubtitle')}
|
360
|
|
- left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
350
|
+ left={(iconProps) => (
|
361
|
351
|
<Avatar.Icon
|
362
|
352
|
size={iconProps.size}
|
363
|
353
|
icon="credit-card"
|
|
@@ -368,7 +358,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
368
|
358
|
/>
|
369
|
359
|
<Card.Content>
|
370
|
360
|
<List.Section>
|
371
|
|
- {this.getMembershipItem(this.data.validity)}
|
|
361
|
+ {this.getMembershipItem(this.data?.validity === true)}
|
372
|
362
|
</List.Section>
|
373
|
363
|
</Card.Content>
|
374
|
364
|
</Card>
|
|
@@ -380,7 +370,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
380
|
370
|
*
|
381
|
371
|
* @return {*}
|
382
|
372
|
*/
|
383
|
|
- getMembershipItem(state: boolean): React.Node {
|
|
373
|
+ getMembershipItem(state: boolean) {
|
384
|
374
|
const {theme} = this.props;
|
385
|
375
|
return (
|
386
|
376
|
<List.Item
|
|
@@ -389,7 +379,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
389
|
379
|
? i18n.t('screens.profile.membershipPayed')
|
390
|
380
|
: i18n.t('screens.profile.membershipNotPayed')
|
391
|
381
|
}
|
392
|
|
- left={(props: ListIconPropsType): React.Node => (
|
|
382
|
+ left={(props) => (
|
393
|
383
|
<List.Icon
|
394
|
384
|
style={props.style}
|
395
|
385
|
color={state ? theme.colors.success : theme.colors.danger}
|
|
@@ -406,18 +396,25 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
406
|
396
|
* @param item The club to render
|
407
|
397
|
* @return {*}
|
408
|
398
|
*/
|
409
|
|
- getClubListItem = ({item}: {item: ClubType}): React.Node => {
|
|
399
|
+ getClubListItem = ({item}: {item: ClubType}) => {
|
410
|
400
|
const {theme} = this.props;
|
411
|
401
|
const onPress = () => {
|
412
|
402
|
this.openClubDetailsScreen(item.id);
|
413
|
403
|
};
|
414
|
404
|
let description = i18n.t('screens.profile.isMember');
|
415
|
|
- let icon = (props: ListIconPropsType): React.Node => (
|
|
405
|
+ let icon = (props: {
|
|
406
|
+ color: string;
|
|
407
|
+ style: {
|
|
408
|
+ marginLeft: number;
|
|
409
|
+ marginRight: number;
|
|
410
|
+ marginVertical?: number;
|
|
411
|
+ };
|
|
412
|
+ }) => (
|
416
|
413
|
<List.Icon color={props.color} style={props.style} icon="chevron-right" />
|
417
|
414
|
);
|
418
|
415
|
if (item.is_manager) {
|
419
|
416
|
description = i18n.t('screens.profile.isManager');
|
420
|
|
- icon = (props: ListIconPropsType): React.Node => (
|
|
417
|
+ icon = (props) => (
|
421
|
418
|
<List.Icon
|
422
|
419
|
style={props.style}
|
423
|
420
|
icon="star"
|
|
@@ -441,7 +438,11 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
441
|
438
|
* @param list The club list
|
442
|
439
|
* @return {*}
|
443
|
440
|
*/
|
444
|
|
- getClubList(list: Array<ClubType>): React.Node {
|
|
441
|
+ getClubList(list: Array<ClubType> | undefined) {
|
|
442
|
+ if (!list) {
|
|
443
|
+ return null;
|
|
444
|
+ }
|
|
445
|
+
|
445
|
446
|
list.sort(this.sortClubList);
|
446
|
447
|
return (
|
447
|
448
|
<FlatList
|
|
@@ -473,7 +474,7 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
|
473
|
474
|
navigation.navigate('club-information', {clubId: id});
|
474
|
475
|
}
|
475
|
476
|
|
476
|
|
- render(): React.Node {
|
|
477
|
+ render() {
|
477
|
478
|
const {navigation} = this.props;
|
478
|
479
|
return (
|
479
|
480
|
<AuthenticatedScreen
|