-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: created useThreadFilter and useThreadSearch
- Loading branch information
1 parent
6ef34b5
commit 1de16de
Showing
6 changed files
with
269 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { useCallback } from 'react'; | ||
| import I18n from 'i18n-js'; | ||
|
|
||
| import { Filter } from '../filters'; | ||
| import UserPreferences from '../../../lib/methods/userPreferences'; | ||
| import { showActionSheetRef } from '../../../containers/ActionSheet'; | ||
| import { CustomIcon } from '../../../containers/CustomIcon'; | ||
| import { IUser, TSubscriptionModel, TThreadModel } from '../../../definitions'; | ||
| import getFilteredThreads from '../utils/helper'; | ||
|
|
||
| const THREADS_FILTER = 'threadsFilter'; | ||
|
|
||
| interface IUseThreadFilter { | ||
| user: IUser; | ||
| messages: TThreadModel[]; | ||
| subscription: TSubscriptionModel; | ||
| currentFilter: Filter; | ||
| setCurrentFilter: (filter: Filter) => void; | ||
| setDisplayingThreads: (threads: TThreadModel[]) => void; | ||
| } | ||
|
|
||
| const useThreadFilter = ({ | ||
| user, | ||
| messages, | ||
| subscription, | ||
| currentFilter, | ||
| setCurrentFilter, | ||
| setDisplayingThreads | ||
| }: IUseThreadFilter) => { | ||
| const initFilter = () => { | ||
| const savedFilter = UserPreferences.getString(THREADS_FILTER); | ||
| if (savedFilter) { | ||
| setCurrentFilter(savedFilter as Filter); | ||
| } | ||
| }; | ||
|
|
||
| const onFilterSelected = useCallback( | ||
| (filter: Filter) => { | ||
| const displayingThreads = getFilteredThreads(user, messages, subscription, filter); | ||
| setCurrentFilter(filter); | ||
| setDisplayingThreads(displayingThreads); | ||
| UserPreferences.setString(THREADS_FILTER, filter); | ||
| }, | ||
| [messages, subscription] | ||
| ); | ||
|
|
||
| const showFilters = () => { | ||
| showActionSheetRef({ | ||
| options: [ | ||
| { | ||
| title: I18n.t(Filter.All), | ||
| right: currentFilter === Filter.All ? () => <CustomIcon name='check' size={24} /> : undefined, | ||
| onPress: () => onFilterSelected(Filter.All) | ||
| }, | ||
| { | ||
| title: I18n.t(Filter.Following), | ||
| right: currentFilter === Filter.Following ? () => <CustomIcon name='check' size={24} /> : undefined, | ||
| onPress: () => onFilterSelected(Filter.Following) | ||
| }, | ||
| { | ||
| title: I18n.t(Filter.Unread), | ||
| right: currentFilter === Filter.Unread ? () => <CustomIcon name='check' size={24} /> : undefined, | ||
| onPress: () => onFilterSelected(Filter.Unread) | ||
| } | ||
| ] | ||
| }); | ||
| }; | ||
|
|
||
| return { | ||
| currentFilter, | ||
| initFilter, | ||
| showFilters | ||
| }; | ||
| }; | ||
|
|
||
| export default useThreadFilter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { debounce } from 'lodash'; | ||
| import I18n from 'i18n-js'; | ||
| import { NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack'; | ||
|
|
||
| import * as HeaderButton from '../../../containers/HeaderButton'; | ||
| import SearchHeader from '../../../containers/SearchHeader'; | ||
| import { ChatsStackParamList } from '../../../stacks/types'; | ||
| import { TNavigation } from '../../../stacks/stackType'; | ||
| import { TSubscriptionModel } from '../../../definitions'; | ||
| import { ISearchThreadMessages } from '../definitions'; | ||
|
|
||
| interface IUseThreadSearch { | ||
| isMasterDetail: boolean; | ||
| navigation: NativeStackNavigationProp<ChatsStackParamList & TNavigation, 'ThreadMessagesView'>; | ||
| search: ISearchThreadMessages; | ||
| setSearch: (search: ISearchThreadMessages) => void; | ||
| subscribeMessages: ({ subscription, searchText }: { subscription?: TSubscriptionModel; searchText?: string }) => void; | ||
| showFilters: () => void; | ||
| } | ||
|
|
||
| const useThreadSearch = ({ isMasterDetail, navigation, search, setSearch, subscribeMessages, showFilters }: IUseThreadSearch) => { | ||
| const getHeader = (triggerSearch?: boolean): NativeStackNavigationOptions => { | ||
| if (search.isSearching || triggerSearch) { | ||
| return { | ||
| headerLeft: () => ( | ||
| <HeaderButton.Container left> | ||
| <HeaderButton.Item iconName='close' onPress={onCancelSearchPress} /> | ||
| </HeaderButton.Container> | ||
| ), | ||
| headerTitle: () => <SearchHeader onSearchChangeText={onSearchChangeText} testID='thread-messages-view-search-header' />, | ||
| headerRight: () => null | ||
| }; | ||
| } | ||
|
|
||
| const options: NativeStackNavigationOptions = { | ||
| headerLeft: () => null, | ||
| headerTitle: I18n.t('Threads'), | ||
| headerRight: () => ( | ||
| <HeaderButton.Container> | ||
| <HeaderButton.Item iconName='filter' onPress={showFilters} /> | ||
| <HeaderButton.Item iconName='search' onPress={onSearchPress} testID='thread-messages-view-search-icon' /> | ||
| </HeaderButton.Container> | ||
| ) | ||
| }; | ||
|
|
||
| if (isMasterDetail) { | ||
| options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />; | ||
| } | ||
|
|
||
| return options; | ||
| }; | ||
|
|
||
| const setHeader = () => { | ||
| const options = getHeader(); | ||
| navigation.setOptions(options); | ||
| }; | ||
|
|
||
| const onSearchPress = () => { | ||
| setSearch({ ...search, isSearching: true }); | ||
| const options = getHeader(true); | ||
| navigation.setOptions(options); | ||
| }; | ||
|
|
||
| const onSearchChangeText = debounce((searchText: string) => { | ||
| setSearch({ isSearching: true, searchText }); | ||
| subscribeMessages({ searchText }); | ||
| }, 300); | ||
|
|
||
| const onCancelSearchPress = () => { | ||
| setSearch({ | ||
| isSearching: false, | ||
| searchText: '' | ||
| }); | ||
| setHeader(); | ||
| subscribeMessages({}); | ||
| }; | ||
|
|
||
| return { | ||
| setHeader, | ||
| onSearchPress, | ||
| onSearchChangeText, | ||
| onCancelSearchPress | ||
| }; | ||
| }; | ||
|
|
||
| export default useThreadSearch; |
Oops, something went wrong.