From 778bebd33c47ba298faa11e1f405027183c35d5e Mon Sep 17 00:00:00 2001 From: Kushdeep Singh Date: Tue, 7 Jan 2025 17:34:50 +0530 Subject: [PATCH 1/5] DMAPP-149: Channel Categories - Completed UI integration - Completed API integration - Work in progress: Handling search and category filter functionality --- src/Globals.ts | 9 ++++ src/components/pill/Pill.tsx | 54 ++++++++++++++++++++++ src/components/pill/Pill.types.ts | 10 ++++ src/components/pill/index.ts | 2 + src/components/ui/ChannelCategories.tsx | 49 ++++++++++++++++++++ src/components/ui/ChannelsDisplayer.tsx | 22 ++++++++- src/env.config.js | 2 + src/hooks/channel/useChannelCategories.tsx | 46 ++++++++++++++++++ src/hooks/channel/useChannels.tsx | 26 ++++++++++- src/redux/channelSlice.ts | 4 ++ 10 files changed, 220 insertions(+), 4 deletions(-) create mode 100644 src/components/pill/Pill.tsx create mode 100644 src/components/pill/Pill.types.ts create mode 100644 src/components/pill/index.ts create mode 100644 src/components/ui/ChannelCategories.tsx create mode 100644 src/hooks/channel/useChannelCategories.tsx diff --git a/src/Globals.ts b/src/Globals.ts index 7e4f195f4..19a50918a 100644 --- a/src/Globals.ts +++ b/src/Globals.ts @@ -16,6 +16,7 @@ export default { ENDPOINT_GET_FEEDS: '/feeds/get_feeds', ENDPOINT_GET_SPAM_FEEDS: '/feeds/get_spam_feeds', ENDPOINT_FETCH_CHANNELS: '/v1/channels', + ENDPOINT_FETCH_CHANNEL_CATEGORIES: '/v1/channels/tags/all', ENDPOINT_SEARCH_CHANNELS: '/v1/channels/search', ENDPOINT_FETCH_SUBSCRIPTION: '/channels/_is_user_subscribed', ENDPOINT_SUBSCRIBE_OFFCHAIN: '/channels/subscribe_offchain', @@ -82,6 +83,7 @@ export default { 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVR4AcXBsW2FMBiF0Y8r3GQb6jeBxRauYRpo4yGQkMd4A7kg7Z/GUfSKe8703fKDkTATZsJsrr0RlZSJ9r4RLayMvLmJjnQS1d6IhJkwE2bT13U/DBzp5BN73xgRZsJMmM1HOolqb/yWiWpvjJSUiRZWopIykTATZsJs5g+1N6KSMiO1N/5DmAkzYTa9Lh6MhJkwE2ZzSZlo7xvRwson3txERzqJhJkwE2bT6+JhoKTMJ2pvjAgzYSbMfgDlXixqjH6gRgAAAABJRU5ErkJggg==', PASSCODE_LENGTH: 6, + ALL_CATEGORIES: 'All', }, ADJUSTMENTS: { @@ -165,6 +167,13 @@ export default { // Notification IC_NOTIFICATION: '#e20880', + + // Pill + PILL_BG_DEFAULT: '#F5F6F8', + PILL_TEXT_DEFAULT: '#17181B', + + // Border + BORDER_DEFAULT: '#C4CBD5', }, SCREENS: { WELCOME: 'Welcome', diff --git a/src/components/pill/Pill.tsx b/src/components/pill/Pill.tsx new file mode 100644 index 000000000..9074240e2 --- /dev/null +++ b/src/components/pill/Pill.tsx @@ -0,0 +1,54 @@ +import React, {FC, useMemo} from 'react'; +import {Pressable, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import Globals from 'src/Globals'; + +import {PillProps} from '.'; + +const Pill: FC = ({data, value, onChange}) => { + const isActive = data.value === value; + return ( + onChange(data)} + style={[ + styles.mainView, + isActive ? styles.activeView : styles.inactiveView, + ]}> + + {data.label} + + + ); +}; + +export {Pill}; + +const styles = StyleSheet.create({ + mainView: { + height: 40, + borderRadius: 48, + paddingHorizontal: 16, + paddingVertical: 8, + marginRight: 8, + }, + activeView: { + backgroundColor: Globals.COLORS.BLACK, + }, + inactiveView: { + backgroundColor: Globals.COLORS.PILL_BG_DEFAULT, + }, + labelText: { + fontSize: 14, + fontWeight: '500', + lineHeight: 20, + }, + activeText: { + color: Globals.COLORS.WHITE, + }, + inactiveText: { + color: Globals.COLORS.PILL_TEXT_DEFAULT, + }, +}); diff --git a/src/components/pill/Pill.types.ts b/src/components/pill/Pill.types.ts new file mode 100644 index 000000000..aff497bcd --- /dev/null +++ b/src/components/pill/Pill.types.ts @@ -0,0 +1,10 @@ +export type PillProps = { + data: PillData; + value: string | number; + onChange: (value: PillData) => void; +}; + +export type PillData = { + label: string; + value: string | number; +}; diff --git a/src/components/pill/index.ts b/src/components/pill/index.ts new file mode 100644 index 000000000..8a4743d82 --- /dev/null +++ b/src/components/pill/index.ts @@ -0,0 +1,2 @@ +export * from './Pill'; +export * from './Pill.types'; diff --git a/src/components/ui/ChannelCategories.tsx b/src/components/ui/ChannelCategories.tsx new file mode 100644 index 000000000..48ddfbe13 --- /dev/null +++ b/src/components/ui/ChannelCategories.tsx @@ -0,0 +1,49 @@ +import React, {FC, useState} from 'react'; +import {ScrollView, StyleSheet, View} from 'react-native'; +import Globals from 'src/Globals'; +import {useChannelCategories} from 'src/hooks/channel/useChannelCategories'; + +import {Pill} from '../pill'; + +type ChannelCategoriesProps = { + onChangeCategory: (category: string) => void; + value: string; +}; + +const ChannelCategories: FC = ({ + onChangeCategory, + value, +}) => { + const {isLoading, channelCategories} = useChannelCategories(); + + if (!isLoading && channelCategories?.length > 0) { + return ( + + + {channelCategories.map((item, index) => ( + { + onChangeCategory(category.value as string); + }} + /> + ))} + + + ); + } + return null; +}; + +export {ChannelCategories}; + +const styles = StyleSheet.create({ + mainView: { + height: 40, + width: '100%', + flexDirection: 'row', + marginBottom: 16, + }, +}); diff --git a/src/components/ui/ChannelsDisplayer.tsx b/src/components/ui/ChannelsDisplayer.tsx index 2a1082d36..534e4e87b 100644 --- a/src/components/ui/ChannelsDisplayer.tsx +++ b/src/components/ui/ChannelsDisplayer.tsx @@ -17,14 +17,19 @@ import { } from 'src/redux/channelSlice'; import GLOBALS from '../../Globals'; +import Globals from '../../Globals'; +import {ChannelCategories} from './ChannelCategories'; const ChannelsDisplayer = () => { const [searchTimer, setSearchTimer] = useState(); const DEBOUNCE_TIMEOUT = 500; //time in millisecond which we want to wait for then to finish typing - const [search, setSearch] = React.useState(''); + const [search, setSearch] = React.useState(''); const [showSearchResults, setShowSearchResults] = useState(false); + const [selectedCategory, setSelectedCategory] = useState( + Globals.CONSTANTS.ALL_CATEGORIES, + ); const channelResults = useSelector(selectChannels); const channelsReachedEnd = useSelector(selectChannelsReachedEnd); @@ -34,7 +39,7 @@ const ChannelsDisplayer = () => { isLoadingChannels, isLoadingSearchResults, searchResults, - } = useChannels(); + } = useChannels({tag: selectedCategory}); const isLoadingSubscriptions = useSelector(selectIsLoadingSubscriptions); const {refreshSubscriptions} = useSubscriptions(); @@ -64,6 +69,13 @@ const ChannelsDisplayer = () => { } }, [userPushSDKInstance]); + useEffect(() => { + if (search.length > 0 || showSearchResults) { + setSearch(''); + setShowSearchResults(false); + } + }, [selectedCategory]); + const selectChannelForSettings = (channel: Channel) => { openSheet({name: 'NFSettingsSheet', channel}); }; @@ -83,6 +95,7 @@ const ChannelsDisplayer = () => { clearTimeout(searchTimer); } setSearch(searchQuery); + setSelectedCategory(Globals.CONSTANTS.ALL_CATEGORIES); setSearchTimer( setTimeout(() => { searchForChannel(searchQuery); @@ -110,6 +123,11 @@ const ChannelsDisplayer = () => { /> + setSelectedCategory(category as string)} + value={selectedCategory} + /> + {channels.length === 0 && ( {!isLoading && !isLoadingSubscriptions ? ( diff --git a/src/env.config.js b/src/env.config.js index 5f457653d..e8dbb34f9 100644 --- a/src/env.config.js +++ b/src/env.config.js @@ -28,6 +28,7 @@ const { ENDPOINT_GET_FEEDS, ENDPOINT_GET_SPAM_FEEDS, ENDPOINT_FETCH_CHANNELS, + ENDPOINT_FETCH_CHANNEL_CATEGORIES, ENDPOINT_FETCH_SUBSCRIPTION, ENDPOINT_SUBSCRIBE_OFFCHAIN, ENDPOINT_UNSUBSCRIBE_OFFCHAIN, @@ -60,6 +61,7 @@ export default { ENDPOINT_GET_FEEDS, ENDPOINT_GET_SPAM_FEEDS, ENDPOINT_FETCH_CHANNELS, + ENDPOINT_FETCH_CHANNEL_CATEGORIES, ENDPOINT_FETCH_SUBSCRIPTION, ENDPOINT_SUBSCRIBE_OFFCHAIN, ENDPOINT_UNSUBSCRIBE_OFFCHAIN, diff --git a/src/hooks/channel/useChannelCategories.tsx b/src/hooks/channel/useChannelCategories.tsx new file mode 100644 index 000000000..490e7d02e --- /dev/null +++ b/src/hooks/channel/useChannelCategories.tsx @@ -0,0 +1,46 @@ +import {useEffect, useState} from 'react'; +import Globals from 'src/Globals'; +import {PillData} from 'src/components/pill'; +import envConfig from 'src/env.config'; + +type ChannelCategoriesReturnType = { + isLoading: boolean; + channelCategories: PillData[]; +}; + +const useChannelCategories = (): ChannelCategoriesReturnType => { + const [channelCategories, setChannelCategories] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + getChannelCategories(); + }, []); + + const getChannelCategories = async () => { + setIsLoading(true); + try { + const requestURL = + envConfig.EPNS_SERVER + envConfig.ENDPOINT_FETCH_CHANNEL_CATEGORIES; + const resJson = await fetch(requestURL).then(response => response.json()); + // Modify data for pill component + const modifiedData = resJson?.tags?.tags.map((category: string) => ({ + label: category, + value: category, + })); + setChannelCategories([ + { + label: Globals.CONSTANTS.ALL_CATEGORIES, + value: Globals.CONSTANTS.ALL_CATEGORIES, + }, + ...modifiedData, + ]); + } catch (e) { + } finally { + setIsLoading(false); + } + }; + + return {isLoading, channelCategories}; +}; + +export {useChannelCategories}; diff --git a/src/hooks/channel/useChannels.tsx b/src/hooks/channel/useChannels.tsx index 6df32a113..57ad8e148 100644 --- a/src/hooks/channel/useChannels.tsx +++ b/src/hooks/channel/useChannels.tsx @@ -1,17 +1,24 @@ import {useEffect, useState} from 'react'; import {useDispatch, useSelector} from 'react-redux'; +import Globals from 'src/Globals'; import GLOBALS from 'src/Globals'; import {usePushApi} from 'src/contexts/PushApiContext'; import envConfig from 'src/env.config'; import { addChannels, nextChannelsPage, + resetChannels, selectChannelsPage, selectChannelsReachedEnd, + setChannelsPage, setChannelsReachedEnd, } from 'src/redux/channelSlice'; -const useChannels = () => { +export type UseChannelsProps = { + tag: string; +}; + +const useChannels = ({tag}: UseChannelsProps) => { const [isLoadingChannels, setChannelsLoading] = useState(false); const [isLoadingSearchResults, setSearchResultsLoading] = useState(false); @@ -29,6 +36,14 @@ const useChannels = () => { } }, [channelsPage]); + useEffect(() => { + if (tag) { + dispatch(setChannelsPage(1)); + dispatch(resetChannels()); + loadChannels({page: 1}); + } + }, [tag]); + const loadMoreChannels = () => { if (channelsReachedEnd || isLoadingChannels) return; dispatch(nextChannelsPage()); @@ -39,8 +54,13 @@ const useChannels = () => { if (channelsReachedEnd || isLoadingChannels) return; setChannelsLoading(true); try { + console.log('Call channel API'); const apiURL = envConfig.EPNS_SERVER + envConfig.ENDPOINT_FETCH_CHANNELS; - const requestURL = `${apiURL}?limit=${GLOBALS.CONSTANTS.FEED_ITEMS_TO_PULL}&page=${page}`; + let requestURL = `${apiURL}?limit=${GLOBALS.CONSTANTS.FEED_ITEMS_TO_PULL}&page=${page}`; + if (tag.length > 0 && tag !== Globals.CONSTANTS.ALL_CATEGORIES) { + requestURL = `${requestURL}&tag=${tag}`; + } + console.log(requestURL); const resJson = await fetch(requestURL).then(response => response.json()); if (resJson.channels.length !== 0) { dispatch(addChannels(resJson.channels)); @@ -49,6 +69,7 @@ const useChannels = () => { dispatch(setChannelsReachedEnd(true)); } } catch (e) { + console.log('Error', JSON.stringify(e)); } finally { setChannelsLoading(false); } @@ -60,6 +81,7 @@ const useChannels = () => { const results = await userPushSDKInstance?.channel.search(query, { page: 1, limit: GLOBALS.CONSTANTS.FEED_ITEMS_TO_PULL, + tag, }); setSearchResults(results); } catch (e) { diff --git a/src/redux/channelSlice.ts b/src/redux/channelSlice.ts index 842cd81a8..56d02441f 100644 --- a/src/redux/channelSlice.ts +++ b/src/redux/channelSlice.ts @@ -50,6 +50,9 @@ const channelSlice = createSlice({ addChannels: (state, action) => { state.channels = [...state.channels, ...action.payload]; }, + resetChannels: state => { + state.channels = []; + }, removeChannelSubscription: ( state, action: PayloadAction<{channel: string}>, @@ -79,6 +82,7 @@ const channelSlice = createSlice({ export const { addChannels, + resetChannels, setChannelsPage, setChannelsReachedEnd, addChannelSubscription, From 28edd3c90dfea163516d514f8f67369f98982857 Mon Sep 17 00:00:00 2001 From: Kushdeep Singh Date: Wed, 8 Jan 2025 13:04:51 +0530 Subject: [PATCH 2/5] DMAPP-149: Integrate channel categories - Implemented handling of search and category filters. - Ensured reset of the previous filter when a new one is applied. --- src/components/pill/Pill.tsx | 3 +- src/components/pill/Pill.types.ts | 1 + src/components/ui/ChannelCategories.tsx | 3 ++ src/components/ui/ChannelsDisplayer.tsx | 30 ++++++++++++------- src/hooks/channel/useChannels.tsx | 38 +++++++++++++++---------- 5 files changed, 48 insertions(+), 27 deletions(-) diff --git a/src/components/pill/Pill.tsx b/src/components/pill/Pill.tsx index 9074240e2..874bd5a71 100644 --- a/src/components/pill/Pill.tsx +++ b/src/components/pill/Pill.tsx @@ -4,10 +4,11 @@ import Globals from 'src/Globals'; import {PillProps} from '.'; -const Pill: FC = ({data, value, onChange}) => { +const Pill: FC = ({data, value, onChange, disabled}) => { const isActive = data.value === value; return ( onChange(data)} style={[ styles.mainView, diff --git a/src/components/pill/Pill.types.ts b/src/components/pill/Pill.types.ts index aff497bcd..3f4d3d1b5 100644 --- a/src/components/pill/Pill.types.ts +++ b/src/components/pill/Pill.types.ts @@ -2,6 +2,7 @@ export type PillProps = { data: PillData; value: string | number; onChange: (value: PillData) => void; + disabled?: boolean; }; export type PillData = { diff --git a/src/components/ui/ChannelCategories.tsx b/src/components/ui/ChannelCategories.tsx index 48ddfbe13..b9250bcde 100644 --- a/src/components/ui/ChannelCategories.tsx +++ b/src/components/ui/ChannelCategories.tsx @@ -8,11 +8,13 @@ import {Pill} from '../pill'; type ChannelCategoriesProps = { onChangeCategory: (category: string) => void; value: string; + disabled: boolean; }; const ChannelCategories: FC = ({ onChangeCategory, value, + disabled, }) => { const {isLoading, channelCategories} = useChannelCategories(); @@ -22,6 +24,7 @@ const ChannelCategories: FC = ({ {channelCategories.map((item, index) => ( { const { loadMoreChannels, loadSearchResults, + resetChannelData, isLoadingChannels, isLoadingSearchResults, searchResults, - } = useChannels({tag: selectedCategory}); + } = useChannels({tag: selectedCategory, showSearchResults}); const isLoadingSubscriptions = useSelector(selectIsLoadingSubscriptions); const {refreshSubscriptions} = useSubscriptions(); @@ -69,13 +70,6 @@ const ChannelsDisplayer = () => { } }, [userPushSDKInstance]); - useEffect(() => { - if (search.length > 0 || showSearchResults) { - setSearch(''); - setShowSearchResults(false); - } - }, [selectedCategory]); - const selectChannelForSettings = (channel: Channel) => { openSheet({name: 'NFSettingsSheet', channel}); }; @@ -86,6 +80,7 @@ const ChannelsDisplayer = () => { return; } setShowSearchResults(true); + setSelectedCategory(Globals.CONSTANTS.ALL_CATEGORIES); await loadSearchResults(channelName); }; @@ -95,7 +90,6 @@ const ChannelsDisplayer = () => { clearTimeout(searchTimer); } setSearch(searchQuery); - setSelectedCategory(Globals.CONSTANTS.ALL_CATEGORIES); setSearchTimer( setTimeout(() => { searchForChannel(searchQuery); @@ -104,6 +98,15 @@ const ChannelsDisplayer = () => { } catch (e) {} }; + const handleCategoryChange = (category: string) => { + if (search.length > 0 || showSearchResults) { + setSearch(''); + setShowSearchResults(false); + } + resetChannelData(); + setSelectedCategory(category as string); + }; + return ( <> @@ -124,7 +127,8 @@ const ChannelsDisplayer = () => { setSelectedCategory(category as string)} + disabled={isLoadingChannels} + onChangeCategory={handleCategoryChange} value={selectedCategory} /> @@ -155,7 +159,7 @@ const ChannelsDisplayer = () => { item.channel.toString()} initialNumToRender={20} showsVerticalScrollIndicator={false} @@ -193,6 +197,10 @@ const styles = StyleSheet.create({ flex: 1, width: '100%', }, + channelListContentContainerStyle: { + paddingTop: 10, + paddingBottom: 80, // Add some padding to the bottom to display last item content + }, infodisplay: { width: '100%', justifyContent: 'center', diff --git a/src/hooks/channel/useChannels.tsx b/src/hooks/channel/useChannels.tsx index 57ad8e148..81e590ec7 100644 --- a/src/hooks/channel/useChannels.tsx +++ b/src/hooks/channel/useChannels.tsx @@ -16,9 +16,10 @@ import { export type UseChannelsProps = { tag: string; + showSearchResults: boolean; }; -const useChannels = ({tag}: UseChannelsProps) => { +const useChannels = ({tag, showSearchResults}: UseChannelsProps) => { const [isLoadingChannels, setChannelsLoading] = useState(false); const [isLoadingSearchResults, setSearchResultsLoading] = useState(false); @@ -31,18 +32,16 @@ const useChannels = ({tag}: UseChannelsProps) => { const channelsReachedEnd = useSelector(selectChannelsReachedEnd); useEffect(() => { - if (!channelsReachedEnd && !isLoadingChannels && channelsPage !== 0) { + if ( + !channelsReachedEnd && + !isLoadingChannels && + channelsPage !== 0 && + tag && + !showSearchResults + ) { loadChannels({page: channelsPage}); } - }, [channelsPage]); - - useEffect(() => { - if (tag) { - dispatch(setChannelsPage(1)); - dispatch(resetChannels()); - loadChannels({page: 1}); - } - }, [tag]); + }, [channelsPage, tag]); const loadMoreChannels = () => { if (channelsReachedEnd || isLoadingChannels) return; @@ -54,13 +53,11 @@ const useChannels = ({tag}: UseChannelsProps) => { if (channelsReachedEnd || isLoadingChannels) return; setChannelsLoading(true); try { - console.log('Call channel API'); const apiURL = envConfig.EPNS_SERVER + envConfig.ENDPOINT_FETCH_CHANNELS; let requestURL = `${apiURL}?limit=${GLOBALS.CONSTANTS.FEED_ITEMS_TO_PULL}&page=${page}`; if (tag.length > 0 && tag !== Globals.CONSTANTS.ALL_CATEGORIES) { requestURL = `${requestURL}&tag=${tag}`; } - console.log(requestURL); const resJson = await fetch(requestURL).then(response => response.json()); if (resJson.channels.length !== 0) { dispatch(addChannels(resJson.channels)); @@ -69,19 +66,29 @@ const useChannels = ({tag}: UseChannelsProps) => { dispatch(setChannelsReachedEnd(true)); } } catch (e) { - console.log('Error', JSON.stringify(e)); + console.error(e); } finally { setChannelsLoading(false); } }; + /***************************************************/ + /** This function will reset all channel data **/ + /** Currently handled for onChangeCategory **/ + /***************************************************/ + const resetChannelData = () => { + dispatch(setChannelsPage(1)); + dispatch(setChannelsReachedEnd(false)); + setChannelsLoading(false); + dispatch(resetChannels()); + }; + const loadSearchResults = async (query: string) => { setSearchResultsLoading(true); try { const results = await userPushSDKInstance?.channel.search(query, { page: 1, limit: GLOBALS.CONSTANTS.FEED_ITEMS_TO_PULL, - tag, }); setSearchResults(results); } catch (e) { @@ -94,6 +101,7 @@ const useChannels = ({tag}: UseChannelsProps) => { return { loadMoreChannels, loadSearchResults, + resetChannelData, isLoadingChannels, isLoadingSearchResults, searchResults, From 41d3912e2663a235d9fc0c8c704da459ced670f6 Mon Sep 17 00:00:00 2001 From: Kushdeep Singh Date: Wed, 8 Jan 2025 13:23:39 +0530 Subject: [PATCH 3/5] DMAPP-149: Integrate channel categories enhancements - Disabled onPress event for the active category. - Added a new message to display when data is unavailable. --- src/components/ui/ChannelCategories.tsx | 2 +- src/components/ui/ChannelsDisplayer.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/ui/ChannelCategories.tsx b/src/components/ui/ChannelCategories.tsx index b9250bcde..5690aa415 100644 --- a/src/components/ui/ChannelCategories.tsx +++ b/src/components/ui/ChannelCategories.tsx @@ -24,7 +24,7 @@ const ChannelCategories: FC = ({ {channelCategories.map((item, index) => ( { ) : ( // Show channel fetching label From f2c9f5efcf0e4b6cc3bc374984c17cb8970e3399 Mon Sep 17 00:00:00 2001 From: Kushdeep Singh Date: Wed, 8 Jan 2025 13:42:18 +0530 Subject: [PATCH 4/5] DMAPP-149: Minor fix in Pill component --- src/components/pill/Pill.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pill/Pill.tsx b/src/components/pill/Pill.tsx index 874bd5a71..fbf6bf242 100644 --- a/src/components/pill/Pill.tsx +++ b/src/components/pill/Pill.tsx @@ -5,7 +5,7 @@ import Globals from 'src/Globals'; import {PillProps} from '.'; const Pill: FC = ({data, value, onChange, disabled}) => { - const isActive = data.value === value; + const isActive = useMemo(() => data.value === value, [value]); return ( Date: Thu, 9 Jan 2025 15:11:07 +0530 Subject: [PATCH 5/5] DMAPP-149: Code level changes - Minor changes in Pill and channelsDisplayer component --- src/components/pill/Pill.tsx | 6 +++--- src/components/ui/ChannelsDisplayer.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/pill/Pill.tsx b/src/components/pill/Pill.tsx index fbf6bf242..c2dbe012a 100644 --- a/src/components/pill/Pill.tsx +++ b/src/components/pill/Pill.tsx @@ -1,11 +1,11 @@ -import React, {FC, useMemo} from 'react'; -import {Pressable, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import React, {FC} from 'react'; +import {Pressable, StyleSheet, Text} from 'react-native'; import Globals from 'src/Globals'; import {PillProps} from '.'; const Pill: FC = ({data, value, onChange, disabled}) => { - const isActive = useMemo(() => data.value === value, [value]); + const isActive = data.value === value; return ( { }; const handleCategoryChange = (category: string) => { - if (search.length > 0 || showSearchResults) { + if (search.length || showSearchResults) { setSearch(''); setShowSearchResults(false); }