diff --git a/app/javascript/flavours/glitch/features/account_edit/components/tag_search.tsx b/app/javascript/flavours/glitch/features/account_edit/components/tag_search.tsx index 7708012f94..cdc2602c08 100644 --- a/app/javascript/flavours/glitch/features/account_edit/components/tag_search.tsx +++ b/app/javascript/flavours/glitch/features/account_edit/components/tag_search.tsx @@ -65,7 +65,7 @@ export const AccountEditTagSearch: FC = () => { value={query} onChange={handleSearchChange} placeholder={inputLabel} - items={suggestedTags as TagSearchResult[]} + items={suggestedTags} isLoading={isLoading} renderItem={renderItem} onSelectItem={handleSelect} diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx b/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx index 1c0c81128e..528e8fe683 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx @@ -14,20 +14,27 @@ import { fetchSuggestedTags, addFeaturedTags, } from '@/flavours/glitch/reducers/slices/profile_edit'; -import { useAppSelector, useAppDispatch } from '@/flavours/glitch/store'; +import { + useAppSelector, + useAppDispatch, + createAppSelector, +} from '@/flavours/glitch/store'; import classes from './styles.module.scss'; const MAX_SUGGESTED_TAGS = 3; +const selectSuggestedTags = createAppSelector( + [(state) => state.profileEdit.tagSuggestions], + (tagSuggestions) => tagSuggestions?.slice(0, MAX_SUGGESTED_TAGS), +); + export const TagSuggestions: FC = () => { const { dismiss, wasDismissed } = useDismissible( 'profile/featured_tag_suggestions', ); - const suggestedTags = useAppSelector((state) => - state.profileEdit.tagSuggestions?.slice(0, MAX_SUGGESTED_TAGS), - ); + const suggestedTags = useAppSelector(selectSuggestedTags); const existingTagCount = useAppSelector( (state) => state.profileEdit.profile?.featuredTags.length, ); diff --git a/app/javascript/flavours/glitch/hooks/useSearchTags.ts b/app/javascript/flavours/glitch/hooks/useSearchTags.ts index f31c68f5a9..157a434e52 100644 --- a/app/javascript/flavours/glitch/hooks/useSearchTags.ts +++ b/app/javascript/flavours/glitch/hooks/useSearchTags.ts @@ -91,8 +91,8 @@ export function useSearchTags({ // Add dedicated item for adding the current query const tags = useMemo(() => { const trimmedQuery = query ? trimHashFromStart(query.trim()) : ''; - if (!trimmedQuery || !fetchedTags.length) { - return fetchedTags; + if (!trimmedQuery) { + return fetchedTags as TagSearchResult[]; } const results: TagSearchResult[] = [...fetchedTags]; // Make array mutable