Show information message when no group is selected

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,41 +48,47 @@ class ErrorView extends React.PureComponent<Props, State> {
 
     generateMessage() {
         this.showLoginButton = false;
-        switch (this.props.errorCode) {
-            case ERROR_TYPE.BAD_CREDENTIALS:
-                this.message = i18n.t("errors.badCredentials");
-                this.icon = "account-alert-outline";
-                break;
-            case ERROR_TYPE.BAD_TOKEN:
-                this.message = i18n.t("errors.badToken");
-                this.icon = "account-alert-outline";
-                this.showLoginButton = true;
-                break;
-            case ERROR_TYPE.NO_CONSENT:
-                this.message = i18n.t("errors.noConsent");
-                this.icon = "account-remove-outline";
-                break;
-            case ERROR_TYPE.BAD_INPUT:
-                this.message = i18n.t("errors.badInput");
-                this.icon = "alert-circle-outline";
-                break;
-            case ERROR_TYPE.FORBIDDEN:
-                this.message = i18n.t("errors.forbidden");
-                this.icon = "lock";
-                break;
-            case ERROR_TYPE.CONNECTION_ERROR:
-                this.message = i18n.t("errors.connectionError");
-                this.icon = "access-point-network-off";
-                break;
-            case ERROR_TYPE.SERVER_ERROR:
-                this.message = i18n.t("errors.serverError");
-                this.icon = "server-network-off";
-                break;
-            default:
-                this.message = i18n.t("errors.unknown");
-                this.icon = "alert-circle-outline";
-                break;
+        if (this.props.errorCode !== 0) {
+            switch (this.props.errorCode) {
+                case ERROR_TYPE.BAD_CREDENTIALS:
+                    this.message = i18n.t("errors.badCredentials");
+                    this.icon = "account-alert-outline";
+                    break;
+                case ERROR_TYPE.BAD_TOKEN:
+                    this.message = i18n.t("errors.badToken");
+                    this.icon = "account-alert-outline";
+                    this.showLoginButton = true;
+                    break;
+                case ERROR_TYPE.NO_CONSENT:
+                    this.message = i18n.t("errors.noConsent");
+                    this.icon = "account-remove-outline";
+                    break;
+                case ERROR_TYPE.BAD_INPUT:
+                    this.message = i18n.t("errors.badInput");
+                    this.icon = "alert-circle-outline";
+                    break;
+                case ERROR_TYPE.FORBIDDEN:
+                    this.message = i18n.t("errors.forbidden");
+                    this.icon = "lock";
+                    break;
+                case ERROR_TYPE.CONNECTION_ERROR:
+                    this.message = i18n.t("errors.connectionError");
+                    this.icon = "access-point-network-off";
+                    break;
+                case ERROR_TYPE.SERVER_ERROR:
+                    this.message = i18n.t("errors.serverError");
+                    this.icon = "server-network-off";
+                    break;
+                default:
+                    this.message = i18n.t("errors.unknown");
+                    this.icon = "alert-circle-outline";
+                    break;
+            }
+        } else {
+            this.message = this.props.message;
+            this.icon = this.props.icon;
         }
+
     }
 
     getRetryButton() {
@@ -88,10 +104,11 @@ class ErrorView extends React.PureComponent<Props, State> {
 
     goToLogin = () => {
         this.props.navigation.navigate("login",
-        {
-           screen: 'login',
-           params: {nextScreen: this.props.route.name}
-        })};
+            {
+                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.getLoginButton()
-                        : this.getRetryButton()}
+                    {this.props.showRetryButton
+                        ? (this.showLoginButton
+                            ? this.getLoginButton()
+                            : this.getRetryButton())
+                        : null}
                 </View>
             </View>
         );
@@ -148,6 +167,7 @@ const styles = StyleSheet.create({
     },
     subheading: {
         textAlign: 'center',
+        paddingHorizontal: 20
     },
     button: {
         marginTop: 10,

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,
@@ -143,7 +144,7 @@ class PlanexScreen extends React.Component<Props, State> {
 
         let currentGroup = AsyncStorageManager.getInstance().preferences.planexCurrentGroup.current;
         if (currentGroup === '')
-            currentGroup = {name: "SELECT GROUP", id: 0};
+            currentGroup = {name: "SELECT GROUP", id: -1};
         else
             currentGroup = JSON.parse(currentGroup);
         this.state = {
@@ -260,16 +261,26 @@ class PlanexScreen extends React.Component<Props, State> {
     };
 
     getWebView() {
-        return (
-            <WebViewScreen
-                ref={this.webScreenRef}
-                navigation={this.props.navigation}
-                url={PLANEX_URL}
-                customJS={this.customInjectedJS}
-                onMessage={this.onMessage}
-                onScroll={this.onScroll}
+        if (this.state.currentGroup.id !== -1) {
+            return (
+                <WebViewScreen
+                    ref={this.webScreenRef}
+                    navigation={this.props.navigation}
+                    url={PLANEX_URL}
+                    customJS={this.customInjectedJS}
+                    onMessage={this.onMessage}
+                    onScroll={this.onScroll}
+                />
+            );
+        } else {
+            return <ErrorView
+                {...this.props}
+                icon={'account-clock'}
+                message={i18n.t("planexScreen.noGroupSelected")}
+                showRetryButton={false}
             />
-        );
+        }
+
     }
 
     render() {

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",