Merge branch 'nt/native-filter' into nt/native-filters

# Conflicts:
#	ios/Ecency.xcodeproj/project.pbxproj
#	src/components/tabbedPosts/container/tabbedPosts.tsx
#	src/components/tabbedPosts/view/stackedTabBar.tsx

src/components/index.js

@@ -86,6 +86,7 @@ import PostBoost from './postBoost/postBoostView';
 import Profile from './profile/profileView';
 import Promote from './promote/promoteView';
 import { SpinGame } from './spinGame/spinGameView';
+import {TabbedPosts} from './tabbedPosts';
 import { ActionModal } from './actionModal';
 import { TabbedPosts } from './tabbedPosts';
 
@@ -222,6 +223,7 @@ export {
   PopoverWrapper,
   CommunitiesList,
   SubscribedCommunitiesList,
+  TabbedPosts,
   ActionModal,
   TabbedPosts,
 };

src/components/tabbedPosts/container/tabbedPosts.tsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { useSelector } from 'react-redux';
-import { FilterBar } from '../..';
+import { useDispatch, useSelector } from 'react-redux';
 import PostsList from '../../postsList';
-import { StackedTabBar } from '../view/stackedTabBar';
+import { StackedTabBar, TabItem } from '../view/stackedTabBar';
 import { TabbedPostsProps } from './tabbedPostsProps';
 
 
@@ -14,35 +13,54 @@ export const TabbedPosts = ({
   initialFilterIndex,
   feedSubfilterOptions,
   feedSubfilterOptionsValue,
-  isFeedScreen
+  isFeedScreen,
+  feedUsername,
 }:TabbedPostsProps) => {
 
   const intl = useIntl();
   const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
 
-  const [initialPageIndex] = useState(initialFilterIndex == 0 && isFeedScreen && isLoggedIn ? filterOptions.length : initialFilterIndex)
+  //initialize state
+  const [initialTabIndex] = useState(initialFilterIndex == 0 && isFeedScreen ? filterOptions.length : initialFilterIndex)
 
+  const [mainFilters] = useState<TabItem[]>(
+    filterOptions.map((label, index)=>({
+      filterKey:filterOptionsValue[index], 
+      label
+    } as TabItem))
+  )
 
-  const pages = [
-    ...filterOptions,
-    ...feedSubfilterOptions,
-  ].map((filter)=>(
-    <PostsList 
-      tabLabel={filter}
+  const [subFilters] = useState<TabItem[]>(
+    feedSubfilterOptions.map((label, index)=>({
+      filterKey:feedSubfilterOptionsValue[index], 
+      label
+    } as TabItem))
+  )
+
+  const [combinedFilters] = useState([...mainFilters, ...subFilters]);
+  const [selectedFilter, setSelectedFilter] = useState<string>(combinedFilters[initialTabIndex].filterKey);
+
+  
+  //initialize first set of pages
+  const pages = combinedFilters.map((filter)=>(
+    <PostsList
+      tabLabel={filter.label}
       isFeedScreen={isFeedScreen}
       promotedPosts={[]}
     />
   ))
 
 
+  //render tab bar
   const _renderTabBar = (props) => {
     return (
       <StackedTabBar 
         {...props}
-        shouldStack={isFeedScreen && isLoggedIn}
-        filterOptions={filterOptions}
-        subFilterOptions={feedSubfilterOptions}
-        initialFilterIndex={initialFilterIndex}
+        shouldStack={isFeedScreen && feedUsername}
+        firstStack={mainFilters}
+        secondStack={subFilters}
+        initialFirstStackIndex={initialFilterIndex}
+        onFilterSelect={setSelectedFilter}
       />
     )
   }
@@ -51,7 +69,7 @@ export const TabbedPosts = ({
   return (
     <ScrollableTabView
       scrollWithoutAnimation={true}
-      initialPage={initialPageIndex}
+      initialPage={initialTabIndex}
       renderTabBar={_renderTabBar}>
       {pages}
     </ScrollableTabView>

src/components/tabbedPosts/view/stackedTabBar.tsx

@@ -2,14 +2,20 @@ import React, { useState } from "react";
 import { useIntl } from "react-intl";
 import { FilterBar } from "../..";
 
+export interface TabItem {
+  filterKey:string;
+  label:string;
+}
+
 interface StackedTabBarProps {
-    activeTab:boolean, 
-    goToPage:(pageIndex)=>void, 
-    tabs:string[],
-    shouldStack:boolean,
-    filterOptions:string[],
-    subFilterOptions:string[],
-    initialFilterIndex:number
+    activeTab:boolean;
+    goToPage:(pageIndex)=>void;
+    tabs:string[];
+    shouldStack:boolean;
+    firstStack:TabItem[];
+    secondStack:TabItem[];
+    initialFirstStackIndex:number;
+    onFilterSelect:(filterKey:string)=>void;
 }
 
 export const StackedTabBar = ({
@@ -17,33 +23,38 @@ export const StackedTabBar = ({
     goToPage, 
     tabs,
     shouldStack,
-    filterOptions,
-    subFilterOptions,
-    initialFilterIndex
+    firstStack,
+    secondStack,
+    initialFirstStackIndex,
+    onFilterSelect
 
 }:StackedTabBarProps) => {
 
     const intl = useIntl();
-    const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFilterIndex);
-    const [selectedFeedSubfilterIndex, setSelectedFeedSubfilterIndex] = useState(0);
+    const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFirstStackIndex);
+    const [selectedSecondStackIndex, setSelectedSecondStackIndex] = useState(0);
 
     return (
       <>
       <FilterBar
-        options={filterOptions.map((item) =>
-          intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
+        options={firstStack.map((item) =>
+          intl.formatMessage({ id: `home.${item.label.toLowerCase()}` }).toUpperCase(),
         )}
         selectedOptionIndex={selectedFilterIndex}
         rightIconName="view-module"
         rightIconType="MaterialIcons"
         onDropdownSelect={(index)=>{
           setSelectedFilterIndex(index);
+
           if(index == 0 && shouldStack){
-            goToPage(filterOptions.length + selectedFeedSubfilterIndex)
+            const tabIndex = firstStack.length + selectedSecondStackIndex;
+            onFilterSelect(secondStack[selectedSecondStackIndex].filterKey);
+            goToPage(tabIndex)
           }else{
+            onFilterSelect(firstStack[index].filterKey);
             goToPage(index);
           }
-          
+
         }}
         onRightIconPress={()=>{}}
       />
@@ -51,13 +62,14 @@ export const StackedTabBar = ({
       {
         selectedFilterIndex == 0 && shouldStack && (
           <FilterBar
-            options={subFilterOptions.map((item) =>
-              intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
+            options={secondStack.map((item) =>
+              intl.formatMessage({ id: `home.${item.label.toLowerCase()}` }).toUpperCase(),
             )}
-            selectedOptionIndex={selectedFeedSubfilterIndex}
+            selectedOptionIndex={selectedSecondStackIndex}
             onDropdownSelect={(index)=>{
-              setSelectedFeedSubfilterIndex(index)
-              goToPage(filterOptions.length + index);
+              setSelectedSecondStackIndex(index)
+              onFilterSelect(secondStack[index].filterKey);
+              goToPage(firstStack.length + index);
             }}
           />
         )