Improved banners and added one on the home screen

This commit is contained in:
Arnaud Vergnet 2020-06-26 15:53:49 +02:00
parent 57f7716700
commit 06d01e98b0
6 changed files with 117 additions and 23 deletions

View file

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

View file

@ -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));

View file

@ -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));

View file

@ -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}
/>}
>

View file

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

View file

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