ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-19 11:21:41 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

created login container && enhanced points

Browse Source
This commit is contained in:
ue 2019-11-17 15:40:59 +03:00
parent 502acc85c5
commit bfd2d9f60d
20 changed files with 288 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/horizontalIconList/horizontalIconListStyles.js Normal file
View File

@ -0,0 +1,78 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
iconsWrapper: {
marginVertical: 24,
marginHorizontal: 32,
justifyContent: 'center',
alignSelf: 'center',
flexDirection: 'row',
},
iconsList: {
height: 55,
},
subText: {
color: '$darkIconColor',
fontSize: 8,
justifyContent: 'center',
alignSelf: 'center',
marginTop: 5,
},
iconWrapper: {
marginHorizontal: 16,
width: 36,
height: 36,
borderRadius: 36 / 2,
backgroundColor: '$primaryLightBackground',
justifyContent: 'center',
alignItems: 'center',
},
iconButton: {
marginTop: 1,
marginLeft: 1,
},
icon: {
fontSize: 24,
color: '$primaryDarkText',
},
badge: {
position: 'absolute',
right: -9,
top: 20,
backgroundColor: '$primaryBlue',
justifyContent: 'center',
alignItems: 'center',
padding: 2,
height: 12,
minWidth: 18,
borderRadius: 12 / 2,
},
badgeText: {
fontSize: 8,
color: '$white',
fontWeight: '600',
},
popoverDetails: {
flexDirection: 'row',
height: 130,
width: '$deviceWidth / 2',
borderRadius: 20,
paddingHorizontal: 26,
backgroundColor: '$primaryBackgroundColor',
},
arrow: {
borderTopColor: '$primaryBackgroundColor',
},
popoverWrapper: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
overlay: {
backgroundColor: '#403c4449',
},
popoverText: {
color: '$primaryDarkText',
},
});

84
src/components/horizontalIconList/horizontalIconListView.js Normal file
View File

@ -0,0 +1,84 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { View, FlatList, TouchableOpacity, Text } from 'react-native';
import { Popover, PopoverController } from 'react-native-modal-popover';
import get from 'lodash/get';
import styles from './horizontalIconListStyles';
import { IconButton } from '..';
const HorizontalIconList = ({ options, optionsKeys }) => {
const intl = useIntl();
const _getTranslation = id => {
let translation;
try {
translation = intl.formatMessage({ id });
} catch (error) {
translation = '';
}
return translation;
};
return (
<View style={styles.iconsWrapper}>
<FlatList
style={styles.iconsList}
data={optionsKeys}
keyExtractor={item => get(item, 'type', Math.random()).toString()}
horizontal
renderItem={({ item }) => (
<PopoverController key={get(item, 'type')}>
{({
openPopover,
closePopover,
popoverVisible,
setPopoverAnchor,
popoverAnchorRect,
}) => (
<View styles={styles.iconWrapper} key={get(item, 'type')}>
<View style={styles.iconWrapper}>
<TouchableOpacity ref={setPopoverAnchor} onPress={openPopover}>
<IconButton
iconStyle={styles.icon}
style={styles.iconButton}
iconType={get(options[get(item, 'type')], 'iconType')}
name={get(options[get(item, 'type')], 'icon')}
badgeCount={get(options[get(item, 'type')], 'point')}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
disabled
/>
</TouchableOpacity>
</View>
<Text style={styles.subText}>
{_getTranslation(get(options[get(item, 'type')], 'nameKey'))}
</Text>
<Popover
backgroundStyle={styles.overlay}
contentStyle={styles.popoverDetails}
arrowStyle={styles.arrow}
visible={popoverVisible}
onClose={() => closePopover()}
fromRect={popoverAnchorRect}
placement="top"
supportedOrientations={['portrait', 'landscape']}
>
<View style={styles.popoverWrapper}>
<Text style={styles.popoverText}>
{_getTranslation(get(options[get(item, 'type')], 'descriptionKey'))}
</Text>
</View>
</Popover>
</View>
)}
</PopoverController>
)}
/>
</View>
);
};
export { HorizontalIconList };

2
src/components/index.js
View File

@ -51,6 +51,7 @@ import PostButton from './postButton/postButtonView';
import ProfileEditForm from './profileEditForm/profileEditFormView';
import ScaleSlider from './scaleSlider/scaleSliderView';
import { ProductItemLine } from './productItemLine/productItemLineView';
import { HorizontalIconList } from './horizontalIconList/horizontalIconListView';
// View
import { Comment } from './comment';
@ -187,4 +188,5 @@ export {
WalletDetailsPlaceHolder,
WalletLineItem,
WalletUnclaimedPlaceHolder,
HorizontalIconList,
};

72
src/components/points/view/pointsStyles.js
View File

@ -37,59 +37,10 @@ export default EStyleSheet.create({
alignSelf: 'center',
marginTop: 5,
},
iconsWrapper: {
marginVertical: 24,
marginHorizontal: 32,
justifyContent: 'center',
alignSelf: 'center',
flexDirection: 'row',
},
iconsList: {
height: 55,
},
iconWrapper: {
marginHorizontal: 16,
width: 36,
height: 36,
borderRadius: 36 / 2,
backgroundColor: '$primaryLightBackground',
justifyContent: 'center',
alignItems: 'center',
},
iconButton: {
marginTop: 1,
marginLeft: 1,
},
activeIconWrapper: {
backgroundColor: '$primaryBlue',
},
activeIcon: {
color: '$white',
},
icon: {
fontSize: 24,
color: '$primaryDarkText',
},
badge: {
position: 'absolute',
right: -9,
top: 20,
backgroundColor: '$primaryBlue',
justifyContent: 'center',
alignItems: 'center',
padding: 2,
height: 12,
minWidth: 18,
borderRadius: 12 / 2,
},
badgeText: {
fontSize: 8,
color: '$white',
fontWeight: '600',
},
activeBadge: {
backgroundColor: '$black',
},
listWrapper: {
marginHorizontal: 8,
},
@ -124,27 +75,4 @@ export default EStyleSheet.create({
scrollContentContainer: {
paddingBottom: 60,
},
popoverDetails: {
flexDirection: 'row',
height: 130,
width: '$deviceWidth / 2',
borderRadius: 20,
paddingHorizontal: 26,
backgroundColor: '$primaryBackgroundColor',
},
arrow: {
borderTopColor: '$primaryBackgroundColor',
},
popoverWrapper: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
overlay: {
backgroundColor: '#403c4449',
},
popoverText: {
color: '$primaryDarkText',
},
});

67
src/components/points/view/pointsView.js
View File

@ -2,17 +2,12 @@
import React, { useRef, Fragment } from 'react';
import { Text, View, FlatList, ScrollView, RefreshControl, TouchableOpacity } from 'react-native';
import { useIntl } from 'react-intl';
import { Popover, PopoverController } from 'react-native-modal-popover';
import { get } from 'lodash';
import { withNavigation } from 'react-navigation';
// Components
import { LineBreak, WalletLineItem, ListPlaceHolder } from '../../basicUIElements';
import { IconButton } from '../../iconButton';
import { Icon } from '../../icon';
import { MainButton } from '../../mainButton';
import { DropdownButton } from '../../dropdownButton';
import { CollapsibleCard } from '../../collapsibleCard';
import { Icon, MainButton, DropdownButton, CollapsibleCard, HorizontalIconList } from '../..';
import { ThemeContainer } from '../../../containers';
// Utils
@ -30,7 +25,7 @@ const PointsView = ({
fetchUserActivity,
refreshing,
isLoading,
claimPoints,
claim,
isClaiming,
userActivities,
handleOnDropdownSelected,
@ -110,7 +105,7 @@ const PointsView = ({
style={styles.mainButton}
height={50}
onPress={() =>
unclaimedBalance > 0 ? claimPoints() : navigation.navigate(ROUTES.SCREENS.BOOST)
unclaimedBalance > 0 ? claim() : navigation.navigate(ROUTES.SCREENS.BOOST)
}
>
<View style={styles.mainButtonWrapper}>
@ -123,61 +118,7 @@ const PointsView = ({
</View>
</MainButton>
<View style={styles.iconsWrapper}>
<FlatList
style={styles.iconsList}
data={POINTS_KEYS}
keyExtractor={item => get(item, 'type', Math.random()).toString()}
horizontal
renderItem={({ item }) => (
<PopoverController key={get(item, 'type')}>
{({
openPopover,
closePopover,
popoverVisible,
setPopoverAnchor,
popoverAnchorRect,
}) => (
<View styles={styles.iconWrapper} key={get(item, 'type')}>
<View style={styles.iconWrapper}>
<TouchableOpacity ref={setPopoverAnchor} onPress={openPopover}>
<IconButton
iconStyle={styles.icon}
style={styles.iconButton}
iconType={get(POINTS[get(item, 'type')], 'iconType')}
name={get(POINTS[get(item, 'type')], 'icon')}
badgeCount={get(POINTS[get(item, 'type')], 'point')}
badgeStyle={styles.badge}
badgeTextStyle={styles.badgeText}
disabled
/>
</TouchableOpacity>
</View>
<Text style={styles.subText}>
{_getTranslation(get(POINTS[get(item, 'type')], 'nameKey'))}
</Text>
<Popover
backgroundStyle={styles.overlay}
contentStyle={styles.popoverDetails}
arrowStyle={styles.arrow}
visible={popoverVisible}
onClose={() => closePopover()}
fromRect={popoverAnchorRect}
placement="top"
supportedOrientations={['portrait', 'landscape']}
>
<View style={styles.popoverWrapper}>
<Text style={styles.popoverText}>
{_getTranslation(get(POINTS[get(item, 'type')], 'descriptionKey'))}
</Text>
</View>
</Popover>
</View>
)}
</PopoverController>
)}
/>
</View>
<HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />
<View style={styles.listWrapper}>
<FlatList

2
src/components/posts/view/postsStyles.js
View File

@ -25,7 +25,7 @@ export default EStyleSheet.create({
alignContent: 'center',
alignItems: 'center',
marginTop: 10,
marginBottom: 40,
marginBottom: 60,
borderColor: '$borderColor',
},
noImage: {

1
src/components/posts/view/postsView.js
View File

@ -160,6 +160,7 @@ const PostsView = ({
setIsLoading(false);
return;
}
setIsLoading(true);
const filter = type || selectedFilterValue;
let options;

4
src/components/userAvatar/view/userAvatarView.js
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import FastImage from 'react-native-fast-image';
import styles from './userAvatarStyles';
import NavigationService from '../../../navigation/service';
import { navigate } from '../../../navigation/service';
// Constants
import ROUTES from '../../../constants/routeNames';
@ -35,7 +35,7 @@ class UserAvatarView extends Component {
const routeName = name === username ? ROUTES.TABBAR.PROFILE : ROUTES.SCREENS.PROFILE;
NavigationService.navigate({
navigate({
routeName: routeName,
params: {
username,

10
src/containers/index.js
View File

@ -1,23 +1,25 @@
import AccountContainer from './accountContainer';
import InAppPurchaseContainer from './inAppPurchaseContainer';
import LoggedInContainer from './loggedInContainer';
import PointsContainer from './pointsContainer';
import ProfileContainer from './profileContainer';
import ProfileEditContainer from './profileEditContainer';
import RedeemContainer from './redeemContainer';
import SpinGameContainer from './spinGameContainer';
import TransferContainer from './transferContainer';
import ThemeContainer from './themeContainer';
import SteemWalletContainer from './steemWalletContainer';
import ThemeContainer from './themeContainer';
import TransferContainer from './transferContainer';
export {
AccountContainer,
InAppPurchaseContainer,
LoggedInContainer,
PointsContainer,
ProfileContainer,
ProfileEditContainer,
RedeemContainer,
SpinGameContainer,
TransferContainer,
ThemeContainer,
SteemWalletContainer,
ThemeContainer,
TransferContainer,
};

40
src/containers/loggedInContainer.js Normal file
View File

@ -0,0 +1,40 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import { useIntl } from 'react-intl';
import { connect } from 'react-redux';
import ROUTES from '../constants/routeNames';
import { navigate } from '../navigation/service';
import { NoPost } from '../components';
const LoggedInContainer = ({ isLoggedIn, isLoginDone, children }) => {
const intl = useIntl();
if (!isLoggedIn) {
return (
<NoPost
style={{ flex: 1 }}
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={() => navigate(ROUTES.SCREENS.LOGIN)}
/>
);
}
return (
children &&
children({
isLoggedIn,
isLoginDone,
})
);
};
const mapStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn,
isLoginDone: state.application.isLoginDone,
});
export default connect(mapStateToProps)(LoggedInContainer);

4
src/containers/pointsContainer.js
View File

@ -237,7 +237,7 @@ class PointsContainer extends Component {
userActivities,
userPoints,
} = this.state;
const { children, accounts, currentAccount } = this.props;
const { children, accounts, currentAccount, user } = this.props;
return (
children &&
@ -262,12 +262,14 @@ class PointsContainer extends Component {
userActivities,
userPoints,
redeemType: get(navigationParams, 'redeemType'),
user,
})
);
}
}
const mapStateToProps = state => ({
user: state.account.currentAccount,
username: state.account.currentAccount.name,
activeBottomTab: state.ui.activeBottomTab,
isConnected: state.application.isConnected,

5
src/navigation/service.js
View File

@ -16,7 +16,4 @@ const navigate = navigationProps => {
// add other navigation functions that you need and export them
export default {
navigate,
setTopLevelNavigator,
};
export { navigate, setTopLevelNavigator };

6
src/screens/application/container/applicationContainer.js
View File

@ -38,7 +38,7 @@ import {
import { getUser, getPost } from '../../../providers/steem/dsteem';
import { switchAccount } from '../../../providers/steem/auth';
import { setPushToken } from '../../../providers/esteem/esteem';
import NavigationService from '../../../navigation/service';
import { navigate } from '../../../navigation/service';
// Actions
import {
@ -261,7 +261,7 @@ class ApplicationContainer extends Component {
if (routeName && (profile || content)) {
this.navigationTimeout = setTimeout(() => {
clearTimeout(this.navigationTimeout);
NavigationService.navigate({
navigate({
routeName,
params,
key: permlink || author,
@ -401,7 +401,7 @@ class ApplicationContainer extends Component {
}
if (!some(params, isEmpty)) {
NavigationService.navigate({
navigate({
routeName,
params,
key,

4
src/screens/application/screen/applicationScreen.js
View File

@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { createAppContainer } from 'react-navigation';
import AppNavitation from '../../../navigation/routes';
import NavigationService from '../../../navigation/service';
import { setTopLevelNavigator } from '../../../navigation/service';
// Services
import { toastNotification as toastNotificationAction } from '../../../redux/actions/uiAction';
@ -62,7 +62,7 @@ class ApplicationScreen extends Component {
{!isConnected && <NoInternetConnection />}
<Navigation
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
setTopLevelNavigator(navigatorRef);
}}
/>
</Fragment>

35
src/screens/notification/screen/notificationScreen.js
View File

@ -4,7 +4,8 @@ import ScrollableTabView from 'react-native-scrollable-tab-view';
import { injectIntl } from 'react-intl';
// Components
import { TabBar, LeaderBoard, Notification, Header, NoPost } from '../../../components';
import { TabBar, LeaderBoard, Notification, Header } from '../../../components';
import { LoggedInContainer } from '../../../containers';
// Styles
import styles from './notificationStyles';
@ -23,8 +24,6 @@ class NotificationScreen extends PureComponent {
intl,
navigateToNotificationRoute,
readAllNotification,
handleLoginPress,
isLoggedIn,
isNotificationRefreshing,
changeSelectedFilter,
} = this.props;
@ -45,24 +44,18 @@ class NotificationScreen extends PureComponent {
})}
style={styles.tabbarItem}
>
{isLoggedIn ? (
<Notification
getActivities={getActivities}
notifications={notifications}
navigateToNotificationRoute={navigateToNotificationRoute}
readAllNotification={readAllNotification}
isNotificationRefreshing={isNotificationRefreshing}
changeSelectedFilter={changeSelectedFilter}
/>
) : (
<NoPost
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={handleLoginPress}
/>
)}
<LoggedInContainer>
{() => (
<Notification
getActivities={getActivities}
notifications={notifications}
navigateToNotificationRoute={navigateToNotificationRoute}
readAllNotification={readAllNotification}
isNotificationRefreshing={isNotificationRefreshing}
changeSelectedFilter={changeSelectedFilter}
/>
)}
</LoggedInContainer>
</View>
<View
tabLabel={intl.formatMessage({

12
src/screens/pinCode/container/pinCodeContainer.js
View File

@ -6,7 +6,7 @@ import Config from 'react-native-config';
import get from 'lodash/get';
// Actions & Services
import NavigationService from '../../../navigation/service';
import { navigate } from '../../../navigation/service';
import {
setUserDataWithPinCode,
verifyPinCode,
@ -113,7 +113,7 @@ class PinCodeContainer extends Component {
}
dispatch(closePinCodeModal());
if (navigateTo) {
NavigationService.navigate({
navigate({
routeName: navigateTo,
params: navigateParams,
});
@ -176,7 +176,7 @@ class PinCodeContainer extends Component {
}
dispatch(closePinCodeModal());
if (navigateTo) {
NavigationService.navigate({
navigate({
routeName: navigateTo,
params: navigateParams,
});
@ -213,9 +213,11 @@ class PinCodeContainer extends Component {
[_currentAccount.local] = realmData;
dispatch(updateCurrentAccount({ ..._currentAccount }));
dispatch(closePinCodeModal());
if (callback) callback(pin, oldPinCode);
if (callback) {
callback(pin, oldPinCode);
}
if (navigateTo) {
NavigationService.navigate({
navigate({
routeName: navigateTo,
params: navigateParams,
});

22
src/screens/points/container/pointsContainer.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import { connect } from 'react-redux';
// Component
import PointsScreen from '../screen/pointsScreen';
// Constants
import ROUTES from '../../../constants/routeNames';
const PointsContainer = ({ isLoggedIn, navigation }) => {
const _handleOnPressLogin = () => {
navigation.navigate(ROUTES.SCREENS.LOGIN);
};
return <PointsScreen isLoggedIn={isLoggedIn} handleLoginPress={_handleOnPressLogin} />;
};
const matStateToProps = state => ({
isLoggedIn: state.application.isLoggedIn,
});
export default connect(matStateToProps)(PointsContainer);

5
src/screens/points/index.js
View File

@ -1,5 +1,4 @@
import PointsScreen from './screen/pointsScreen';
import Points from './container/pointsContainer';
import Points from './screen/pointsScreen';
export { PointsScreen, Points };
export { Points };
export default Points;

83
src/screens/points/screen/pointsScreen.js
View File

@ -4,63 +4,56 @@ import { SafeAreaView } from 'react-native';
import get from 'lodash/get';
// Containers
import { PointsContainer } from '../../../containers';
import { PointsContainer, LoggedInContainer } from '../../../containers';
// Components
import { Header, Points, NoPost } from '../../../components';
import { Header, Points } from '../../../components';
// Styles
import styles from './pointsStyles';
const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
const PointsScreen = () => {
const intl = useIntl();
return (
<Fragment>
<Header />
<SafeAreaView style={styles.container}>
{isLoggedIn ? (
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
}) => (
<Points
claim={claim}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
userPoints={userPoints}
unclaimedBalance={get(userPoints, 'unclaimed_points', 0)}
userBalance={get(userPoints, 'points')}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
dropdownOptions={[
intl.formatMessage({ id: 'points.dropdown_transfer' }),
intl.formatMessage({ id: 'points.dropdown_promote' }),
intl.formatMessage({ id: 'points.dropdown_boost' }),
]}
/>
)}
</PointsContainer>
) : (
<NoPost
style={styles.noPostContainer}
isButtonText
defaultText={intl.formatMessage({
id: 'profile.login_to_see',
})}
handleOnButtonPress={handleLoginPress}
/>
)}
<LoggedInContainer>
{() => (
<PointsContainer>
{({
handleOnDropdownSelected,
claim,
fetchUserActivity,
isClaiming,
isLoading,
refreshing,
userActivities,
userPoints,
}) => (
<Points
claim={claim}
fetchUserActivity={fetchUserActivity}
isClaiming={isClaiming}
isLoading={isLoading}
refreshing={refreshing}
userActivities={userActivities}
userPoints={userPoints}
unclaimedBalance={get(userPoints, 'unclaimed_points', 0)}
userBalance={get(userPoints, 'points')}
handleOnDropdownSelected={handleOnDropdownSelected}
type="estm"
dropdownOptions={[
intl.formatMessage({ id: 'points.dropdown_transfer' }),
intl.formatMessage({ id: 'points.dropdown_promote' }),
intl.formatMessage({ id: 'points.dropdown_boost' }),
]}
/>
)}
</PointsContainer>
)}
</LoggedInContainer>
</SafeAreaView>
</Fragment>
);

3
src/screens/points/screen/pointsStyles.js
View File

@ -13,7 +13,4 @@ export default EStyleSheet.create({
color: '#788187',
fontWeight: 'bold',
},
noPostContainer: {
flex: 1,
},
});