mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-18 19:01:38 +03:00
created acccount container enhanced header container & view convert to hooks && merged trending and feed
This commit is contained in:
parent
2c00cf0502
commit
2acf206205
@ -26,13 +26,15 @@ class BasicHeaderContainer extends Component {
|
||||
|
||||
if (isNewPost) {
|
||||
navigation.navigate({
|
||||
routeName: ROUTES.SCREENS.HOME,
|
||||
routeName: ROUTES.SCREENS.FEED,
|
||||
});
|
||||
} else {
|
||||
navigation.goBack();
|
||||
}
|
||||
|
||||
if (handleOnBackPress) handleOnBackPress();
|
||||
if (handleOnBackPress) {
|
||||
handleOnBackPress();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -21,7 +21,7 @@ import styles from './bottomTabBarStyles';
|
||||
const _jumpTo = (route, index, routes, jumpTo) => {
|
||||
const _routeName = routes[index].routeName;
|
||||
|
||||
if (!!get(route, 'params.scrollToTop') && _routeName === ROUTES.TABBAR.HOME) {
|
||||
if (!!get(route, 'params.scrollToTop') && _routeName === ROUTES.TABBAR.FEED) {
|
||||
route.params.scrollToTop();
|
||||
}
|
||||
|
||||
|
@ -6,9 +6,9 @@ export default EStyleSheet.create({
|
||||
borderTopRightRadius: 8,
|
||||
marginTop: 16,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '$primaryLightBackground',
|
||||
height: 60,
|
||||
borderBottomWidth: 2,
|
||||
backgroundColor: '$primaryWhiteLightBackground',
|
||||
},
|
||||
firstImage: {
|
||||
width: 24,
|
||||
|
@ -1,80 +1,53 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import React from 'react';
|
||||
import { withNavigation } from 'react-navigation';
|
||||
import { connect } from 'react-redux';
|
||||
import { get, has } from 'lodash';
|
||||
import get from 'lodash/get';
|
||||
import has from 'lodash/has';
|
||||
|
||||
// Component
|
||||
import HeaderView from '../view/headerView';
|
||||
|
||||
/*
|
||||
* Props Name Description Value
|
||||
*@props --> props name here description here Value Type Here
|
||||
*
|
||||
*/
|
||||
|
||||
class HeaderContainer extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
// Component Life Cycle Functions
|
||||
|
||||
// Component Functions
|
||||
|
||||
_handleOpenDrawer = () => {
|
||||
const { navigation } = this.props;
|
||||
import { AccountContainer, ThemeContainer } from '../../../containers';
|
||||
|
||||
const HeaderContainer = ({ selectedUser, isReverse, navigation, handleOnBackPress }) => {
|
||||
const _handleOpenDrawer = () => {
|
||||
if (has(navigation, 'openDrawer') && typeof get(navigation, 'openDrawer') === 'function') {
|
||||
navigation.openDrawer();
|
||||
}
|
||||
};
|
||||
|
||||
_handleOnPressBackButton = () => {
|
||||
const { navigation, handleOnBackPress } = this.props;
|
||||
|
||||
if (handleOnBackPress) handleOnBackPress();
|
||||
const _handleOnPressBackButton = () => {
|
||||
if (handleOnBackPress) {
|
||||
handleOnBackPress();
|
||||
}
|
||||
|
||||
navigation.goBack();
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
isLoggedIn,
|
||||
currentAccount,
|
||||
selectedUser,
|
||||
isReverse,
|
||||
isLoginDone,
|
||||
isDarkTheme,
|
||||
} = this.props;
|
||||
const _user = isReverse && selectedUser ? selectedUser : currentAccount;
|
||||
return (
|
||||
<ThemeContainer>
|
||||
{({ isDarkTheme }) => (
|
||||
<AccountContainer>
|
||||
{({ currentAccount, isLoggedIn, isLoginDone }) => {
|
||||
const _user = isReverse && selectedUser ? selectedUser : currentAccount;
|
||||
|
||||
const displayName = get(_user, 'display_name');
|
||||
const username = get(_user, 'name');
|
||||
const reputation = get(_user, 'reputation');
|
||||
return (
|
||||
<HeaderView
|
||||
displayName={get(_user, 'display_name')}
|
||||
handleOnPressBackButton={_handleOnPressBackButton}
|
||||
handleOpenDrawer={_handleOpenDrawer}
|
||||
isDarkTheme={isDarkTheme}
|
||||
isLoggedIn={isLoggedIn}
|
||||
isLoginDone={isLoginDone}
|
||||
isReverse={isReverse}
|
||||
reputation={get(_user, 'reputation')}
|
||||
username={get(_user, 'name')}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</AccountContainer>
|
||||
)}
|
||||
</ThemeContainer>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<HeaderView
|
||||
handleOnPressBackButton={this._handleOnPressBackButton}
|
||||
handleOpenDrawer={this._handleOpenDrawer}
|
||||
isLoggedIn={isLoggedIn}
|
||||
isReverse={isReverse}
|
||||
isLoginDone={isLoginDone}
|
||||
displayName={displayName}
|
||||
username={username}
|
||||
reputation={reputation}
|
||||
isDarkTheme={isDarkTheme}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isLoggedIn: state.application.isLoggedIn,
|
||||
isLoginDone: state.application.isLoginDone,
|
||||
isDarkTheme: state.application.isDarkTheme,
|
||||
|
||||
currentAccount: state.account.currentAccount,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(withNavigation(HeaderContainer));
|
||||
export default withNavigation(HeaderContainer);
|
||||
|
@ -7,7 +7,7 @@ export default EStyleSheet.create({
|
||||
width: '$deviceWidth',
|
||||
backgroundColor: '$primaryBackgroundColor',
|
||||
flex: 1,
|
||||
maxHeight: Platform.OS === 'ios' ? 95 : 80,
|
||||
maxHeight: Platform.OS === 'ios' ? 105 : 80,
|
||||
},
|
||||
containerReverse: {
|
||||
justifyContent: 'space-between',
|
||||
@ -33,8 +33,7 @@ export default EStyleSheet.create({
|
||||
titleWrapper: {
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
marginLeft: 8,
|
||||
marginRight: 8,
|
||||
marginHorizontal: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
|
@ -1,131 +1,107 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
// Components
|
||||
import { SearchModal } from '../../searchModal';
|
||||
import { IconButton } from '../../iconButton';
|
||||
import { UserAvatar } from '../../userAvatar';
|
||||
|
||||
// Styles
|
||||
import styles from './headerStyles';
|
||||
|
||||
class HeaderView extends Component {
|
||||
/* Props
|
||||
* ------------------------------------------------
|
||||
* @prop { boolean } hideStatusBar - Can declare status bar is hide or not.
|
||||
*
|
||||
*/
|
||||
const HeaderView = ({
|
||||
displayName,
|
||||
handleOnPressBackButton,
|
||||
handleOpenDrawer,
|
||||
isDarkTheme,
|
||||
isLoggedIn,
|
||||
isLoginDone,
|
||||
isReverse,
|
||||
reputation,
|
||||
username,
|
||||
}) => {
|
||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||
const intl = useIntl();
|
||||
let gradientColor;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isSearchModalOpen: false,
|
||||
};
|
||||
if (isReverse) {
|
||||
gradientColor = isDarkTheme ? ['#43638e', '#081c36'] : ['#357ce6', '#2d5aa0'];
|
||||
} else {
|
||||
gradientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
|
||||
}
|
||||
|
||||
// Component Life Cycles
|
||||
|
||||
// Component Functions
|
||||
|
||||
_handleOnCloseSearch = () => {
|
||||
this.setState({ isSearchModalOpen: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
displayName,
|
||||
handleOnPressBackButton,
|
||||
handleOpenDrawer,
|
||||
intl,
|
||||
isDarkTheme,
|
||||
isLoggedIn,
|
||||
isLoginDone,
|
||||
isReverse,
|
||||
reputation,
|
||||
username,
|
||||
} = this.props;
|
||||
const { isSearchModalOpen } = this.state;
|
||||
let gredientColor;
|
||||
|
||||
if (isReverse) {
|
||||
gredientColor = isDarkTheme ? ['#43638e', '#081c36'] : ['#357ce6', '#2d5aa0'];
|
||||
} else {
|
||||
gredientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
|
||||
<SearchModal
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'header.search',
|
||||
})}
|
||||
isOpen={isSearchModalOpen}
|
||||
handleOnClose={this._handleOnCloseSearch}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={styles.avatarWrapper}
|
||||
onPress={() => handleOpenDrawer()}
|
||||
disabled={isReverse}
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
|
||||
<SearchModal
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'header.search',
|
||||
})}
|
||||
isOpen={isSearchModalOpen}
|
||||
handleOnClose={() => setIsSearchModalOpen(false)}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={styles.avatarWrapper}
|
||||
onPress={handleOpenDrawer}
|
||||
disabled={isReverse}
|
||||
>
|
||||
<LinearGradient
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
colors={gradientColor}
|
||||
style={[
|
||||
styles.avatarButtonWrapper,
|
||||
isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
|
||||
]}
|
||||
>
|
||||
<LinearGradient
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
colors={gredientColor}
|
||||
style={[
|
||||
styles.avatarButtonWrapper,
|
||||
isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
|
||||
]}
|
||||
>
|
||||
<UserAvatar
|
||||
noAction
|
||||
style={isReverse ? styles.reverseAvatar : styles.avatar}
|
||||
username={username}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
{displayName || username ? (
|
||||
<View style={styles.titleWrapper}>
|
||||
{displayName && <Text style={styles.title}>{displayName}</Text>}
|
||||
<Text style={styles.subTitle}>
|
||||
{`@${username}`}
|
||||
{reputation && ` (${reputation})`}
|
||||
<UserAvatar
|
||||
noAction
|
||||
style={isReverse ? styles.reverseAvatar : styles.avatar}
|
||||
username={username}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
{displayName || username ? (
|
||||
<View style={styles.titleWrapper}>
|
||||
{displayName && <Text style={styles.title}>{displayName}</Text>}
|
||||
<Text style={styles.subTitle}>
|
||||
{`@${username}`}
|
||||
{reputation && ` (${reputation})`}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.titleWrapper}>
|
||||
{isLoginDone && !isLoggedIn && (
|
||||
<Text style={styles.noAuthTitle}>
|
||||
{intl.formatMessage({
|
||||
id: 'header.title',
|
||||
})}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.titleWrapper}>
|
||||
{isLoginDone && !isLoggedIn && (
|
||||
<Text style={styles.noAuthTitle}>
|
||||
{intl.formatMessage({
|
||||
id: 'header.title',
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{isReverse && (
|
||||
<View style={styles.reverseBackButtonWrapper}>
|
||||
<IconButton
|
||||
style={styles.backButton}
|
||||
iconStyle={styles.backIcon}
|
||||
name="md-arrow-back"
|
||||
onPress={() => handleOnPressBackButton()}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!isReverse && (
|
||||
<View style={styles.backButtonWrapper}>
|
||||
<IconButton
|
||||
iconStyle={styles.backIcon}
|
||||
name="md-search"
|
||||
onPress={() => this.setState({ isSearchModalOpen: true })}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
{isReverse ? (
|
||||
<View style={styles.reverseBackButtonWrapper}>
|
||||
<IconButton
|
||||
style={styles.backButton}
|
||||
iconStyle={styles.backIcon}
|
||||
name="md-arrow-back"
|
||||
onPress={() => handleOnPressBackButton()}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.backButtonWrapper}>
|
||||
<IconButton
|
||||
iconStyle={styles.backIcon}
|
||||
name="md-search"
|
||||
onPress={() => setIsSearchModalOpen(true)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default injectIntl(HeaderView);
|
||||
export default HeaderView;
|
||||
|
@ -1,94 +1,69 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import get from 'lodash/get';
|
||||
import React from 'react';
|
||||
import { connect, useDispatch } from 'react-redux';
|
||||
|
||||
// Component
|
||||
import PostsView from '../view/postsView';
|
||||
|
||||
// Container
|
||||
import { AccountContainer } from '../../../containers';
|
||||
|
||||
// Actions
|
||||
import { setFeedPosts } from '../../../redux/actions/postsAction';
|
||||
import { hidePostsThumbnails } from '../../../redux/actions/uiAction';
|
||||
|
||||
/*
|
||||
* Props Name Description Value
|
||||
*@props --> props name here description here Value Type Here
|
||||
*
|
||||
*/
|
||||
|
||||
class PostsContainer extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
promotedPosts: [],
|
||||
};
|
||||
}
|
||||
|
||||
// Component Life Cycle Functions
|
||||
|
||||
// Component Functions
|
||||
|
||||
_setFeedPosts = posts => {
|
||||
const { dispatch } = this.props;
|
||||
const PostsContainer = ({
|
||||
changeForceLoadPostState,
|
||||
feedPosts,
|
||||
filterOptions,
|
||||
forceLoadPost,
|
||||
getFor,
|
||||
handleOnScroll,
|
||||
isConnected,
|
||||
isHideImages,
|
||||
pageType,
|
||||
selectedOptionIndex,
|
||||
tag,
|
||||
nsfw,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const _setFeedPosts = posts => {
|
||||
dispatch(setFeedPosts(posts));
|
||||
};
|
||||
|
||||
_handleImagesHide = () => {
|
||||
const { dispatch, isHideImages } = this.props;
|
||||
|
||||
const _handleImagesHide = () => {
|
||||
dispatch(hidePostsThumbnails(!isHideImages));
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
changeForceLoadPostState,
|
||||
currentAccount,
|
||||
feedPosts,
|
||||
filterOptions,
|
||||
forceLoadPost,
|
||||
getFor,
|
||||
handleOnScroll,
|
||||
isConnected,
|
||||
isHideImages,
|
||||
pageType,
|
||||
selectedOptionIndex,
|
||||
tag,
|
||||
isLoginDone,
|
||||
isLoggedIn,
|
||||
nsfw,
|
||||
} = this.props;
|
||||
const { promotedPosts } = this.state;
|
||||
|
||||
return (
|
||||
<PostsView
|
||||
changeForceLoadPostState={changeForceLoadPostState}
|
||||
currentAccountUsername={get(currentAccount, 'name', '')}
|
||||
feedPosts={feedPosts}
|
||||
filterOptions={filterOptions}
|
||||
forceLoadPost={forceLoadPost}
|
||||
getFor={getFor}
|
||||
handleOnScroll={handleOnScroll}
|
||||
handleImagesHide={this._handleImagesHide}
|
||||
hidePostsThumbnails={hidePostsThumbnails}
|
||||
isConnected={isConnected}
|
||||
isHideImage={isHideImages}
|
||||
pageType={pageType}
|
||||
promotedPosts={promotedPosts}
|
||||
selectedOptionIndex={selectedOptionIndex}
|
||||
setFeedPosts={this._setFeedPosts}
|
||||
tag={tag}
|
||||
isLoginDone={isLoginDone}
|
||||
isLoggedIn={isLoggedIn}
|
||||
nsfw={nsfw}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<AccountContainer>
|
||||
{({ username, isLoggedIn, isLoginDone }) => (
|
||||
<PostsView
|
||||
changeForceLoadPostState={changeForceLoadPostState}
|
||||
currentAccountUsername={username}
|
||||
feedPosts={feedPosts}
|
||||
filterOptions={filterOptions}
|
||||
forceLoadPost={forceLoadPost}
|
||||
getFor={getFor}
|
||||
handleImagesHide={_handleImagesHide}
|
||||
handleOnScroll={handleOnScroll}
|
||||
hidePostsThumbnails={hidePostsThumbnails}
|
||||
isConnected={isConnected}
|
||||
isHideImage={isHideImages}
|
||||
isLoggedIn={isLoggedIn}
|
||||
isLoginDone={isLoginDone}
|
||||
nsfw={nsfw}
|
||||
pageType={pageType}
|
||||
selectedOptionIndex={selectedOptionIndex}
|
||||
setFeedPosts={_setFeedPosts}
|
||||
tag={tag}
|
||||
/>
|
||||
)}
|
||||
</AccountContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
currentAccount: state.account.currentAccount,
|
||||
isLoggedIn: state.application.isLoggedIn,
|
||||
isLoginDone: state.application.isLoginDone,
|
||||
nsfw: state.application.nsfw,
|
||||
feedPosts: state.posts.feedPosts,
|
||||
isConnected: state.application.isConnected,
|
||||
|
@ -13,7 +13,6 @@ import { getPromotePosts } from '../../../providers/esteem/esteem';
|
||||
import { PostCard } from '../../postCard';
|
||||
import { FilterBar } from '../../filterBar';
|
||||
import { PostCardPlaceHolder, NoPost } from '../../basicUIElements';
|
||||
import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
|
||||
import { ThemeContainer } from '../../../containers';
|
||||
|
||||
// Styles
|
||||
@ -39,15 +38,6 @@ class PostsView extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
// Component Functions
|
||||
componentWillMount() {
|
||||
const { navigation } = this.props;
|
||||
|
||||
navigation.setParams({
|
||||
scrollToTop: this._scrollToTop,
|
||||
});
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { isConnected, pageType } = this.props;
|
||||
|
||||
@ -97,25 +87,24 @@ class PostsView extends Component {
|
||||
_getPromotePosts = async () => {
|
||||
const { currentAccountUsername } = this.props;
|
||||
|
||||
await getPromotePosts().then(async res => {
|
||||
if (res && res.length) {
|
||||
const promotedPosts = await Promise.all(
|
||||
res.map(item =>
|
||||
getPost(get(item, 'author'), get(item, 'permlink'), currentAccountUsername, true).then(
|
||||
post => post,
|
||||
await getPromotePosts()
|
||||
.then(async res => {
|
||||
if (res && res.length) {
|
||||
const promotedPosts = await Promise.all(
|
||||
res.map(item =>
|
||||
getPost(
|
||||
get(item, 'author'),
|
||||
get(item, 'permlink'),
|
||||
currentAccountUsername,
|
||||
true,
|
||||
).then(post => post),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
|
||||
this.setState({ promotedPosts });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_scrollToTop = () => {
|
||||
if (this.flatList) {
|
||||
this.flatList.scrollToOffset({ x: 0, y: 0, animated: true });
|
||||
}
|
||||
this.setState({ promotedPosts });
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
_loadPosts = async () => {
|
||||
@ -123,10 +112,10 @@ class PostsView extends Component {
|
||||
getFor,
|
||||
tag,
|
||||
currentAccountUsername,
|
||||
pageType,
|
||||
nsfw,
|
||||
setFeedPosts,
|
||||
isConnected,
|
||||
filterOptions,
|
||||
} = this.props;
|
||||
const {
|
||||
posts,
|
||||
@ -137,10 +126,7 @@ class PostsView extends Component {
|
||||
isLoading,
|
||||
promotedPosts,
|
||||
} = this.state;
|
||||
const filter =
|
||||
pageType === 'posts'
|
||||
? POPULAR_FILTERS[selectedFilterIndex].toLowerCase()
|
||||
: PROFILE_FILTERS[selectedFilterIndex].toLowerCase();
|
||||
const filter = filterOptions[selectedFilterIndex].toLowerCase();
|
||||
let options;
|
||||
const limit = 3;
|
||||
|
||||
@ -157,12 +143,7 @@ class PostsView extends Component {
|
||||
}
|
||||
|
||||
this.setState({ isLoading: true });
|
||||
if (tag || filter === 'feed' || filter === 'blog' || getFor === 'blog') {
|
||||
options = {
|
||||
tag,
|
||||
limit,
|
||||
};
|
||||
} else if (filter === 'reblogs') {
|
||||
if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
|
||||
options = {
|
||||
tag,
|
||||
limit,
|
||||
@ -359,12 +340,7 @@ class PostsView extends Component {
|
||||
|
||||
render() {
|
||||
const { refreshing, posts, isShowFilterBar } = this.state;
|
||||
const {
|
||||
filterOptions,
|
||||
selectedOptionIndex,
|
||||
isHideImage,
|
||||
handleImagesHide,
|
||||
} = this.props;
|
||||
const { filterOptions, selectedOptionIndex, isHideImage, handleImagesHide } = this.props;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
@ -413,9 +389,6 @@ class PostsView extends Component {
|
||||
)}
|
||||
</ThemeContainer>
|
||||
}
|
||||
ref={ref => {
|
||||
this.flatList = ref;
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
@ -15,5 +15,6 @@ export default EStyleSheet.create({
|
||||
input: {
|
||||
flex: 1,
|
||||
minHeight: 50,
|
||||
backgroundColor: '$primaryWhiteLightBackground',
|
||||
},
|
||||
});
|
||||
|
@ -1,10 +1,10 @@
|
||||
export const POPULAR_FILTERS = [
|
||||
'TRENDING',
|
||||
'HOT',
|
||||
'CREATED',
|
||||
'ACTIVE',
|
||||
'PROMOTED',
|
||||
'VOTES',
|
||||
'CHILDREN',
|
||||
];
|
||||
export const POPULAR_FILTERS = ['TRENDING', 'HOT', 'NEW', 'PROMOTED'];
|
||||
export const PROFILE_FILTERS = ['BLOG', 'FEED'];
|
||||
|
||||
// 'TRENDING',
|
||||
// 'HOT',
|
||||
// 'CREATED',
|
||||
// 'ACTIVE',
|
||||
// 'PROMOTED',
|
||||
// 'VOTES',
|
||||
// 'CHILDREN',
|
||||
|
@ -11,7 +11,7 @@ export default {
|
||||
EDITOR: `Editor${SCREEN_SUFFIX}`,
|
||||
FOLLOWS: `Follows${SCREEN_SUFFIX}`,
|
||||
SPIN_GAME: `SpinGame${SCREEN_SUFFIX}`,
|
||||
HOME: `Home${SCREEN_SUFFIX}`,
|
||||
FEED: `Feed${SCREEN_SUFFIX}`,
|
||||
LOGIN: `Login${SCREEN_SUFFIX}`,
|
||||
PINCODE: `PinCode${SCREEN_SUFFIX}`,
|
||||
POST: `Post${SCREEN_SUFFIX}`,
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
MAIN: `Main${DRAWER_SUFFIX}`,
|
||||
},
|
||||
TABBAR: {
|
||||
HOME: `Home${TABBAR_SUFFIX}`,
|
||||
FEED: `Feed${TABBAR_SUFFIX}`,
|
||||
NOTIFICATION: `Notification${TABBAR_SUFFIX}`,
|
||||
POINTS: `Points${TABBAR_SUFFIX}`,
|
||||
POST_BUTTON: `PostButton${TABBAR_SUFFIX}`,
|
||||
|
33
src/containers/accountContainer.js
Normal file
33
src/containers/accountContainer.js
Normal file
@ -0,0 +1,33 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const AccountContainer = ({
|
||||
accounts,
|
||||
children,
|
||||
currentAccount,
|
||||
isLoggedIn,
|
||||
isLoginDone,
|
||||
username,
|
||||
}) => {
|
||||
return (
|
||||
children &&
|
||||
children({
|
||||
accounts,
|
||||
currentAccount,
|
||||
isLoggedIn,
|
||||
isLoginDone,
|
||||
username,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
accounts: state.account.otherAccounts,
|
||||
currentAccount: state.account.currentAccount,
|
||||
isLoggedIn: state.application.isLoggedIn,
|
||||
isLoginDone: state.application.isLoginDone,
|
||||
username: state.account.currentAccount.name,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(AccountContainer);
|
@ -1,3 +1,4 @@
|
||||
import AccountContainer from './accountContainer';
|
||||
import InAppPurchaseContainer from './inAppPurchaseContainer';
|
||||
import PointsContainer from './pointsContainer';
|
||||
import ProfileContainer from './profileContainer';
|
||||
@ -8,6 +9,7 @@ import TransferContainer from './transferContainer';
|
||||
import ThemeContainer from './themeContainer';
|
||||
|
||||
export {
|
||||
AccountContainer,
|
||||
InAppPurchaseContainer,
|
||||
PointsContainer,
|
||||
ProfileContainer,
|
||||
|
@ -6,13 +6,13 @@ import ROUTES from '../constants/routeNames';
|
||||
|
||||
// Components
|
||||
import { Icon, IconContainer } from '../components/icon';
|
||||
import { Home, Notification, Profile, Points } from '../screens';
|
||||
import { Feed, Notification, Profile, Points } from '../screens';
|
||||
import { PostButton, BottomTabBar } from '../components';
|
||||
|
||||
const BaseNavigator = createBottomTabNavigator(
|
||||
{
|
||||
[ROUTES.TABBAR.HOME]: {
|
||||
screen: Home,
|
||||
[ROUTES.TABBAR.FEED]: {
|
||||
screen: Feed,
|
||||
navigationOptions: () => ({
|
||||
tabBarIcon: ({ tintColor }) => (
|
||||
<Icon iconType="MaterialIcons" name="view-day" color={tintColor} size={26} />
|
||||
|
@ -31,7 +31,7 @@ import { SideMenu } from '../components';
|
||||
|
||||
const mainNavigation = createDrawerNavigator(
|
||||
{
|
||||
[ROUTES.SCREENS.HOME]: {
|
||||
[ROUTES.SCREENS.FEED]: {
|
||||
screen: BaseNavigator,
|
||||
},
|
||||
},
|
||||
|
@ -357,7 +357,13 @@ export const getSCAccessToken = code =>
|
||||
api.post('/sc-token-refresh', { code }).then(resp => resolve(resp.data));
|
||||
});
|
||||
|
||||
export const getPromotePosts = () => api.get('/promoted-posts').then(resp => resp.data);
|
||||
export const getPromotePosts = () => {
|
||||
try {
|
||||
return api.get('/promoted-posts').then(resp => resp.data);
|
||||
} catch (error) {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
export const purchaseOrder = data => api.post('/purchase-order', data).then(resp => resp.data);
|
||||
|
||||
|
4
src/screens/feed/index.js
Normal file
4
src/screens/feed/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Feed from './screen/feedScreen';
|
||||
|
||||
export { Feed };
|
||||
export default Feed;
|
36
src/screens/feed/screen/feedScreen.js
Normal file
36
src/screens/feed/screen/feedScreen.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { SafeAreaView } from 'react-native';
|
||||
import get from 'lodash/get';
|
||||
|
||||
// Components
|
||||
import { Posts, Header } from '../../../components';
|
||||
|
||||
// Container
|
||||
import { AccountContainer } from '../../../containers';
|
||||
|
||||
// Styles
|
||||
import styles from './feedStyles';
|
||||
|
||||
import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
|
||||
|
||||
const FeedScreen = () => {
|
||||
return (
|
||||
<AccountContainer>
|
||||
{({ currentAccount, isLoggedIn }) => (
|
||||
<Fragment>
|
||||
<Header />
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Posts
|
||||
filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]}
|
||||
getFor={isLoggedIn ? 'feed' : 'trending'}
|
||||
selectedOptionIndex={isLoggedIn ? 1 : 2}
|
||||
tag={get(currentAccount, 'name')}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
</Fragment>
|
||||
)}
|
||||
</AccountContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeedScreen;
|
@ -1,38 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Component
|
||||
import HomeScreen from '../screen/homeScreen';
|
||||
|
||||
/*
|
||||
* Props Name Description Value
|
||||
*@props --> props name here description here Value Type Here
|
||||
*
|
||||
*/
|
||||
|
||||
class HomeContainer extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoggedIn, isLoginDone, currentAccount } = this.props;
|
||||
|
||||
return (
|
||||
<HomeScreen
|
||||
isLoggedIn={isLoggedIn}
|
||||
isLoginDone={isLoginDone}
|
||||
currentAccount={currentAccount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isLoggedIn: state.application.isLoggedIn,
|
||||
isLoginDone: state.application.isLoginDone,
|
||||
currentAccount: state.account.currentAccount,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(HomeContainer);
|
@ -1,5 +0,0 @@
|
||||
import HomeScreen from './screen/homeScreen';
|
||||
import Home from './container/homeContainer';
|
||||
|
||||
export { HomeScreen, Home };
|
||||
export default Home;
|
@ -1,73 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { View, SafeAreaView } from 'react-native';
|
||||
import ScrollableTabView from 'react-native-scrollable-tab-view';
|
||||
import { injectIntl } from 'react-intl';
|
||||
|
||||
// Components
|
||||
import { TabBar, Posts, Header } from '../../../components';
|
||||
|
||||
// Styles
|
||||
import styles from './homeStyles';
|
||||
import globalStyles from '../../../globalStyles';
|
||||
|
||||
import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
|
||||
|
||||
class HomeScreen extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { currentAccount, intl, isLoggedIn } = this.props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Header />
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollableTabView
|
||||
style={globalStyles.tabView}
|
||||
activeTab={!isLoggedIn ? 1 : 0}
|
||||
renderTabBar={() => (
|
||||
<TabBar
|
||||
style={styles.tabbar}
|
||||
tabUnderlineDefaultWidth={80}
|
||||
tabUnderlineScaleX={2}
|
||||
tabBarPosition="overlayTop"
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<View
|
||||
tabLabel={intl.formatMessage({
|
||||
id: 'home.feed',
|
||||
})}
|
||||
style={styles.tabbarItem}
|
||||
>
|
||||
<Posts
|
||||
filterOptions={PROFILE_FILTERS}
|
||||
getFor={PROFILE_FILTERS[1].toLowerCase()}
|
||||
tag={currentAccount.name}
|
||||
selectedOptionIndex={1}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
tabLabel={intl.formatMessage({
|
||||
id: 'home.popular',
|
||||
})}
|
||||
style={styles.tabbarItem}
|
||||
>
|
||||
<Posts
|
||||
filterOptions={POPULAR_FILTERS}
|
||||
getFor={POPULAR_FILTERS[0].toLowerCase()}
|
||||
selectedOptionIndex={0}
|
||||
pageType="posts"
|
||||
/>
|
||||
</View>
|
||||
</ScrollableTabView>
|
||||
</SafeAreaView>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(HomeScreen);
|
@ -2,7 +2,7 @@ import { Bookmarks } from './bookmarks';
|
||||
import { Drafts } from './drafts';
|
||||
import { Editor } from './editor';
|
||||
import { Follows } from './follows';
|
||||
import { Home } from './home';
|
||||
import { Feed } from './feed';
|
||||
import { Launch } from './launch';
|
||||
import { Login } from './login';
|
||||
import { Notification } from './notification';
|
||||
@ -27,7 +27,7 @@ export {
|
||||
Drafts,
|
||||
Editor,
|
||||
Follows,
|
||||
Home,
|
||||
Feed,
|
||||
Launch,
|
||||
Login,
|
||||
Notification,
|
||||
|
@ -108,7 +108,9 @@ class PinCodeContainer extends Component {
|
||||
dispatch(updateCurrentAccount({ ..._currentAccount }));
|
||||
this._savePinCode(pin);
|
||||
|
||||
if (callback) callback(pin, oldPinCode);
|
||||
if (callback) {
|
||||
callback(pin, oldPinCode);
|
||||
}
|
||||
dispatch(closePinCodeModal());
|
||||
if (navigateTo) {
|
||||
const navigateAction = NavigationActions.navigate({
|
||||
@ -171,7 +173,9 @@ class PinCodeContainer extends Component {
|
||||
|
||||
setExistUser(true).then(() => {
|
||||
this._savePinCode(pin);
|
||||
if (callback) callback(pin, oldPinCode);
|
||||
if (callback) {
|
||||
callback(pin, oldPinCode);
|
||||
}
|
||||
dispatch(closePinCodeModal());
|
||||
if (navigateTo) {
|
||||
const navigateAction = NavigationActions.navigate({
|
||||
@ -197,7 +201,7 @@ class PinCodeContainer extends Component {
|
||||
} = this.props;
|
||||
const { oldPinCode } = this.state;
|
||||
|
||||
// If the user is exist, we are just checking to pin and navigating to home screen
|
||||
// If the user is exist, we are just checking to pin and navigating to feed screen
|
||||
const pinData = {
|
||||
pinCode: pin,
|
||||
password: currentAccount ? currentAccount.password : '',
|
||||
@ -213,7 +217,9 @@ class PinCodeContainer extends Component {
|
||||
[_currentAccount.local] = realmData;
|
||||
dispatch(updateCurrentAccount({ ..._currentAccount }));
|
||||
dispatch(closePinCodeModal());
|
||||
if (callback) callback(pin, oldPinCode);
|
||||
if (callback) {
|
||||
callback(pin, oldPinCode);
|
||||
}
|
||||
if (navigateTo) {
|
||||
const navigateAction = NavigationActions.navigate({
|
||||
routeName: navigateTo,
|
||||
|
Loading…
Reference in New Issue
Block a user