|
@@ -1,7 +1,7 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {Animated, FlatList} from 'react-native';
|
|
4
|
+import {FlatList} from 'react-native';
|
5
|
5
|
import i18n from "i18n-js";
|
6
|
6
|
import DashboardItem from "../../components/Home/EventDashboardItem";
|
7
|
7
|
import WebSectionList from "../../components/Screens/WebSectionList";
|
|
@@ -14,9 +14,10 @@ import ActionsDashBoardItem from "../../components/Home/ActionsDashboardItem";
|
14
|
14
|
import ConnectionManager from "../../managers/ConnectionManager";
|
15
|
15
|
import {CommonActions} from '@react-navigation/native';
|
16
|
16
|
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
|
17
|
|
-import {AnimatedValue} from "react-native-reanimated";
|
18
|
17
|
import AnimatedFAB from "../../components/Animations/AnimatedFAB";
|
19
|
18
|
import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
|
|
19
|
+import {StackNavigationProp} from "@react-navigation/stack";
|
|
20
|
+import type {CustomTheme} from "../../managers/ThemeManager";
|
20
|
21
|
// import DATA from "../dashboard_data.json";
|
21
|
22
|
|
22
|
23
|
|
|
@@ -31,30 +32,80 @@ const SECTIONS_ID = [
|
31
|
32
|
|
32
|
33
|
const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
|
33
|
34
|
|
34
|
|
-type Props = {
|
35
|
|
- navigation: Object,
|
36
|
|
- route: Object,
|
37
|
|
- theme: Object,
|
|
35
|
+type rawDashboard = {
|
|
36
|
+ news_feed: {
|
|
37
|
+ data: Array<feedItem>,
|
|
38
|
+ },
|
|
39
|
+ dashboard: fullDashboard,
|
|
40
|
+}
|
|
41
|
+
|
|
42
|
+export type feedItem = {
|
|
43
|
+ full_picture: string,
|
|
44
|
+ message: string,
|
|
45
|
+ permalink_url: string,
|
|
46
|
+ created_time: number,
|
|
47
|
+ id: string,
|
|
48
|
+};
|
|
49
|
+
|
|
50
|
+type fullDashboard = {
|
|
51
|
+ today_menu: Array<{ [key: string]: any }>,
|
|
52
|
+ proximo_articles: number,
|
|
53
|
+ available_machines: {
|
|
54
|
+ dryers: number,
|
|
55
|
+ washers: number,
|
|
56
|
+ },
|
|
57
|
+ today_events: Array<{ [key: string]: any }>,
|
|
58
|
+ available_tutorials: number,
|
|
59
|
+}
|
|
60
|
+
|
|
61
|
+type dashboardItem = {
|
|
62
|
+ id: string,
|
|
63
|
+ content: Array<{ [key: string]: any }>
|
|
64
|
+};
|
|
65
|
+
|
|
66
|
+type dashboardSmallItem = {
|
|
67
|
+ id: string,
|
|
68
|
+ data: number,
|
|
69
|
+ icon: string,
|
|
70
|
+ color: string,
|
|
71
|
+ onPress: () => void,
|
|
72
|
+ isAvailable: boolean
|
|
73
|
+};
|
|
74
|
+
|
|
75
|
+export type event = {
|
|
76
|
+ id: number,
|
|
77
|
+ title: string,
|
|
78
|
+ logo: string | null,
|
|
79
|
+ date_begin: string,
|
|
80
|
+ date_end: string,
|
|
81
|
+ description: string,
|
|
82
|
+ club: string,
|
|
83
|
+ category_id: number,
|
|
84
|
+ url: string,
|
38
|
85
|
}
|
39
|
86
|
|
40
|
|
-type State = {
|
41
|
|
- fabPosition: AnimatedValue
|
|
87
|
+type listSection = {
|
|
88
|
+ title: string,
|
|
89
|
+ data: Array<dashboardItem> | Array<feedItem>,
|
|
90
|
+ id: string
|
|
91
|
+};
|
|
92
|
+
|
|
93
|
+type Props = {
|
|
94
|
+ navigation: StackNavigationProp,
|
|
95
|
+ route: { params: any, ... },
|
|
96
|
+ theme: CustomTheme,
|
42
|
97
|
}
|
43
|
98
|
|
44
|
99
|
/**
|
45
|
100
|
* Class defining the app's home screen
|
46
|
101
|
*/
|
47
|
|
-class HomeScreen extends React.Component<Props, State> {
|
|
102
|
+class HomeScreen extends React.Component<Props> {
|
48
|
103
|
|
49
|
104
|
colors: Object;
|
50
|
105
|
|
51
|
106
|
isLoggedIn: boolean | null;
|
52
|
107
|
|
53
|
|
- fabRef: Object;
|
54
|
|
-
|
55
|
|
- state = {
|
56
|
|
- fabPosition: new Animated.Value(0),
|
57
|
|
- };
|
|
108
|
+ fabRef: { current: null | AnimatedFAB };
|
58
|
109
|
|
59
|
110
|
constructor(props) {
|
60
|
111
|
super(props);
|
|
@@ -69,8 +120,8 @@ class HomeScreen extends React.Component<Props, State> {
|
69
|
120
|
* @param dateString {string} The Unix Timestamp representation of a date
|
70
|
121
|
* @return {string} The formatted output date
|
71
|
122
|
*/
|
72
|
|
- static getFormattedDate(dateString: string) {
|
73
|
|
- let date = new Date(Number.parseInt(dateString) * 1000);
|
|
123
|
+ static getFormattedDate(dateString: number) {
|
|
124
|
+ let date = new Date(dateString * 1000);
|
74
|
125
|
return date.toLocaleString();
|
75
|
126
|
}
|
76
|
127
|
|
|
@@ -92,8 +143,8 @@ class HomeScreen extends React.Component<Props, State> {
|
92
|
143
|
};
|
93
|
144
|
|
94
|
145
|
handleNavigationParams = () => {
|
95
|
|
- if (this.props.route.params !== undefined) {
|
96
|
|
- if (this.props.route.params.nextScreen !== undefined && this.props.route.params.nextScreen !== null) {
|
|
146
|
+ if (this.props.route.params != null) {
|
|
147
|
+ if (this.props.route.params.nextScreen != null) {
|
97
|
148
|
this.props.navigation.navigate(this.props.route.params.nextScreen, this.props.route.params.data);
|
98
|
149
|
// reset params to prevent infinite loop
|
99
|
150
|
this.props.navigation.dispatch(CommonActions.setParams({nextScreen: null}));
|
|
@@ -138,14 +189,14 @@ class HomeScreen extends React.Component<Props, State> {
|
138
|
189
|
* @param fetchedData
|
139
|
190
|
* @return {*}
|
140
|
191
|
*/
|
141
|
|
- createDataset = (fetchedData: Object) => {
|
|
192
|
+ createDataset = (fetchedData: rawDashboard) => {
|
142
|
193
|
// fetchedData = DATA;
|
143
|
194
|
let newsData = [];
|
144
|
195
|
let dashboardData = [];
|
145
|
|
- if (fetchedData['news_feed'] !== undefined)
|
146
|
|
- newsData = fetchedData['news_feed']['data'];
|
147
|
|
- if (fetchedData['dashboard'] !== undefined)
|
148
|
|
- dashboardData = this.generateDashboardDataset(fetchedData['dashboard']);
|
|
196
|
+ if (fetchedData.news_feed != null)
|
|
197
|
+ newsData = fetchedData.news_feed.data;
|
|
198
|
+ if (fetchedData.dashboard != null)
|
|
199
|
+ dashboardData = this.generateDashboardDataset(fetchedData.dashboard);
|
149
|
200
|
return [
|
150
|
201
|
{
|
151
|
202
|
title: '',
|
|
@@ -164,79 +215,61 @@ class HomeScreen extends React.Component<Props, State> {
|
164
|
215
|
* Generates the dataset associated to the dashboard to be displayed in the FlatList as a section
|
165
|
216
|
*
|
166
|
217
|
* @param dashboardData
|
167
|
|
- * @return {*}
|
|
218
|
+ * @return {Array<dashboardItem>}
|
168
|
219
|
*/
|
169
|
|
- generateDashboardDataset(dashboardData: Object) {
|
170
|
|
- let dataset = [
|
171
|
|
-
|
|
220
|
+ generateDashboardDataset(dashboardData: fullDashboard): Array<dashboardItem> {
|
|
221
|
+ return [
|
172
|
222
|
{
|
173
|
223
|
id: 'top',
|
174
|
|
- content: []
|
175
|
|
- },
|
176
|
|
- {
|
177
|
|
- id: 'actions',
|
178
|
|
- content: undefined
|
179
|
|
- },
|
180
|
|
- {
|
181
|
|
- id: 'event',
|
182
|
|
- content: undefined
|
183
|
|
- },
|
184
|
|
- ];
|
185
|
|
- for (let [key, value: number | Object | Array<string>] of Object.entries(dashboardData)) {
|
186
|
|
- switch (key) {
|
187
|
|
- case 'available_machines':
|
188
|
|
- dataset[0]['content'][0] = {
|
|
224
|
+ content: [
|
|
225
|
+ {
|
189
|
226
|
id: 'washers',
|
190
|
|
- data: value.washers,
|
|
227
|
+ data: dashboardData.available_machines.washers,
|
191
|
228
|
icon: 'washing-machine',
|
192
|
229
|
color: this.colors.proxiwashColor,
|
193
|
230
|
onPress: this.onProxiwashClick,
|
194
|
|
- isAvailable: value.washers > 0
|
195
|
|
- };
|
196
|
|
- dataset[0]['content'][1] = {
|
197
|
|
- ...dataset[0]['content'][0],
|
|
231
|
+ isAvailable: dashboardData.available_machines.washers > 0
|
|
232
|
+ },
|
|
233
|
+ {
|
198
|
234
|
id: 'dryers',
|
199
|
|
- data: value.dryers,
|
|
235
|
+ data: dashboardData.available_machines.dryers,
|
200
|
236
|
icon: 'tumble-dryer',
|
201
|
|
- isAvailable: value.dryers > 0
|
202
|
|
- };
|
203
|
|
- break;
|
204
|
|
- case 'available_tutorials':
|
205
|
|
- dataset[0]['content'][2] = {
|
206
|
|
- id: key,
|
207
|
|
- data: value,
|
|
237
|
+ color: this.colors.proxiwashColor,
|
|
238
|
+ onPress: this.onProxiwashClick,
|
|
239
|
+ isAvailable: dashboardData.available_machines.dryers > 0
|
|
240
|
+ },
|
|
241
|
+ {
|
|
242
|
+ id: 'available_tutorials',
|
|
243
|
+ data: dashboardData.available_tutorials,
|
208
|
244
|
icon: 'school',
|
209
|
245
|
color: this.colors.tutorinsaColor,
|
210
|
246
|
onPress: this.onTutorInsaClick,
|
211
|
|
- isAvailable: parseInt(value) > 0
|
212
|
|
- };
|
213
|
|
- break;
|
214
|
|
- case 'proximo_articles':
|
215
|
|
- dataset[0]['content'][3] = {
|
216
|
|
- id: key,
|
217
|
|
- data: value,
|
|
247
|
+ isAvailable: dashboardData.available_tutorials > 0
|
|
248
|
+ },
|
|
249
|
+ {
|
|
250
|
+ id: 'proximo_articles',
|
|
251
|
+ data: dashboardData.proximo_articles,
|
218
|
252
|
icon: 'shopping',
|
219
|
253
|
color: this.colors.proximoColor,
|
220
|
254
|
onPress: this.onProximoClick,
|
221
|
|
- isAvailable: parseInt(value) > 0
|
222
|
|
- };
|
223
|
|
- break;
|
224
|
|
- case 'today_menu':
|
225
|
|
- dataset[0]['content'][4] = {
|
226
|
|
- id: key,
|
227
|
|
- data: 0,
|
228
|
|
- icon: 'silverware-fork-knife',
|
|
255
|
+ isAvailable: dashboardData.proximo_articles > 0
|
|
256
|
+ },
|
|
257
|
+ {
|
|
258
|
+ id: 'silverware-fork-knife',
|
|
259
|
+ data: dashboardData.today_menu,
|
|
260
|
+ icon: 'shopping',
|
229
|
261
|
color: this.colors.menuColor,
|
230
|
262
|
onPress: this.onMenuClick,
|
231
|
|
- isAvailable: value.length > 0
|
232
|
|
- };
|
233
|
|
- break;
|
234
|
|
- case 'today_events':
|
235
|
|
- dataset[2]['content'] = value;
|
236
|
|
- break;
|
237
|
|
- }
|
238
|
|
- }
|
239
|
|
- return dataset
|
|
263
|
+ isAvailable: dashboardData.today_menu.length > 0
|
|
264
|
+ },
|
|
265
|
+ ]
|
|
266
|
+ },
|
|
267
|
+ {id: 'actions', content: []},
|
|
268
|
+ {
|
|
269
|
+ id: 'event',
|
|
270
|
+ content: dashboardData.today_events
|
|
271
|
+ },
|
|
272
|
+ ];
|
240
|
273
|
}
|
241
|
274
|
|
242
|
275
|
/**
|
|
@@ -245,11 +278,11 @@ class HomeScreen extends React.Component<Props, State> {
|
245
|
278
|
* @param item The item to display
|
246
|
279
|
* @return {*}
|
247
|
280
|
*/
|
248
|
|
- getDashboardItem(item: Object) {
|
249
|
|
- let content = item['content'];
|
250
|
|
- if (item['id'] === 'event')
|
|
281
|
+ getDashboardItem(item: dashboardItem) {
|
|
282
|
+ let content = item.content;
|
|
283
|
+ if (item.id === 'event')
|
251
|
284
|
return this.getDashboardEvent(content);
|
252
|
|
- else if (item['id'] === 'top')
|
|
285
|
+ else if (item.id === 'top')
|
253
|
286
|
return this.getDashboardRow(content);
|
254
|
287
|
else
|
255
|
288
|
return this.getDashboardActions();
|
|
@@ -278,14 +311,14 @@ class HomeScreen extends React.Component<Props, State> {
|
278
|
311
|
/**
|
279
|
312
|
* Gets the duration (in milliseconds) of an event
|
280
|
313
|
*
|
281
|
|
- * @param event {Object}
|
|
314
|
+ * @param event {event}
|
282
|
315
|
* @return {number} The number of milliseconds
|
283
|
316
|
*/
|
284
|
|
- getEventDuration(event: Object): number {
|
285
|
|
- let start = stringToDate(event['date_begin']);
|
286
|
|
- let end = stringToDate(event['date_end']);
|
|
317
|
+ getEventDuration(event: event): number {
|
|
318
|
+ let start = stringToDate(event.date_begin);
|
|
319
|
+ let end = stringToDate(event.date_end);
|
287
|
320
|
let duration = 0;
|
288
|
|
- if (start !== undefined && start !== null && end !== undefined && end !== null)
|
|
321
|
+ if (start != null && end != null)
|
289
|
322
|
duration = end - start;
|
290
|
323
|
return duration;
|
291
|
324
|
}
|
|
@@ -297,11 +330,11 @@ class HomeScreen extends React.Component<Props, State> {
|
297
|
330
|
* @param limit
|
298
|
331
|
* @return {Array<Object>}
|
299
|
332
|
*/
|
300
|
|
- getEventsAfterLimit(events: Object, limit: Date): Array<Object> {
|
|
333
|
+ getEventsAfterLimit(events: Array<event>, limit: Date): Array<event> {
|
301
|
334
|
let validEvents = [];
|
302
|
335
|
for (let event of events) {
|
303
|
|
- let startDate = stringToDate(event['date_begin']);
|
304
|
|
- if (startDate !== undefined && startDate !== null && startDate >= limit) {
|
|
336
|
+ let startDate = stringToDate(event.date_begin);
|
|
337
|
+ if (startDate != null && startDate >= limit) {
|
305
|
338
|
validEvents.push(event);
|
306
|
339
|
}
|
307
|
340
|
}
|
|
@@ -314,7 +347,7 @@ class HomeScreen extends React.Component<Props, State> {
|
314
|
347
|
*
|
315
|
348
|
* @param events
|
316
|
349
|
*/
|
317
|
|
- getLongestEvent(events: Array<Object>): Object {
|
|
350
|
+ getLongestEvent(events: Array<event>): event {
|
318
|
351
|
let longestEvent = events[0];
|
319
|
352
|
let longestTime = 0;
|
320
|
353
|
for (let event of events) {
|
|
@@ -332,16 +365,16 @@ class HomeScreen extends React.Component<Props, State> {
|
332
|
365
|
*
|
333
|
366
|
* @param events
|
334
|
367
|
*/
|
335
|
|
- getFutureEvents(events: Array<Object>): Array<Object> {
|
|
368
|
+ getFutureEvents(events: Array<event>): Array<event> {
|
336
|
369
|
let validEvents = [];
|
337
|
370
|
let now = new Date();
|
338
|
371
|
for (let event of events) {
|
339
|
|
- let startDate = stringToDate(event['date_begin']);
|
340
|
|
- let endDate = stringToDate(event['date_end']);
|
341
|
|
- if (startDate !== undefined && startDate !== null) {
|
|
372
|
+ let startDate = stringToDate(event.date_begin);
|
|
373
|
+ let endDate = stringToDate(event.date_end);
|
|
374
|
+ if (startDate != null) {
|
342
|
375
|
if (startDate > now)
|
343
|
376
|
validEvents.push(event);
|
344
|
|
- else if (endDate !== undefined && endDate !== null) {
|
|
377
|
+ else if (endDate != null) {
|
345
|
378
|
if (endDate > now || endDate < startDate) // Display event if it ends the following day
|
346
|
379
|
validEvents.push(event);
|
347
|
380
|
}
|
|
@@ -356,8 +389,8 @@ class HomeScreen extends React.Component<Props, State> {
|
356
|
389
|
* @param events
|
357
|
390
|
* @return {Object}
|
358
|
391
|
*/
|
359
|
|
- getDisplayEvent(events: Array<Object>): Object {
|
360
|
|
- let displayEvent = undefined;
|
|
392
|
+ getDisplayEvent(events: Array<event>): event | null {
|
|
393
|
+ let displayEvent = null;
|
361
|
394
|
if (events.length > 1) {
|
362
|
395
|
let eventsAfterLimit = this.getEventsAfterLimit(events, this.getTodayEventTimeLimit());
|
363
|
396
|
if (eventsAfterLimit.length > 0) {
|
|
@@ -383,7 +416,7 @@ class HomeScreen extends React.Component<Props, State> {
|
383
|
416
|
* @param content
|
384
|
417
|
* @return {*}
|
385
|
418
|
*/
|
386
|
|
- getDashboardEvent(content: Array<Object>) {
|
|
419
|
+ getDashboardEvent(content: Array<event>) {
|
387
|
420
|
let futureEvents = this.getFutureEvents(content);
|
388
|
421
|
let displayEvent = this.getDisplayEvent(futureEvents);
|
389
|
422
|
const clickPreviewAction = () =>
|
|
@@ -394,14 +427,14 @@ class HomeScreen extends React.Component<Props, State> {
|
394
|
427
|
clickAction={this.onEventContainerClick}
|
395
|
428
|
>
|
396
|
429
|
<PreviewEventDashboardItem
|
397
|
|
- event={displayEvent}
|
|
430
|
+ event={displayEvent != null ? displayEvent : undefined}
|
398
|
431
|
clickAction={clickPreviewAction}
|
399
|
432
|
/>
|
400
|
433
|
</DashboardItem>
|
401
|
434
|
);
|
402
|
435
|
}
|
403
|
436
|
|
404
|
|
- dashboardRowRenderItem = ({item}: Object) => {
|
|
437
|
+ dashboardRowRenderItem = ({item}: { item: dashboardSmallItem }) => {
|
405
|
438
|
return (
|
406
|
439
|
<SquareDashboardItem
|
407
|
440
|
color={item.color}
|
|
@@ -419,16 +452,18 @@ class HomeScreen extends React.Component<Props, State> {
|
419
|
452
|
* @param content
|
420
|
453
|
* @return {*}
|
421
|
454
|
*/
|
422
|
|
- getDashboardRow(content: Array<Object>) {
|
423
|
|
- return <FlatList
|
424
|
|
- data={content}
|
425
|
|
- renderItem={this.dashboardRowRenderItem}
|
426
|
|
- horizontal={true}
|
427
|
|
- contentContainerStyle={{
|
428
|
|
- marginLeft: 'auto',
|
429
|
|
- marginRight: 'auto',
|
430
|
|
- }}
|
431
|
|
- />;
|
|
455
|
+ getDashboardRow(content: Array<dashboardSmallItem>) {
|
|
456
|
+ return (
|
|
457
|
+ //$FlowFixMe
|
|
458
|
+ <FlatList
|
|
459
|
+ data={content}
|
|
460
|
+ renderItem={this.dashboardRowRenderItem}
|
|
461
|
+ horizontal={true}
|
|
462
|
+ contentContainerStyle={{
|
|
463
|
+ marginLeft: 'auto',
|
|
464
|
+ marginRight: 'auto',
|
|
465
|
+ }}
|
|
466
|
+ />);
|
432
|
467
|
}
|
433
|
468
|
|
434
|
469
|
/**
|
|
@@ -437,7 +472,7 @@ class HomeScreen extends React.Component<Props, State> {
|
437
|
472
|
* @param item The feed item to display
|
438
|
473
|
* @return {*}
|
439
|
474
|
*/
|
440
|
|
- getFeedItem(item: Object) {
|
|
475
|
+ getFeedItem(item: feedItem) {
|
441
|
476
|
return (
|
442
|
477
|
<FeedItem
|
443
|
478
|
{...this.props}
|
|
@@ -456,27 +491,34 @@ class HomeScreen extends React.Component<Props, State> {
|
456
|
491
|
* @param section The current section
|
457
|
492
|
* @return {*}
|
458
|
493
|
*/
|
459
|
|
- getRenderItem = ({item, section}: Object) => {
|
460
|
|
- return (section['id'] === SECTIONS_ID[0]
|
461
|
|
- ? this.getDashboardItem(item)
|
462
|
|
- : this.getFeedItem(item));
|
|
494
|
+ getRenderItem = ({item, section}: {
|
|
495
|
+ item: { [key: string]: any },
|
|
496
|
+ section: listSection
|
|
497
|
+ }) => {
|
|
498
|
+ if (section.id === SECTIONS_ID[0]) {
|
|
499
|
+ const data: dashboardItem = item;
|
|
500
|
+ return this.getDashboardItem(data);
|
|
501
|
+ } else {
|
|
502
|
+ const data: feedItem = item;
|
|
503
|
+ return this.getFeedItem(data);
|
|
504
|
+ }
|
463
|
505
|
};
|
464
|
506
|
|
465
|
507
|
openScanner = () => this.props.navigation.navigate("scanner");
|
466
|
508
|
|
467
|
|
- onScroll = (event: Object) => {
|
468
|
|
- this.fabRef.current.onScroll(event);
|
|
509
|
+ onScroll = (event: SyntheticEvent<EventTarget>) => {
|
|
510
|
+ if (this.fabRef.current != null)
|
|
511
|
+ this.fabRef.current.onScroll(event);
|
469
|
512
|
};
|
470
|
513
|
|
471
|
514
|
render() {
|
472
|
|
- const nav = this.props.navigation;
|
473
|
515
|
return (
|
474
|
516
|
<AnimatedFocusView
|
475
|
517
|
{...this.props}
|
476
|
518
|
>
|
477
|
519
|
<WebSectionList
|
|
520
|
+ {...this.props}
|
478
|
521
|
createDataset={this.createDataset}
|
479
|
|
- navigation={nav}
|
480
|
522
|
autoRefreshTime={REFRESH_TIME}
|
481
|
523
|
refreshOnFocus={true}
|
482
|
524
|
fetchUrl={DATA_URL}
|