|
@@ -17,20 +17,17 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-import * as React from 'react';
|
|
20
|
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
21
|
21
|
import {
|
22
|
|
- Alert,
|
23
|
22
|
SectionListData,
|
24
|
23
|
SectionListRenderItemInfo,
|
25
|
24
|
StyleSheet,
|
26
|
25
|
View,
|
27
|
26
|
} from 'react-native';
|
28
|
27
|
import i18n from 'i18n-js';
|
29
|
|
-import { Avatar, Button, Card, Text, withTheme } from 'react-native-paper';
|
30
|
|
-import { StackNavigationProp } from '@react-navigation/stack';
|
|
28
|
+import { Avatar, Button, Card, Text, useTheme } from 'react-native-paper';
|
31
|
29
|
import { Modalize } from 'react-native-modalize';
|
32
|
30
|
import WebSectionList from '../../components/Screens/WebSectionList';
|
33
|
|
-import * as Notifications from '../../utils/Notifications';
|
34
|
31
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
35
|
32
|
import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
|
36
|
33
|
import ProxiwashConstants, {
|
|
@@ -53,6 +50,8 @@ import type { SectionListDataType } from '../../components/Screens/WebSectionLis
|
53
|
50
|
import type { LaundromatType } from './ProxiwashAboutScreen';
|
54
|
51
|
import GENERAL_STYLES from '../../constants/Styles';
|
55
|
52
|
import { readData } from '../../utils/WebData';
|
|
53
|
+import { useFocusEffect, useNavigation } from '@react-navigation/core';
|
|
54
|
+import { setupMachineNotification } from '../../utils/Notifications';
|
56
|
55
|
|
57
|
56
|
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
|
58
|
57
|
const LIST_ITEM_HEIGHT = 64;
|
|
@@ -68,17 +67,6 @@ export type ProxiwashMachineType = {
|
68
|
67
|
program: string;
|
69
|
68
|
};
|
70
|
69
|
|
71
|
|
-type PropsType = {
|
72
|
|
- navigation: StackNavigationProp<any>;
|
73
|
|
- theme: ReactNativePaper.Theme;
|
74
|
|
-};
|
75
|
|
-
|
76
|
|
-type StateType = {
|
77
|
|
- modalCurrentDisplayItem: React.ReactNode;
|
78
|
|
- machinesWatched: Array<ProxiwashMachineType>;
|
79
|
|
- selectedWash: string;
|
80
|
|
-};
|
81
|
|
-
|
82
|
70
|
type FetchedDataType = {
|
83
|
71
|
dryers: Array<ProxiwashMachineType>;
|
84
|
72
|
washers: Array<ProxiwashMachineType>;
|
|
@@ -99,22 +87,28 @@ const styles = StyleSheet.create({
|
99
|
87
|
},
|
100
|
88
|
});
|
101
|
89
|
|
102
|
|
-/**
|
103
|
|
- * Class defining the app's proxiwash screen. This screen shows information about washing machines and
|
104
|
|
- * dryers, taken from a scrapper reading proxiwash website
|
105
|
|
- */
|
106
|
|
-class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
107
|
|
- /**
|
108
|
|
- * Shows a warning telling the user notifications are disabled for the app
|
109
|
|
- */
|
110
|
|
- static showNotificationsDisabledWarning() {
|
111
|
|
- Alert.alert(
|
112
|
|
- i18n.t('screens.proxiwash.modal.notificationErrorTitle'),
|
113
|
|
- i18n.t('screens.proxiwash.modal.notificationErrorDescription')
|
114
|
|
- );
|
115
|
|
- }
|
|
90
|
+function ProxiwashScreen() {
|
|
91
|
+ const navigation = useNavigation();
|
|
92
|
+ const theme = useTheme();
|
|
93
|
+ const [
|
|
94
|
+ modalCurrentDisplayItem,
|
|
95
|
+ setModalCurrentDisplayItem,
|
|
96
|
+ ] = useState<React.ReactElement | null>(null);
|
|
97
|
+ const [machinesWatched, setMachinesWatched] = useState<
|
|
98
|
+ Array<ProxiwashMachineType>
|
|
99
|
+ >(
|
|
100
|
+ AsyncStorageManager.getObject(
|
|
101
|
+ AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key
|
|
102
|
+ )
|
|
103
|
+ );
|
|
104
|
+
|
|
105
|
+ const [selectedWash, setSelectedWash] = useState(
|
|
106
|
+ AsyncStorageManager.getString(
|
|
107
|
+ AsyncStorageManager.PREFERENCES.selectedWash.key
|
|
108
|
+ )
|
|
109
|
+ );
|
116
|
110
|
|
117
|
|
- modalStateStrings: { [key in MachineStates]: string } = {
|
|
111
|
+ const modalStateStrings: { [key in MachineStates]: string } = {
|
118
|
112
|
[MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
|
119
|
113
|
[MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
|
120
|
114
|
[MachineStates.RUNNING_NOT_STARTED]: i18n.t(
|
|
@@ -126,95 +120,48 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
126
|
120
|
[MachineStates.UNKNOWN]: i18n.t('screens.proxiwash.modal.unknown'),
|
127
|
121
|
};
|
128
|
122
|
|
129
|
|
- modalRef: null | Modalize;
|
130
|
|
-
|
131
|
|
- fetchedData: {
|
132
|
|
- dryers: Array<ProxiwashMachineType>;
|
133
|
|
- washers: Array<ProxiwashMachineType>;
|
134
|
|
- };
|
135
|
|
-
|
136
|
|
- /**
|
137
|
|
- * Creates machine state parameters using current theme and translations
|
138
|
|
- */
|
139
|
|
- constructor(props: PropsType) {
|
140
|
|
- super(props);
|
141
|
|
- this.modalRef = null;
|
142
|
|
- this.fetchedData = { dryers: [], washers: [] };
|
143
|
|
- this.state = {
|
144
|
|
- modalCurrentDisplayItem: null,
|
145
|
|
- machinesWatched: AsyncStorageManager.getObject(
|
146
|
|
- AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key
|
147
|
|
- ),
|
148
|
|
- selectedWash: AsyncStorageManager.getString(
|
149
|
|
- AsyncStorageManager.PREFERENCES.selectedWash.key
|
150
|
|
- ),
|
151
|
|
- };
|
152
|
|
- }
|
|
123
|
+ const modalRef = useRef<Modalize>(null);
|
153
|
124
|
|
154
|
|
- /**
|
155
|
|
- * Setup notification channel for android and add listeners to detect notifications fired
|
156
|
|
- */
|
157
|
|
- componentDidMount() {
|
158
|
|
- const { navigation } = this.props;
|
|
125
|
+ useLayoutEffect(() => {
|
159
|
126
|
navigation.setOptions({
|
160
|
127
|
headerRight: () => (
|
161
|
128
|
<MaterialHeaderButtons>
|
162
|
129
|
<Item
|
163
|
|
- title="switch"
|
164
|
|
- iconName="swap-horizontal"
|
165
|
|
- onPress={(): void => navigation.navigate('settings')}
|
|
130
|
+ title={'switch'}
|
|
131
|
+ iconName={'swap-horizontal'}
|
|
132
|
+ onPress={() => navigation.navigate('settings')}
|
166
|
133
|
/>
|
167
|
134
|
<Item
|
168
|
|
- title="information"
|
169
|
|
- iconName="information"
|
170
|
|
- onPress={this.onAboutPress}
|
|
135
|
+ title={'information'}
|
|
136
|
+ iconName={'information'}
|
|
137
|
+ onPress={() => navigation.navigate('proxiwash-about')}
|
171
|
138
|
/>
|
172
|
139
|
</MaterialHeaderButtons>
|
173
|
140
|
),
|
174
|
141
|
});
|
175
|
|
- navigation.addListener('focus', this.onScreenFocus);
|
176
|
|
- }
|
177
|
|
-
|
178
|
|
- onScreenFocus = () => {
|
179
|
|
- const { state } = this;
|
180
|
|
- const selected = AsyncStorageManager.getString(
|
181
|
|
- AsyncStorageManager.PREFERENCES.selectedWash.key
|
182
|
|
- );
|
183
|
|
- if (selected !== state.selectedWash) {
|
184
|
|
- this.setState({
|
185
|
|
- selectedWash: selected,
|
186
|
|
- });
|
187
|
|
- }
|
188
|
|
- };
|
|
142
|
+ }, [navigation]);
|
189
|
143
|
|
190
|
|
- /**
|
191
|
|
- * Callback used when pressing the about button.
|
192
|
|
- * This will open the ProxiwashAboutScreen.
|
193
|
|
- */
|
194
|
|
- onAboutPress = () => {
|
195
|
|
- const { navigation } = this.props;
|
196
|
|
- navigation.navigate('proxiwash-about');
|
197
|
|
- };
|
|
144
|
+ useFocusEffect(
|
|
145
|
+ useCallback(() => {
|
|
146
|
+ const selected = AsyncStorageManager.getString(
|
|
147
|
+ AsyncStorageManager.PREFERENCES.selectedWash.key
|
|
148
|
+ );
|
|
149
|
+ if (selected !== selectedWash) {
|
|
150
|
+ setSelectedWash(selected);
|
|
151
|
+ }
|
|
152
|
+ }, [selectedWash])
|
|
153
|
+ );
|
198
|
154
|
|
199
|
155
|
/**
|
200
|
156
|
* Callback used when the user clicks on enable notifications for a machine
|
201
|
157
|
*
|
202
|
158
|
* @param machine The machine to set notifications for
|
203
|
159
|
*/
|
204
|
|
- onSetupNotificationsPress(machine: ProxiwashMachineType) {
|
205
|
|
- if (this.modalRef) {
|
206
|
|
- this.modalRef.close();
|
|
160
|
+ const onSetupNotificationsPress = (machine: ProxiwashMachineType) => {
|
|
161
|
+ if (modalRef.current) {
|
|
162
|
+ modalRef.current.close();
|
207
|
163
|
}
|
208
|
|
- this.setupNotifications(machine);
|
209
|
|
- }
|
210
|
|
-
|
211
|
|
- /**
|
212
|
|
- * Callback used when receiving modal ref
|
213
|
|
- *
|
214
|
|
- * @param ref
|
215
|
|
- */
|
216
|
|
- onModalRef = (ref: Modalize) => {
|
217
|
|
- this.modalRef = ref;
|
|
164
|
+ setupNotifications(machine);
|
218
|
165
|
};
|
219
|
166
|
|
220
|
167
|
/**
|
|
@@ -226,11 +173,14 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
226
|
173
|
* @param isDryer True if the given item is a dryer
|
227
|
174
|
* @return {*}
|
228
|
175
|
*/
|
229
|
|
- getModalContent(title: string, item: ProxiwashMachineType, isDryer: boolean) {
|
230
|
|
- const { props, state } = this;
|
|
176
|
+ const getModalContent = (
|
|
177
|
+ title: string,
|
|
178
|
+ item: ProxiwashMachineType,
|
|
179
|
+ isDryer: boolean
|
|
180
|
+ ) => {
|
231
|
181
|
let button: { text: string; icon: string; onPress: () => void } | undefined;
|
232
|
|
- let message = this.modalStateStrings[item.state];
|
233
|
|
- const onPress = () => this.onSetupNotificationsPress(item);
|
|
182
|
+ let message = modalStateStrings[item.state];
|
|
183
|
+ const onPress = () => onSetupNotificationsPress(item);
|
234
|
184
|
if (item.state === MachineStates.RUNNING) {
|
235
|
185
|
let remainingTime = parseInt(item.remainingTime, 10);
|
236
|
186
|
if (remainingTime < 0) {
|
|
@@ -238,7 +188,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
238
|
188
|
}
|
239
|
189
|
|
240
|
190
|
button = {
|
241
|
|
- text: isMachineWatched(item, state.machinesWatched)
|
|
191
|
+ text: isMachineWatched(item, machinesWatched)
|
242
|
192
|
? i18n.t('screens.proxiwash.modal.disableNotifications')
|
243
|
193
|
: i18n.t('screens.proxiwash.modal.enableNotifications'),
|
244
|
194
|
icon: '',
|
|
@@ -258,7 +208,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
258
|
208
|
left={() => (
|
259
|
209
|
<Avatar.Icon
|
260
|
210
|
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
261
|
|
- color={props.theme.colors.text}
|
|
211
|
+ color={theme.colors.text}
|
262
|
212
|
style={styles.icon}
|
263
|
213
|
/>
|
264
|
214
|
)}
|
|
@@ -281,7 +231,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
281
|
231
|
) : null}
|
282
|
232
|
</View>
|
283
|
233
|
);
|
284
|
|
- }
|
|
234
|
+ };
|
285
|
235
|
|
286
|
236
|
/**
|
287
|
237
|
* Gets the section render item
|
|
@@ -289,13 +239,13 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
289
|
239
|
* @param section The section to render
|
290
|
240
|
* @return {*}
|
291
|
241
|
*/
|
292
|
|
- getRenderSectionHeader = ({
|
|
242
|
+ const getRenderSectionHeader = ({
|
293
|
243
|
section,
|
294
|
244
|
}: {
|
295
|
245
|
section: SectionListData<ProxiwashMachineType>;
|
296
|
246
|
}) => {
|
297
|
247
|
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
298
|
|
- const nbAvailable = this.getMachineAvailableNumber(isDryer);
|
|
248
|
+ const nbAvailable = getMachineAvailableNumber(section.data);
|
299
|
249
|
return (
|
300
|
250
|
<ProxiwashSectionHeader
|
301
|
251
|
title={section.title}
|
|
@@ -312,13 +262,14 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
312
|
262
|
* @param section The object describing the current SectionList section
|
313
|
263
|
* @returns {React.Node}
|
314
|
264
|
*/
|
315
|
|
- getRenderItem = (data: SectionListRenderItemInfo<ProxiwashMachineType>) => {
|
316
|
|
- const { machinesWatched } = this.state;
|
|
265
|
+ const getRenderItem = (
|
|
266
|
+ data: SectionListRenderItemInfo<ProxiwashMachineType>
|
|
267
|
+ ) => {
|
317
|
268
|
const isDryer = data.section.title === i18n.t('screens.proxiwash.dryers');
|
318
|
269
|
return (
|
319
|
270
|
<ProxiwashListItem
|
320
|
271
|
item={data.item}
|
321
|
|
- onPress={this.showModal}
|
|
272
|
+ onPress={showModal}
|
322
|
273
|
isWatched={isMachineWatched(data.item, machinesWatched)}
|
323
|
274
|
isDryer={isDryer}
|
324
|
275
|
height={LIST_ITEM_HEIGHT}
|
|
@@ -332,7 +283,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
332
|
283
|
* @param item The item to extract the key from
|
333
|
284
|
* @return {*} The extracted key
|
334
|
285
|
*/
|
335
|
|
- getKeyExtractor = (item: ProxiwashMachineType): string => item.number;
|
|
286
|
+ const getKeyExtractor = (item: ProxiwashMachineType): string => item.number;
|
336
|
287
|
|
337
|
288
|
/**
|
338
|
289
|
* Setups notifications for the machine with the given ID.
|
|
@@ -341,28 +292,19 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
341
|
292
|
*
|
342
|
293
|
* @param machine The machine to watch
|
343
|
294
|
*/
|
344
|
|
- setupNotifications(machine: ProxiwashMachineType) {
|
345
|
|
- const { machinesWatched } = this.state;
|
|
295
|
+ const setupNotifications = (machine: ProxiwashMachineType) => {
|
346
|
296
|
if (!isMachineWatched(machine, machinesWatched)) {
|
347
|
|
- Notifications.setupMachineNotification(
|
|
297
|
+ setupMachineNotification(
|
348
|
298
|
machine.number,
|
349
|
299
|
true,
|
350
|
300
|
getMachineEndDate(machine)
|
351
|
|
- )
|
352
|
|
- .then(() => {
|
353
|
|
- this.saveNotificationToState(machine);
|
354
|
|
- })
|
355
|
|
- .catch(() => {
|
356
|
|
- ProxiwashScreen.showNotificationsDisabledWarning();
|
357
|
|
- });
|
358
|
|
- } else {
|
359
|
|
- Notifications.setupMachineNotification(machine.number, false, null).then(
|
360
|
|
- () => {
|
361
|
|
- this.removeNotificationFromState(machine);
|
362
|
|
- }
|
363
|
301
|
);
|
|
302
|
+ saveNotificationToState(machine);
|
|
303
|
+ } else {
|
|
304
|
+ setupMachineNotification(machine.number, false);
|
|
305
|
+ removeNotificationFromState(machine);
|
364
|
306
|
}
|
365
|
|
- }
|
|
307
|
+ };
|
366
|
308
|
|
367
|
309
|
/**
|
368
|
310
|
* Gets the number of machines available
|
|
@@ -370,13 +312,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
370
|
312
|
* @param isDryer True if we are only checking for dryer, false for washers
|
371
|
313
|
* @return {number} The number of machines available
|
372
|
314
|
*/
|
373
|
|
- getMachineAvailableNumber(isDryer: boolean): number {
|
374
|
|
- let data;
|
375
|
|
- if (isDryer) {
|
376
|
|
- data = this.fetchedData.dryers;
|
377
|
|
- } else {
|
378
|
|
- data = this.fetchedData.washers;
|
379
|
|
- }
|
|
315
|
+ const getMachineAvailableNumber = (
|
|
316
|
+ data: ReadonlyArray<ProxiwashMachineType>
|
|
317
|
+ ): number => {
|
380
|
318
|
let count = 0;
|
381
|
319
|
data.forEach((machine: ProxiwashMachineType) => {
|
382
|
320
|
if (machine.state === MachineStates.AVAILABLE) {
|
|
@@ -384,7 +322,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
384
|
322
|
}
|
385
|
323
|
});
|
386
|
324
|
return count;
|
387
|
|
- }
|
|
325
|
+ };
|
388
|
326
|
|
389
|
327
|
/**
|
390
|
328
|
* Creates the dataset to be used by the FlatList
|
|
@@ -392,10 +330,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
392
|
330
|
* @param fetchedData
|
393
|
331
|
* @return {*}
|
394
|
332
|
*/
|
395
|
|
- createDataset = (
|
|
333
|
+ const createDataset = (
|
396
|
334
|
fetchedData: FetchedDataType | undefined
|
397
|
335
|
): SectionListDataType<ProxiwashMachineType> => {
|
398
|
|
- const { state } = this;
|
399
|
336
|
if (fetchedData) {
|
400
|
337
|
let data = fetchedData;
|
401
|
338
|
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
|
|
@@ -403,24 +340,26 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
403
|
340
|
AprilFoolsManager.getNewProxiwashDryerOrderedList(data.dryers);
|
404
|
341
|
AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers);
|
405
|
342
|
}
|
406
|
|
- this.fetchedData = data;
|
407
|
|
- // TODO dirty, should be refactored
|
408
|
|
- this.state.machinesWatched = getCleanedMachineWatched(
|
409
|
|
- state.machinesWatched,
|
410
|
|
- [...data.dryers, ...data.washers]
|
411
|
|
- );
|
|
343
|
+ fetchedData = data;
|
|
344
|
+ const cleanedList = getCleanedMachineWatched(machinesWatched, [
|
|
345
|
+ ...data.dryers,
|
|
346
|
+ ...data.washers,
|
|
347
|
+ ]);
|
|
348
|
+ if (cleanedList !== machinesWatched) {
|
|
349
|
+ setMachinesWatched(machinesWatched);
|
|
350
|
+ }
|
412
|
351
|
return [
|
413
|
352
|
{
|
414
|
353
|
title: i18n.t('screens.proxiwash.dryers'),
|
415
|
354
|
icon: 'tumble-dryer',
|
416
|
355
|
data: data.dryers === undefined ? [] : data.dryers,
|
417
|
|
- keyExtractor: this.getKeyExtractor,
|
|
356
|
+ keyExtractor: getKeyExtractor,
|
418
|
357
|
},
|
419
|
358
|
{
|
420
|
359
|
title: i18n.t('screens.proxiwash.washers'),
|
421
|
360
|
icon: 'washing-machine',
|
422
|
361
|
data: data.washers === undefined ? [] : data.washers,
|
423
|
|
- keyExtractor: this.getKeyExtractor,
|
|
362
|
+ keyExtractor: getKeyExtractor,
|
424
|
363
|
},
|
425
|
364
|
];
|
426
|
365
|
} else {
|
|
@@ -429,27 +368,20 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
429
|
368
|
};
|
430
|
369
|
|
431
|
370
|
/**
|
432
|
|
- * Callback used when the user clicks on the navigate to settings button.
|
433
|
|
- * This will hide the banner and open the SettingsScreen
|
434
|
|
- */
|
435
|
|
- onGoToSettings = () => {
|
436
|
|
- const { navigation } = this.props;
|
437
|
|
- navigation.navigate('settings');
|
438
|
|
- };
|
439
|
|
-
|
440
|
|
- /**
|
441
|
371
|
* Shows a modal for the given item
|
442
|
372
|
*
|
443
|
373
|
* @param title The title to use
|
444
|
374
|
* @param item The item to display information for in the modal
|
445
|
375
|
* @param isDryer True if the given item is a dryer
|
446
|
376
|
*/
|
447
|
|
- showModal = (title: string, item: ProxiwashMachineType, isDryer: boolean) => {
|
448
|
|
- this.setState({
|
449
|
|
- modalCurrentDisplayItem: this.getModalContent(title, item, isDryer),
|
450
|
|
- });
|
451
|
|
- if (this.modalRef) {
|
452
|
|
- this.modalRef.open();
|
|
377
|
+ const showModal = (
|
|
378
|
+ title: string,
|
|
379
|
+ item: ProxiwashMachineType,
|
|
380
|
+ isDryer: boolean
|
|
381
|
+ ) => {
|
|
382
|
+ setModalCurrentDisplayItem(getModalContent(title, item, isDryer));
|
|
383
|
+ if (modalRef.current) {
|
|
384
|
+ modalRef.current.open();
|
453
|
385
|
}
|
454
|
386
|
};
|
455
|
387
|
|
|
@@ -458,87 +390,76 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
458
|
390
|
*
|
459
|
391
|
* @param machine
|
460
|
392
|
*/
|
461
|
|
- saveNotificationToState(machine: ProxiwashMachineType) {
|
462
|
|
- const { machinesWatched } = this.state;
|
463
|
|
- const data = machinesWatched;
|
|
393
|
+ const saveNotificationToState = (machine: ProxiwashMachineType) => {
|
|
394
|
+ let data = [...machinesWatched];
|
464
|
395
|
data.push(machine);
|
465
|
|
- this.saveNewWatchedList(data);
|
466
|
|
- }
|
|
396
|
+ saveNewWatchedList(data);
|
|
397
|
+ };
|
467
|
398
|
|
468
|
399
|
/**
|
469
|
400
|
* Removes the given index from the watchlist array and saves it to preferences
|
470
|
401
|
*
|
471
|
402
|
* @param selectedMachine
|
472
|
403
|
*/
|
473
|
|
- removeNotificationFromState(selectedMachine: ProxiwashMachineType) {
|
474
|
|
- const { machinesWatched } = this.state;
|
475
|
|
- const newList = [...machinesWatched];
|
476
|
|
- machinesWatched.forEach((machine: ProxiwashMachineType, index: number) => {
|
477
|
|
- if (
|
478
|
|
- machine.number === selectedMachine.number &&
|
479
|
|
- machine.endTime === selectedMachine.endTime
|
480
|
|
- ) {
|
481
|
|
- newList.splice(index, 1);
|
482
|
|
- }
|
483
|
|
- });
|
484
|
|
- this.saveNewWatchedList(newList);
|
485
|
|
- }
|
|
404
|
+ const removeNotificationFromState = (
|
|
405
|
+ selectedMachine: ProxiwashMachineType
|
|
406
|
+ ) => {
|
|
407
|
+ const newList = machinesWatched.filter(
|
|
408
|
+ (m) => m.number !== selectedMachine.number
|
|
409
|
+ );
|
|
410
|
+ saveNewWatchedList(newList);
|
|
411
|
+ };
|
486
|
412
|
|
487
|
|
- saveNewWatchedList(list: Array<ProxiwashMachineType>) {
|
488
|
|
- this.setState({ machinesWatched: list });
|
|
413
|
+ const saveNewWatchedList = (list: Array<ProxiwashMachineType>) => {
|
|
414
|
+ setMachinesWatched(list);
|
489
|
415
|
AsyncStorageManager.set(
|
490
|
416
|
AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
|
491
|
417
|
list
|
492
|
418
|
);
|
493
|
|
- }
|
|
419
|
+ };
|
494
|
420
|
|
495
|
|
- render() {
|
496
|
|
- const { state } = this;
|
497
|
|
- let data: LaundromatType;
|
498
|
|
- switch (state.selectedWash) {
|
499
|
|
- case 'tripodeB':
|
500
|
|
- data = ProxiwashConstants.tripodeB;
|
501
|
|
- break;
|
502
|
|
- default:
|
503
|
|
- data = ProxiwashConstants.washinsa;
|
504
|
|
- }
|
505
|
|
- return (
|
506
|
|
- <View style={GENERAL_STYLES.flex}>
|
507
|
|
- <View style={styles.container}>
|
508
|
|
- <WebSectionList
|
509
|
|
- request={() => readData<FetchedDataType>(data.url)}
|
510
|
|
- createDataset={this.createDataset}
|
511
|
|
- renderItem={this.getRenderItem}
|
512
|
|
- renderSectionHeader={this.getRenderSectionHeader}
|
513
|
|
- autoRefreshTime={REFRESH_TIME}
|
514
|
|
- refreshOnFocus={true}
|
515
|
|
- extraData={state.machinesWatched.length}
|
516
|
|
- />
|
517
|
|
- </View>
|
518
|
|
- <MascotPopup
|
519
|
|
- prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowMascot.key}
|
520
|
|
- title={i18n.t('screens.proxiwash.mascotDialog.title')}
|
521
|
|
- message={i18n.t('screens.proxiwash.mascotDialog.message')}
|
522
|
|
- icon="information"
|
523
|
|
- buttons={{
|
524
|
|
- action: {
|
525
|
|
- message: i18n.t('screens.proxiwash.mascotDialog.ok'),
|
526
|
|
- icon: 'cog',
|
527
|
|
- onPress: this.onGoToSettings,
|
528
|
|
- },
|
529
|
|
- cancel: {
|
530
|
|
- message: i18n.t('screens.proxiwash.mascotDialog.cancel'),
|
531
|
|
- icon: 'close',
|
532
|
|
- },
|
533
|
|
- }}
|
534
|
|
- emotion={MASCOT_STYLE.NORMAL}
|
|
421
|
+ let data: LaundromatType;
|
|
422
|
+ switch (selectedWash) {
|
|
423
|
+ case 'tripodeB':
|
|
424
|
+ data = ProxiwashConstants.tripodeB;
|
|
425
|
+ break;
|
|
426
|
+ default:
|
|
427
|
+ data = ProxiwashConstants.washinsa;
|
|
428
|
+ }
|
|
429
|
+ return (
|
|
430
|
+ <View style={GENERAL_STYLES.flex}>
|
|
431
|
+ <View style={styles.container}>
|
|
432
|
+ <WebSectionList
|
|
433
|
+ request={() => readData<FetchedDataType>(data.url)}
|
|
434
|
+ createDataset={createDataset}
|
|
435
|
+ renderItem={getRenderItem}
|
|
436
|
+ renderSectionHeader={getRenderSectionHeader}
|
|
437
|
+ autoRefreshTime={REFRESH_TIME}
|
|
438
|
+ refreshOnFocus={true}
|
|
439
|
+ extraData={machinesWatched.length}
|
535
|
440
|
/>
|
536
|
|
- <CustomModal onRef={this.onModalRef}>
|
537
|
|
- {state.modalCurrentDisplayItem}
|
538
|
|
- </CustomModal>
|
539
|
441
|
</View>
|
540
|
|
- );
|
541
|
|
- }
|
|
442
|
+ <MascotPopup
|
|
443
|
+ prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowMascot.key}
|
|
444
|
+ title={i18n.t('screens.proxiwash.mascotDialog.title')}
|
|
445
|
+ message={i18n.t('screens.proxiwash.mascotDialog.message')}
|
|
446
|
+ icon="information"
|
|
447
|
+ buttons={{
|
|
448
|
+ action: {
|
|
449
|
+ message: i18n.t('screens.proxiwash.mascotDialog.ok'),
|
|
450
|
+ icon: 'cog',
|
|
451
|
+ onPress: () => navigation.navigate('settings'),
|
|
452
|
+ },
|
|
453
|
+ cancel: {
|
|
454
|
+ message: i18n.t('screens.proxiwash.mascotDialog.cancel'),
|
|
455
|
+ icon: 'close',
|
|
456
|
+ },
|
|
457
|
+ }}
|
|
458
|
+ emotion={MASCOT_STYLE.NORMAL}
|
|
459
|
+ />
|
|
460
|
+ <CustomModal ref={modalRef}>{modalCurrentDisplayItem}</CustomModal>
|
|
461
|
+ </View>
|
|
462
|
+ );
|
542
|
463
|
}
|
543
|
464
|
|
544
|
|
-export default withTheme(ProxiwashScreen);
|
|
465
|
+export default ProxiwashScreen;
|