diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 3f325c2c5..ca3f3a6a4 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -1,81 +1,60 @@ import React, { useState } from 'react'; -// import { Animated, View, TouchableOpacity, StyleSheet } from 'react-native'; -// import { TabView, SceneMap } from 'react-native-tab-view'; +import { useIntl } from 'react-intl'; +import ScrollableTabView from 'react-native-scrollable-tab-view'; +import { useSelector } from 'react-redux'; +import { FilterBar } from '../..'; +import PostsList from '../../postsList'; +import { StackedTabBar } from '../view/stackedTabBar'; +import { TabbedPostsProps } from './tabbedPostsProps'; -// const FirstRoute = () => ( -// -// ); -// const SecondRoute = () => ( -// -// ); -export const TabbedPosts = () => { - return null; - // const [state, setState] = useState({ - // index: 0, - // routes: [ - // { key: 'first', title: 'First' }, - // { key: 'second', title: 'Second' }, - // ], - // }) +export const TabbedPosts = ({ + filterOptions, + filterOptionsValue, + initialFilterIndex, + feedSubfilterOptions, + feedSubfilterOptionsValue, + isFeedScreen +}:TabbedPostsProps) => { - // const _handleIndexChange = (index) => setState({...state, index }); + const intl = useIntl(); + const isLoggedIn = useSelector((state) => state.application.isLoggedIn); - // const _renderTabBar = (props) => { - // const inputRange = props.navigationState.routes.map((x, i) => i); + const [initialPageIndex] = useState(initialFilterIndex == 0 && isFeedScreen && isLoggedIn ? filterOptions.length : initialFilterIndex) - // return ( - // - // {props.navigationState.routes.map((route, i) => { - // const opacity = props.position.interpolate({ - // inputRange, - // outputRange: inputRange.map((inputIndex) => - // inputIndex === i ? 1 : 0.5 - // ), - // }); - // return ( - // setState({...state, index: i })}> - // {route.title} - // - // ); - // })} - // - // ); - // }; + const pages = [ + ...filterOptions, + ...feedSubfilterOptions, + ].map((filter)=>( + + )) - // //routes will be build dynamically - // const _renderScene = SceneMap({ - // first: FirstRoute, - // second: SecondRoute, - // }); - - // //tab view will be the parent component - // return ( - // - // ); - // + const _renderTabBar = (props) => { + return ( + + ) + } + + + return ( + + {pages} + + ); + } - -// const styles = StyleSheet.create({ -// container: { -// flex: 1, -// }, -// tabBar: { -// flexDirection: 'row', -// }, -// tabItem: { -// flex: 1, -// alignItems: 'center', -// padding: 16, -// }, -// }); diff --git a/src/components/tabbedPosts/container/tabbedPostsProps.ts b/src/components/tabbedPosts/container/tabbedPostsProps.ts new file mode 100644 index 000000000..7caaf04c2 --- /dev/null +++ b/src/components/tabbedPosts/container/tabbedPostsProps.ts @@ -0,0 +1,9 @@ +export interface TabbedPostsProps { + filterOptions:string[], + filterOptionsValue:string[], + isFeedScreen:boolean, + feedUsername:string, + initialFilterIndex:number, + feedSubfilterOptions:string[], + feedSubfilterOptionsValue:string[], +} \ No newline at end of file diff --git a/src/components/tabbedPosts/view/stackedTabBar.tsx b/src/components/tabbedPosts/view/stackedTabBar.tsx new file mode 100644 index 000000000..3fc260144 --- /dev/null +++ b/src/components/tabbedPosts/view/stackedTabBar.tsx @@ -0,0 +1,68 @@ +import React, { useState } from "react"; +import { useIntl } from "react-intl"; +import { FilterBar } from "../.."; + +interface StackedTabBarProps { + activeTab:boolean, + goToPage:(pageIndex)=>void, + tabs:string[], + shouldStack:boolean, + filterOptions:string[], + subFilterOptions:string[], + initialFilterIndex:number +} + +export const StackedTabBar = ({ + activeTab, + goToPage, + tabs, + shouldStack, + filterOptions, + subFilterOptions, + initialFilterIndex + +}:StackedTabBarProps) => { + + const intl = useIntl(); + const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFilterIndex); + const [selectedFeedSubfilterIndex, setSelectedFeedSubfilterIndex] = useState(0); + + return ( + <> + + intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(), + )} + selectedOptionIndex={selectedFilterIndex} + rightIconName="view-module" + rightIconType="MaterialIcons" + onDropdownSelect={(index)=>{ + setSelectedFilterIndex(index); + if(index == 0 && shouldStack){ + goToPage(filterOptions.length + selectedFeedSubfilterIndex) + }else{ + goToPage(index); + } + + }} + onRightIconPress={()=>{}} + /> + + { + selectedFilterIndex == 0 && shouldStack && ( + + intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(), + )} + selectedOptionIndex={selectedFeedSubfilterIndex} + onDropdownSelect={(index)=>{ + setSelectedFeedSubfilterIndex(index) + goToPage(filterOptions.length + index); + }} + /> + ) + } + + + ) + } \ No newline at end of file diff --git a/src/screens/feed/screen/feedScreen.js b/src/screens/feed/screen/feedScreen.js index 8840fa19f..97be29bad 100644 --- a/src/screens/feed/screen/feedScreen.js +++ b/src/screens/feed/screen/feedScreen.js @@ -3,7 +3,7 @@ import { SafeAreaView } from 'react-native'; import get from 'lodash/get'; // Components -import { Posts, Header } from '../../../components'; +import { Posts, Header, TabbedPosts } from '../../../components'; // Container import { AccountContainer } from '../../../containers'; @@ -25,7 +25,17 @@ const FeedScreen = () => {
- + {/* { selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2} feedUsername={get(currentAccount, 'name', null)} isFeedScreen={true} - /> + /> */} )}