components/CustomAgenda.js

@@ -2,14 +2,8 @@ import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import {Agenda} from "react-native-calendars";
 
-/**
- * Abstraction layer for Agenda component, using custom configuration
- *
- * @param props Props to pass to the element. Must specify an onRef prop to get an Agenda ref.
- * @return {*}
- */
 function CustomAgenda(props) {
-    const {colors} = props.theme;
+    const { colors } = props.theme;
     return (
         <Agenda
             {...props}

components/CustomIntroSlider.js

@@ -9,24 +9,47 @@ import i18n from 'i18n-js';
 import AppIntroSlider from "react-native-app-intro-slider";
 import Update from "../constants/Update";
 
+// Content to be used int the intro slides
+
+const styles = StyleSheet.create({
+    mainContent: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 100
+    },
+    image: {
+        width: 300,
+        height: 300,
+        marginBottom: -50,
+    },
+    text: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        paddingHorizontal: 16,
+    },
+    title: {
+        fontSize: 22,
+        color: 'white',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+
 type Props = {
     onDone: Function,
     isUpdate: boolean,
     isAprilFools: boolean,
 };
 
-/**
- * Class used to create intro slides
- */
 export default class CustomIntroSlider extends React.Component<Props> {
 
     introSlides: Array<Object>;
     updateSlides: Array<Object>;
     aprilFoolsSlides: Array<Object>;
 
-    /**
-     * Generates intro slides
-     */
     constructor() {
         super();
         this.introSlides = [
@@ -103,9 +126,8 @@ export default class CustomIntroSlider extends React.Component<Props> {
 
     /**
      * Render item to be used for the intro introSlides
-     *
+     * @param item
-     * @param item The item to be displayed
+     * @param dimensions
-     * @param dimensions Dimensions of the item
      */
     static getIntroRenderItem({item, dimensions}: Object) {
 
@@ -156,29 +178,3 @@ export default class CustomIntroSlider extends React.Component<Props> {
 }
 
 
-const styles = StyleSheet.create({
-    mainContent: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingBottom: 100
-    },
-    image: {
-        width: 300,
-        height: 300,
-        marginBottom: -50,
-    },
-    text: {
-        color: 'rgba(255, 255, 255, 0.8)',
-        backgroundColor: 'transparent',
-        textAlign: 'center',
-        paddingHorizontal: 16,
-    },
-    title: {
-        fontSize: 22,
-        color: 'white',
-        backgroundColor: 'transparent',
-        textAlign: 'center',
-        marginBottom: 16,
-    },
-});

components/CustomModal.js

@@ -4,14 +4,8 @@ import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import {Modalize} from "react-native-modalize";
 
-/**
- * Abstraction layer for Modalize component, using custom configuration
- *
- * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
- * @return {*}
- */
 function CustomModal(props) {
-    const {colors} = props.theme;
+    const { colors } = props.theme;
     return (
         <Modalize
             ref={props.onRef}

components/EmptyWebSectionListItem.js

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from "react-native";
+import {View} from "react-native";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 
-/**
+function EmptyWebSectionListItem(props) {
- * Component used to display a message when a list is empty
+    const { colors } = props.theme;
- *
- * @param props Props to pass to the component
- * @return {*}
- */
-function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing: boolean, theme: {} }) {
-    const {colors} = props.theme;
     return (
         <View>
-            <View style={styles.iconContainer}>
+            <View style={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: 100,
+                marginBottom: 20
+            }}>
                 {props.refreshing ?
                     <ActivityIndicator
                         animating={true}
@@ -27,7 +27,9 @@ function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing
             </View>
 
             <Subheading style={{
-                ...styles.subheading,
+                textAlign: 'center',
+                marginRight: 20,
+                marginLeft: 20,
                 color: colors.textDisabled
             }}>
                 {props.text}
@@ -36,19 +38,4 @@ function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing
     );
 }
 
-const styles = StyleSheet.create({
-    iconContainer: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: 100,
-        marginBottom: 20
-    },
-    subheading: {
-        textAlign: 'center',
-        marginRight: 20,
-        marginLeft: 20,
-    }
-});
-
 export default withTheme(EmptyWebSectionListItem);

components/EventDashboardItem.js

@@ -2,14 +2,7 @@
 
 import * as React from 'react';
 import {Avatar, Card, withTheme} from 'react-native-paper';
-import {StyleSheet} from "react-native";
 
-/**
- * Component used to display a dashboard item containing a preview event
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function EventDashBoardItem(props) {
     const {colors} = props.theme;
     const iconColor = props.isAvailable ?
@@ -20,7 +13,13 @@ function EventDashBoardItem(props) {
         colors.textDisabled;
     return (
         <Card
-            style={styles.card}
+            style={{
+                width: 'auto',
+                marginLeft: 10,
+                marginRight: 10,
+                marginTop: 10,
+                overflow: 'hidden',
+            }}
             onPress={props.clickAction}>
 
             <Card.Title
@@ -33,7 +32,7 @@ function EventDashBoardItem(props) {
                         icon={props.icon}
                         color={iconColor}
                         size={60}
-                        style={styles.avatar}/>}
+                        style={{backgroundColor: 'transparent'}}/>}
             />
             <Card.Content>
                 {props.children}
@@ -42,17 +41,4 @@ function EventDashBoardItem(props) {
     );
 }
 
-const styles = StyleSheet.create({
-    card: {
-        width: 'auto',
-        marginLeft: 10,
-        marginRight: 10,
-        marginTop: 10,
-        overflow: 'hidden',
-    },
-    avatar: {
-        backgroundColor: 'transparent'
-    }
-});
-
 export default withTheme(EventDashBoardItem);

components/FeedItem.js

@@ -6,11 +6,6 @@ import i18n from "i18n-js";
 
 const ICON_AMICALE = require('../assets/amicale.png');
 
-/**
- * Gets the amicale INSAT logo
- *
- * @return {*}
- */
 function getAvatar() {
     return (
         <Avatar.Image size={48} source={ICON_AMICALE}
@@ -18,12 +13,6 @@ function getAvatar() {
     );
 }
 
-/**
- * Component used to display a feed item
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function FeedItem(props) {
     const {colors} = props.theme;
     return (
@@ -50,9 +39,7 @@ function FeedItem(props) {
                 <Button
                     color={'#57aeff'}
                     onPress={props.onOutLinkPress}
-                    icon={'facebook'}>
+                    icon={'facebook'}>{i18n.t('homeScreen.dashboard.seeMore')}</Button>
-                    {i18n.t('homeScreen.dashboard.seeMore')}
-                </Button>
             </Card.Actions>
         </Card>
     );

components/HeaderButton.js

@@ -1,14 +1,8 @@
 import * as React from 'react';
 import {IconButton, withTheme} from 'react-native-paper';
 
-/**
- * Component used to display a header button
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function HeaderButton(props) {
-    const {colors} = props.theme;
+    const { colors } = props.theme;
     return (
         <IconButton
             icon={props.icon}

components/PreviewEventDashboardItem.js

@@ -1,33 +1,25 @@
 // @flow
 
 import * as React from 'react';
-import {StyleSheet, View} from "react-native";
+import {View} from "react-native";
 import HTML from "react-native-render-html";
 import i18n from "i18n-js";
 import {Avatar, Button, Card, withTheme} from 'react-native-paper';
 import PlanningEventManager from "../utils/PlanningEventManager";
 
-/**
+
- * Component used to display an event preview if an event is available
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function PreviewEventDashboardItem(props) {
     const {colors} = props.theme;
-    const isEmpty = props.event === undefined
+    const isEmpty = props.event === undefined ? true : PlanningEventManager.isDescriptionEmpty(props.event['description']);
-        ? true
-        : PlanningEventManager.isDescriptionEmpty(props.event['description']);
-
     if (props.event !== undefined && props.event !== null) {
         const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null;
         const getImage = () => <Avatar.Image
             source={{uri: props.event['logo']}}
             size={50}
-            style={styles.avatar}/>;
+            style={{backgroundColor: 'transparent'}}/>;
         return (
             <Card
-                style={styles.card}
+                style={{marginBottom: 10}}
                 onPress={props.clickAction}
                 elevation={3}
             >
@@ -42,7 +34,10 @@ function PreviewEventDashboardItem(props) {
                         subtitle={PlanningEventManager.getFormattedEventTime(props.event['date_begin'], props.event['date_end'])}
                     />}
                 {!isEmpty ?
-                    <Card.Content style={styles.content}>
+                    <Card.Content style={{
+                        maxHeight: 150,
+                        overflow: 'hidden',
+                    }}>
                         <HTML html={"<div>" + props.event['description'] + "</div>"}
                               tagsStyles={{
                                   p: {color: colors.text,},
@@ -51,7 +46,11 @@ function PreviewEventDashboardItem(props) {
 
                     </Card.Content> : null}
 
-                <Card.Actions style={styles.actions}>
+                <Card.Actions style={{
+                    marginLeft: 'auto',
+                    marginTop: 'auto',
+                    flexDirection: 'row'
+                }}>
                     <Button
                         icon={'chevron-right'}
                     >
@@ -64,22 +63,4 @@ function PreviewEventDashboardItem(props) {
         return <View/>
 }
 
-const styles = StyleSheet.create({
-    card: {
-        marginBottom: 10
-    },
-    content: {
-        maxHeight: 150,
-        overflow: 'hidden',
-    },
-    actions: {
-        marginLeft: 'auto',
-        marginTop: 'auto',
-        flexDirection: 'row'
-    },
-    avatar: {
-        backgroundColor: 'transparent'
-    }
-});
-
 export default withTheme(PreviewEventDashboardItem);

components/ProxiwashListItem.js

@@ -1,14 +1,8 @@
 import * as React from 'react';
 import {Avatar, Card, Text, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from "react-native";
+import {View} from "react-native";
 import ProxiwashConstants from "../constants/ProxiwashConstants";
 
-/**
- * Component used to display a proxiwash item, showing machine progression and state
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function ProxiwashListItem(props) {
     const {colors} = props.theme;
     let stateColors = {};
@@ -23,13 +17,13 @@ function ProxiwashListItem(props) {
                 icon={'bell-ring'}
                 size={45}
                 color={colors.primary}
-                style={styles.icon}
+                style={{backgroundColor: 'transparent'}}
             /> :
             <Avatar.Icon
                 icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
                 color={colors.text}
                 size={40}
-                style={styles.icon}
+                style={{backgroundColor: 'transparent'}}
             />
     );
     return (
@@ -41,26 +35,37 @@ function ProxiwashListItem(props) {
         >
             {ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ?
                 <Card style={{
-                    ...styles.backgroundCard,
+                    height: '100%',
+                    position: 'absolute',
+                    left: 0,
+                    width: '100%',
                     backgroundColor: colors.proxiwashRunningBgColor,
-
+                    elevation: 0
                 }}/> : null
             }
 
             <Card style={{
-                ...styles.progressionCard,
+                height: '100%',
+                position: 'absolute',
+                left: 0,
                 width: props.progress,
                 backgroundColor: stateColors[ProxiwashConstants.machineStates[props.state]],
+                elevation: 0
             }}/>
             <Card.Title
                 title={props.title}
                 titleStyle={{fontSize: 17}}
                 subtitle={props.description}
-                style={styles.title}
+                style={{
+                    backgroundColor: 'transparent',
+                    height: 64
+                }}
                 left={() => icon}
                 right={() => (
                     <View style={{flexDirection: 'row'}}>
-                        <View style={{justifyContent: 'center'}}>
+                        <View style={{
+                            justifyContent: 'center',
+                        }}>
                             <Text style={
                                 ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates.TERMINE ?
                                     {fontWeight: 'bold',} : {}}
@@ -68,11 +73,12 @@ function ProxiwashListItem(props) {
                                 {props.statusText}
                             </Text>
                         </View>
+
                         <Avatar.Icon
                             icon={props.statusIcon}
                             color={colors.text}
                             size={30}
-                            style={styles.icon}
+                            style={{backgroundColor: 'transparent'}}
                         />
                     </View>)}
             />
@@ -80,27 +86,4 @@ function ProxiwashListItem(props) {
     );
 }
 
-const styles = StyleSheet.create({
-    icon: {
-        backgroundColor: 'transparent'
-    },
-    backgroundCard: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        width: '100%',
-        elevation: 0,
-    },
-    progressionCard: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        elevation: 0,
-    },
-    title: {
-        backgroundColor: 'transparent',
-        height: 64
-    }
-});
-
 export default withTheme(ProxiwashListItem);

components/PureFlatList.js

@@ -9,12 +9,10 @@ type Props = {
 }
 
 /**
- * FlatList implementing PureComponent for increased performance.
- *
  * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
  * To force the component to update, change the value of updateData.
  */
-export default class PureFlatList extends React.PureComponent<Props> {
+export default class PureFlatList extends React.PureComponent<Props>{
 
     static defaultProps = {
         updateData: null,

components/Sidebar.js

@@ -20,7 +20,7 @@ type State = {
 };
 
 /**
- * Component used to render the drawer menu content
+ * Class used to define a navigation drawer
  */
 export default class SideBar extends React.PureComponent<Props, State> {
 
@@ -33,7 +33,7 @@ export default class SideBar extends React.PureComponent<Props, State> {
     getRenderItem: Function;
 
     /**
-     * Generate the dataset
+     * Generate the datasets
      *
      * @param props
      */
@@ -123,12 +123,6 @@ export default class SideBar extends React.PureComponent<Props, State> {
         this.getRenderItem = this.getRenderItem.bind(this);
     }
 
-    /**
-     * Callback when a drawer item is pressed.
-     * It will either navigate to the associated screen, or open the browser to the associated link
-     *
-     * @param item The item pressed
-     */
     onListItemPress(item: Object) {
         if (item.link === undefined)
             this.props.navigation.navigate(item.route);
@@ -136,22 +130,12 @@ export default class SideBar extends React.PureComponent<Props, State> {
             WebBrowser.openBrowserAsync(item.link);
     }
 
-    /**
+
-     * Key extractor for list items
+    listKeyExtractor(item: Object) {
-     *
-     * @param item The item to extract the key from
-     * @return {string} The extracted key
-     */
-    listKeyExtractor(item: Object): string {
         return item.route;
     }
 
-    /**
+
-     * Gets the render item for the given list item
-     *
-     * @param item The item to render
-     * @return {*}
-     */
     getRenderItem({item}: Object) {
         const onListItemPress = this.onListItemPress.bind(this, item);
         if (item.icon !== undefined) {

components/SidebarDivider.js

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import {withTheme} from 'react-native-paper';
+import { withTheme } from 'react-native-paper';
 import {DrawerItem} from "@react-navigation/drawer";
 
-/**
- * Component used to render a drawer menu item divider
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function SidebarDivider(props) {
-    const {colors} = props.theme;
+    const { colors } = props.theme;
     return (
         <DrawerItem
             label={props.title}

components/SidebarItem.js

@@ -3,12 +3,6 @@ import {withTheme} from 'react-native-paper';
 import {DrawerItem} from "@react-navigation/drawer";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 
-/**
- * Component used to render a drawer menu item
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function SidebarItem(props) {
     const {colors} = props.theme;
     return (

components/SquareDashboardItem.js

@@ -2,12 +2,6 @@ import * as React from 'react';
 import {Badge, IconButton, withTheme} from 'react-native-paper';
 import {View} from "react-native";
 
-/**
- * Component used to render a small dashboard item
- *
- * @param props Props to pass to the component
- * @return {*}
- */
 function SquareDashboardItem(props) {
     const {colors} = props.theme;
     return (
@@ -15,9 +9,9 @@ function SquareDashboardItem(props) {
             <IconButton
                 icon={props.icon}
                 color={
-                    props.isAvailable
+                    props.isAvailable ?
-                        ? props.color
+                        props.color :
-                        : colors.textDisabled
+                        colors.textDisabled
                 }
                 size={35}
                 onPress={props.clickAction}
@@ -29,10 +23,9 @@ function SquareDashboardItem(props) {
                             position: 'absolute',
                             top: 5,
                             right: 5
-                        }}>
+                        }}>{props.badgeNumber}</Badge> : null
-                        {props.badgeNumber}
-                    </Badge> : null
             }
+
         </View>
     );
 }

components/WebSectionList.js

@@ -29,8 +29,6 @@ type State = {
 
 const MIN_REFRESH_TIME = 5  * 1000;
 /**
- * Component used to render a SectionList with data fetched from the web
- *
  * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
  * To force the component to update, change the value of updateData.
  */
@@ -75,7 +73,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
     }
 
     /**
-     * Registers react navigation events on first screen load.
+     * Register react navigation events on first screen load.
      * Allows to detect when the screen is focused
      */
     componentDidMount() {
@@ -88,7 +86,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
     }
 
     /**
-     * Refreshes data when focusing the screen and setup a refresh interval if asked to
+     * Refresh data when focusing the screen and setup a refresh interval if asked to
      */
     onScreenFocus() {
         if (this.props.refreshOnFocus && this.lastRefresh !== undefined)
@@ -98,19 +96,13 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
     }
 
     /**
-     * Removes any interval on un-focus
+     * Remove any interval on un-focus
      */
     onScreenBlur() {
         clearInterval(this.refreshInterval);
     }
 
 
-    /**
-     * Callback used when fetch is successful.
-     * It will update the displayed data and stop the refresh animation
-     *
-     * @param fetchedData The newly fetched data
-     */
     onFetchSuccess(fetchedData: Object) {
         this.setState({
             fetchedData: fetchedData,
@@ -120,10 +112,6 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         this.lastRefresh = new Date();
     }
 
-    /**
-     * Callback used when fetch encountered an error.
-     * It will reset the displayed data and show an error.
-     */
     onFetchError() {
         this.setState({
             fetchedData: {},
@@ -131,10 +119,12 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
             firstLoading: false
         });
         this.showSnackBar();
+        // this.webDataManager.showUpdateToast(this.props.updateErrorText);
     }
 
     /**
-     * Refreshes data and shows an animations while doing it
+     * Refresh data and show a toast if any error occurred
+     * @private
      */
     onRefresh() {
         let canRefresh;
@@ -150,22 +140,10 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         }
     }
 
-    /**
-     * Gets an empty section header
-     *
-     * @param section The current section
-     * @return {*}
-     */
     getEmptySectionHeader({section}: Object) {
         return <View/>;
     }
 
-    /**
-     * Gets an empty render item
-     *
-     * @param item The data to display
-     * @return {*}
-     */
     getEmptyRenderItem({item}: Object) {
         return (
             <EmptyWebSectionListItem
@@ -176,11 +154,6 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         );
     }
 
-    /**
-     * Creates an empty dataset
-     *
-     * @return {*}
-     */
     createEmptyDataset() {
         return [
             {
@@ -201,26 +174,14 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
         ];
     }
 
-    /**
+    datasetKeyExtractor(item: Object) {
-     * Extracts a key from the given item
-     *
-     * @param item The item to extract the key from
-     * @return {string} The extracted key
-     */
-    datasetKeyExtractor(item: Object): string {
         return item.text
     }
 
-    /**
-     * Shows the error popup
-     */
     showSnackBar() {
         this.setState({snackbarVisible: true})
     }
 
-    /**
-     * Hides the error popup
-     */
     hideSnackBar() {
         this.setState({snackbarVisible: false})
     }

components/WebViewScreen.js

@@ -34,6 +34,8 @@ class WebViewScreen extends React.PureComponent<Props> {
 
     onRefreshClicked: Function;
     onWebviewRef: Function;
+    onGoBackWebview: Function;
+    onGoForwardWebview: Function;
     getRenderLoading: Function;
 
     colors: Object;
@@ -42,13 +44,12 @@ class WebViewScreen extends React.PureComponent<Props> {
         super(props);
         this.onRefreshClicked = this.onRefreshClicked.bind(this);
         this.onWebviewRef = this.onWebviewRef.bind(this);
+        this.onGoBackWebview = this.onGoBackWebview.bind(this);
+        this.onGoForwardWebview = this.onGoForwardWebview.bind(this);
         this.getRenderLoading = this.getRenderLoading.bind(this);
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Creates refresh button after mounting
-     */
     componentDidMount() {
         const rightButton = this.getRefreshButton.bind(this);
         this.props.navigation.setOptions({
@@ -56,37 +57,42 @@ class WebViewScreen extends React.PureComponent<Props> {
         });
     }
 
-    /**
+    getHeaderButton(clickAction: Function, icon: string) {
-     * Gets a header refresh button
+        return (
-     *
+            <HeaderButton icon={icon} onPress={clickAction}/>
-     * @return {*}
+        );
-     */
+    }
+
     getRefreshButton() {
-        return <HeaderButton icon={'refresh'} onPress={this.onRefreshClicked}/>
+        return (
+            <View style={{
+                flexDirection: 'row',
+                marginRight: 10
+            }}>
+                {this.getHeaderButton(this.onRefreshClicked, 'refresh')}
+            </View>
+        );
     };
 
-    /**
-     * Callback to use when refresh button is clicked. Reloads the webview.
-     */
     onRefreshClicked() {
         if (this.webviewRef !== null)
             this.webviewRef.reload();
     }
 
-    /**
+    onGoBackWebview() {
-     * Callback used when receiving the webview ref. Stores the ref for later use
+        if (this.webviewRef !== null)
-     *
+            this.webviewRef.goBack();
-     * @param ref
+    }
-     */
+
+    onGoForwardWebview() {
+        if (this.webviewRef !== null)
+            this.webviewRef.goForward();
+    }
+
     onWebviewRef(ref: Object) {
         this.webviewRef = ref
     }
 
-    /**
-     * Gets the loading indicator
-     *
-     * @return {*}
-     */
     getRenderLoading() {
         return (
             <View style={{
@@ -109,6 +115,7 @@ class WebViewScreen extends React.PureComponent<Props> {
     }
 
     render() {
+        // console.log("rendering WebViewScreen");
         return (
             <WebView
                 ref={this.onWebviewRef}

constants/Update.js

@@ -1,31 +1,12 @@
 import i18n from "i18n-js";
 
-/**
- * Singleton used to manage update slides.
- * Must be a singleton because it uses translations.
- *
- * Change values in this class to change the update slide.
- * You will also need to update those translations:
- * <ul>
- *     <li>intro.updateSlide.title</li>
- *     <li>intro.updateSlide.text</li>
- * </ul>
- */
 export default class Update {
 
-    // Increment the number to show the update slide
     static number = 5;
-    // Change the icon to be displayed on the update slide
     static icon = 'surround-sound-2-0';
 
     static instance: Update | null = null;
 
-    title: string;
-    description: string;
-
-    /**
-     * Init translations
-     */
     constructor() {
         this.title = i18n.t('intro.updateSlide.title');
         this.description = i18n.t('intro.updateSlide.text');
@@ -33,7 +14,6 @@ export default class Update {
 
     /**
      * Get this class instance or create one if none is found
-     *
      * @returns {Update}
      */
     static getInstance(): Update {

screens/About/AboutDependenciesScreen.js

@@ -10,12 +10,6 @@ type listItem = {
     version: string
 };
 
-/**
- * Generates the dependencies list from the raw json
- *
- * @param object The raw json
- * @return {Array<listItem>}
- */
 function generateListFromObject(object: { [string]: string }): Array<listItem> {
     let list = [];
     let keys = Object.keys(object);

screens/About/AboutScreen.js

@@ -105,7 +105,7 @@ class AboutScreen extends React.Component<Props, State> {
             icon: 'bug-check',
             text: i18n.t('aboutScreen.debug'),
             showChevron: true,
-            showOnlyInDebug: true
+            showOnlyDebug: true
         },
     ];
     /**
@@ -171,9 +171,6 @@ class AboutScreen extends React.Component<Props, State> {
             showChevron: true
         },
     ];
-    /**
-     * Order of information cards
-     */
     dataOrder: Array<Object> = [
         {
             id: 'app',
@@ -204,11 +201,6 @@ class AboutScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Gets the app icon
-     * @param props
-     * @return {*}
-     */
     getAppIcon(props) {
         return (
             <Avatar.Image
@@ -219,21 +211,10 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
+    keyExtractor(item: Object) {
-     * Extracts a key from the given item
-     *
-     * @param item The item to extract the key from
-     * @return {string} The extracted key
-     */
-    keyExtractor(item: Object): string {
         return item.icon;
     }
 
-    /**
-     * Gets the app card showing information and links about the app.
-     *
-     * @return {*}
-     */
     getAppCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -254,11 +235,6 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Gets the team card showing information and links about the team
-     *
-     * @return {*}
-     */
     getTeamCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -287,11 +263,6 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Gets the techno card showing information and links about the technologies used in the app
-     *
-     * @return {*}
-     */
     getTechnoCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -309,25 +280,12 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Gets a chevron icon
-     *
-     * @param props
-     * @return {*}
-     */
     getChevronIcon(props: Object) {
         return (
             <List.Icon {...props} icon={'chevron-right'}/>
         );
     }
 
-    /**
-     * Gets a custom list item icon
-     *
-     * @param item The item to show the icon for
-     * @param props
-     * @return {*}
-     */
     getItemIcon(item: Object, props: Object) {
         return (
             <List.Icon {...props} icon={item.icon}/>
@@ -337,12 +295,10 @@ class AboutScreen extends React.Component<Props, State> {
     /**
      * Get a clickable card item to be rendered inside a card.
      *
-     * @returns {*}
+     * @returns {React.Node}
      */
     getCardItem({item}: Object) {
-        let shouldShow = item === undefined
+        let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
-            || !item.showOnlyInDebug
-            || (item.showOnlyInDebug && this.state.isDebugUnlocked);
         const getItemIcon = this.getItemIcon.bind(this, item);
         if (shouldShow) {
             if (item.showChevron) {
@@ -367,9 +323,6 @@ class AboutScreen extends React.Component<Props, State> {
             return null;
     }
 
-    /**
-     * Tries to unlock debug mode
-     */
     tryUnlockDebugMode() {
         this.debugTapCounter = this.debugTapCounter + 1;
         if (this.debugTapCounter >= 4) {
@@ -377,20 +330,12 @@ class AboutScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Unlocks debug mode
-     */
     unlockDebugMode() {
         this.setState({isDebugUnlocked: true});
         let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
         AsyncStorageManager.getInstance().savePref(key, '1');
     }
 
-    /**
-     * Gets the bug report modal's content
-     *
-     * @return {*}
-     */
     getBugReportModal() {
         return (
             <View style={{
@@ -431,21 +376,12 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * opens the bug report modal
-     */
     openBugReportModal() {
         if (this.modalRef) {
             this.modalRef.open();
         }
     }
 
-    /**
-     * Gets a card, depending on the given item's id
-     *
-     * @param item The item to show
-     * @return {*}
-     */
     getMainCard({item}: Object) {
         switch (item.id) {
             case 'app':
@@ -458,11 +394,6 @@ class AboutScreen extends React.Component<Props, State> {
         return <View/>;
     }
 
-    /**
-     * Callback used when receiving the modal ref
-     *
-     * @param ref
-     */
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }

screens/About/DebugScreen.js

@@ -16,8 +16,7 @@ type State = {
 }
 
 /**
- * Class defining the Debug screen.
+ * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
- * This screen allows the user to get and modify information on the app/device.
  */
 class DebugScreen extends React.Component<Props, State> {
 
@@ -38,15 +37,6 @@ class DebugScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Gets a clickable list item
-     *
-     * @param onPressCallback The function to call when clicking on the item
-     * @param icon The item's icon
-     * @param title The item's title
-     * @param subtitle The item's subtitle
-     * @return {*}
-     */
     static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
         if (icon !== undefined) {
             return (
@@ -68,10 +58,6 @@ class DebugScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Show the
-     * @param item
-     */
     showEditModal(item: Object) {
         this.setState({
             modalCurrentDisplayItem: item
@@ -81,11 +67,6 @@ class DebugScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Gets the edit modal content
-     *
-     * @return {*}
-     */
     getModalContent() {
         return (
             <View style={{
@@ -123,12 +104,6 @@ class DebugScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Saves the new value of the given preference
-     *
-     * @param key The pref key
-     * @param value The pref value
-     */
     saveNewPrefs(key: string, value: string) {
         this.setState((prevState) => {
             let currentPreferences = {...prevState.currentPreferences};
@@ -138,11 +113,6 @@ class DebugScreen extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(key, value);
     }
 
-    /**
-     * Callback used when receiving the modal ref
-     *
-     * @param ref
-     */
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }

screens/HomeScreen.js

@@ -56,7 +56,6 @@ class HomeScreen extends React.Component<Props> {
 
     /**
      * Converts a dateString using Unix Timestamp to a formatted date
-     *
      * @param dateString {string} The Unix Timestamp representation of a date
      * @return {string} The formatted output date
      */
@@ -81,22 +80,10 @@ class HomeScreen extends React.Component<Props> {
         this.props.navigation.navigate('SelfMenuScreen');
     }
 
-    /**
-     * Extract a key for the given item
-     *
-     * @param item The item to extract the key from
-     * @return {*} The extracted key
-     */
     getKeyExtractor(item: Object) {
         return item !== undefined ? item.id : undefined;
     }
 
-    /**
-     * Creates the dataset to be used in the FlatList
-     *
-     * @param fetchedData
-     * @return {*}
-     */
     createDataset(fetchedData: Object) {
         // fetchedData = DATA;
         let newsData = [];
@@ -123,12 +110,6 @@ class HomeScreen extends React.Component<Props> {
         ];
     }
 
-    /**
-     * Generates the dataset associated to the dashboard to be displayed in the FlatList as a section
-     *
-     * @param dashboardData
-     * @return {*}
-     */
     generateDashboardDataset(dashboardData: Object) {
         let dataset = [
 
@@ -164,12 +145,6 @@ class HomeScreen extends React.Component<Props> {
         return dataset
     }
 
-    /**
-     * Gets a dashboard item
-     *
-     * @param item The item to display
-     * @return {*}
-     */
     getDashboardItem(item: Object) {
         let content = item['content'];
         if (item['id'] === 'event')
@@ -179,7 +154,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets the time limit depending on the current day:
+     * Get the time limit depending on the current day:
      * 17:30 for every day of the week except for thursday 11:30
      * 00:00 on weekends
      */
@@ -195,8 +170,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets the duration (in milliseconds) of an event
+     * Get the duration (in milliseconds) of an event
-     *
      * @param event {Object}
      * @return {number} The number of milliseconds
      */
@@ -210,7 +184,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets events starting after the limit
+     * Get events starting after the limit
      *
      * @param events
      * @param limit
@@ -228,9 +202,8 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets the event with the longest duration in the given array.
+     * Get the event with the longest duration in the given array.
      * If all events have the same duration, return the first in the array.
-     *
      * @param events
      */
     getLongestEvent(events: Array<Object>): Object {
@@ -247,7 +220,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets events that have not yet ended/started
+     * Get events that have not yet ended/started
      *
      * @param events
      */
@@ -270,7 +243,7 @@ class HomeScreen extends React.Component<Props> {
     }
 
     /**
-     * Gets the event to display in the preview
+     *
      *
      * @param events
      * @return {Object}
@@ -293,13 +266,7 @@ class HomeScreen extends React.Component<Props> {
         return displayEvent;
     }
 
-    /**
+
-     * Gets the event render item.
-     * If a preview is available, it will be rendered inside
-     *
-     * @param content
-     * @return {*}
-     */
     getDashboardEventItem(content: Array<Object>) {
         let icon = 'calendar-range';
         let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
@@ -343,12 +310,7 @@ class HomeScreen extends React.Component<Props> {
         );
     }
 
-    /**
+
-     * Gets a classic dashboard item.
-     *
-     * @param content
-     * @return {*}
-     */
     getDashboardMiddleItem(content: Array<Object>) {
         let proxiwashData = content[0]['data'];
         let tutorinsaData = content[1]['data'];
@@ -405,12 +367,6 @@ class HomeScreen extends React.Component<Props> {
         WebBrowser.openBrowserAsync(link);
     }
 
-    /**
-     * Gets a render item for the given feed object
-     *
-     * @param item The feed item to display
-     * @return {*}
-     */
     getFeedItem(item: Object) {
         const onImagePress = this.openLink.bind(this, item.full_picture);
         const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
@@ -426,13 +382,6 @@ class HomeScreen extends React.Component<Props> {
         );
     }
 
-    /**
-     * Gets a FlatList render item
-     *
-     * @param item The item to display
-     * @param section The current section
-     * @return {*}
-     */
     getRenderItem({item, section}: Object) {
         return (section['id'] === SECTIONS_ID[0] ?
             this.getDashboardItem(item) : this.getFeedItem(item));

screens/Planning/PlanningDisplayScreen.js

@@ -18,7 +18,7 @@ function openWebLink(event, link) {
 }
 
 /**
- * Class defining a planning event information page.
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
 class PlanningDisplayScreen extends React.Component<Props> {
 

screens/Planning/PlanningScreen.js

@@ -78,9 +78,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
         this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
     }
 
-    /**
-     * Captures focus and blur events to hook on android back button
-     */
     componentDidMount() {
         this.onRefresh();
         this.didFocusSubscription = this.props.navigation.addListener(
@@ -101,11 +98,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Overrides default android back button behaviour to close the calendar if it was open.
-     *
-     * @return {boolean}
-     */
     onBackButtonPressAndroid() {
         if (this.state.calendarShowing) {
             this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
@@ -115,13 +107,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
     };
 
-    /**
-     * Function used to check if a row has changed
-     *
-     * @param r1
-     * @param r2
-     * @return {boolean}
-     */
     rowHasChanged(r1: Object, r2: Object) {
         return false;
         // if (r1 !== undefined && r2 !== undefined)
@@ -130,7 +115,8 @@ export default class PlanningScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Refreshes data and shows an animation while doing it
+     * Refresh data and show a toast if any error occurred
+     * @private
      */
     onRefresh = () => {
         let canRefresh;
@@ -157,30 +143,14 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
     };
 
-    /**
-     * Callback used when receiving the agenda ref
-     *
-     * @param ref
-     */
     onAgendaRef(ref: Object) {
         this.agendaRef = ref;
     }
 
-    /**
-     * Callback used when a button is pressed to toggle the calendar
-     *
-     * @param isCalendarOpened True is the calendar is already open, false otherwise
-     */
     onCalendarToggled(isCalendarOpened: boolean) {
         this.setState({calendarShowing: isCalendarOpened});
     }
 
-    /**
-     * Gets an event render item
-     *
-     * @param item The current event to render
-     * @return {*}
-     */
     getRenderItem(item: eventObject) {
         const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
         if (item.logo !== null) {
@@ -212,11 +182,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Gets an empty render item for an empty date
-     *
-     * @return {*}
-     */
     getRenderEmptyDate() {
         return (
             <Divider/>

screens/Proximo/ProximoAboutScreen.js

@@ -10,7 +10,7 @@ type Props = {
 };
 
 /**
- * Class defining the proximo about screen.
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
 export default class ProximoAboutScreen extends React.Component<Props> {
 

screens/Proximo/ProximoListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Image, Platform, ScrollView, View} from "react-native";
+import {Platform, Image, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../components/CustomModal";
 import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
@@ -77,10 +77,10 @@ class ProximoListScreen extends React.Component<Props, State> {
 
 
     /**
-     * Creates the header content
+     * Set the sort mode from state when components are ready
      */
     componentDidMount() {
-        const button = this.getSortMenuButton.bind(this);
+        const button = this.getSortMenu.bind(this);
         const title = this.getSearchBar.bind(this);
         this.props.navigation.setOptions({
             headerRight: button,
@@ -93,50 +93,7 @@ class ProximoListScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Gets the header search bar
+     * Set the current sort mode.
-     *
-     * @return {*}
-     */
-    getSearchBar() {
-        return (
-            <Searchbar
-                placeholder={i18n.t('proximoScreen.search')}
-                onChangeText={this.onSearchStringChange}
-            />
-        );
-    }
-
-    /**
-     * Gets the sort menu header button
-     *
-     * @return {*}
-     */
-    getSortMenuButton() {
-        return (
-            <IconButton
-                icon="sort"
-                color={this.colors.text}
-                size={26}
-                onPress={this.onSortMenuPress}
-            />
-        );
-    }
-
-    /**
-     * Callback used when clicking on the sort menu button.
-     * It will open the modal to show a sort selection
-     */
-    onSortMenuPress() {
-        this.setState({
-            modalCurrentDisplayItem: this.getModalSortMenu()
-        });
-        if (this.modalRef) {
-            this.modalRef.open();
-        }
-    }
-
-    /**
-     * Sets the current sort mode.
      *
      * @param mode The number representing the mode
      */
@@ -164,10 +121,19 @@ class ProximoListScreen extends React.Component<Props, State> {
         }
     }
 
+    getSearchBar() {
+        return (
+            <Searchbar
+                placeholder={i18n.t('proximoScreen.search')}
+                onChangeText={this.onSearchStringChange}
+            />
+        );
+    }
+
     /**
-     * Gets a color depending on the quantity available
+     * get color depending on quantity available
      *
-     * @param availableStock The quantity available
+     * @param availableStock
      * @return
      */
     getStockColor(availableStock: number) {
@@ -181,21 +147,13 @@ class ProximoListScreen extends React.Component<Props, State> {
         return color;
     }
 
-    /**
+    sanitizeString(str: string) {
-     * Sanitizes the given string to improve search performance
-     *
-     * @param str The string to sanitize
-     * @return {string} The sanitized string
-     */
-    sanitizeString(str: string): string {
         return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
     }
 
     /**
-     * Returns only articles whose name contains the given string.
+     * Returns only the articles whose name contains str. Case and accents insensitive.
-     * Case and accents insensitive.
+     * @param str
-     *
-     * @param str The string used to filter article names
      * @returns {[]}
      */
     filterData(str: string) {
@@ -211,23 +169,12 @@ class ProximoListScreen extends React.Component<Props, State> {
         return filteredData;
     }
 
-    /**
-     * Callback used when the search changes
-     *
-     * @param str The new search string
-     */
     onSearchStringChange(str: string) {
         this.setState({
             currentlyDisplayedData: this.filterData(str)
         })
     }
 
-    /**
-     * Gets the modal content depending on the given article
-     *
-     * @param item The article to display
-     * @return {*}
-     */
     getModalItemContent(item: Object) {
         return (
             <View style={{
@@ -259,11 +206,6 @@ class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Gets the modal content to display a sort menu
-     *
-     * @return {*}
-     */
     getModalSortMenu() {
         return (
             <View style={{
@@ -312,12 +254,6 @@ class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Callback used when clicking an article in the list.
-     * It opens the modal to show detailed information about the article
-     *
-     * @param item The article pressed
-     */
     onListItemPress(item: Object) {
         this.setState({
             modalCurrentDisplayItem: this.getModalItemContent(item)
@@ -327,12 +263,26 @@ class ProximoListScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
+    onSortMenuPress() {
-     * Gets a render item for the given article
+        this.setState({
-     *
+            modalCurrentDisplayItem: this.getModalSortMenu()
-     * @param item The article to render
+        });
-     * @return {*}
+        if (this.modalRef) {
-     */
+            this.modalRef.open();
+        }
+    }
+
+    getSortMenu() {
+        return (
+            <IconButton
+                icon="sort"
+                color={this.colors.text}
+                size={26}
+                onPress={this.onSortMenuPress}
+            />
+        );
+    }
+
     renderItem({item}: Object) {
         const onPress = this.onListItemPress.bind(this, item);
         return (
@@ -351,21 +301,10 @@ class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Extracts a key for the given article
-     *
-     * @param item The article to extract the key from
-     * @return {*} The extracted key
-     */
     keyExtractor(item: Object) {
         return item.name + item.code;
     }
 
-    /**
-     * Callback used when receiving the modal ref
-     *
-     * @param ref
-     */
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }

screens/Proximo/ProximoMainScreen.js

@@ -18,8 +18,8 @@ type State = {
 }
 
 /**
- * Class defining the main proximo screen.
+ * Class defining the main proximo screen. This screen shows the different categories of articles
- * This screen shows the different categories of articles offered by proximo.
+ * offered by proximo.
  */
 class ProximoMainScreen extends React.Component<Props, State> {
 
@@ -41,14 +41,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Function used to sort items in the list.
-     * Makes the All category stick to the top and sorts the others by name ascending
-     *
-     * @param a
-     * @param b
-     * @return {number}
-     */
     static sortFinalData(a: Object, b: Object) {
         let str1 = a.type.name.toLowerCase();
         let str2 = b.type.name.toLowerCase();
@@ -67,76 +59,17 @@ class ProximoMainScreen extends React.Component<Props, State> {
         return 0;
     }
 
-    /**
-     * Creates header button
-     */
     componentDidMount() {
-        const rightButton = this.getHeaderButtons.bind(this);
+        const rightButton = this.getRightButton.bind(this);
         this.props.navigation.setOptions({
             headerRight: rightButton,
         });
     }
 
-    /**
-     * Callback used when the search button is pressed.
-     * This will open a new ProximoListScreen with all items displayed
-     */
-    onPressSearchBtn() {
-        let searchScreenData = {
-            shouldFocusSearchBar: true,
-            data: {
-                type: {
-                    id: "0",
-                    name: i18n.t('proximoScreen.all'),
-                    icon: 'star'
-                },
-                data: this.articles !== undefined ?
-                    this.getAvailableArticles(this.articles, undefined) : []
-            },
-        };
-        this.props.navigation.navigate('ProximoListScreen', searchScreenData);
-    }
-
-    /**
-     * Callback used when the about button is pressed.
-     * This will open the ProximoAboutScreen
-     */
-    onPressAboutBtn() {
-        this.props.navigation.navigate('ProximoAboutScreen');
-    }
-
-    /**
-     * Gets the header buttons
-     * @return {*}
-     */
-    getHeaderButtons() {
-        return (
-            <View
-                style={{
-                    flexDirection: 'row',
-                }}>
-                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
-                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
-            </View>
-        );
-    }
-
-    /**
-     * Extracts a key for the given category
-     *
-     * @param item The category to extract the key from
-     * @return {*} The extracted key
-     */
     getKeyExtractor(item: Object) {
         return item !== undefined ? item.type['id'] : undefined;
     }
 
-    /**
-     * Creates the dataset to be used in the FlatList
-     *
-     * @param fetchedData
-     * @return {*}
-     * */
     createDataset(fetchedData: Object) {
         return [
             {
@@ -200,12 +133,39 @@ class ProximoMainScreen extends React.Component<Props, State> {
         return availableArticles;
     }
 
-    /**
+    onPressSearchBtn() {
-     * Gets the given category render item
+        let searchScreenData = {
-     *
+            shouldFocusSearchBar: true,
-     * @param item The category to render
+            data: {
-     * @return {*}
+                type: {
-     */
+                    id: "0",
+                    name: i18n.t('proximoScreen.all'),
+                    icon: 'star'
+                },
+                data: this.articles !== undefined ?
+                    this.getAvailableArticles(this.articles, undefined) : []
+            },
+        };
+        this.props.navigation.navigate('ProximoListScreen', searchScreenData);
+    }
+
+    onPressAboutBtn() {
+        this.props.navigation.navigate('ProximoAboutScreen');
+    }
+
+    getRightButton() {
+        return (
+            <View
+                style={{
+                    flexDirection: 'row',
+                }}>
+                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
+                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
+            </View>
+        );
+    }
+
+
     getRenderItem({item}: Object) {
         let dataToSend = {
             shouldFocusSearchBar: false,

screens/Proxiwash/ProxiwashAboutScreen.js

@@ -10,7 +10,7 @@ type Props = {
 };
 
 /**
- * Class defining the proxiwash about screen.
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
 export default class ProxiwashAboutScreen extends React.Component<Props> {
 

screens/Proxiwash/ProxiwashScreen.js

@@ -58,6 +58,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
         refreshing: false,
         firstLoading: true,
         fetchedData: {},
+        // machinesWatched: JSON.parse(dataString),
         machinesWatched: [],
         modalCurrentDisplayItem: null,
         bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1',
@@ -96,10 +97,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Callback used when closing the banner.
-     * This hides the banner and saves to preferences to prevent it from reopening
-     */
     onHideBanner() {
         this.setState({bannerVisible: false});
         AsyncStorageManager.getInstance().savePref(
@@ -112,7 +109,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
      * Setup notification channel for android and add listeners to detect notifications fired
      */
     componentDidMount() {
-        const rightButton = this.getAboutButton.bind(this);
+        const rightButton = this.getRightButton.bind(this);
         this.props.navigation.setOptions({
             headerRight: rightButton,
         });
@@ -137,35 +134,16 @@ class ProxiwashScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
+    getDryersKeyExtractor(item: Object) {
-     * Callback used when pressing the about button.
+        return item !== undefined ? "dryer" + item.number : undefined;
-     * This will open the ProxiwashAboutScreen.
+    }
-     */
+
-    onAboutPress() {
+    getWashersKeyExtractor(item: Object) {
-        this.props.navigation.navigate('ProxiwashAboutScreen');
+        return item !== undefined ? "washer" + item.number : undefined;
     }
 
     /**
-     * Gets the about header button
+     * Setup notifications for the machine with the given ID.
-     *
-     * @return {*}
-     */
-    getAboutButton() {
-        return <HeaderButton icon={'information'} onPress={this.onAboutPress}/>;
-    }
-
-    /**
-     * Extracts the key for the given item
-     *
-     * @param item The item to extract the key from
-     * @return {*} The extracted key
-     */
-    getKeyExtractor(item: Object) {
-        return item !== undefined ? item.number : undefined;
-    }
-
-    /**
-     * Setups notifications for the machine with the given ID.
      * One notification will be sent at the end of the program.
      * Another will be send a few minutes before the end, based on the value of reminderNotifTime
      *
@@ -184,9 +162,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Shows a warning telling the user notifications are disabled for the app
-     */
     showNotificationsDisabledWarning() {
         Alert.alert(
             i18n.t("proxiwashScreen.modal.notificationErrorTitle"),
@@ -195,7 +170,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Stops scheduled notifications for the machine of the given ID.
+     * Stop scheduled notifications for the machine of the given ID.
      * This will also remove the notification if it was already shown.
      *
      * @param machineId The machine's ID
@@ -212,7 +187,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
+     * Add the given notifications associated to a machine ID to the watchlist, and save the array to the preferences
      *
      * @param machineId
      */
@@ -223,7 +198,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Removes the given index from the watchlist array and saves it to preferences
+     * remove the given index from the watchlist array and save it to preferences
      *
      * @param index
      */
@@ -234,12 +209,14 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Sets the given data as the watchlist
+     * Set the given data as the watchlist and save it to preferences
      *
      * @param data
      */
     updateNotificationState(data: Array<Object>) {
         this.setState({machinesWatched: data});
+        // let prefKey = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.key;
+        // AsyncStorageManager.getInstance().savePref(prefKey, JSON.stringify(data));
     }
 
     /**
@@ -252,12 +229,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         return this.state.machinesWatched.indexOf(machineID) !== -1;
     }
 
-    /**
-     * Creates the dataset to be used by the flatlist
-     *
-     * @param fetchedData
-     * @return {*}
-     */
     createDataset(fetchedData: Object) {
         let data = fetchedData;
         if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
@@ -273,25 +244,18 @@ class ProxiwashScreen extends React.Component<Props, State> {
                 icon: 'tumble-dryer',
                 data: data.dryers === undefined ? [] : data.dryers,
                 extraData: this.state,
-                keyExtractor: this.getKeyExtractor
+                keyExtractor: this.getDryersKeyExtractor
             },
             {
                 title: i18n.t('proxiwashScreen.washers'),
                 icon: 'washing-machine',
                 data: data.washers === undefined ? [] : data.washers,
                 extraData: this.state,
-                keyExtractor: this.getKeyExtractor
+                keyExtractor: this.getWashersKeyExtractor
             },
         ];
     }
 
-    /**
-     * Shows a modal for the given item
-     *
-     * @param title The title to use
-     * @param item The item to display information for in the modal
-     * @param isDryer True if the given item is a dryer
-     */
     showModal(title: string, item: Object, isDryer: boolean) {
         this.setState({
             modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
@@ -301,11 +265,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         }
     }
 
-    /**
-     * Callback used when the user clicks on enable notifications for a machine
-     *
-     * @param machineId The machine's id to set notifications for
-     */
     onSetupNotificationsPress(machineId: string) {
         if (this.modalRef) {
             this.modalRef.close();
@@ -313,15 +272,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         this.setupNotifications(machineId)
     }
 
-    /**
-     * Generates the modal content.
-     * This shows information for the given machine.
-     *
-     * @param title The title to use
-     * @param item The item to display information for in the modal
-     * @param isDryer True if the given item is a dryer
-     * @return {*}
-     */
     getModalContent(title: string, item: Object, isDryer: boolean) {
         let button = {
             text: i18n.t("proxiwashScreen.modal.ok"),
@@ -384,21 +334,20 @@ class ProxiwashScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
+    onAboutPress() {
-     * Callback used when receiving modal ref
+        this.props.navigation.navigate('ProxiwashAboutScreen');
-     *
+    }
-     * @param ref
+
-     */
+    getRightButton() {
+        return (
+            <HeaderButton icon={'information'} onPress={this.onAboutPress}/>
+        );
+    }
+
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }
 
-    /**
-     * Gets the number of machines available
-     *
-     * @param isDryer True if we are only checking for dryer, false for washers
-     * @return {number} The number of machines available
-     */
     getMachineAvailableNumber(isDryer: boolean) {
         let data;
         if (isDryer)
@@ -413,12 +362,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
         return count;
     }
 
-    /**
-     * Gets the section render item
-     *
-     * @param section The section to render
-     * @return {*}
-     */
     getRenderSectionHeader({section}: Object) {
         const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
         const nbAvailable = this.getMachineAvailableNumber(isDryer);
@@ -458,7 +401,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Gets the list item to be rendered
+     * Get list item to be rendered
      *
      * @param item The object containing the item's FetchedData
      * @param section The object describing the current SectionList section
@@ -524,6 +467,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
                     refreshOnFocus={true}
                     updateData={this.state.machinesWatched.length}/>
             </View>
+
         );
     }
 }

screens/SelfMenuScreen.js

@@ -15,6 +15,7 @@ type Props = {
 
 /**
  * Class defining the app's menu screen.
+ * This screen fetches data from etud to render the RU menu
  */
 class SelfMenuScreen extends React.Component<Props> {
 
@@ -32,22 +33,10 @@ class SelfMenuScreen extends React.Component<Props> {
         this.colors = props.theme.colors;
     }
 
-    /**
-     * Extract a key for the given item
-     *
-     * @param item The item to extract the key from
-     * @return {*} The extracted key
-     */
     getKeyExtractor(item: Object) {
         return item !== undefined ? item['name'] : undefined;
     }
 
-    /**
-     * Creates the dataset to be used in the FlatList
-     *
-     * @param fetchedData
-     * @return {[]}
-     */
     createDataset(fetchedData: Object) {
         let result = [];
         // Prevent crash by giving a default value when fetchedData is empty (not yet available)
@@ -77,12 +66,6 @@ class SelfMenuScreen extends React.Component<Props> {
         return result
     }
 
-    /**
-     * Gets the render section header
-     *
-     * @param section The section to render the header from
-     * @return {*}
-     */
     getRenderSectionHeader({section}: Object) {
         return (
             <Card style={{
@@ -109,12 +92,6 @@ class SelfMenuScreen extends React.Component<Props> {
         );
     }
 
-    /**
-     * Gets a FlatList render item
-     *
-     * @param item The item to render
-     * @return {*}
-     */
     getRenderItem({item}: Object) {
         return (
             <Card style={{
@@ -151,12 +128,6 @@ class SelfMenuScreen extends React.Component<Props> {
         );
     }
 
-    /**
-     * Formats the given string to make sure it starts with a capital letter
-     *
-     * @param name The string to format
-     * @return {string} The formatted string
-     */
     formatName(name: String) {
         return name.charAt(0) + name.substr(1).toLowerCase();
     }

screens/SettingsScreen.js

@@ -46,7 +46,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Saves the value for the proxiwash reminder notification time
+     * Save the value for the proxiwash reminder notification time
      *
      * @param value The value to store
      */
@@ -65,7 +65,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Saves the value for the proxiwash reminder notification time
+     * Save the value for the proxiwash reminder notification time
      *
      * @param value The value to store
      */
@@ -118,7 +118,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Toggles night mode and saves it to preferences
+     * Toggle night mode and save it to preferences
      */
     onToggleNightMode() {
         ThemeManager.getInstance().setNightMode(!this.state.nightMode);
@@ -138,7 +138,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Gets a list item using a checkbox control
+     * Get a list item using a checkbox control
      *
      * @param onPressCallback The callback when the checkbox state changes
      * @param icon The icon name to display on the list item
@@ -209,6 +209,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                         </List.Accordion>
                     </List.Section>
                 </Card>
+
             </ScrollView>
         );
     }

screens/Websites/AvailableRoomScreen.js

@@ -14,16 +14,14 @@ const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
 const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
 
 /**
- * Class defining the app's available rooms screen.
+ * Class defining the app's planex screen.
- * This screen uses a webview to render the page
+ * This screen uses a webview to render the planex page
  */
 export default class AvailableRoomScreen extends React.Component<Props> {
 
     customInjectedJS: string;
+    customBibInjectedJS: string;
 
-    /**
-     * Defines custom injected JavaScript to improve the page display on mobile
-     */
     constructor() {
         super();
         this.customInjectedJS =

screens/Websites/BibScreen.js

@@ -13,17 +13,14 @@ const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_cs
 const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
 
 /**
- * Class defining the app's Bib screen.
+ * Class defining the app's planex screen.
- * This screen uses a webview to render the page
+ * This screen uses a webview to render the planex page
  */
 export default class AvailableRoomScreen extends React.Component<Props> {
 
     customInjectedJS: string;
     customBibInjectedJS: string;
 
-    /**
-     * Defines custom injected JavaScript to improve the page display on mobile
-     */
     constructor() {
         super();
         this.customInjectedJS =

screens/Websites/PlanexScreen.js

@@ -80,23 +80,15 @@ const OBSERVE_MUTATIONS_INJECTED =
     '    removeAlpha($(this));\n' +
     '});';
 /**
- * Class defining the app's Planex screen.
+ * Class defining the app's planex screen.
- * This screen uses a webview to render the page
+ * This screen uses a webview to render the planex page
  */
 export default class PlanexScreen extends React.Component<Props, State> {
 
     customInjectedJS: string;
     onHideBanner: Function;
     onGoToSettings: Function;
-    state = {
-        bannerVisible:
-            AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
-            AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
-    };
 
-    /**
-     * Defines custom injected JavaScript to improve the page display on mobile
-     */
     constructor() {
         super();
         this.customInjectedJS =
@@ -110,15 +102,17 @@ export default class PlanexScreen extends React.Component<Props, State> {
 
         this.customInjectedJS +=
             'removeAlpha();' +
-            '});true;'; // Prevents crash on ios
+            '});true;'; // Prevent crash on ios
         this.onHideBanner = this.onHideBanner.bind(this);
         this.onGoToSettings = this.onGoToSettings.bind(this);
     }
 
-    /**
+    state = {
-     * Callback used when closing the banner.
+        bannerVisible:
-     * This hides the banner and saves to preferences to prevent it from reopening
+            AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
-     */
+            AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
+    };
+
     onHideBanner() {
         this.setState({bannerVisible: false});
         AsyncStorageManager.getInstance().savePref(
@@ -127,11 +121,6 @@ export default class PlanexScreen extends React.Component<Props, State> {
         );
     }
 
-    /**
-     * Callback used when the used click on the navigate to settings button.
-     * This will hide the banner and open the SettingsScreen
-     *
-     */
     onGoToSettings() {
         this.onHideBanner();
         this.props.navigation.navigate('SettingsScreen');

utils/AsyncStorageManager.js

@@ -3,7 +3,7 @@
 import {AsyncStorage} from "react-native";
 
 /**
- * Singleton used to manage preferences.
+ * Static class used to manage preferences.
  * Preferences are fetched at the start of the app and saved in an instance object.
  * This allows for a synchronous access to saved data.
  */
@@ -14,7 +14,7 @@ export default class AsyncStorageManager {
 
     /**
      * Get this class instance or create one if none is found
-     * @returns {AsyncStorageManager}
+     * @returns {ThemeManager}
      */
     static getInstance(): AsyncStorageManager {
         return AsyncStorageManager.instance === null ?
@@ -39,6 +39,11 @@ export default class AsyncStorageManager {
             default: '5',
             current: '',
         },
+        proxiwashWatchedMachines: {
+            key: 'proxiwashWatchedMachines',
+            default: '[]',
+            current: '',
+        },
         nightModeFollowSystem: {
             key: 'nightModeFollowSystem',
             default: '1',
@@ -108,7 +113,7 @@ export default class AsyncStorageManager {
 
     /**
      * Save the value associated to the given key to preferences.
-     * This updates the preferences object and saves it to AsyncStorage.
+     * This updates the preferences object and saves it to AsynStorage.
      *
      * @param key
      * @param val

utils/DateManager.js

@@ -2,13 +2,10 @@
 
 import i18n from 'i18n-js';
 
-/**
- * Singleton used to manage date translations.
- * Translations are hardcoded as toLocaleDateString does not work on current android JS engine
- */
 export default class DateManager {
     static instance: DateManager | null = null;
 
+    // Hard code strings as toLocaleDateString does not work on current android JS engine
     daysOfWeek = [];
     monthsOfYear = [];
 
@@ -45,12 +42,6 @@ export default class DateManager {
             DateManager.instance;
     }
 
-    /**
-     * Gets a translated string representing the given date.
-     *
-     * @param dateString The date with the format YYYY-MM-DD
-     * @return {string} The translated string
-     */
     getTranslatedDate(dateString: string) {
         let dateArray = dateString.split('-');
         let date = new Date();

utils/NotificationsManager.js

@@ -49,11 +49,6 @@ export default class NotificationsManager {
         }
     }
 
-    /**
-     * Gets the machines watched from the server
-     *
-     * @param callback Function to execute with the fetched data
-     */
     static getMachineNotificationWatchlist(callback: Function) {
         let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
         if (token !== '') {
@@ -77,10 +72,10 @@ export default class NotificationsManager {
     }
 
     /**
-     * Asks the server to enable/disable notifications for the specified machine
+     * Ask the server to enable/disable notifications for the specified machine
      *
-     * @param machineID The machine ID
+     * @param machineID
-     * @param isEnabled True to enable notifications, false to disable
+     * @param isEnabled
      */
     static setupMachineNotification(machineID: string, isEnabled: boolean) {
         let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
@@ -105,9 +100,8 @@ export default class NotificationsManager {
     }
 
     /**
-     * Sends the selected reminder time for notifications to the server
+     * Send the selected reminder time for notifications to the server
-     *
+     * @param time
-     * @param time The reminder time to use
      */
     static setMachineReminderNotificationTime(time: number) {
         let token = AsyncStorageManager.getInstance().preferences.expoToken.current;

utils/ThemeManager.js

@@ -19,12 +19,7 @@ export default class ThemeManager {
         this.updateThemeCallback = null;
     }
 
-    /**
+    static getWhiteTheme() {
-     * Gets the light theme
-     *
-     * @return {Object} Object containing theme variables
-     * */
-    static getWhiteTheme(): Object {
         return {
             ...DefaultTheme,
             colors: {
@@ -75,12 +70,7 @@ export default class ThemeManager {
         };
     }
 
-    /**
+    static getDarkTheme() {
-     * Gets the dark theme
-     *
-     * @return {Object} Object containing theme variables
-     * */
-    static getDarkTheme(): Object {
         return {
             ...DarkTheme,
             colors: {
@@ -134,7 +124,6 @@ export default class ThemeManager {
 
     /**
      * Get this class instance or create one if none is found
-     *
      * @returns {ThemeManager}
      */
     static getInstance(): ThemeManager {
@@ -144,10 +133,6 @@ export default class ThemeManager {
     }
 
     /**
-     * Gets night mode status.
-     * If Follow System Preferences is enabled, will first use system theme.
-     * If disabled or not available, will use value stored din preferences
-     *
      * @returns {boolean} Night mode state
      */
     static getNightMode(): boolean {
@@ -158,9 +143,8 @@ export default class ThemeManager {
     }
 
     /**
-     * Get the current theme based on night mode and events
+     * Get the current theme based on night mode
-     *
+     * @returns {Object}
-     * @returns {Object} The current theme
      */
     static getCurrentTheme(): Object {
         if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
@@ -169,11 +153,6 @@ export default class ThemeManager {
             return ThemeManager.getBaseTheme()
     }
 
-    /**
-     * Get the theme based on night mode
-     *
-     * @return {Object} The theme
-     */
     static getBaseTheme() {
         if (ThemeManager.getNightMode())
             return ThemeManager.getDarkTheme();
@@ -182,8 +161,7 @@ export default class ThemeManager {
     }
 
     /**
-     * Sets the function to be called when the theme is changed (allows for general reload of the app)
+     * Set the function to be called when the theme is changed (allows for general reload of the app)
-     *
      * @param callback Function to call after theme change
      */
     setUpdateThemeCallback(callback: ?Function) {
@@ -193,7 +171,7 @@ export default class ThemeManager {
     /**
      * Set night mode and save it to preferences
      *
-     * @param isNightMode True to enable night mode, false to disable
+     * @param isNightMode Whether to enable night mode
      */
     setNightMode(isNightMode: boolean) {
         let nightModeKey = AsyncStorageManager.getInstance().preferences.nightMode.key;