Browse Source

Improved doc and typing

Arnaud Vergnet 3 years ago
parent
commit
869a8e5ec0

+ 40
- 8
src/components/Screens/WebViewScreen.js View File

@@ -41,7 +41,7 @@ class WebViewScreen extends React.PureComponent<Props> {
41 41
         customPaddingFunction: null,
42 42
     };
43 43
 
44
-    webviewRef: Object;
44
+    webviewRef: { current: null | WebView };
45 45
 
46 46
     canGoBack: boolean;
47 47
 
@@ -52,7 +52,7 @@ class WebViewScreen extends React.PureComponent<Props> {
52 52
     }
53 53
 
54 54
     /**
55
-     * Creates refresh button after mounting
55
+     * Creates header buttons and listens to events after mounting
56 56
      */
57 57
     componentDidMount() {
58 58
         this.props.navigation.setOptions({
@@ -78,6 +78,11 @@ class WebViewScreen extends React.PureComponent<Props> {
78 78
         );
79 79
     }
80 80
 
81
+    /**
82
+     * Goes back on the webview or on the navigation stack if we cannot go back anymore
83
+     *
84
+     * @returns {boolean}
85
+     */
81 86
     onBackButtonPressAndroid = () => {
82 87
         if (this.canGoBack) {
83 88
             this.onGoBackClicked();
@@ -87,7 +92,7 @@ class WebViewScreen extends React.PureComponent<Props> {
87 92
     };
88 93
 
89 94
     /**
90
-     * Gets a header refresh button
95
+     * Gets header refresh and open in browser buttons
91 96
      *
92 97
      * @return {*}
93 98
      */
@@ -106,6 +111,12 @@ class WebViewScreen extends React.PureComponent<Props> {
106 111
         );
107 112
     };
108 113
 
114
+    /**
115
+     * Creates advanced header control buttons.
116
+     * These buttons allows the user to refresh, go back, go forward and open in the browser.
117
+     *
118
+     * @returns {*}
119
+     */
109 120
     getAdvancedButtons = () => {
110 121
         return (
111 122
             <MaterialHeaderButtons>
@@ -141,14 +152,28 @@ class WebViewScreen extends React.PureComponent<Props> {
141 152
     /**
142 153
      * Callback to use when refresh button is clicked. Reloads the webview.
143 154
      */
144
-    onRefreshClicked = () => this.webviewRef.current.reload();
145
-    onGoBackClicked = () => this.webviewRef.current.goBack();
146
-    onGoForwardClicked = () => this.webviewRef.current.goForward();
147
-
155
+    onRefreshClicked = () => {
156
+        if (this.webviewRef.current != null)
157
+            this.webviewRef.current.reload();
158
+    }
159
+    onGoBackClicked = () => {
160
+        if (this.webviewRef.current != null)
161
+            this.webviewRef.current.goBack();
162
+    }
163
+    onGoForwardClicked = () => {
164
+        if (this.webviewRef.current != null)
165
+            this.webviewRef.current.goForward();
166
+    }
148 167
     onOpenClicked = () => Linking.openURL(this.props.url);
149 168
 
169
+    /**
170
+     * Injects the given javascript string into the web page
171
+     *
172
+     * @param script The script to inject
173
+     */
150 174
     injectJavaScript = (script: string) => {
151
-        this.webviewRef.current.injectJavaScript(script);
175
+        if (this.webviewRef.current != null)
176
+            this.webviewRef.current.injectJavaScript(script);
152 177
     }
153 178
 
154 179
     /**
@@ -158,6 +183,13 @@ class WebViewScreen extends React.PureComponent<Props> {
158 183
      */
159 184
     getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
160 185
 
186
+    /**
187
+     * Gets the javascript needed to generate a padding on top of the page
188
+     * This adds padding to the body and runs the custom padding function given in props
189
+     *
190
+     * @param padding The padding to add in pixels
191
+     * @returns {string}
192
+     */
161 193
     getJavascriptPadding(padding: number) {
162 194
         const customPadding = this.props.customPaddingFunction != null ? this.props.customPaddingFunction(padding) : "";
163 195
         return (

+ 7
- 1
src/screens/Other/FeedbackScreen.js View File

@@ -26,6 +26,12 @@ Stp corrige le pb, bien cordialement.`,
26 26
 
27 27
 class FeedbackScreen extends React.Component<Props> {
28 28
 
29
+    /**
30
+     * Gets link buttons
31
+     *
32
+     * @param isBug True if buttons should redirect to bug report methods
33
+     * @returns {*}
34
+     */
29 35
     getButtons(isBug: boolean) {
30 36
         return (
31 37
             <Card.Actions style={{
@@ -106,4 +112,4 @@ class FeedbackScreen extends React.Component<Props> {
106 112
     }
107 113
 }
108 114
 
109
-export default withTheme(FeedbackScreen);
115
+export default withTheme(FeedbackScreen);

+ 5
- 2
src/screens/Other/SettingsScreen.js View File

@@ -31,6 +31,9 @@ class SettingsScreen extends React.Component<Props, State> {
31 31
 
32 32
     savedNotificationReminder: number;
33 33
 
34
+    /**
35
+     * Loads user preferences into state
36
+     */
34 37
     constructor() {
35 38
         super();
36 39
         let notifReminder = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current;
@@ -49,7 +52,7 @@ class SettingsScreen extends React.Component<Props, State> {
49 52
     }
50 53
 
51 54
     /**
52
-     * Unlocks debug mode
55
+     * Unlocks debug mode and saves its state to user preferences
53 56
      */
54 57
     unlockDebugMode = () => {
55 58
         this.setState({isDebugUnlocked: true});
@@ -227,7 +230,7 @@ class SettingsScreen extends React.Component<Props, State> {
227 230
                                 left={props => <List.Icon {...props} icon="bug-check"/>}
228 231
                                 onPress={() => this.props.navigation.navigate("debug")}
229 232
                             />
230
-                        :null}
233
+                            : null}
231 234
                         <List.Item
232 235
                             title={i18n.t('screens.about')}
233 236
                             description={i18n.t('aboutScreen.buttonDesc')}

+ 48
- 1
src/screens/Planex/GroupSelectionScreen.js View File

@@ -45,7 +45,7 @@ const GROUPS_URL = 'http://planex.insa-toulouse.fr/wsAdeGrp.php?projectId=1';
45 45
 const REPLACE_REGEX = /_/g;
46 46
 
47 47
 /**
48
- * Class defining proximo's article list of a certain category.
48
+ * Class defining planex group selection screen.
49 49
  */
50 50
 class GroupSelectionScreen extends React.Component<Props, State> {
51 51
 
@@ -106,10 +106,21 @@ class GroupSelectionScreen extends React.Component<Props, State> {
106 106
         });
107 107
     };
108 108
 
109
+    /**
110
+     * Callback used when the user clicks on the favorite button
111
+     *
112
+     * @param item The item to add/remove from favorites
113
+     */
109 114
     onListFavoritePress = (item: group) => {
110 115
         this.updateGroupFavorites(item);
111 116
     };
112 117
 
118
+    /**
119
+     * Checks if the given group is in the favorites list
120
+     *
121
+     * @param group The group to check
122
+     * @returns {boolean}
123
+     */
113 124
     isGroupInFavorites(group: group) {
114 125
         let isFav = false;
115 126
         for (let i = 0; i < this.state.favoriteGroups.length; i++) {
@@ -121,6 +132,12 @@ class GroupSelectionScreen extends React.Component<Props, State> {
121 132
         return isFav;
122 133
     }
123 134
 
135
+    /**
136
+     * Removes the given group from the given array
137
+     *
138
+     * @param favorites The array containing favorites groups
139
+     * @param group The group to remove from the array
140
+     */
124 141
     removeGroupFromFavorites(favorites: Array<group>, group: group) {
125 142
         for (let i = 0; i < favorites.length; i++) {
126 143
             if (group.id === favorites[i].id) {
@@ -130,12 +147,24 @@ class GroupSelectionScreen extends React.Component<Props, State> {
130 147
         }
131 148
     }
132 149
 
150
+    /**
151
+     * Adds the given group to the given array
152
+     *
153
+     * @param favorites The array containing favorites groups
154
+     * @param group The group to add to the array
155
+     */
133 156
     addGroupToFavorites(favorites: Array<group>, group: group) {
134 157
         group.isFav = true;
135 158
         favorites.push(group);
136 159
         favorites.sort(sortName);
137 160
     }
138 161
 
162
+    /**
163
+     * Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
164
+     * Favorites are then saved in user preferences
165
+     *
166
+     * @param group The group to add/remove to favorites
167
+     */
139 168
     updateGroupFavorites(group: group) {
140 169
         let newFavorites = [...this.state.favoriteGroups]
141 170
         if (this.isGroupInFavorites(group))
@@ -148,6 +177,12 @@ class GroupSelectionScreen extends React.Component<Props, State> {
148 177
             JSON.stringify(newFavorites));
149 178
     }
150 179
 
180
+    /**
181
+     * Checks whether to display the given group category, depending on user search query
182
+     *
183
+     * @param item The group category
184
+     * @returns {boolean}
185
+     */
151 186
     shouldDisplayAccordion(item: groupCategory) {
152 187
         let shouldDisplay = false;
153 188
         for (let i = 0; i < item.content.length; i++) {
@@ -181,6 +216,13 @@ class GroupSelectionScreen extends React.Component<Props, State> {
181 216
             return null;
182 217
     };
183 218
 
219
+    /**
220
+     * Generates the dataset to be used in the FlatList.
221
+     * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
222
+     *
223
+     * @param fetchedData The raw data fetched from the server
224
+     * @returns {[]}
225
+     */
184 226
     generateData(fetchedData: { [key: string]: groupCategory }) {
185 227
         let data = [];
186 228
         for (let key in fetchedData) {
@@ -192,6 +234,11 @@ class GroupSelectionScreen extends React.Component<Props, State> {
192 234
         return data;
193 235
     }
194 236
 
237
+    /**
238
+     * Replaces underscore by spaces and sets the favorite state of every group in the given category
239
+     *
240
+     * @param item The category containing groups to format
241
+     */
195 242
     formatGroups(item: groupCategory) {
196 243
         for (let i = 0; i < item.content.length; i++) {
197 244
             item.content[i].name = item.content[i].name.replace(REPLACE_REGEX, " ")

+ 108
- 57
src/screens/Planex/PlanexScreen.js View File

@@ -1,6 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
+import type {CustomTheme} from "../../managers/ThemeManager";
4 5
 import ThemeManager from "../../managers/ThemeManager";
5 6
 import WebViewScreen from "../../components/Screens/WebViewScreen";
6 7
 import {Avatar, Banner, withTheme} from "react-native-paper";
@@ -14,12 +15,15 @@ import DateManager from "../../managers/DateManager";
14 15
 import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
15 16
 import {CommonActions} from "@react-navigation/native";
16 17
 import ErrorView from "../../components/Screens/ErrorView";
18
+import {StackNavigationProp} from "@react-navigation/stack";
19
+import {Collapsible} from "react-navigation-collapsible";
20
+import type {group} from "./GroupSelectionScreen";
17 21
 
18 22
 type Props = {
19
-    navigation: Object,
20
-    route: Object,
21
-    theme: Object,
22
-    collapsibleStack: Object,
23
+    navigation: StackNavigationProp,
24
+    route: { params: { group: group } },
25
+    theme: CustomTheme,
26
+    collapsibleStack: Collapsible,
23 27
 }
24 28
 
25 29
 type State = {
@@ -27,7 +31,7 @@ type State = {
27 31
     dialogVisible: boolean,
28 32
     dialogTitle: string,
29 33
     dialogMessage: string,
30
-    currentGroup: Object,
34
+    currentGroup: group,
31 35
 }
32 36
 
33 37
 
@@ -62,7 +66,7 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
62 66
 //     removeAlpha($(this));
63 67
 // });
64 68
 
65
-// Watch for changes in the calendar and call the remove alpha function
69
+// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
66 70
 const OBSERVE_MUTATIONS_INJECTED =
67 71
     'function removeAlpha(node) {\n' +
68 72
     '    let bg = node.css("background-color");\n' +
@@ -91,6 +95,7 @@ const OBSERVE_MUTATIONS_INJECTED =
91 95
     '    removeAlpha($(this));\n' +
92 96
     '});';
93 97
 
98
+// Overrides default settings to send a message to the webview when clicking on an event
94 99
 const FULL_CALENDAR_SETTINGS = `
95 100
 var calendar = $('#calendar').fullCalendar('getCalendar');
96 101
 calendar.option({
@@ -105,16 +110,6 @@ calendar.option({
105 110
   }
106 111
 });`;
107 112
 
108
-const EXEC_COMMAND = `
109
-function execCommand(event) {
110
-    alert(JSON.stringify(event));
111
-    var data = JSON.parse(event.data);
112
-    if (data.action === "setGroup")
113
-        displayAde(data.data);
114
-    else
115
-        $('#calendar').fullCalendar(data.action, data.data);
116
-};`
117
-
118 113
 const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#groupe_visibility{width:100%}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
119 114
 const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
120 115
 
@@ -129,8 +124,8 @@ $('head').append('<style>` + CUSTOM_CSS + `</style>');
129 124
  */
130 125
 class PlanexScreen extends React.Component<Props, State> {
131 126
 
132
-    webScreenRef: Object;
133
-    barRef: Object;
127
+    webScreenRef: { current: null | WebViewScreen };
128
+    barRef: { current: null | AnimatedBottomBar };
134 129
 
135 130
     customInjectedJS: string;
136 131
 
@@ -144,7 +139,7 @@ class PlanexScreen extends React.Component<Props, State> {
144 139
 
145 140
         let currentGroup = AsyncStorageManager.getInstance().preferences.planexCurrentGroup.current;
146 141
         if (currentGroup === '')
147
-            currentGroup = {name: "SELECT GROUP", id: -1};
142
+            currentGroup = {name: "SELECT GROUP", id: -1, isFav: false};
148 143
         else {
149 144
             currentGroup = JSON.parse(currentGroup);
150 145
             props.navigation.setOptions({title: currentGroup.name})
@@ -159,6 +154,9 @@ class PlanexScreen extends React.Component<Props, State> {
159 154
         this.generateInjectedJS(currentGroup.id);
160 155
     }
161 156
 
157
+    /**
158
+     * Register for events and show the banner after 2 seconds
159
+     */
162 160
     componentDidMount() {
163 161
         this.props.navigation.addListener('focus', this.onScreenFocus);
164 162
         setTimeout(this.onBannerTimeout, 2000);
@@ -172,12 +170,37 @@ class PlanexScreen extends React.Component<Props, State> {
172 170
         })
173 171
     }
174 172
 
173
+    /**
174
+     * Callback used when closing the banner.
175
+     * This hides the banner and saves to preferences to prevent it from reopening
176
+     */
177
+    onHideBanner = () => {
178
+        this.setState({bannerVisible: false});
179
+        AsyncStorageManager.getInstance().savePref(
180
+            AsyncStorageManager.getInstance().preferences.planexShowBanner.key,
181
+            '0'
182
+        );
183
+    };
184
+
185
+
186
+    /**
187
+     * Callback used when the user clicks on the navigate to settings button.
188
+     * This will hide the banner and open the SettingsScreen
189
+     */
190
+    onGoToSettings = () => {
191
+        this.onHideBanner();
192
+        this.props.navigation.navigate('settings');
193
+    };
194
+
175 195
     onScreenFocus = () => {
176 196
         this.handleNavigationParams();
177 197
     };
178 198
 
199
+    /**
200
+     * If navigations parameters contain a group, set it as selected
201
+     */
179 202
     handleNavigationParams = () => {
180
-        if (this.props.route.params !== undefined) {
203
+        if (this.props.route.params != null) {
181 204
             if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
182 205
                 // reset params to prevent infinite loop
183 206
                 this.selectNewGroup(this.props.route.params.group);
@@ -186,16 +209,27 @@ class PlanexScreen extends React.Component<Props, State> {
186 209
         }
187 210
     };
188 211
 
189
-    selectNewGroup(group: Object) {
212
+    /**
213
+     * Sends the webpage a message with the new group to select and save it to preferences
214
+     *
215
+     * @param group The group object selected
216
+     */
217
+    selectNewGroup(group: group) {
190 218
         this.sendMessage('setGroup', group.id);
191 219
         this.setState({currentGroup: group});
192 220
         AsyncStorageManager.getInstance().savePref(
193 221
             AsyncStorageManager.getInstance().preferences.planexCurrentGroup.key,
194
-            JSON.stringify(group));
195
-        this.props.navigation.setOptions({title: group.name})
222
+            JSON.stringify(group)
223
+        );
224
+        this.props.navigation.setOptions({title: group.name});
196 225
         this.generateInjectedJS(group.id);
197 226
     }
198 227
 
228
+    /**
229
+     * Generates custom JavaScript to be injected into the webpage
230
+     *
231
+     * @param groupID The current group selected
232
+     */
199 233
     generateInjectedJS(groupID: number) {
200 234
         this.customInjectedJS = "$(document).ready(function() {"
201 235
             + OBSERVE_MUTATIONS_INJECTED
@@ -207,59 +241,63 @@ class PlanexScreen extends React.Component<Props, State> {
207 241
         if (ThemeManager.getNightMode())
208 242
             this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
209 243
 
210
-        this.customInjectedJS +=
211
-            'removeAlpha();'
212
-            + '});'
213
-            + EXEC_COMMAND
214
-            + 'true;'; // Prevents crash on ios
244
+        this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
215 245
     }
216 246
 
247
+    /**
248
+     * Only update the screen if the dark theme changed
249
+     *
250
+     * @param nextProps
251
+     * @returns {boolean}
252
+     */
217 253
     shouldComponentUpdate(nextProps: Props): boolean {
218 254
         if (nextProps.theme.dark !== this.props.theme.dark)
219 255
             this.generateInjectedJS(this.state.currentGroup.id);
220 256
         return true;
221 257
     }
222 258
 
223
-    /**
224
-     * Callback used when closing the banner.
225
-     * This hides the banner and saves to preferences to prevent it from reopening
226
-     */
227
-    onHideBanner = () => {
228
-        this.setState({bannerVisible: false});
229
-        AsyncStorageManager.getInstance().savePref(
230
-            AsyncStorageManager.getInstance().preferences.planexShowBanner.key,
231
-            '0'
232
-        );
233
-    };
234 259
 
235 260
     /**
236
-     * Callback used when the used click on the navigate to settings button.
237
-     * This will hide the banner and open the SettingsScreen
261
+     * Sends a FullCalendar action to the web page inside the webview.
238 262
      *
263
+     * @param action The action to perform, as described in the FullCalendar doc https://fullcalendar.io/docs/v3.
264
+     * Or "setGroup" with the group id as data to set the selected group
265
+     * @param data Data to pass to the action
239 266
      */
240
-    onGoToSettings = () => {
241
-        this.onHideBanner();
242
-        this.props.navigation.navigate('settings');
243
-    };
244
-
245 267
     sendMessage = (action: string, data: any) => {
246 268
         let command;
247 269
         if (action === "setGroup")
248 270
             command = "displayAde(" + data + ")";
249 271
         else
250 272
             command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
251
-        this.webScreenRef.current.injectJavaScript(command + ';true;');
252
-    }
273
+        if (this.webScreenRef.current != null)
274
+            this.webScreenRef.current.injectJavaScript(command + ';true;'); // Injected javascript must end with true
275
+    };
276
+
277
+    /**
278
+     * Shows a dialog when the user clicks on an event.
279
+     *
280
+     * @param event
281
+     */
282
+    onMessage = (event: { nativeEvent: { data: string } }) => {
283
+        const data: { start: string, end: string, title: string, color: string } = JSON.parse(event.nativeEvent.data);
284
+        const startDate = dateToString(new Date(data.start), true);
285
+        const endDate = dateToString(new Date(data.end), true);
286
+        const startString = getTimeOnlyString(startDate);
287
+        const endString = getTimeOnlyString(endDate);
253 288
 
254
-    onMessage = (event: Object) => {
255
-        let data = JSON.parse(event.nativeEvent.data);
256
-        let startDate = dateToString(new Date(data.start), true);
257
-        let endDate = dateToString(new Date(data.end), true);
258 289
         let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
259
-        msg += getTimeOnlyString(startDate) + ' - ' + getTimeOnlyString(endDate);
290
+        if (startString != null && endString != null)
291
+            msg += startString + ' - ' + endDate;
260 292
         this.showDialog(data.title, msg)
261 293
     };
262 294
 
295
+    /**
296
+     * Shows a simple dialog to the user.
297
+     *
298
+     * @param title The dialog's title
299
+     * @param message The message to show
300
+     */
263 301
     showDialog = (title: string, message: string) => {
264 302
         this.setState({
265 303
             dialogVisible: true,
@@ -268,16 +306,30 @@ class PlanexScreen extends React.Component<Props, State> {
268 306
         });
269 307
     };
270 308
 
309
+    /**
310
+     * Hides the dialog
311
+     */
271 312
     hideDialog = () => {
272 313
         this.setState({
273 314
             dialogVisible: false,
274 315
         });
275 316
     };
276 317
 
277
-    onScroll = (event: Object) => {
278
-        this.barRef.current.onScroll(event);
318
+    /**
319
+     * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
320
+     *
321
+     * @param event
322
+     */
323
+    onScroll = (event: SyntheticEvent<EventTarget>) => {
324
+        if (this.barRef.current != null)
325
+            this.barRef.current.onScroll(event);
279 326
     };
280 327
 
328
+    /**
329
+     * Gets the Webview, with an error view on top if no group is selected.
330
+     *
331
+     * @returns {*}
332
+     */
281 333
     getWebView() {
282 334
         const showWebview = this.state.currentGroup.id !== -1;
283 335
 
@@ -291,7 +343,6 @@ class PlanexScreen extends React.Component<Props, State> {
291 343
                         showRetryButton={false}
292 344
                     />
293 345
                     : null}
294
-
295 346
                 <WebViewScreen
296 347
                     ref={this.webScreenRef}
297 348
                     navigation={this.props.navigation}
@@ -317,7 +368,7 @@ class PlanexScreen extends React.Component<Props, State> {
317 368
                     height: '100%',
318 369
                     width: '100%',
319 370
                 }}>
320
-                    {this.props.theme.dark // Force component theme update
371
+                    {this.props.theme.dark // Force component theme update by recreating it on theme change
321 372
                         ? this.getWebView()
322 373
                         : <View style={{height: '100%'}}>{this.getWebView()}</View>}
323 374
                 </View>

+ 37
- 8
src/screens/Planning/PlanningDisplayScreen.js View File

@@ -12,10 +12,13 @@ import ErrorView from "../../components/Screens/ErrorView";
12 12
 import CustomHTML from "../../components/Overrides/CustomHTML";
13 13
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
14 14
 import i18n from 'i18n-js';
15
+import {StackNavigationProp} from "@react-navigation/stack";
16
+import type {CustomTheme} from "../../managers/ThemeManager";
15 17
 
16 18
 type Props = {
17
-    navigation: Object,
18
-    route: Object
19
+    navigation: StackNavigationProp,
20
+    route: { params: { data: Object, id: number, eventId: number } },
21
+    theme: CustomTheme
19 22
 };
20 23
 
21 24
 type State = {
@@ -34,13 +37,15 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
34 37
     eventId: number;
35 38
     errorCode: number;
36 39
 
37
-    colors: Object;
38
-
40
+    /**
41
+     * Generates data depending on whether the screen was opened from the planning or from a link
42
+     *
43
+     * @param props
44
+     */
39 45
     constructor(props) {
40 46
         super(props);
41
-        this.colors = props.theme.colors;
42 47
 
43
-        if (this.props.route.params.data !== undefined) {
48
+        if (this.props.route.params.data != null) {
44 49
             this.displayData = this.props.route.params.data;
45 50
             this.eventId = this.displayData.id;
46 51
             this.shouldFetchData = false;
@@ -61,6 +66,9 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
61 66
         }
62 67
     }
63 68
 
69
+    /**
70
+     * Fetches data for the current event id from the API
71
+     */
64 72
     fetchData = () => {
65 73
         this.setState({loading: true});
66 74
         apiRequest(CLUB_INFO_PATH, 'POST', {id: this.eventId})
@@ -68,16 +76,31 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
68 76
             .catch(this.onFetchError);
69 77
     };
70 78
 
79
+    /**
80
+     * Hides loading and saves fetched data
81
+     *
82
+     * @param data Received data
83
+     */
71 84
     onFetchSuccess = (data: Object) => {
72 85
         this.displayData = data;
73 86
         this.setState({loading: false});
74 87
     };
75 88
 
89
+    /**
90
+     * Hides loading and saves the error code
91
+     *
92
+     * @param error
93
+     */
76 94
     onFetchError = (error: number) => {
77 95
         this.errorCode = error;
78 96
         this.setState({loading: false});
79 97
     };
80 98
 
99
+    /**
100
+     * Gets content to display
101
+     *
102
+     * @returns {*}
103
+     */
81 104
     getContent() {
82 105
         let subtitle = getFormattedEventTime(
83 106
             this.displayData["date_begin"], this.displayData["date_end"]);
@@ -94,7 +117,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
94 117
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
95 118
                         <ImageModal
96 119
                             resizeMode="contain"
97
-                            imageBackgroundColor={this.colors.background}
120
+                            imageBackgroundColor={this.props.theme.colors.background}
98 121
                             style={{
99 122
                                 width: 300,
100 123
                                 height: 300,
@@ -114,9 +137,15 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
114 137
         );
115 138
     }
116 139
 
140
+    /**
141
+     * Shows an error view and use a custom message if the event does not exist
142
+     *
143
+     * @returns {*}
144
+     */
117 145
     getErrorView() {
118 146
         if (this.errorCode === ERROR_TYPE.BAD_INPUT)
119
-            return <ErrorView {...this.props} showRetryButton={false} message={i18n.t("planningScreen.invalidEvent")} icon={"calendar-remove"}/>;
147
+            return <ErrorView {...this.props} showRetryButton={false} message={i18n.t("planningScreen.invalidEvent")}
148
+                              icon={"calendar-remove"}/>;
120 149
         else
121 150
             return <ErrorView {...this.props} errorCode={this.errorCode} onRefresh={this.fetchData}/>;
122 151
     }

+ 9
- 32
src/screens/Planning/PlanningScreen.js View File

@@ -14,6 +14,7 @@ import {
14 14
 } from '../../utils/Planning';
15 15
 import {Avatar, Divider, List} from 'react-native-paper';
16 16
 import CustomAgenda from "../../components/Overrides/CustomAgenda";
17
+import {StackNavigationProp} from "@react-navigation/stack";
17 18
 
18 19
 LocaleConfig.locales['fr'] = {
19 20
     monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@@ -25,8 +26,7 @@ LocaleConfig.locales['fr'] = {
25 26
 
26 27
 
27 28
 type Props = {
28
-    navigation: Object,
29
-    route: Object,
29
+    navigation: StackNavigationProp,
30 30
 }
31 31
 
32 32
 type State = {
@@ -48,22 +48,12 @@ class PlanningScreen extends React.Component<Props, State> {
48 48
     lastRefresh: Date;
49 49
     minTimeBetweenRefresh = 60;
50 50
 
51
-    didFocusSubscription: Function;
52
-    willBlurSubscription: Function;
53
-
54 51
     state = {
55 52
         refreshing: false,
56 53
         agendaItems: {},
57 54
         calendarShowing: false,
58 55
     };
59 56
 
60
-    onRefresh: Function;
61
-    onCalendarToggled: Function;
62
-    getRenderItem: Function;
63
-    getRenderEmptyDate: Function;
64
-    onAgendaRef: Function;
65
-    onCalendarToggled: Function;
66
-    onBackButtonPressAndroid: Function;
67 57
     currentDate = getDateOnlyString(getCurrentDateString());
68 58
 
69 59
     constructor(props: any) {
@@ -71,15 +61,6 @@ class PlanningScreen extends React.Component<Props, State> {
71 61
         if (i18n.currentLocale().startsWith("fr")) {
72 62
             LocaleConfig.defaultLocale = 'fr';
73 63
         }
74
-
75
-        // Create references for functions required in the render function
76
-        this.onRefresh = this.onRefresh.bind(this);
77
-        this.onCalendarToggled = this.onCalendarToggled.bind(this);
78
-        this.getRenderItem = this.getRenderItem.bind(this);
79
-        this.getRenderEmptyDate = this.getRenderEmptyDate.bind(this);
80
-        this.onAgendaRef = this.onAgendaRef.bind(this);
81
-        this.onCalendarToggled = this.onCalendarToggled.bind(this);
82
-        this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
83 64
     }
84 65
 
85 66
     /**
@@ -87,7 +68,7 @@ class PlanningScreen extends React.Component<Props, State> {
87 68
      */
88 69
     componentDidMount() {
89 70
         this.onRefresh();
90
-        this.didFocusSubscription = this.props.navigation.addListener(
71
+        this.props.navigation.addListener(
91 72
             'focus',
92 73
             () =>
93 74
                 BackHandler.addEventListener(
@@ -95,7 +76,7 @@ class PlanningScreen extends React.Component<Props, State> {
95 76
                     this.onBackButtonPressAndroid
96 77
                 )
97 78
         );
98
-        this.willBlurSubscription = this.props.navigation.addListener(
79
+        this.props.navigation.addListener(
99 80
             'blur',
100 81
             () =>
101 82
                 BackHandler.removeEventListener(
@@ -110,7 +91,7 @@ class PlanningScreen extends React.Component<Props, State> {
110 91
      *
111 92
      * @return {boolean}
112 93
      */
113
-    onBackButtonPressAndroid() {
94
+    onBackButtonPressAndroid = () => {
114 95
         if (this.state.calendarShowing) {
115 96
             this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
116 97
             return true;
@@ -166,7 +147,7 @@ class PlanningScreen extends React.Component<Props, State> {
166 147
      *
167 148
      * @param ref
168 149
      */
169
-    onAgendaRef(ref: Object) {
150
+    onAgendaRef = (ref: Object) => {
170 151
         this.agendaRef = ref;
171 152
     }
172 153
 
@@ -175,7 +156,7 @@ class PlanningScreen extends React.Component<Props, State> {
175 156
      *
176 157
      * @param isCalendarOpened True is the calendar is already open, false otherwise
177 158
      */
178
-    onCalendarToggled(isCalendarOpened: boolean) {
159
+    onCalendarToggled = (isCalendarOpened: boolean) => {
179 160
         this.setState({calendarShowing: isCalendarOpened});
180 161
     }
181 162
 
@@ -185,7 +166,7 @@ class PlanningScreen extends React.Component<Props, State> {
185 166
      * @param item The current event to render
186 167
      * @return {*}
187 168
      */
188
-    getRenderItem(item: eventObject) {
169
+    getRenderItem = (item: eventObject) => {
189 170
         const onPress = this.props.navigation.navigate.bind(this, 'planning-information', {data: item});
190 171
         if (item.logo !== null) {
191 172
             return (
@@ -221,11 +202,7 @@ class PlanningScreen extends React.Component<Props, State> {
221 202
      *
222 203
      * @return {*}
223 204
      */
224
-    getRenderEmptyDate() {
225
-        return (
226
-            <Divider/>
227
-        );
228
-    }
205
+    getRenderEmptyDate = () => <Divider/>;
229 206
 
230 207
     render() {
231 208
         return (

+ 1
- 3
src/screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -6,9 +6,7 @@ import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
7 7
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
8 8
 
9
-type Props = {
10
-    navigation: Object,
11
-};
9
+type Props = {};
12 10
 
13 11
 const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png";
14 12
 

+ 2
- 1
src/screens/Services/Proximo/ProximoAboutScreen.js View File

@@ -5,9 +5,10 @@ import {Image, ScrollView, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text} from 'react-native-paper';
7 7
 import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
8
+import {StackNavigationProp} from "@react-navigation/stack";
8 9
 
9 10
 type Props = {
10
-    navigation: Object,
11
+    navigation: StackNavigationProp,
11 12
 };
12 13
 
13 14
 const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png";

+ 7
- 4
src/screens/Services/Proximo/ProximoListScreen.js View File

@@ -9,6 +9,9 @@ import {stringMatchQuery} from "../../../utils/Search";
9 9
 import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
10 10
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
11 11
 import {withCollapsible} from "../../../utils/withCollapsible";
12
+import {StackNavigationProp} from "@react-navigation/stack";
13
+import type {CustomTheme} from "../../../managers/ThemeManager";
14
+import {Collapsible} from "react-navigation-collapsible";
12 15
 
13 16
 function sortPrice(a, b) {
14 17
     return a.price - b.price;
@@ -37,10 +40,10 @@ function sortNameReverse(a, b) {
37 40
 const LIST_ITEM_HEIGHT = 84;
38 41
 
39 42
 type Props = {
40
-    navigation: Object,
41
-    route: Object,
42
-    theme: Object,
43
-    collapsibleStack: Object,
43
+    navigation: StackNavigationProp,
44
+    route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
45
+    theme: CustomTheme,
46
+    collapsibleStack: Collapsible,
44 47
 }
45 48
 
46 49
 type State = {

+ 10
- 24
src/screens/Services/Proximo/ProximoMainScreen.js View File

@@ -6,13 +6,15 @@ import i18n from "i18n-js";
6 6
 import WebSectionList from "../../../components/Screens/WebSectionList";
7 7
 import {List, withTheme} from 'react-native-paper';
8 8
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
9
+import {StackNavigationProp} from "@react-navigation/stack";
10
+import type {CustomTheme} from "../../../managers/ThemeManager";
9 11
 
10 12
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
11 13
 const LIST_ITEM_HEIGHT = 84;
12 14
 
13 15
 type Props = {
14
-    navigation: Object,
15
-    route: Object,
16
+    navigation: StackNavigationProp,
17
+    theme: CustomTheme,
16 18
 }
17 19
 
18 20
 type State = {
@@ -27,22 +29,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
27 29
 
28 30
     articles: Object;
29 31
 
30
-    onPressSearchBtn: Function;
31
-    onPressAboutBtn: Function;
32
-    getRenderItem: Function;
33
-    createDataset: Function;
34
-
35
-    colors: Object;
36
-
37
-    constructor(props) {
38
-        super(props);
39
-        this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
40
-        this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
41
-        this.getRenderItem = this.getRenderItem.bind(this);
42
-        this.createDataset = this.createDataset.bind(this);
43
-        this.colors = props.theme.colors;
44
-    }
45
-
46 32
     /**
47 33
      * Function used to sort items in the list.
48 34
      * Makes the All category stick to the top and sorts the others by name ascending
@@ -83,7 +69,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
83 69
      * Callback used when the search button is pressed.
84 70
      * This will open a new ProximoListScreen with all items displayed
85 71
      */
86
-    onPressSearchBtn() {
72
+    onPressSearchBtn = () => {
87 73
         let searchScreenData = {
88 74
             shouldFocusSearchBar: true,
89 75
             data: {
@@ -97,13 +83,13 @@ class ProximoMainScreen extends React.Component<Props, State> {
97 83
             },
98 84
         };
99 85
         this.props.navigation.navigate('proximo-list', searchScreenData);
100
-    }
86
+    };
101 87
 
102 88
     /**
103 89
      * Callback used when the about button is pressed.
104 90
      * This will open the ProximoAboutScreen
105 91
      */
106
-    onPressAboutBtn() {
92
+    onPressAboutBtn = () => {
107 93
         this.props.navigation.navigate('proximo-about');
108 94
     }
109 95
 
@@ -134,7 +120,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
134 120
      * @param fetchedData
135 121
      * @return {*}
136 122
      * */
137
-    createDataset(fetchedData: Object) {
123
+    createDataset = (fetchedData: Object) => {
138 124
         return [
139 125
             {
140 126
                 title: '',
@@ -202,7 +188,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
202 188
      * @param item The category to render
203 189
      * @return {*}
204 190
      */
205
-    getRenderItem({item}: Object) {
191
+    getRenderItem = ({item}: Object) => {
206 192
         let dataToSend = {
207 193
             shouldFocusSearchBar: false,
208 194
             data: item,
@@ -218,7 +204,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
218 204
                     left={props => <List.Icon
219 205
                         {...props}
220 206
                         icon={item.type.icon}
221
-                        color={this.colors.primary}/>}
207
+                        color={this.props.theme.colors.primary}/>}
222 208
                     right={props => <List.Icon {...props} icon={'chevron-right'}/>}
223 209
                     style={{
224 210
                         height: LIST_ITEM_HEIGHT,

+ 34
- 15
src/screens/Services/ServicesScreen.js View File

@@ -12,14 +12,22 @@ import type {CustomTheme} from "../../managers/ThemeManager";
12 12
 import i18n from 'i18n-js';
13 13
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
14 14
 import ConnectionManager from "../../managers/ConnectionManager";
15
+import {StackNavigationProp} from "@react-navigation/stack";
15 16
 
16 17
 type Props = {
17
-    navigation: Object,
18
-    route: Object,
18
+    navigation: StackNavigationProp,
19 19
     collapsibleStack: Collapsible,
20 20
     theme: CustomTheme,
21 21
 }
22 22
 
23
+export type listItem = {
24
+    title: string,
25
+    description: string,
26
+    image: string | number,
27
+    shouldLogin: boolean,
28
+    content: cardList,
29
+}
30
+
23 31
 const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
24 32
 const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
25 33
 const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
@@ -36,17 +44,7 @@ const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png
36 44
 const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
37 45
 const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
38 46
 
39
-export type listItem = {
40
-    title: string,
41
-    description: string,
42
-    image: string | number,
43
-    shouldLogin: boolean,
44
-    content: cardList,
45
-}
46
-
47
-type State = {}
48
-
49
-class ServicesScreen extends React.Component<Props, State> {
47
+class ServicesScreen extends React.Component<Props> {
50 48
 
51 49
     amicaleDataset: cardList;
52 50
     studentsDataset: cardList;
@@ -179,7 +177,17 @@ class ServicesScreen extends React.Component<Props, State> {
179 177
 
180 178
     onAboutPress = () => this.props.navigation.navigate('amicale-contact');
181 179
 
182
-    getAvatar(props, source: string | number) {
180
+    /**
181
+     * Gets the list title image for the list.
182
+     *
183
+     * If the source is a string, we are using an icon.
184
+     * If the source is a number, we are using an internal image.
185
+     *
186
+     * @param props Props to pass to the component
187
+     * @param source The source image to display. Can be a string for icons or a number for local images
188
+     * @returns {*}
189
+     */
190
+    getListTitleImage(props, source: string | number) {
183 191
         if (typeof source === "number")
184 192
             return <Avatar.Image
185 193
                 {...props}
@@ -197,6 +205,11 @@ class ServicesScreen extends React.Component<Props, State> {
197 205
             />
198 206
     }
199 207
 
208
+    /**
209
+     * Redirects to the given route or to the login screen if user is not logged in.
210
+     *
211
+     * @param route The route to navigate to
212
+     */
200 213
     onAmicaleServicePress(route: string) {
201 214
         if (ConnectionManager.getInstance().isLoggedIn())
202 215
             this.props.navigation.navigate(route);
@@ -204,6 +217,12 @@ class ServicesScreen extends React.Component<Props, State> {
204 217
             this.props.navigation.navigate("login", {nextScreen: route});
205 218
     }
206 219
 
220
+    /**
221
+     * A list item showing a list of available services for the current category
222
+     *
223
+     * @param item
224
+     * @returns {*}
225
+     */
207 226
     renderItem = ({item}: { item: listItem }) => {
208 227
         return (
209 228
             <TouchableRipple
@@ -216,7 +235,7 @@ class ServicesScreen extends React.Component<Props, State> {
216 235
                 <View>
217 236
                     <Card.Title
218 237
                         title={item.title}
219
-                        left={(props) => this.getAvatar(props, item.image)}
238
+                        left={(props) => this.getListTitleImage(props, item.image)}
220 239
                         right={(props) => <List.Icon {...props} icon="chevron-right"/>}
221 240
                     />
222 241
                     <CardList

+ 6
- 2
src/screens/Services/ServicesSectionScreen.js View File

@@ -7,10 +7,11 @@ import {withCollapsible} from "../../utils/withCollapsible";
7 7
 import {Collapsible} from "react-navigation-collapsible";
8 8
 import {CommonActions} from "@react-navigation/native";
9 9
 import type {listItem} from "./ServicesScreen";
10
+import {StackNavigationProp} from "@react-navigation/stack";
10 11
 
11 12
 type Props = {
12
-    navigation: Object,
13
-    route: Object,
13
+    navigation: StackNavigationProp,
14
+    route: { params: { data: listItem | null } },
14 15
     collapsibleStack: Collapsible,
15 16
 }
16 17
 
@@ -23,6 +24,9 @@ class ServicesSectionScreen extends React.Component<Props> {
23 24
         this.handleNavigationParams();
24 25
     }
25 26
 
27
+    /**
28
+     * Recover the list to display from navigation parameters
29
+     */
26 30
     handleNavigationParams() {
27 31
         if (this.props.route.params != null) {
28 32
             if (this.props.route.params.data != null) {

+ 1
- 1
src/utils/WebData.js View File

@@ -32,7 +32,7 @@ const API_ENDPOINT = "https://www.amicale-insat.fr/api/";
32 32
  * @param params The params to use for this request
33 33
  * @returns {Promise<R>}
34 34
  */
35
-export async function apiRequest(path: string, method: string, params: ?{ [key: string]: string }) {
35
+export async function apiRequest(path: string, method: string, params: ?{ [key: string]: string | number }) {
36 36
     if (params === undefined || params === null)
37 37
         params = {};
38 38
 

Loading…
Cancel
Save