mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-11-22 14:18:32 +03:00
Added welcome screen
This commit is contained in:
parent
aa5a24a6d2
commit
68d0d984f6
@ -661,4 +661,4 @@ SPEC CHECKSUMS:
|
||||
|
||||
PODFILE CHECKSUM: 84e32ce5543427579b8c72d77fd175fe29268d92
|
||||
|
||||
COCOAPODS: 1.9.3
|
||||
COCOAPODS: 1.8.4
|
||||
|
@ -73,6 +73,7 @@
|
||||
"react-native-image-zoom-viewer": "^2.2.27",
|
||||
"react-native-keyboard-aware-scroll-view": "^0.9.1",
|
||||
"react-native-linear-gradient": "^2.4.2",
|
||||
"react-native-modal": "^11.5.6",
|
||||
"react-native-modal-dropdown": "esteemapp/react-native-modal-dropdown",
|
||||
"react-native-modal-translucent": "^5.0.0",
|
||||
"react-native-navigation-bar-color": "^1.0.0",
|
||||
|
@ -107,6 +107,15 @@ export const removeAllUserData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
export const removeAllSCAccounts = async () => {
|
||||
try {
|
||||
await setItemToStorage(SC_ACCOUNTS, []);
|
||||
return true;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
export const setDraftPost = async (fields, username) => {
|
||||
try {
|
||||
let draft = await getItemFromStorage(DRAFT_SCHEMA);
|
||||
@ -593,6 +602,18 @@ export const getSCAccount = async (username) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const getAllSCAccounts = async () => {
|
||||
try {
|
||||
const scAccountStr = await getItemFromStorage(SC_ACCOUNTS);
|
||||
if (scAccountStr && scAccountStr.length > 0) {
|
||||
return scAccountStr;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
export const removeSCAccount = async (username) => {
|
||||
try {
|
||||
let scAccount = await getItemFromStorage(SC_ACCOUNTS);
|
||||
@ -621,3 +642,33 @@ export const getStorageType = async () => {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
export const getVersionForWelcomeModal = async () => {
|
||||
try {
|
||||
const application = await getItemFromStorage(APPLICATION_SCHEMA);
|
||||
if (application.versionForWelcomeModal) {
|
||||
return application.versionForWelcomeModal;
|
||||
}
|
||||
return 0;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
export const setVersionForWelcomeModal = async (version) => {
|
||||
try {
|
||||
const application = await getItemFromStorage(APPLICATION_SCHEMA);
|
||||
if (application) {
|
||||
application.versionForWelcomeModal = version;
|
||||
await setItemToStorage(APPLICATION_SCHEMA, application);
|
||||
return application;
|
||||
}
|
||||
const applicationData = {
|
||||
versionForWelcomeModal: version,
|
||||
};
|
||||
await setItemToStorage(APPLICATION_SCHEMA, { ...applicationData });
|
||||
return applicationData;
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
@ -3,6 +3,7 @@ import {
|
||||
ADD_OTHER_ACCOUNT,
|
||||
FETCH_ACCOUNT_FAIL,
|
||||
REMOVE_OTHER_ACCOUNT,
|
||||
REMOVE_ALL_OTHER_ACCOUNT,
|
||||
SET_GLOBAL_PROPS,
|
||||
UPDATE_CURRENT_ACCOUNT,
|
||||
UPDATE_UNREAD_ACTIVITY_COUNT,
|
||||
@ -41,6 +42,10 @@ export const removeOtherAccount = (data) => ({
|
||||
payload: data,
|
||||
});
|
||||
|
||||
export const removeAllOtherAccount = () => ({
|
||||
type: REMOVE_ALL_OTHER_ACCOUNT,
|
||||
});
|
||||
|
||||
export const setGlobalProps = (data) => ({
|
||||
type: SET_GLOBAL_PROPS,
|
||||
payload: data,
|
||||
|
@ -38,6 +38,7 @@ export const ADD_OTHER_ACCOUNT = 'ADD_OTHER_ACCOUNT';
|
||||
export const FETCH_ACCOUNT_FAIL = 'FETCH_ACCOUNT_FAIL';
|
||||
export const FETCHING_ACCOUNT = 'FETCHING_ACCOUNT';
|
||||
export const REMOVE_OTHER_ACCOUNT = 'REMOVE_OTHER_ACCOUNT';
|
||||
export const REMOVE_ALL_OTHER_ACCOUNT = 'REMOVE_ALL_OTHER_ACCOUNT';
|
||||
export const UPDATE_CURRENT_ACCOUNT = 'UPDATE_CURRENT_ACCOUNT';
|
||||
export const UPDATE_UNREAD_ACTIVITY_COUNT = 'UPDATE_UNREAD_ACTIVITY_COUNT';
|
||||
export const SET_PIN_CODE = 'SET_PIN_CODE';
|
||||
|
@ -7,6 +7,7 @@ import {
|
||||
UPDATE_CURRENT_ACCOUNT,
|
||||
UPDATE_UNREAD_ACTIVITY_COUNT,
|
||||
REMOVE_OTHER_ACCOUNT,
|
||||
REMOVE_ALL_OTHER_ACCOUNT,
|
||||
LOGOUT_FAIL,
|
||||
SET_GLOBAL_PROPS,
|
||||
} from '../constants/constants';
|
||||
@ -63,6 +64,12 @@ export default function (state = initialState, action) {
|
||||
otherAccounts: state.otherAccounts.filter((item) => item.username !== action.payload),
|
||||
};
|
||||
|
||||
case REMOVE_ALL_OTHER_ACCOUNT:
|
||||
return {
|
||||
...state,
|
||||
otherAccounts: [],
|
||||
};
|
||||
|
||||
case UPDATE_CURRENT_ACCOUNT:
|
||||
return {
|
||||
...state,
|
||||
|
@ -16,6 +16,7 @@ import {
|
||||
} from 'react-native-dark-mode';
|
||||
import messaging from '@react-native-firebase/messaging';
|
||||
import PushNotification from 'react-native-push-notification';
|
||||
import VersionNumber from 'react-native-version-number';
|
||||
|
||||
// Constants
|
||||
import AUTH_TYPE from '../../../constants/authType';
|
||||
@ -34,6 +35,10 @@ import {
|
||||
setAuthStatus,
|
||||
removeSCAccount,
|
||||
setExistUser,
|
||||
getVersionForWelcomeModal,
|
||||
setVersionForWelcomeModal,
|
||||
getAllSCAccounts,
|
||||
removeAllSCAccounts,
|
||||
} from '../../../realm/realm';
|
||||
import { getUser, getPost } from '../../../providers/steem/dsteem';
|
||||
import { switchAccount } from '../../../providers/steem/auth';
|
||||
@ -47,6 +52,7 @@ import {
|
||||
updateUnreadActivityCount,
|
||||
removeOtherAccount,
|
||||
fetchGlobalProperties,
|
||||
removeAllOtherAccount,
|
||||
} from '../../../redux/actions/accountAction';
|
||||
import {
|
||||
activeApplication,
|
||||
@ -87,6 +93,7 @@ export const setPreviousAppState = () => {
|
||||
|
||||
let firebaseOnNotificationOpenedAppListener = null;
|
||||
let firebaseOnMessageListener = null;
|
||||
let scAccounts = [];
|
||||
|
||||
class ApplicationContainer extends Component {
|
||||
constructor(props) {
|
||||
@ -97,11 +104,14 @@ class ApplicationContainer extends Component {
|
||||
isIos: Platform.OS !== 'android',
|
||||
isThemeReady: false,
|
||||
appState: AppState.currentState,
|
||||
showWelcomeModal: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
const { isIos } = this.state;
|
||||
const { appVersion } = VersionNumber;
|
||||
|
||||
this._setNetworkListener();
|
||||
|
||||
Linking.addEventListener('url', this._handleOpenURL);
|
||||
@ -123,6 +133,15 @@ class ApplicationContainer extends Component {
|
||||
this._createPushListener();
|
||||
|
||||
if (!isIos) BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
|
||||
|
||||
getVersionForWelcomeModal().then((version) => {
|
||||
if (version < parseFloat(appVersion)) {
|
||||
this.setState({ showWelcomeModal: true });
|
||||
getAllSCAccounts().then((accounts) => {
|
||||
scAccounts = accounts;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
@ -644,6 +663,41 @@ class ApplicationContainer extends Component {
|
||||
dispatch(updateCurrentAccount(_currentAccount));
|
||||
};
|
||||
|
||||
_handleWelcomeModalButtonPress = () => {
|
||||
const { dispatch, otherAccounts } = this.props;
|
||||
const { appVersion } = VersionNumber;
|
||||
|
||||
const accountsWithoutSC = otherAccounts.filter(
|
||||
(account) => !scAccounts.includes(account.username),
|
||||
);
|
||||
|
||||
// setVersionForWelcomeModal(appVersion);
|
||||
|
||||
if (scAccounts.length > 0) {
|
||||
scAccounts.forEach((el) => {
|
||||
dispatch(removeOtherAccount(el.username));
|
||||
});
|
||||
removeAllSCAccounts().then(() => {
|
||||
if (accountsWithoutSC.length > 0) {
|
||||
this._switchAccount(accountsWithoutSC(0));
|
||||
} else {
|
||||
dispatch(updateCurrentAccount({}));
|
||||
dispatch(login(false));
|
||||
removePinCode();
|
||||
setAuthStatus({ isLoggedIn: false });
|
||||
setExistUser(false);
|
||||
dispatch(removeAllOtherAccount());
|
||||
dispatch(logoutDone());
|
||||
}
|
||||
|
||||
navigate({ routeName: ROUTES.SCREENS.LOGIN });
|
||||
this.setState({ showWelcomeModal: false });
|
||||
});
|
||||
} else {
|
||||
this.setState({ showWelcomeModal: false });
|
||||
}
|
||||
};
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
const {
|
||||
isDarkTheme: _isDarkTheme,
|
||||
@ -698,7 +752,7 @@ class ApplicationContainer extends Component {
|
||||
isPinCodeRequire,
|
||||
rcOffer,
|
||||
} = this.props;
|
||||
const { isRenderRequire, isReady, isThemeReady } = this.state;
|
||||
const { isRenderRequire, isReady, isThemeReady, showWelcomeModal } = this.state;
|
||||
|
||||
return (
|
||||
children &&
|
||||
@ -712,6 +766,8 @@ class ApplicationContainer extends Component {
|
||||
locale: selectedLanguage,
|
||||
rcOffer,
|
||||
toastNotification,
|
||||
showWelcomeModal,
|
||||
handleWelcomeModalButtonPress: this._handleWelcomeModalButtonPress,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import { Text } from 'react-native';
|
||||
import SplashScreen from 'react-native-splash-screen';
|
||||
import ApplicationScreen from './screen/applicationScreen';
|
||||
import ApplicationContainer from './container/applicationContainer';
|
||||
|
||||
import Launch from '../launch';
|
||||
import ApplicationContainer from './container/applicationContainer';
|
||||
import WelcomeScreen from './screen/welcomeScreen';
|
||||
import ApplicationScreen from './screen/applicationScreen';
|
||||
import LaunchScreen from '../launch';
|
||||
import { Modal } from '../../components';
|
||||
import { PinCode } from '../pinCode';
|
||||
|
||||
@ -31,7 +33,11 @@ const Application = () => {
|
||||
locale,
|
||||
rcOffer,
|
||||
toastNotification,
|
||||
showWelcomeModal,
|
||||
handleWelcomeModalButtonPress,
|
||||
}) => {
|
||||
const _isAppReady = !showAnimation && isReady && isRenderRequire && isThemeReady;
|
||||
console.log('_isAppReady :>> ', _isAppReady);
|
||||
return (
|
||||
<Fragment>
|
||||
<Modal
|
||||
@ -42,6 +48,19 @@ const Application = () => {
|
||||
>
|
||||
<PinCode />
|
||||
</Modal>
|
||||
<Modal
|
||||
isOpen={!isPinCodeRequire && showWelcomeModal && _isAppReady}
|
||||
isFullScreen
|
||||
swipeToClose={false}
|
||||
backButtonClose={false}
|
||||
handleOnModalClose={() => console.log('handleOnModalClose :>> ')}
|
||||
onDismiss={() => console.log('onDismiss :>> ')}
|
||||
onRequestClose={() => {
|
||||
console.log('onRequestClose :>> ');
|
||||
}}
|
||||
>
|
||||
<WelcomeScreen handleButtonPress={handleWelcomeModalButtonPress} />
|
||||
</Modal>
|
||||
{isThemeReady && isRenderRequire && (
|
||||
<ApplicationScreen
|
||||
isConnected={isConnected}
|
||||
@ -52,7 +71,7 @@ const Application = () => {
|
||||
rcOffer={rcOffer}
|
||||
/>
|
||||
)}
|
||||
{(showAnimation || !isReady || !isRenderRequire || !isThemeReady) && <Launch />}
|
||||
{!_isAppReady && <LaunchScreen />}
|
||||
</Fragment>
|
||||
);
|
||||
}}
|
||||
|
@ -1,9 +1,10 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { StatusBar, Platform, View, Alert } from 'react-native';
|
||||
import { StatusBar, Platform, View, Alert, Text, Modal, TouchableHighlight } from 'react-native';
|
||||
import EStyleSheet from 'react-native-extended-stylesheet';
|
||||
import { connect } from 'react-redux';
|
||||
import { createAppContainer } from 'react-navigation';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import VersionNumber from 'react-native-version-number';
|
||||
|
||||
import AppNavitation from '../../../navigation/routes';
|
||||
import { setTopLevelNavigator, navigate } from '../../../navigation/service';
|
||||
@ -13,6 +14,7 @@ import {
|
||||
toastNotification as toastNotificationAction,
|
||||
setRcOffer,
|
||||
} from '../../../redux/actions/uiAction';
|
||||
import { getVersionForWelcomeModal } from '../../../realm/realm';
|
||||
|
||||
import ROUTES from '../../../constants/routeNames';
|
||||
|
||||
@ -30,9 +32,20 @@ class ApplicationScreen extends Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
isShowToastNotification: false,
|
||||
showWelcomeModal: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { appVersion } = VersionNumber;
|
||||
|
||||
getVersionForWelcomeModal().then((version) => {
|
||||
if (version < parseFloat(appVersion)) {
|
||||
this.setState({ showWelcomeModal: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { rcOffer, dispatch, intl } = this.props;
|
||||
const { rcOffer: rcOfferPrev } = prevProps;
|
||||
@ -88,7 +101,7 @@ class ApplicationScreen extends Component {
|
||||
|
||||
render() {
|
||||
const { isConnected, isDarkTheme, toastNotification, isReady } = this.props;
|
||||
const { isShowToastNotification } = this.state;
|
||||
const { isShowToastNotification, showWelcomeModal } = this.state;
|
||||
const barStyle = isDarkTheme ? 'light-content' : 'dark-content';
|
||||
const barColor = isDarkTheme ? '#1e2835' : '#fff';
|
||||
|
||||
@ -106,6 +119,32 @@ class ApplicationScreen extends Component {
|
||||
setTopLevelNavigator(navigatorRef);
|
||||
}}
|
||||
/>
|
||||
<Modal
|
||||
animationType="slide"
|
||||
visible={false}
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={() => {
|
||||
Alert.alert('Modal has been closed.');
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text>Hello World!</Text>
|
||||
<TouchableHighlight
|
||||
onPress={() => {
|
||||
this.setState({ showWelcomeModal: !showWelcomeModal });
|
||||
}}
|
||||
>
|
||||
<Text>Hide Modal</Text>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
|
||||
{isShowToastNotification && (
|
||||
|
71
src/screens/application/screen/welcomeScreen.js
Normal file
71
src/screens/application/screen/welcomeScreen.js
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { Text, Image, View } from 'react-native';
|
||||
import EStyleSheet from 'react-native-extended-stylesheet';
|
||||
|
||||
import { Icon, MainButton } from '../../../components';
|
||||
|
||||
import styles from './welcomeStyles';
|
||||
|
||||
const WelcomeScreen = ({ handleButtonPress }) => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Image
|
||||
style={{ width: 205, height: 200, alignSelf: 'center' }}
|
||||
source={require('../../../assets/ecency-logo.png')}
|
||||
/>
|
||||
<View>
|
||||
<Text style={styles.welcomeText}>Welcome to</Text>
|
||||
<Text style={styles.ecencyText}>Ecency</Text>
|
||||
</View>
|
||||
<View style={styles.sectionRow}>
|
||||
<Icon
|
||||
iconType="SimpleLineIcons"
|
||||
name="question"
|
||||
color={EStyleSheet.value('$primaryBlue')}
|
||||
size={60}
|
||||
/>
|
||||
<View>
|
||||
<Text style={styles.sectionTitle}>Lorem ipsum dolor</Text>
|
||||
<Text style={styles.sectionText}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus eget arcu
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.sectionRow}>
|
||||
<Icon
|
||||
iconType="SimpleLineIcons"
|
||||
name="question"
|
||||
color={EStyleSheet.value('$primaryBlue')}
|
||||
size={60}
|
||||
/>
|
||||
<View>
|
||||
<Text style={styles.sectionTitle}>Lorem ipsum dolor</Text>
|
||||
<Text style={styles.sectionText}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus eget arcu
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.sectionRow}>
|
||||
<Icon
|
||||
iconType="SimpleLineIcons"
|
||||
name="question"
|
||||
color={EStyleSheet.value('$primaryBlue')}
|
||||
size={60}
|
||||
/>
|
||||
<View>
|
||||
<Text style={styles.sectionTitle}>Lorem ipsum dolor</Text>
|
||||
<Text style={styles.sectionText}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus eget arcu
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<MainButton
|
||||
onPress={handleButtonPress}
|
||||
style={{ alignSelf: 'center', paddingHorizontal: 30 }}
|
||||
text="Start to Ecency"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomeScreen;
|
33
src/screens/application/screen/welcomeStyles.js
Normal file
33
src/screens/application/screen/welcomeStyles.js
Normal file
@ -0,0 +1,33 @@
|
||||
import EStyleSheet from 'react-native-extended-stylesheet';
|
||||
|
||||
export default EStyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: '5%',
|
||||
paddingHorizontal: 40,
|
||||
},
|
||||
welcomeText: {
|
||||
fontSize: 34,
|
||||
},
|
||||
ecencyText: {
|
||||
fontSize: 34,
|
||||
color: '$primaryBlue',
|
||||
},
|
||||
sectionRow: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: '600',
|
||||
marginLeft: 10,
|
||||
},
|
||||
sectionText: {
|
||||
fontSize: 15,
|
||||
marginLeft: 10,
|
||||
marginRight: 45,
|
||||
},
|
||||
flex1: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
15
yarn.lock
15
yarn.lock
@ -7427,6 +7427,13 @@ react-native-actionsheet@esteemapp/react-native-actionsheet:
|
||||
version "2.4.2"
|
||||
resolved "https://codeload.github.com/esteemapp/react-native-actionsheet/tar.gz/c74540db08a4c2049ee9c8a8077b5c476b536e2c"
|
||||
|
||||
react-native-animatable@1.3.3:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
|
||||
integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-native-autoheight-webview@^1.3.4, react-native-autoheight-webview@^1.4.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.5.1.tgz#67cbfb672212d93dedecf723d1914cbc40287545"
|
||||
@ -7540,6 +7547,14 @@ react-native-modal-translucent@^5.0.0:
|
||||
resolved "https://registry.yarnpkg.com/react-native-modal-translucent/-/react-native-modal-translucent-5.0.0.tgz#8b35cfa4189dce776c77a925b00ad19d965bd0a2"
|
||||
integrity sha512-xhJAlq4uCE7jPEIPxGS1WNiRIm5DCrZEO3SF88moTOm6b4/wfFEANf+lMsVkQf9b9dsQ6Em4nq4uAoejtbHb2A==
|
||||
|
||||
react-native-modal@^11.5.6:
|
||||
version "11.5.6"
|
||||
resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.5.6.tgz#bb25a78c35a5e24f45de060e5f64284397d38a87"
|
||||
integrity sha512-APGNfbvgC4hXbJqcSADu79GLoMKIHUmgR3fDQ7rCGZNBypkStSP8imZ4PKK/OzIZZfjGU9aP49jhMgGbhY9KHA==
|
||||
dependencies:
|
||||
prop-types "^15.6.2"
|
||||
react-native-animatable "1.3.3"
|
||||
|
||||
react-native-navigation-bar-color@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-1.0.0.tgz#04ff752a58049af93ceea9ccf266b8d3fbc6514a"
|
||||
|
Loading…
Reference in New Issue
Block a user