|
@@ -17,17 +17,18 @@
|
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, { useEffect, useLayoutEffect, useState } from 'react';
|
21
|
21
|
import { Platform } from 'react-native';
|
22
|
22
|
import i18n from 'i18n-js';
|
23
|
23
|
import { Searchbar } from 'react-native-paper';
|
24
|
|
-import { StackNavigationProp } from '@react-navigation/stack';
|
25
|
24
|
import { stringMatchQuery } from '../../utils/Search';
|
26
|
25
|
import WebSectionList from '../../components/Screens/WebSectionList';
|
27
|
26
|
import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
|
28
|
27
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
29
|
28
|
import Urls from '../../constants/Urls';
|
30
|
29
|
import { readData } from '../../utils/WebData';
|
|
30
|
+import { useNavigation } from '@react-navigation/core';
|
|
31
|
+import { useCachedPlanexGroups } from '../../utils/cacheContext';
|
31
|
32
|
|
32
|
33
|
export type PlanexGroupType = {
|
33
|
34
|
name: string;
|
|
@@ -40,14 +41,7 @@ export type PlanexGroupCategoryType = {
|
40
|
41
|
content: Array<PlanexGroupType>;
|
41
|
42
|
};
|
42
|
43
|
|
43
|
|
-type PropsType = {
|
44
|
|
- navigation: StackNavigationProp<any>;
|
45
|
|
-};
|
46
|
|
-
|
47
|
|
-type StateType = {
|
48
|
|
- currentSearchString: string;
|
49
|
|
- favoriteGroups: Array<PlanexGroupType>;
|
50
|
|
-};
|
|
44
|
+export type PlanexGroupsType = { [key: string]: PlanexGroupCategoryType };
|
51
|
45
|
|
52
|
46
|
function sortName(
|
53
|
47
|
a: PlanexGroupType | PlanexGroupCategoryType,
|
|
@@ -62,46 +56,34 @@ function sortName(
|
62
|
56
|
return 0;
|
63
|
57
|
}
|
64
|
58
|
|
65
|
|
-/**
|
66
|
|
- * Class defining planex group selection screen.
|
67
|
|
- */
|
68
|
|
-class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
69
|
|
- constructor(props: PropsType) {
|
70
|
|
- super(props);
|
71
|
|
- this.state = {
|
72
|
|
- currentSearchString: '',
|
73
|
|
- favoriteGroups: AsyncStorageManager.getObject(
|
74
|
|
- AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key
|
75
|
|
- ),
|
76
|
|
- };
|
77
|
|
- }
|
|
59
|
+function GroupSelectionScreen() {
|
|
60
|
+ const navigation = useNavigation();
|
|
61
|
+ const { groups, setGroups } = useCachedPlanexGroups();
|
|
62
|
+ const [currentSearchString, setCurrentSearchString] = useState('');
|
|
63
|
+ const [favoriteGroups, setFavoriteGroups] = useState<Array<PlanexGroupType>>(
|
|
64
|
+ AsyncStorageManager.getObject(
|
|
65
|
+ AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key
|
|
66
|
+ )
|
|
67
|
+ );
|
78
|
68
|
|
79
|
|
- /**
|
80
|
|
- * Creates the header content
|
81
|
|
- */
|
82
|
|
- componentDidMount() {
|
83
|
|
- const { navigation } = this.props;
|
|
69
|
+ useLayoutEffect(() => {
|
84
|
70
|
navigation.setOptions({
|
85
|
|
- headerTitle: this.getSearchBar,
|
|
71
|
+ headerTitle: getSearchBar,
|
86
|
72
|
headerBackTitleVisible: false,
|
87
|
73
|
headerTitleContainerStyle:
|
88
|
74
|
Platform.OS === 'ios'
|
89
|
75
|
? { marginHorizontal: 0, width: '70%' }
|
90
|
76
|
: { marginHorizontal: 0, right: 50, left: 50 },
|
91
|
77
|
});
|
92
|
|
- }
|
|
78
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
79
|
+ }, [navigation]);
|
93
|
80
|
|
94
|
|
- /**
|
95
|
|
- * Gets the header search bar
|
96
|
|
- *
|
97
|
|
- * @return {*}
|
98
|
|
- */
|
99
|
|
- getSearchBar = () => {
|
|
81
|
+ const getSearchBar = () => {
|
100
|
82
|
return (
|
101
|
83
|
// @ts-ignore
|
102
|
84
|
<Searchbar
|
103
|
85
|
placeholder={i18n.t('screens.proximo.search')}
|
104
|
|
- onChangeText={this.onSearchStringChange}
|
|
86
|
+ onChangeText={setCurrentSearchString}
|
105
|
87
|
/>
|
106
|
88
|
);
|
107
|
89
|
};
|
|
@@ -112,18 +94,17 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
112
|
94
|
* @param item The article to render
|
113
|
95
|
* @return {*}
|
114
|
96
|
*/
|
115
|
|
- getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => {
|
116
|
|
- const { currentSearchString, favoriteGroups } = this.state;
|
|
97
|
+ const getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => {
|
117
|
98
|
if (
|
118
|
|
- this.shouldDisplayAccordion(item) ||
|
|
99
|
+ shouldDisplayAccordion(item) ||
|
119
|
100
|
(item.id === 0 && item.content.length === 0)
|
120
|
101
|
) {
|
121
|
102
|
return (
|
122
|
103
|
<GroupListAccordion
|
123
|
104
|
item={item}
|
124
|
105
|
favorites={[...favoriteGroups]}
|
125
|
|
- onGroupPress={this.onListItemPress}
|
126
|
|
- onFavoritePress={this.onListFavoritePress}
|
|
106
|
+ onGroupPress={onListItemPress}
|
|
107
|
+ onFavoritePress={onListFavoritePress}
|
127
|
108
|
currentSearchString={currentSearchString}
|
128
|
109
|
/>
|
129
|
110
|
);
|
|
@@ -137,7 +118,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
137
|
118
|
* @param fetchedData
|
138
|
119
|
* @return {*}
|
139
|
120
|
* */
|
140
|
|
- createDataset = (
|
|
121
|
+ const createDataset = (
|
141
|
122
|
fetchedData:
|
142
|
123
|
| {
|
143
|
124
|
[key: string]: PlanexGroupCategoryType;
|
|
@@ -147,28 +128,18 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
147
|
128
|
return [
|
148
|
129
|
{
|
149
|
130
|
title: '',
|
150
|
|
- data: this.generateData(fetchedData),
|
|
131
|
+ data: generateData(fetchedData),
|
151
|
132
|
},
|
152
|
133
|
];
|
153
|
134
|
};
|
154
|
135
|
|
155
|
136
|
/**
|
156
|
|
- * Callback used when the search changes
|
157
|
|
- *
|
158
|
|
- * @param str The new search string
|
159
|
|
- */
|
160
|
|
- onSearchStringChange = (str: string) => {
|
161
|
|
- this.setState({ currentSearchString: str });
|
162
|
|
- };
|
163
|
|
-
|
164
|
|
- /**
|
165
|
137
|
* Callback used when clicking an article in the list.
|
166
|
138
|
* It opens the modal to show detailed information about the article
|
167
|
139
|
*
|
168
|
140
|
* @param item The article pressed
|
169
|
141
|
*/
|
170
|
|
- onListItemPress = (item: PlanexGroupType) => {
|
171
|
|
- const { navigation } = this.props;
|
|
142
|
+ const onListItemPress = (item: PlanexGroupType) => {
|
172
|
143
|
navigation.navigate('planex', {
|
173
|
144
|
screen: 'index',
|
174
|
145
|
params: { group: item },
|
|
@@ -180,8 +151,8 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
180
|
151
|
*
|
181
|
152
|
* @param item The item to add/remove from favorites
|
182
|
153
|
*/
|
183
|
|
- onListFavoritePress = (item: PlanexGroupType) => {
|
184
|
|
- this.updateGroupFavorites(item);
|
|
154
|
+ const onListFavoritePress = (item: PlanexGroupType) => {
|
|
155
|
+ updateGroupFavorites(item);
|
185
|
156
|
};
|
186
|
157
|
|
187
|
158
|
/**
|
|
@@ -190,16 +161,15 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
190
|
161
|
* @param group The group to check
|
191
|
162
|
* @returns {boolean}
|
192
|
163
|
*/
|
193
|
|
- isGroupInFavorites(group: PlanexGroupType): boolean {
|
|
164
|
+ const isGroupInFavorites = (group: PlanexGroupType): boolean => {
|
194
|
165
|
let isFav = false;
|
195
|
|
- const { favoriteGroups } = this.state;
|
196
|
166
|
favoriteGroups.forEach((favGroup: PlanexGroupType) => {
|
197
|
167
|
if (group.id === favGroup.id) {
|
198
|
168
|
isFav = true;
|
199
|
169
|
}
|
200
|
170
|
});
|
201
|
171
|
return isFav;
|
202
|
|
- }
|
|
172
|
+ };
|
203
|
173
|
|
204
|
174
|
/**
|
205
|
175
|
* Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
|
|
@@ -207,13 +177,13 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
207
|
177
|
*
|
208
|
178
|
* @param group The group to add/remove to favorites
|
209
|
179
|
*/
|
210
|
|
- updateGroupFavorites(group: PlanexGroupType) {
|
211
|
|
- if (this.isGroupInFavorites(group)) {
|
212
|
|
- this.removeGroupFromFavorites(group);
|
|
180
|
+ const updateGroupFavorites = (group: PlanexGroupType) => {
|
|
181
|
+ if (isGroupInFavorites(group)) {
|
|
182
|
+ removeGroupFromFavorites(group);
|
213
|
183
|
} else {
|
214
|
|
- this.addGroupToFavorites(group);
|
|
184
|
+ addGroupToFavorites(group);
|
215
|
185
|
}
|
216
|
|
- }
|
|
186
|
+ };
|
217
|
187
|
|
218
|
188
|
/**
|
219
|
189
|
* Checks whether to display the given group category, depending on user search query
|
|
@@ -221,8 +191,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
221
|
191
|
* @param item The group category
|
222
|
192
|
* @returns {boolean}
|
223
|
193
|
*/
|
224
|
|
- shouldDisplayAccordion(item: PlanexGroupCategoryType): boolean {
|
225
|
|
- const { currentSearchString } = this.state;
|
|
194
|
+ const shouldDisplayAccordion = (item: PlanexGroupCategoryType): boolean => {
|
226
|
195
|
let shouldDisplay = false;
|
227
|
196
|
for (let i = 0; i < item.content.length; i += 1) {
|
228
|
197
|
if (stringMatchQuery(item.content[i].name, currentSearchString)) {
|
|
@@ -231,7 +200,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
231
|
200
|
}
|
232
|
201
|
}
|
233
|
202
|
return shouldDisplay;
|
234
|
|
- }
|
|
203
|
+ };
|
235
|
204
|
|
236
|
205
|
/**
|
237
|
206
|
* Generates the dataset to be used in the FlatList.
|
|
@@ -240,14 +209,9 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
240
|
209
|
* @param fetchedData The raw data fetched from the server
|
241
|
210
|
* @returns {[]}
|
242
|
211
|
*/
|
243
|
|
- generateData(
|
244
|
|
- fetchedData:
|
245
|
|
- | {
|
246
|
|
- [key: string]: PlanexGroupCategoryType;
|
247
|
|
- }
|
248
|
|
- | undefined
|
249
|
|
- ): Array<PlanexGroupCategoryType> {
|
250
|
|
- const { favoriteGroups } = this.state;
|
|
212
|
+ const generateData = (
|
|
213
|
+ fetchedData: PlanexGroupsType | undefined
|
|
214
|
+ ): Array<PlanexGroupCategoryType> => {
|
251
|
215
|
const data: Array<PlanexGroupCategoryType> = [];
|
252
|
216
|
if (fetchedData) {
|
253
|
217
|
Object.values(fetchedData).forEach(
|
|
@@ -263,68 +227,44 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
|
263
|
227
|
});
|
264
|
228
|
}
|
265
|
229
|
return data;
|
266
|
|
- }
|
|
230
|
+ };
|
267
|
231
|
|
268
|
232
|
/**
|
269
|
233
|
* Removes the given group from the favorites
|
270
|
234
|
*
|
271
|
235
|
* @param group The group to remove from the array
|
272
|
236
|
*/
|
273
|
|
- removeGroupFromFavorites(group: PlanexGroupType) {
|
274
|
|
- this.setState((prevState: StateType): {
|
275
|
|
- favoriteGroups: Array<PlanexGroupType>;
|
276
|
|
- } => {
|
277
|
|
- const { favoriteGroups } = prevState;
|
278
|
|
- for (let i = 0; i < favoriteGroups.length; i += 1) {
|
279
|
|
- if (group.id === favoriteGroups[i].id) {
|
280
|
|
- favoriteGroups.splice(i, 1);
|
281
|
|
- break;
|
282
|
|
- }
|
283
|
|
- }
|
284
|
|
- AsyncStorageManager.set(
|
285
|
|
- AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
|
286
|
|
- favoriteGroups
|
287
|
|
- );
|
288
|
|
- return { favoriteGroups };
|
289
|
|
- });
|
290
|
|
- }
|
|
237
|
+ const removeGroupFromFavorites = (group: PlanexGroupType) => {
|
|
238
|
+ setFavoriteGroups(favoriteGroups.filter((g) => g.id !== group.id));
|
|
239
|
+ };
|
|
240
|
+
|
|
241
|
+ useEffect(() => {
|
|
242
|
+ AsyncStorageManager.set(
|
|
243
|
+ AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
|
|
244
|
+ favoriteGroups
|
|
245
|
+ );
|
|
246
|
+ }, [favoriteGroups]);
|
291
|
247
|
|
292
|
248
|
/**
|
293
|
249
|
* Adds the given group to favorites
|
294
|
250
|
*
|
295
|
251
|
* @param group The group to add to the array
|
296
|
252
|
*/
|
297
|
|
- addGroupToFavorites(group: PlanexGroupType) {
|
298
|
|
- this.setState((prevState: StateType): {
|
299
|
|
- favoriteGroups: Array<PlanexGroupType>;
|
300
|
|
- } => {
|
301
|
|
- const { favoriteGroups } = prevState;
|
302
|
|
- favoriteGroups.push(group);
|
303
|
|
- favoriteGroups.sort(sortName);
|
304
|
|
- AsyncStorageManager.set(
|
305
|
|
- AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
|
306
|
|
- favoriteGroups
|
307
|
|
- );
|
308
|
|
- return { favoriteGroups };
|
309
|
|
- });
|
310
|
|
- }
|
|
253
|
+ const addGroupToFavorites = (group: PlanexGroupType) => {
|
|
254
|
+ setFavoriteGroups([...favoriteGroups, group].sort(sortName));
|
|
255
|
+ };
|
311
|
256
|
|
312
|
|
- render() {
|
313
|
|
- const { state } = this;
|
314
|
|
- return (
|
315
|
|
- <WebSectionList
|
316
|
|
- request={() =>
|
317
|
|
- readData<{ [key: string]: PlanexGroupCategoryType }>(
|
318
|
|
- Urls.planex.groups
|
319
|
|
- )
|
320
|
|
- }
|
321
|
|
- createDataset={this.createDataset}
|
322
|
|
- refreshOnFocus={true}
|
323
|
|
- renderItem={this.getRenderItem}
|
324
|
|
- updateData={state.currentSearchString + state.favoriteGroups.length}
|
325
|
|
- />
|
326
|
|
- );
|
327
|
|
- }
|
|
257
|
+ return (
|
|
258
|
+ <WebSectionList
|
|
259
|
+ request={() => readData<PlanexGroupsType>(Urls.planex.groups)}
|
|
260
|
+ createDataset={createDataset}
|
|
261
|
+ refreshOnFocus={true}
|
|
262
|
+ renderItem={getRenderItem}
|
|
263
|
+ updateData={currentSearchString + favoriteGroups.length}
|
|
264
|
+ cache={groups}
|
|
265
|
+ onCacheUpdate={setGroups}
|
|
266
|
+ />
|
|
267
|
+ );
|
328
|
268
|
}
|
329
|
269
|
|
330
|
270
|
export default GroupSelectionScreen;
|