linked up filter selection modal with redux

src/components/customiseFiltersModal/customiseFiltersModal.tsx

@@ -1,9 +1,12 @@
 import React, { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
+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} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
+import { CheckBox } from '..';
+import { DEFAULT_FEED_FILTERS_LOGGED_IN, FEED_SCREEN_FILTER_MAP } from '../../constants/options/filters';
 
 import { ThemeContainer } from '../../containers';
 import { setFeedScreenFilters } from '../../redux/actions/postsAction';
@@ -18,13 +21,13 @@ export interface CustomiseFiltersModalRef {
 
 const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) => {
     const sheetModalRef = useRef<ActionSheet>();
-    const dispatch = useDispatch()
+    const dispatch = useDispatch();
 
-    const [selectedFilters, setSelectedFilters] = useState([
-        'friends',
-        'hot',
-        'created',
-    ]);
+    const feedScreenFilters = useSelector(state => state.posts.feedScreenFilters);
+
+    const [selectedFilters, setSelectedFilters] = useState<Map<string, number>>(
+        new Map(feedScreenFilters.map((key:string, index:number)=>[key, index]))   
+    );
 
     const intl = useIntl(); 
  
@@ -36,10 +39,60 @@ const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) =>
       }));
 
 
+    const _onClose = () => {
+        sheetModalRef.current?.setModalVisible(false);
+    }
+
     //save snippet based on editor type
-    const _onDone = async () => {
-       dispatch(setFeedScreenFilters(selectedFilters))
-       sheetModalRef.current?.setModalVisible(false);
+    const _onApply = () => {
+        if(selectedFilters.size !== 3){
+            alert("Please select exactly three filters");
+            return;
+        }
+        const entries = Array.from(selectedFilters.entries());
+        entries.sort((a, b)=>a[1]<b[1]?-1:1);
+
+       dispatch(setFeedScreenFilters(entries.map((e)=>e[0])));
+       _onClose();
+    }
+
+
+    const _renderOptions = () => {
+        const options = [];
+        for(const key in FEED_SCREEN_FILTER_MAP){
+            if(FEED_SCREEN_FILTER_MAP.hasOwnProperty(key)){
+                const isSelected = selectedFilters.has(key);
+            
+                const _onPress = () => {
+                    if(isSelected){
+                        selectedFilters.delete(key);
+                    }else{
+                        var index = Object.keys(FEED_SCREEN_FILTER_MAP).indexOf(key);
+                        selectedFilters.set(key, index);
+                    }
+                    setSelectedFilters(new Map([...selectedFilters]));
+                }
+
+                options.push((
+                    <TouchableOpacity onPress={_onPress}>
+                        <View style={styles.checkView}>
+                            <Text style={styles.informationText}>
+                                {intl.formatMessage({
+                                    id:FEED_SCREEN_FILTER_MAP[key]
+                                })}
+                            </Text>
+                            <CheckBox locked isChecked={isSelected} />
+                        </View>
+                    </TouchableOpacity>
+                ))
+            }
+        }
+
+        return (
+            <View style={styles.textContainer}>
+                {options}
+            </View>
+        )
     }
 
 
@@ -51,23 +104,20 @@ const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) =>
                     keyboardVerticalOffset={Platform.OS == 'ios' ? 64 : null}
                     behavior={Platform.OS === 'ios' ? 'padding' : null}
                 >
-                    <Text>Customise Filters</Text>
-                    <View style={styles.inputContainer}>
-
-                        {[0,0,0,0,0,0].map(()=>(
-                            <Text>Filter</Text>
-                        ))}
-                    </View>
+                    <Text style={styles.title}>Customise Filters</Text>
+                   
+                   {_renderOptions()}
+                   
 
                    
-                        <View style={styles.actionPanel}>
-                            <TextButton 
-                                text={'DONE'}
-                                onPress={_onDone}
-                                textStyle={styles.btnText}
-                                style={styles.button}
-                            />
-                        </View>
+                    <View style={styles.actionPanel}>
+                        <TextButton 
+                            text={'APPLY'}
+                            onPress={_onApply}
+                            textStyle={styles.btnText}
+                            style={styles.button}
+                        />
+                    </View>
                     
                 </KeyboardAvoidingView>
             )}
@@ -79,7 +129,7 @@ const CustomiseFiltersModal = (props:any, ref:Ref<CustomiseFiltersModalRef>) =>
         ref={sheetModalRef}
         containerStyle={styles.sheetContent}
         indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
-        onClose={_onDone}
+        onClose={_onClose}
         > 
         {_renderContent}
     </ActionSheet> 

src/components/customiseFiltersModal/customiseFiltersModalStyles.ts

@@ -1,4 +1,4 @@
-import { TextStyle, StyleSheet, ViewStyle, ImageStyle } from 'react-native';
+import { TextStyle, StyleSheet, ViewStyle, ImageStyle, Dimensions } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
@@ -71,4 +71,22 @@ export default EStyleSheet.create({
         alignItems:'center', 
     } as ViewStyle,
 
+    checkView: {
+        width:Dimensions.get('screen').width - 80,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems:'center',
+        marginHorizontal: 20,
+        marginVertical:4,
+      } as ViewStyle,
+
+
+      informationText: {
+        color: '$primaryBlack',
+        margin: 10,
+        fontSize:18,
+      } as TextStyle,
+
+
+
 })

src/components/tabbedPosts/container/tabbedPosts.tsx

@@ -31,12 +31,17 @@ export const TabbedPosts = ({
   //initialize state
   const [initialTabIndex] = useState(selectedOptionIndex == 0 && stackedTabs ? filterOptions.length : selectedOptionIndex)
 
-  const [mainFilters] = useState<TabItem[]>(
-    filterOptions.map((label, index)=>({
-      filterKey:filterOptionsValue[index], 
-      label
-    } as TabItem))
-  )
+  // const [mainFilters] = useState<TabItem[]>(
+  //   filterOptions.map((label, index)=>({
+  //     filterKey:filterOptionsValue[index], 
+  //     label
+  //   } as TabItem))
+  // )
+
+  const mainFilters = filterOptions.map((label, index)=>({
+        filterKey:filterOptionsValue[index], 
+        label
+      } as TabItem));
 
   const [subFilters] = useState<TabItem[]>(
     feedSubfilterOptions
@@ -47,7 +52,8 @@ export const TabbedPosts = ({
     : []
   )
 
-  const [combinedFilters] = useState([...mainFilters, ...subFilters]);
+  const combinedFilters = [...mainFilters, ...subFilters]
+  // const [combinedFilters] = useState([...mainFilters, ...subFilters]);
   const [selectedFilter, setSelectedFilter] = useState(combinedFilters[initialTabIndex].filterKey)
   const [filterScrollRequest, createFilterScrollRequest] = useState<string|null>(null)
 

src/components/tabbedPosts/view/tabContent.tsx

@@ -4,7 +4,7 @@ import { getPromotedPosts, loadPosts } from '../services/tabbedPostsFetch';
 import { LoadPostsOptions, TabContentProps, TabMeta } from '../services/tabbedPostsModels';
 import {useSelector, useDispatch } from 'react-redux';
 import TabEmptyView from './listEmptyView';
-import { setInitPosts } from '../../../redux/actions/postsAction';
+import { setInitPosts } from '../../../redux/actions/postsAction.ts';
 import NewPostsPopup from './newPostsPopup';
 import { calculateTimeLeftForPostCheck } from '../services/tabbedPostsReducer';
 import { AppState } from 'react-native';

src/constants/options/filters.ts

@@ -6,11 +6,11 @@ export const DEFAULT_FEED_FILTERS_LOGGED_IN = ['friends', 'communities', 'hot'];
 
 
 export const FEED_SCREEN_FILTER_MAP  = {
+    friends:'home.friends',
+    communities:'home.communities',
     trending:'home.top',
     hot:'home.hot',
     created:'home.new',
-    friends:'home.friends',
-    communities:'home.communities'
 }
 
 export const GLOBAL_POST_FILTERS = ['home.TOP', 'home.HOT', 'home.NEW'];

src/redux/constants/constants.js

@@ -34,7 +34,6 @@ export const CHANGE_REBLOG_NOTIFICATION = 'CHANGE_REBLOG_NOTIFICATION';
 export const CHANGE_TRANSFERS_NOTIFICATION = 'CHANGE_TRANSFERS_NOTIFICATION';
 export const CHANGE_ALL_NOTIFICATION_SETTINGS = 'CHANGE_ALL_NOTIFICATION_SETTINGS';
 
-
 // Accounts
 export const ADD_OTHER_ACCOUNT = 'ADD_OTHER_ACCOUNT';
 export const FETCH_ACCOUNT_FAIL = 'FETCH_ACCOUNT_FAIL';

src/screens/application/container/applicationContainer.js

@@ -80,7 +80,7 @@ import {
   toastNotification,
   updateActiveBottomTab,
 } from '../../../redux/actions/uiAction';
-import { resetLocalVoteMap } from '../../../redux/actions/postsAction.ts';
+import { resetLocalVoteMap, setFeedScreenFilters } from '../../../redux/actions/postsAction';
 
 import { encryptKey } from '../../../utils/crypto';
 

src/screens/feed/screen/feedScreen.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect } from 'react';
 import { SafeAreaView } from 'react-native';
 import { useSelector } from 'react-redux';
 import get from 'lodash/get';
@@ -24,11 +24,11 @@ import {
 } from '../../../constants/options/filters';
 
 const FeedScreen = () => {
-  const feedScreenFilters = useSelector(
-    (state) => state.posts.feedScreenFilters || DEFAULT_FEED_FILTERS_LOGGED_IN,
-  );
+  const feedScreenFilters = useSelector((state) => state.posts.feedScreenFilters);
   const filterOptions = feedScreenFilters.map((key) => FEED_SCREEN_FILTER_MAP[key]);
 
+  useEffect(() => {}, [feedScreenFilters]);
+
   return (
     <AccountContainer>
       {({ currentAccount }) => (