diff --git a/package.json b/package.json index 99a840adb..4c3602808 100644 --- a/package.json +++ b/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", diff --git a/src/components/customiseFiltersModal/customiseFiltersModal.tsx b/src/components/customiseFiltersModal/customiseFiltersModal.tsx index 5caab7330..5083bceab 100644 --- a/src/components/customiseFiltersModal/customiseFiltersModal.tsx +++ b/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) => { - const sheetModalRef = useRef(); const dispatch = useDispatch(); + const intl = useIntl(); - const feedScreenFilters = useSelector(state => state.posts.feedScreenFilters || DEFAULT_FEED_FILTERS); + //refs + const sheetModalRef = useRef(); + //redux + const mainTabs = useAppSelector(state => state.customTabs.mainTabs || DEFAULT_FEED_FILTERS); + + //state const [selectedFilters, setSelectedFilters] = useState>( - 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) => })); + //actions const _onClose = () => { sheetModalRef.current?.setModalVisible(false); } @@ -58,11 +64,15 @@ const CustomiseFiltersModal = (props:any, ref:Ref) => const entries = Array.from(selectedFilters.entries()); entries.sort((a, b)=>a[1]e[0]))); + dispatch(setMainTabs(entries.map((e)=>e[0]))); _onClose(); } + /** + * UI RENDERERS + */ + const _renderOptions = () => { const options = []; for(const key in FEED_SCREEN_FILTER_MAP){ diff --git a/src/hooks.ts b/src/hooks.ts new file mode 100644 index 000000000..30aa12113 --- /dev/null +++ b/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() +export const useAppSelector: TypedUseSelectorHook = useSelector \ No newline at end of file diff --git a/src/redux/store/store.js b/src/redux/store/store.ts similarity index 68% rename from src/redux/store/store.js rename to src/redux/store/store.ts index 099bef888..c9363db2f 100644 --- a/src/redux/store/store.js +++ b/src/redux/store/store.ts @@ -22,13 +22,18 @@ const persistedReducer = persistReducer(persistConfig, reducer); const middleware = [thunk]; -const enhancers = __DEV__ -? compose(applyMiddleware(...middleware), Reactotron.createEnhancer()) -: applyMiddleware(...middleware) - +const enhancers = __DEV__ + ? 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 +// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} +export type AppDispatch = typeof store.dispatch \ No newline at end of file diff --git a/src/screens/feed/screen/feedScreen.js b/src/screens/feed/screen/feedScreen.tsx similarity index 78% rename from src/screens/feed/screen/feedScreen.js rename to src/screens/feed/screen/feedScreen.tsx index 9cfdc5e32..10243729a 100644 --- a/src/screens/feed/screen/feedScreen.js +++ b/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 ( @@ -37,7 +32,7 @@ const FeedScreen = () => {