linked up new tabs store with main feed screen

package.json

@@ -127,6 +127,7 @@
     "@babel/runtime": "^7.6.2",
     "@bam.tech/react-native-make": "^2.0.0",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@types/react-redux": "^7.1.16",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.9.0",
     "babel-plugin-transform-remove-console": "^6.9.4",

src/components/customiseFiltersModal/customiseFiltersModal.tsx

@@ -4,11 +4,13 @@ import { TouchableOpacity } from 'react-native';
 import { KeyboardAvoidingView, Platform, View, Text } from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
 import EStyleSheet from 'react-native-extended-stylesheet';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import { CheckBox } from '..';
 import { DEFAULT_FEED_FILTERS, FEED_SCREEN_FILTER_MAP } from '../../constants/options/filters';
 
 import { ThemeContainer } from '../../containers';
+import { useAppSelector } from '../../hooks';
+import { setMainTabs } from '../../redux/actions/customTabsAction';
 import { setFeedScreenFilters } from '../../redux/actions/postsAction';
 import { TextButton } from '../buttons';
 import styles from './customiseFiltersModalStyles';
@@ -23,21 +25,24 @@ const getFeedScreenFilterIndex = (key:string) => Object.keys(FEED_SCREEN_FILTER_
 
 
 const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) => {
-    const sheetModalRef = useRef<ActionSheet>();
     const dispatch = useDispatch();
+    const intl = useIntl(); 
 
-    const feedScreenFilters = useSelector(state => state.posts.feedScreenFilters || DEFAULT_FEED_FILTERS);
+    //refs
+    const sheetModalRef = useRef<ActionSheet>();
 
+    //redux
+    const mainTabs = useAppSelector(state => state.customTabs.mainTabs || DEFAULT_FEED_FILTERS);
+
+    //state
     const [selectedFilters, setSelectedFilters] = useState<Map<string, number>>(
-        new Map(feedScreenFilters.map((key:string)=>[
+        new Map(mainTabs.map((key:string)=>[
             key,
             getFeedScreenFilterIndex(key)
         ]))   
     );
 
-    const intl = useIntl(); 
- 
-
+    //external calls
     useImperativeHandle(ref, () => ({
         show: () => {
           sheetModalRef.current?.setModalVisible(true);
@@ -45,6 +50,7 @@ const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) =>
       }));
 
 
+    //actions
     const _onClose = () => {
         sheetModalRef.current?.setModalVisible(false);
     }
@@ -58,11 +64,15 @@ const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) =>
         const entries = Array.from(selectedFilters.entries());
         entries.sort((a, b)=>a[1]<b[1]?-1:1);
 
-       dispatch(setFeedScreenFilters(entries.map((e)=>e[0])));
+       dispatch(setMainTabs(entries.map((e)=>e[0])));
        _onClose();
     }
 
 
+    /**
+     * UI RENDERERS
+     */
+
     const _renderOptions = () => {
         const options = [];
         for(const key in FEED_SCREEN_FILTER_MAP){

src/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './redux/store/store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/redux/store/store.ts

@@ -23,12 +23,17 @@ const persistedReducer = persistReducer(persistConfig, reducer);
 const middleware = [thunk];
 
 const enhancers = __DEV__
-? compose(applyMiddleware(...middleware), Reactotron.createEnhancer())
-: applyMiddleware(...middleware)
-
+  ? compose(applyMiddleware(...middleware), Reactotron.createEnhancer())
+  : applyMiddleware(...middleware);
 
 const store = createStore(persistedReducer, enhancers);
 
 const persistor = persistStore(store);
 
 export { store, persistor };
+
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch

src/screens/feed/screen/feedScreen.tsx

@@ -13,20 +13,15 @@ import { AccountContainer } from '../../../containers';
 import styles from './feedStyles';
 
 import {
-  FEED_SUBFILTERS,
-  FEED_SUBFILTERS_VALUE,
-  FEED_SCREEN_FILTERS,
   FEED_SCREEN_FILTER_MAP,
   DEFAULT_FEED_FILTERS,
 } from '../../../constants/options/filters';
+import { useAppSelector } from '../../../hooks';
 
 const FeedScreen = () => {
-  const feedScreenFilters = useSelector(
-    (state) => state.posts.feedScreenFilters || DEFAULT_FEED_FILTERS,
-  );
-  const filterOptions = feedScreenFilters.map((key) => FEED_SCREEN_FILTER_MAP[key]);
 
-  useEffect(() => {}, [feedScreenFilters]);
+  const mainTabs = useAppSelector((state) => state.customTabs.mainTabs || DEFAULT_FEED_FILTERS);
+  const filterOptions = mainTabs.map((key) => FEED_SCREEN_FILTER_MAP[key]);
 
   return (
     <AccountContainer>
@@ -37,7 +32,7 @@ const FeedScreen = () => {
             <TabbedPosts
               key={JSON.stringify(filterOptions)} //this hack of key change resets tabbedposts whenever filters chanage, effective to remove filter change android bug
               filterOptions={filterOptions}
-              filterOptionsValue={feedScreenFilters}
+              filterOptionsValue={mainTabs}
               getFor={get(currentAccount, 'name', null) ? 'feed' : 'hot'}
               selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2}
               feedUsername={get(currentAccount, 'name', null)}

yarn.lock

@@ -650,6 +650,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.0.0", "@babel/template@^7.12.13", "@babel/template@^7.4.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -1281,7 +1288,7 @@
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.39.tgz#4be64bbacf3813c79c0dab895c6b0fdc7d5e513f"
   integrity sha512-lYR2Y/tV2ujpk/WyUc7S0VLI0a9hrtVIN9EwnrNo5oSEJI2cK2/XrgwOQmXLL3eTulOESvh9qP6si9+DWM9cOA==
 
-"@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -1341,6 +1348,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react@*":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
@@ -7950,6 +7967,13 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
+redux@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"