From 44bec50e7d916201398e85ba7af1aa15ad063e02 Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Tue, 13 Apr 2021 13:13:42 +0500 Subject: [PATCH] using stacked tabs in profile screen with content overrides --- .../container/postsListContainer.tsx | 4 +- src/components/profile/profileView.js | 340 +++++++++--------- .../tabbedPosts/container/tabbedPosts.tsx | 42 ++- .../tabbedPosts/services/tabbedPostsModels.ts | 4 +- .../tabbedPosts/view/stackedTabBar.tsx | 13 +- .../tabbedPosts/view/tabContent.tsx | 1 + src/config/locales/en-US.json | 2 +- src/constants/options/filters.js | 14 +- src/screens/feed/screen/feedScreen.js | 11 +- 9 files changed, 226 insertions(+), 205 deletions(-) diff --git a/src/components/postsList/container/postsListContainer.tsx b/src/components/postsList/container/postsListContainer.tsx index e41410fe8..a8caf3013 100644 --- a/src/components/postsList/container/postsListContainer.tsx +++ b/src/components/postsList/container/postsListContainer.tsx @@ -6,7 +6,9 @@ import { useSelector } from 'react-redux'; import { ThemeContainer } from '../../../containers'; import styles from '../view/postsListStyles'; - +export interface PostsListRef { + scrollToTop:()=>void +} interface postsListContainerProps extends FlatListProps { promotedPosts:Array; diff --git a/src/components/profile/profileView.js b/src/components/profile/profileView.js index da0ab4c50..5797c4908 100644 --- a/src/components/profile/profileView.js +++ b/src/components/profile/profileView.js @@ -9,13 +9,18 @@ import { CollapsibleCard } from '../collapsibleCard'; import { Comments } from '../comments'; import { Header } from '../header'; import { NoPost, ProfileSummaryPlaceHolder, WalletDetailsPlaceHolder } from '../basicUIElements'; -import { Posts } from '../posts'; import { ProfileSummary } from '../profileSummary'; import { TabBar } from '../tabBar'; import { Wallet } from '../wallet'; // Constants -import { PROFILE_FILTERS, PROFILE_FILTERS_VALUE } from '../../constants/options/filters'; +import { + PROFILE_FILTERS, + PROFILE_FILTERS_OWN, + PROFILE_FILTERS_VALUE, + PROFILE_SUBFILTERS, + PROFILE_SUBFILTERS_VALUE, +} from '../../constants/options/filters'; // Utils import { getFormatedCreatedDate } from '../../utils/time'; @@ -74,24 +79,25 @@ class ProfileView extends PureComponent { return value; }; - _isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) { - return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20; - } + _onTabChange = ({ i }) => { + const { estimatedWalletValue, oldEstimatedWalletValue } = this.state; - render() { + if (i !== 2) { + this.setState({ + estimatedWalletValue: 0, + oldEstimatedWalletValue: estimatedWalletValue, + }); + } else { + this.setState({ estimatedWalletValue: oldEstimatedWalletValue }); + } + }; + + _renderProfileContent = () => { const { about, - activePage, - changeForceLoadPostState, - comments, - currencyRate, - currencySymbol, follows, - forceLoadPost, - getReplies, handleFollowUnfollowUser, handleMuteUnmuteUser, - handleOnBackPress, handleOnFavoritePress, handleOnFollowsPress, handleOnPressProfileEdit, @@ -104,20 +110,164 @@ class ProfileView extends PureComponent { isOwnProfile, isProfileLoading, isReady, - quickProfile, resourceCredits, selectedUser, - username, votingPower, - isHideImage, } = this.props; - const { - isSummaryOpen, - collapsibleMoreHeight, - estimatedWalletValue, - oldEstimatedWalletValue, - } = this.state; + const { isSummaryOpen, collapsibleMoreHeight } = this.state; + + return !isReady ? ( + + ) : ( + + + + ); + }; + + _contentComentsTab = () => { + const { comments, getReplies, intl, isOwnProfile, username, isHideImage } = this.props; + + return ( + + {comments && comments.length > 0 ? ( + { + this._handleOnScroll(); + if (this._isCloseToBottom(nativeEvent)) { + this._loadMoreComments(); + } + }} + contentContainerStyle={styles.scrollContentContainer} + //scrollEventThrottle={16} + > + + + ) : ( + + )} + + ); + }; + + _contentWalletTab = () => { + const { currencyRate, currencySymbol, selectedUser } = this.props; + + const { isSummaryOpen, estimatedWalletValue } = this.state; + return ( + + {selectedUser ? ( + this.setState({ estimatedWalletValue: value })} + selectedUser={selectedUser} + handleOnScroll={isSummaryOpen ? this._handleOnScroll : null} + /> + ) : ( + + )} + + ); + }; + + _renderTabs = () => { + const { changeForceLoadPostState, forceLoadPost, username, isOwnProfile } = this.props; + + const { isSummaryOpen } = this.state; + + const filterOptions = isOwnProfile ? PROFILE_FILTERS_OWN : PROFILE_FILTERS; + + //compile content overrides + const tabContentOverrides = new Map(); + tabContentOverrides.set(1, this._contentComentsTab()); + if (!isOwnProfile) { + tabContentOverrides.set(2, this._contentWalletTab()); + } + + return ( + + + + ); + }; + + _isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) { + return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20; + } + + render() { + const { handleOnBackPress, isOwnProfile, quickProfile } = this.props; return ( @@ -128,148 +278,8 @@ class ProfileView extends PureComponent { handleOnBackPress={handleOnBackPress} /> - {!isReady ? ( - - ) : ( - - - - )} - - ( - - )} - onChangeTab={({ i }) => { - if (i !== 2) { - this.setState({ - estimatedWalletValue: 0, - oldEstimatedWalletValue: estimatedWalletValue, - }); - } else { - this.setState({ estimatedWalletValue: oldEstimatedWalletValue }); - } - }} - > - - - - - - {comments && comments.length > 0 ? ( - { - this._handleOnScroll(); - if (this._isCloseToBottom(nativeEvent)) { - this._loadMoreComments(); - } - }} - contentContainerStyle={styles.scrollContentContainer} - //scrollEventThrottle={16} - > - - - ) : ( - - )} - - {!isOwnProfile && ( - - {selectedUser ? ( - - this.setState({ estimatedWalletValue: value }) - } - selectedUser={selectedUser} - handleOnScroll={isSummaryOpen ? this._handleOnScroll : null} - /> - ) : ( - - )} - - )} - + {this._renderProfileContent()} + {this._renderTabs()} ); diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 79e8a04c8..fe4140db1 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -16,6 +16,9 @@ export const TabbedPosts = ({ isFeedScreen, feedUsername, pageType, + tabContentOverrides, + stackedTabs, + onTabChange, ...props }:TabbedPostsProps) => { @@ -25,7 +28,7 @@ export const TabbedPosts = ({ const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails); //initialize state - const [initialTabIndex] = useState(selectedOptionIndex == 0 && isFeedScreen ? filterOptions.length : selectedOptionIndex) + const [initialTabIndex] = useState(selectedOptionIndex == 0 && stackedTabs ? filterOptions.length : selectedOptionIndex) const [mainFilters] = useState( filterOptions.map((label, index)=>({ @@ -56,7 +59,6 @@ export const TabbedPosts = ({ }else{ setSelectedFilter(filter) } - } const _toggleHideImagesFlag = () => { @@ -70,19 +72,23 @@ export const TabbedPosts = ({ //initialize first set of pages - const pages = combinedFilters.map((filter)=>( - - )) + const pages = combinedFilters.map((filter, index)=>{ + if(tabContentOverrides && tabContentOverrides.has(index)){ + return tabContentOverrides.get(index); + } + return ( + + ) + }); //render tab bar @@ -90,7 +96,7 @@ export const TabbedPosts = ({ return ( + renderTabBar={_renderTabBar} + onTabChange={onTabChange} + > {pages} ); diff --git a/src/components/tabbedPosts/services/tabbedPostsModels.ts b/src/components/tabbedPosts/services/tabbedPostsModels.ts index 676cc8456..36fc1cdff 100644 --- a/src/components/tabbedPosts/services/tabbedPostsModels.ts +++ b/src/components/tabbedPosts/services/tabbedPostsModels.ts @@ -11,6 +11,9 @@ export interface TabbedPostsProps { pageType:string, tag:string, forceLoadPosts:boolean, + tabContentOverrides:Map, + stackedTabs:boolean, + onTabChange:(index:number)=>void handleOnScroll:()=>void, } @@ -44,7 +47,6 @@ export interface TabMeta { export interface TabContentProps { filterKey:string, - tabLabel:string, isFeedScreen:boolean, getFor:string, pageType:string, diff --git a/src/components/tabbedPosts/view/stackedTabBar.tsx b/src/components/tabbedPosts/view/stackedTabBar.tsx index 26734327e..00cf1ef3a 100644 --- a/src/components/tabbedPosts/view/stackedTabBar.tsx +++ b/src/components/tabbedPosts/view/stackedTabBar.tsx @@ -20,7 +20,6 @@ interface StackedTabBarProps { } export const StackedTabBar = ({ - activeTab, goToPage, tabs, shouldStack, @@ -39,9 +38,13 @@ export const StackedTabBar = ({ return ( <> - intl.formatMessage({ id: `home.${item.label.toLowerCase()}` }).toUpperCase(), - )} + options={firstStack.map((item, index) => { + return tabs[index] + ? tabs[index] + : intl.formatMessage({ id: item.label.toLowerCase() }).toUpperCase() + }) + } + selectedOptionIndex={selectedFilterIndex} rightIconName="view-module" rightIconType="MaterialIcons" @@ -65,7 +68,7 @@ export const StackedTabBar = ({ selectedFilterIndex == 0 && shouldStack && ( - intl.formatMessage({ id: `home.${item.label.toLowerCase()}` }).toUpperCase(), + intl.formatMessage({ id: item.label.toLowerCase() }).toUpperCase(), )} selectedOptionIndex={selectedSecondStackIndex} onDropdownSelect={(index)=>{ diff --git a/src/components/tabbedPosts/view/tabContent.tsx b/src/components/tabbedPosts/view/tabContent.tsx index f006f7682..9da654137 100644 --- a/src/components/tabbedPosts/view/tabContent.tsx +++ b/src/components/tabbedPosts/view/tabContent.tsx @@ -8,6 +8,7 @@ import { setInitPosts } from '../../../redux/actions/postsAction'; import NewPostsPopup from './newPostsPopup'; import { calculateTimeLeftForPostCheck } from '../services/tabbedPostsReducer'; import { AppState } from 'react-native'; +import { PostsListRef } from '../../postsList/container/postsListContainer'; const TabContent = ({ diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 326d4fd59..481e3060c 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -243,7 +243,7 @@ "posts": "Posts", "friends": "Friends", "communities": "Communities", - "popup_postfix":"Posted" + "popup_postfix":"Posted", }, "side_menu": { "profile": "Profile", diff --git a/src/constants/options/filters.js b/src/constants/options/filters.js index 17a6ec9f6..09941d862 100644 --- a/src/constants/options/filters.js +++ b/src/constants/options/filters.js @@ -1,14 +1,18 @@ -export const POPULAR_FILTERS = ['FEED', 'TOP', 'HOT', 'NEW']; +export const POPULAR_FILTERS = ['home.FEED', 'home.TOP', 'home.HOT', 'home.NEW']; export const POPULAR_FILTERS_VALUE = ['feed', 'trending', 'hot', 'created']; -export const FEED_SUBFILTERS = ['friends', 'communities']; +export const FEED_SUBFILTERS = ['home.friends', 'home.communities']; export const FEED_SUBFILTERS_VALUE = ['friends', 'communities']; -export const GLOBAL_POST_FILTERS = ['TOP', 'HOT', 'NEW']; +export const GLOBAL_POST_FILTERS = ['home.TOP', 'home.HOT', 'home.NEW']; export const GLOBAL_POST_FILTERS_VALUE = ['trending', 'hot', 'created']; -export const PROFILE_FILTERS = ['BLOG', 'POSTS']; -export const PROFILE_FILTERS_VALUE = ['blog', 'posts']; +export const PROFILE_FILTERS_OWN = ['profile.post', 'profile.replies']; +export const PROFILE_FILTERS = ['profile.post', 'profile.comments', 'profile.wallet']; +export const PROFILE_FILTERS_VALUE = ['feed', 'comments', 'wallet']; + +export const PROFILE_SUBFILTERS = ['home.BLOG', 'home.POSTS']; +export const PROFILE_SUBFILTERS_VALUE = ['blog', 'posts']; // 'TRENDING', // 'HOT', diff --git a/src/screens/feed/screen/feedScreen.js b/src/screens/feed/screen/feedScreen.js index 1b77f530f..4adeeced9 100644 --- a/src/screens/feed/screen/feedScreen.js +++ b/src/screens/feed/screen/feedScreen.js @@ -34,17 +34,8 @@ const FeedScreen = () => { selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2} feedUsername={get(currentAccount, 'name', null)} isFeedScreen={true} + stackedTabs={get(currentAccount, 'name', null)} /> - {/* */} )}