Added support for favorite groups

package.json

@@ -45,13 +45,13 @@
     "react-native-gesture-handler": "~1.6.0",
     "react-native-image-modal": "^1.0.1",
     "react-native-modalize": "^1.3.6",
-    "react-native-paper": "^3.6.0",
+    "react-native-paper": "^3.8.0",
     "react-native-reanimated": "~1.7.0",
     "react-native-render-html": "^4.1.2",
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "~2.2.0",
     "react-native-webview": "8.1.1",
-    "react-navigation-collapsible": "^5.4.0",
+    "react-navigation-collapsible": "^5.5.0",
     "react-navigation-header-buttons": "^3.0.5"
   },
   "devDependencies": {

src/components/Custom/AnimatedBottomBar.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {StyleSheet, View} from "react-native";
-import {Button, IconButton, Surface, withTheme} from "react-native-paper";
+import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
 import AutoHideComponent from "./AutoHideComponent";
 
 type Props = {
@@ -41,8 +41,9 @@ class AnimatedBottomBar extends React.Component<Props, State> {
         this.displayModeIcons[DISPLAY_MODES.MONTH] = "calendar-range";
     }
 
-    shouldComponentUpdate(nextProps: Props) {
+    shouldComponentUpdate(nextProps: Props, nextState: State) {
-        return (nextProps.currentGroup !== this.props.currentGroup);
+        return (nextProps.currentGroup !== this.props.currentGroup)
+            || (nextState.currentMode !== this.state.currentMode);
     }
 
     onScroll = (event: Object) => {
@@ -85,13 +86,13 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                             style={{marginLeft: 5}}
                             onPress={() => this.props.onPress('today', undefined)}/>
                     </View>
-                        <Button
+                    <View style={styles.fabContainer}>
-                            icon="book-variant"
+                    <FAB
+                        style={styles.fab}
+                        icon="account-clock"
                         onPress={() => this.props.navigation.navigate('group-select')}
-                            style={{maxWidth: '40%'}}
+                    />
-                        >
+                    </View>
-                            {this.props.currentGroup.replace(/_/g, " ")}
-                        </Button>
                     <View style={{flexDirection: 'row'}}>
                         <IconButton
                             icon="chevron-left"
@@ -117,13 +118,25 @@ const styles = StyleSheet.create({
         width: '90%',
     },
     surface: {
+        position: 'relative',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         borderRadius: 50,
         elevation: 2,
-        padding: 10,
+    },
-        paddingHorizontal: 20,
+    fabContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        alignItems: "center",
+        width: '100%',
+        height: '100%'
+    },
+    fab: {
+        position: 'absolute',
+        alignSelf: 'center',
+        top: -10,
     }
 });
 

src/components/Custom/ErrorView.js

@@ -12,6 +12,9 @@ type Props = {
     route: Object,
     errorCode: number,
     onRefresh: Function,
+    icon: string,
+    message: string,
+    showRetryButton: boolean,
 }
 
 type State = {
@@ -27,6 +30,13 @@ class ErrorView extends React.PureComponent<Props, State> {
 
     showLoginButton: boolean;
 
+    static defaultProps = {
+        errorCode: 0,
+        icon: '',
+        message: '',
+        showRetryButton: true,
+    }
+
     state = {
         refreshing: false,
     };
@@ -38,6 +48,7 @@ class ErrorView extends React.PureComponent<Props, State> {
 
     generateMessage() {
         this.showLoginButton = false;
+        if (this.props.errorCode !== 0) {
             switch (this.props.errorCode) {
                 case ERROR_TYPE.BAD_CREDENTIALS:
                     this.message = i18n.t("errors.badCredentials");
@@ -73,6 +84,11 @@ class ErrorView extends React.PureComponent<Props, State> {
                     this.icon = "alert-circle-outline";
                     break;
             }
+        } else {
+            this.message = this.props.message;
+            this.icon = this.props.icon;
+        }
+
     }
 
     getRetryButton() {
@@ -91,7 +107,8 @@ class ErrorView extends React.PureComponent<Props, State> {
             {
                 screen: 'login',
                 params: {nextScreen: this.props.route.name}
-        })};
+            })
+    };
 
     getLoginButton() {
         return <Button
@@ -124,9 +141,11 @@ class ErrorView extends React.PureComponent<Props, State> {
                     }}>
                         {this.message}
                     </Subheading>
-                    {this.showLoginButton
+                    {this.props.showRetryButton
+                        ? (this.showLoginButton
                             ? this.getLoginButton()
-                        : this.getRetryButton()}
+                            : this.getRetryButton())
+                        : null}
                 </View>
             </View>
         );
@@ -148,6 +167,7 @@ const styles = StyleSheet.create({
     },
     subheading: {
         textAlign: 'center',
+        paddingHorizontal: 20
     },
     button: {
         marginTop: 10,

src/components/Lists/GroupListAccordion.js

@@ -1,15 +1,18 @@
 // @flow
 
 import * as React from 'react';
-import {List} from 'react-native-paper';
+import {IconButton, List, withTheme} from 'react-native-paper';
 import {FlatList} from "react-native";
 import {stringMatchQuery} from "../../utils/Search";
 
 type Props = {
     item: Object,
     onGroupPress: Function,
+    onFavoritePress: Function,
     currentSearchString: string,
+    favoriteNumber: number,
     height: number,
+    theme: Object,
 }
 
 type State = {
@@ -18,12 +21,13 @@ type State = {
 
 const LIST_ITEM_HEIGHT = 64;
 
-const REPLACE_REGEX = /_/g;
+class GroupListAccordion extends React.Component<Props, State> {
 
-export default class GroupListAccordion extends React.Component<Props, State> {
+    constructor(props) {
-
+        super(props);
-    state = {
+        this.state = {
-        expanded: false,
+            expanded: props.item.id === "0",
+        }
     }
 
     shouldComponentUpdate(nextProps: Props, nextSate: State) {
@@ -31,28 +35,37 @@ export default class GroupListAccordion extends React.Component<Props, State> {
             this.state.expanded = nextProps.currentSearchString.length > 0;
 
         return (nextProps.currentSearchString !== this.props.currentSearchString)
-            || (nextSate.expanded !== this.state.expanded);
+            || (nextSate.expanded !== this.state.expanded)
+            || (nextProps.favoriteNumber !== this.props.favoriteNumber);
     }
 
     onPress = () => this.setState({expanded: !this.state.expanded});
 
     keyExtractor = (item: Object) => item.id.toString();
 
+    isItemFavorite(item: Object) {
+        return item.isFav !== undefined && item.isFav;
+    }
+
     renderItem = ({item}: Object) => {
         if (stringMatchQuery(item.name, this.props.currentSearchString)) {
             const onPress = () => this.props.onGroupPress(item);
+            const onStartPress = () => this.props.onFavoritePress(item);
             return (
                 <List.Item
-                    title={item.name.replace(REPLACE_REGEX, " ")}
+                    title={item.name}
                     onPress={onPress}
                     left={props =>
                         <List.Icon
                             {...props}
                             icon={"chevron-right"}/>}
                     right={props =>
-                        <List.Icon
+                        <IconButton
                             {...props}
-                            icon={"star"}/>}
+                            icon={"star"}
+                            onPress={onStartPress}
+                            color={this.isItemFavorite(item) ? this.props.theme.colors.tetrisScore : props.color}
+                        />}
                     style={{
                         height: LIST_ITEM_HEIGHT,
                         justifyContent: 'center',
@@ -76,6 +89,14 @@ export default class GroupListAccordion extends React.Component<Props, State> {
                     height: this.props.height,
                     justifyContent: 'center',
                 }}
+                left={props =>
+                    item.id === "0"
+                    ? <List.Icon
+                        {...props}
+                        icon={"star"}
+                        color={this.props.theme.colors.tetrisScore}
+                    />
+                : null}
             >
                 {/*$FlowFixMe*/}
                 <FlatList
@@ -92,3 +113,5 @@ export default class GroupListAccordion extends React.Component<Props, State> {
         );
     }
 }
+
+export default withTheme(GroupListAccordion)

src/managers/AsyncStorageManager.js

@@ -84,6 +84,11 @@ export default class AsyncStorageManager {
             default: '',
             current: '',
         },
+        planexFavoriteGroups: {
+            key: 'planexFavoriteGroups',
+            default: '[]',
+            current: '',
+        },
     };
 
     /**

src/managers/DateManager.js

@@ -58,4 +58,8 @@ export default class DateManager {
         return this.daysOfWeek[date.getDay()] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear();
     }
 
+    static isWeekend(date: Date) {
+        return date.getDay() === 6 || date.getDay() === 0;
+    }
+
 }

src/navigation/MainTabNavigator.js

@@ -291,6 +291,9 @@ function PlanexStackComponent() {
                     options={({navigation}) => {
                         return {
                             title: 'GroupSelectionScreen',
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
                             ...TransitionPresets.ModalSlideFromBottomIOS,
                         };
                     }}
@@ -345,11 +348,14 @@ class TabNavigator extends React.Component<Props> {
             >
                 <Tab.Screen
                     name="proximo"
+                    option
                     component={ProximoStackComponent}
+                    options={{title: i18n.t('screens.proximo')}}
                 />
                 <Tab.Screen
                     name="planning"
                     component={PlanningStackComponent}
+                    options={{title: i18n.t('screens.planning')}}
                 />
                 <Tab.Screen
                     name="home"
@@ -359,10 +365,12 @@ class TabNavigator extends React.Component<Props> {
                 <Tab.Screen
                     name="proxiwash"
                     component={ProxiwashStackComponent}
+                    options={{title: i18n.t('screens.proxiwash')}}
                 />
                 <Tab.Screen
                     name="planex"
                     component={PlanexStackComponent}
+                    options={{title: "Planex"}}
                 />
             </Tab.Navigator>
         );

src/screens/GroupSelectionScreen.js

@@ -7,6 +7,7 @@ import {Searchbar, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../utils/Search";
 import WebSectionList from "../components/Lists/WebSectionList";
 import GroupListAccordion from "../components/Lists/GroupListAccordion";
+import AsyncStorageManager from "../managers/AsyncStorageManager";
 
 const LIST_ITEM_HEIGHT = 70;
 
@@ -19,6 +20,7 @@ type Props = {
 
 type State = {
     currentSearchString: string,
+    favoriteGroups: Array<Object>,
 };
 
 function sortName(a, b) {
@@ -30,6 +32,7 @@ function sortName(a, b) {
 }
 
 const GROUPS_URL = 'http://planex.insa-toulouse.fr/wsAdeGrp.php?projectId=1';
+const REPLACE_REGEX = /_/g;
 
 /**
  * Class defining proximo's article list of a certain category.
@@ -40,6 +43,7 @@ class GroupSelectionScreen extends React.Component<Props, State> {
         super(props);
         this.state = {
             currentSearchString: '',
+            favoriteGroups: JSON.parse(AsyncStorageManager.getInstance().preferences.planexFavoriteGroups.current),
         };
     }
 
@@ -92,6 +96,49 @@ class GroupSelectionScreen extends React.Component<Props, State> {
         });
     };
 
+    onListFavoritePress = (item: Object) => {
+        this.updateGroupFavorites(item);
+    };
+
+    isGroupInFavorites(group: Object) {
+        let isFav = false;
+        for (let i = 0; i < this.state.favoriteGroups.length; i++) {
+            if (group.id === this.state.favoriteGroups[i].id) {
+                isFav = true;
+                break;
+            }
+        }
+        return isFav;
+    }
+
+    removeGroupFromFavorites(favorites: Array<Object>, group: Object) {
+        for (let i = 0; i < favorites.length; i++) {
+            if (group.id === favorites[i].id) {
+                favorites.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    addGroupToFavorites(favorites: Array<Object>, group: Object) {
+        group.isFav = true;
+        favorites.push(group);
+        favorites.sort(sortName);
+    }
+
+    updateGroupFavorites(group: Object) {
+        let newFavorites = [...this.state.favoriteGroups]
+        if (this.isGroupInFavorites(group))
+            this.removeGroupFromFavorites(newFavorites, group);
+        else
+            this.addGroupToFavorites(newFavorites, group);
+        this.setState({favoriteGroups: newFavorites})
+        console.log(newFavorites);
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.planexFavoriteGroups.key,
+            JSON.stringify(newFavorites));
+    }
+
     shouldDisplayAccordion(item: Object) {
         let shouldDisplay = false;
         for (let i = 0; i < item.content.length; i++) {
@@ -115,7 +162,9 @@ class GroupSelectionScreen extends React.Component<Props, State> {
                 <GroupListAccordion
                     item={item}
                     onGroupPress={this.onListItemPress}
+                    onFavoritePress={this.onListFavoritePress}
                     currentSearchString={this.state.currentSearchString}
+                    favoriteNumber={this.state.favoriteGroups.length}
                     height={LIST_ITEM_HEIGHT}
                 />
             );
@@ -126,12 +175,21 @@ class GroupSelectionScreen extends React.Component<Props, State> {
     generateData(fetchedData: Object) {
         let data = [];
         for (let key in fetchedData) {
+            this.formatGroups(fetchedData[key]);
             data.push(fetchedData[key]);
         }
         data.sort(sortName);
+        data.unshift({name: "FAVORITES", id: "0", content: this.state.favoriteGroups});
         return data;
     }
 
+    formatGroups(item: Object) {
+        for (let i = 0; i < item.content.length; i++) {
+            item.content[i].name = item.content[i].name.replace(REPLACE_REGEX, " ")
+            item.content[i].isFav = this.isGroupInFavorites(item.content[i]);
+        }
+    }
+
     /**
      * Creates the dataset to be used in the FlatList
      *
@@ -159,7 +217,7 @@ class GroupSelectionScreen extends React.Component<Props, State> {
                     refreshOnFocus={false}
                     fetchUrl={GROUPS_URL}
                     renderItem={this.renderItem}
-                    updateData={this.state.currentSearchString}
+                    updateData={this.state.currentSearchString + this.state.favoriteGroups.length}
                     itemHeight={LIST_ITEM_HEIGHT}
                 />
             </View>

src/screens/Websites/PlanexScreen.js

@@ -13,6 +13,7 @@ import {dateToString, getTimeOnlyString} from "../../utils/Planning";
 import DateManager from "../../managers/DateManager";
 import AnimatedBottomBar from "../../components/Custom/AnimatedBottomBar";
 import {CommonActions} from "@react-navigation/native";
+import ErrorView from "../../components/Custom/ErrorView";
 
 type Props = {
     navigation: Object,
@@ -136,16 +137,18 @@ class PlanexScreen extends React.Component<Props, State> {
     /**
      * Defines custom injected JavaScript to improve the page display on mobile
      */
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
         this.webScreenRef = React.createRef();
         this.barRef = React.createRef();
 
         let currentGroup = AsyncStorageManager.getInstance().preferences.planexCurrentGroup.current;
         if (currentGroup === '')
-            currentGroup = {name: "SELECT GROUP", id: 0};
+            currentGroup = {name: "SELECT GROUP", id: -1};
-        else
+        else {
             currentGroup = JSON.parse(currentGroup);
+            props.navigation.setOptions({title: currentGroup.name})
+        }
         this.state = {
             bannerVisible:
                 AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
@@ -182,6 +185,7 @@ class PlanexScreen extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(
             AsyncStorageManager.getInstance().preferences.planexCurrentGroup.key,
             JSON.stringify(group));
+        this.props.navigation.setOptions({title: group.name})
         this.generateInjectedJS(group.id);
     }
 
@@ -190,6 +194,7 @@ class PlanexScreen extends React.Component<Props, State> {
             + OBSERVE_MUTATIONS_INJECTED
             + FULL_CALENDAR_SETTINGS
             + "displayAde(" + groupID + ");" // Reset Ade
+            + (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
             + LISTEN_TO_MESSAGES
             + INJECT_STYLE;
 
@@ -260,7 +265,19 @@ class PlanexScreen extends React.Component<Props, State> {
     };
 
     getWebView() {
+        const showWebview = this.state.currentGroup.id !== -1;
+
         return (
+            <View style={{height: '100%'}}>
+                {!showWebview
+                    ? <ErrorView
+                        {...this.props}
+                        icon={'account-clock'}
+                        message={i18n.t("planexScreen.noGroupSelected")}
+                        showRetryButton={false}
+                    />
+                    : null}
+
                 <WebViewScreen
                     ref={this.webScreenRef}
                     navigation={this.props.navigation}
@@ -269,6 +286,7 @@ class PlanexScreen extends React.Component<Props, State> {
                     onMessage={this.onMessage}
                     onScroll={this.onScroll}
                 />
+            </View>
         );
     }
 

translations/en.json

@@ -212,7 +212,8 @@
   "planexScreen": {
     "enableStartScreen": "Come here often? Set it as default screen!",
     "enableStartOK": "Yes please!",
-    "enableStartCancel": "Later"
+    "enableStartCancel": "Later",
+    "noGroupSelected": "No group selected. Please select your group using the big beautiful red button bellow."
   },
   "availableRoomScreen": {
     "normalRoom": "Work",

translations/fr.json

@@ -212,7 +212,8 @@
   "planexScreen": {
     "enableStartScreen": "Vous venez souvent ici ? Démarrez l'appli sur cette page!",
     "enableStartOK": "Oui svp!",
-    "enableStartCancel": "Plus tard"
+    "enableStartCancel": "Plus tard",
+    "noGroupSelected": "Pas de group sélectionné. Merci de choisir un groupe avec le beau bouton rouge ci-dessous."
   },
   "availableRoomScreen": {
     "normalRoom": "Travail",