From 06d01e98b08fff55f5091583b7a85ffd1efab39d Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Fri, 26 Jun 2020 15:53:49 +0200 Subject: [PATCH] Improved banners and added one on the home screen --- src/managers/AsyncStorageManager.js | 5 ++ src/screens/Home/HomeScreen.js | 84 ++++++++++++++++++++---- src/screens/Planex/PlanexScreen.js | 22 +++++-- src/screens/Proxiwash/ProxiwashScreen.js | 16 +++-- translations/en.json | 6 ++ translations/fr.json | 7 ++ 6 files changed, 117 insertions(+), 23 deletions(-) diff --git a/src/managers/AsyncStorageManager.js b/src/managers/AsyncStorageManager.js index 7f9b22c..20af112 100644 --- a/src/managers/AsyncStorageManager.js +++ b/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', diff --git a/src/screens/Home/HomeScreen.js b/src/screens/Home/HomeScreen.js index 3ee1faa..7752fd7 100644 --- a/src/screens/Home/HomeScreen.js +++ b/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 { state = { dialogVisible: false, + bannerVisible: false, } constructor(props) { @@ -140,6 +146,11 @@ class HomeScreen extends React.Component { 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 { 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 ( - + + + { visible={this.state.dialogVisible} onDismiss={this.hideDisconnectDialog} /> + } + > + {i18n.t('homeScreen.loginBanner.message')} + ); } } -export default withTheme(HomeScreen); +export default withCollapsible(withTheme(HomeScreen)); diff --git a/src/screens/Planex/PlanexScreen.js b/src/screens/Planex/PlanexScreen.js index 51b34e6..e05f5b2 100644 --- a/src/screens/Planex/PlanexScreen.js +++ b/src/screens/Planex/PlanexScreen.js @@ -150,9 +150,7 @@ class PlanexScreen extends React.Component { 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 { 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 { : {this.getWebView()}} { ]} icon={() => } > @@ -351,4 +361,4 @@ class PlanexScreen extends React.Component { } } -export default withCollapsible(withTheme(PlanexScreen)); \ No newline at end of file +export default withCollapsible(withTheme(PlanexScreen)); diff --git a/src/screens/Proxiwash/ProxiwashScreen.js b/src/screens/Proxiwash/ProxiwashScreen.js index a0d72a3..3d6df27 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.js +++ b/src/screens/Proxiwash/ProxiwashScreen.js @@ -68,7 +68,7 @@ class ProxiwashScreen extends React.Component { 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 { , }); + setTimeout(this.onBannerTimeout, 2000); + } + + onBannerTimeout = () => { + this.setState({bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === "1"}) } /** @@ -417,16 +422,19 @@ class ProxiwashScreen extends React.Component { updateData={this.state.machinesWatched.length}/> } > diff --git a/translations/en.json b/translations/en.json index a8d805e..d73f040 100644 --- a/translations/en.json +++ b/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", diff --git a/translations/fr.json b/translations/fr.json index 33bd6de..8f258d1 100644 --- a/translations/fr.json +++ b/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",