Improved banners and added one on the home screen

src/managers/AsyncStorageManager.js

@@ -59,6 +59,11 @@ export default class AsyncStorageManager {
             default: 'home',
             current: '',
         },
+        homeShowBanner: {
+            key: 'homeShowBanner',
+            default: '1',
+            current: '',
+        },
         proxiwashShowBanner: {
             key: 'proxiwashShowBanner',
             default: '1',

src/screens/Home/HomeScreen.js

@@ -5,7 +5,7 @@ import {FlatList} from 'react-native';
 import i18n from "i18n-js";
 import DashboardItem from "../../components/Home/EventDashboardItem";
 import WebSectionList from "../../components/Screens/WebSectionList";
-import {withTheme} from 'react-native-paper';
+import {Avatar, Banner, withTheme} from 'react-native-paper';
 import FeedItem from "../../components/Home/FeedItem";
 import SquareDashboardItem from "../../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../../components/Home/PreviewEventDashboardItem";
@@ -19,6 +19,9 @@ import type {CustomTheme} from "../../managers/ThemeManager";
 import {View} from "react-native-animatable";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
+import {withCollapsible} from "../../utils/withCollapsible";
+import {Collapsible} from "react-navigation-collapsible";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
 // import DATA from "../dashboard_data.json";
 
 
@@ -95,10 +98,12 @@ type Props = {
     navigation: StackNavigationProp,
     route: { params: any, ... },
     theme: CustomTheme,
+    collapsibleStack: Collapsible,
 }
 
 type State = {
     dialogVisible: boolean,
+    bannerVisible: boolean,
 }
 
 /**
@@ -115,6 +120,7 @@ class HomeScreen extends React.Component<Props, State> {
 
     state = {
         dialogVisible: false,
+        bannerVisible: false,
     }
 
     constructor(props) {
@@ -140,6 +146,11 @@ class HomeScreen extends React.Component<Props, State> {
         this.props.navigation.addListener('focus', this.onScreenFocus);
         // Handle link open when home is focused
         this.props.navigation.addListener('state', this.handleNavigationParams);
+        setTimeout(this.onBannerTimeout, 2000);
+    }
+
+    onBannerTimeout = () => {
+        this.setState({bannerVisible: AsyncStorageManager.getInstance().preferences.homeShowBanner.current === "1"})
     }
 
     onScreenFocus = () => {
@@ -535,22 +546,46 @@ class HomeScreen extends React.Component<Props, State> {
             this.fabRef.current.onScroll(event);
     };
 
+    /**
+     * 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(
+            AsyncStorageManager.getInstance().preferences.homeShowBanner.key,
+            '0'
+        );
+    };
+
+    onLoginBanner = () => {
+        this.onHideBanner();
+        this.props.navigation.navigate("login", {nextScreen: "profile"});
+    }
+
     render() {
+        const {containerPaddingTop} = this.props.collapsibleStack;
         return (
             <View
                 style={{flex: 1}}
             >
-                <WebSectionList
-                    {...this.props}
-                    createDataset={this.createDataset}
-                    autoRefreshTime={REFRESH_TIME}
-                    refreshOnFocus={true}
-                    fetchUrl={DATA_URL}
-                    renderItem={this.getRenderItem}
-                    itemHeight={FEED_ITEM_HEIGHT}
-                    onScroll={this.onScroll}
-                    showError={false}
-                />
+                <View style={{
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                }}>
+                    <WebSectionList
+                        {...this.props}
+                        createDataset={this.createDataset}
+                        autoRefreshTime={REFRESH_TIME}
+                        refreshOnFocus={true}
+                        fetchUrl={DATA_URL}
+                        renderItem={this.getRenderItem}
+                        itemHeight={FEED_ITEM_HEIGHT}
+                        onScroll={this.onScroll}
+                        showError={false}
+                    />
+                </View>
                 <AnimatedFAB
                     {...this.props}
                     ref={this.fabRef}
@@ -562,9 +597,32 @@ class HomeScreen extends React.Component<Props, State> {
                     visible={this.state.dialogVisible}
                     onDismiss={this.hideDisconnectDialog}
                 />
+                <Banner
+                    style={{
+                        marginTop: containerPaddingTop,
+                        backgroundColor: this.props.theme.colors.surface
+                    }}
+                    visible={this.state.bannerVisible}
+                    actions={[
+                        {
+                            label: i18n.t('homeScreen.loginBanner.login'),
+                            onPress: this.onLoginBanner,
+                        },
+                        {
+                            label: i18n.t('homeScreen.loginBanner.later'),
+                            onPress: this.onHideBanner,
+                        },
+                    ]}
+                    icon={() => <Avatar.Icon
+                        icon={'login'}
+                        size={50}
+                    />}
+                >
+                    {i18n.t('homeScreen.loginBanner.message')}
+                </Banner>
             </View>
         );
     }
 }
 
-export default withTheme(HomeScreen);
+export default withCollapsible(withTheme(HomeScreen));

src/screens/Planex/PlanexScreen.js

@@ -150,9 +150,7 @@ class PlanexScreen extends React.Component<Props, State> {
             props.navigation.setOptions({title: currentGroup.name})
         }
         this.state = {
-            bannerVisible:
-                AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
-                AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
+            bannerVisible: false,
             dialogVisible: false,
             dialogTitle: "",
             dialogMessage: "",
@@ -163,6 +161,15 @@ class PlanexScreen extends React.Component<Props, State> {
 
     componentDidMount() {
         this.props.navigation.addListener('focus', this.onScreenFocus);
+        setTimeout(this.onBannerTimeout, 2000);
+    }
+
+    onBannerTimeout = () => {
+        this.setState({
+            bannerVisible:
+                AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
+                AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex'
+        })
     }
 
     onScreenFocus = () => {
@@ -315,7 +322,10 @@ class PlanexScreen extends React.Component<Props, State> {
                         : <View style={{height: '100%'}}>{this.getWebView()}</View>}
                 </View>
                 <Banner
-                    style={{marginTop: containerPaddingTop,}}
+                    style={{
+                        marginTop: containerPaddingTop,
+                        backgroundColor: this.props.theme.colors.surface
+                    }}
                     visible={this.state.bannerVisible}
                     actions={[
                         {
@@ -329,7 +339,7 @@ class PlanexScreen extends React.Component<Props, State> {
 
                     ]}
                     icon={() => <Avatar.Icon
-                        icon={'information'}
+                        icon={'power'}
                         size={40}
                     />}
                 >
@@ -351,4 +361,4 @@ class PlanexScreen extends React.Component<Props, State> {
     }
 }
 
-export default withCollapsible(withTheme(PlanexScreen));
+export default withCollapsible(withTheme(PlanexScreen));

src/screens/Proxiwash/ProxiwashScreen.js

@@ -68,7 +68,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
         refreshing: false,
         modalCurrentDisplayItem: null,
         machinesWatched: JSON.parse(AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current),
-        bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1',
+        bannerVisible: false,
     };
 
     /**
@@ -107,6 +107,11 @@ class ProxiwashScreen extends React.Component<Props, State> {
                     <Item title="information" iconName="information" onPress={this.onAboutPress}/>
                 </MaterialHeaderButtons>,
         });
+        setTimeout(this.onBannerTimeout, 2000);
+    }
+
+    onBannerTimeout = () => {
+        this.setState({bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === "1"})
     }
 
     /**
@@ -417,16 +422,19 @@ class ProxiwashScreen extends React.Component<Props, State> {
                         updateData={this.state.machinesWatched.length}/>
                 </View>
                 <Banner
-                    style={{marginTop: containerPaddingTop,}}
+                    style={{
+                        marginTop: containerPaddingTop,
+                        backgroundColor: this.props.theme.colors.surface
+                    }}
                     visible={this.state.bannerVisible}
                     actions={[
                         {
-                            label: 'OK',
+                            label: i18n.t('proxiwashScreen.bannerButton'),
                             onPress: this.onHideBanner,
                         },
                     ]}
                     icon={() => <Avatar.Icon
-                        icon={'information'}
+                        icon={'bell'}
                         size={40}
                     />}
                 >

translations/en.json

@@ -109,6 +109,11 @@
       "amicaleTitle": "The Amicale",
       "amicaleConnect": "Login",
       "amicaleConnected": "See available services"
+    },
+    "loginBanner": {
+      "login": "Login",
+      "later": "Later",
+      "message": "Login to your Amicale account to get access to more services!"
     }
   },
   "aboutScreen": {
@@ -174,6 +179,7 @@
     "enableNotificationsTip": "Click on a running machine to enable notifications",
     "numAvailable": "available",
     "numAvailablePlural": "available",
+    "bannerButton": "Got it!",
     "modal": {
       "enableNotifications": "Notify me",
       "disableNotifications": "Stop notifications",

translations/fr.json

@@ -109,7 +109,13 @@
       "amicaleTitle": "L'Amicale",
       "amicaleConnect": "Se connecter",
       "amicaleConnected": "Voir les services disponibles"
+    },
+    "loginBanner": {
+      "login": "Se Connecter",
+      "later": "Plus Tard",
+      "message": "Connectez-vous à votre compte Amicale pour profiter de plus de services !"
     }
+
   },
   "aboutScreen": {
     "buttonDesc": "Informations sur l'appli et son créateur",
@@ -174,6 +180,7 @@
     "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications",
     "numAvailable": "disponible",
     "numAvailablePlural": "disponibles",
+    "bannerButton": "Compris !",
     "modal": {
       "enableNotifications": "Me Notifier",
       "disableNotifications": "Désactiver les  notifications",