Enhance search #215
@ -9,7 +9,7 @@ import '../../styles/pagination.css'
|
|||||||
import '../../styles/search.css'
|
import '../../styles/search.css'
|
||||||
import '../../styles/styles.css'
|
import '../../styles/styles.css'
|
||||||
import { PaginationWithPageNumbers } from 'components/Pagination'
|
import { PaginationWithPageNumbers } from 'components/Pagination'
|
||||||
import { scrollIntoView } from 'utils'
|
import { normalizeSearchString, scrollIntoView } from 'utils'
|
||||||
import { LoadingSpinner } from 'components/LoadingSpinner'
|
import { LoadingSpinner } from 'components/LoadingSpinner'
|
||||||
import { Filter } from 'components/Filters'
|
import { Filter } from 'components/Filters'
|
||||||
import { Dropdown } from 'components/Filters/Dropdown'
|
import { Dropdown } from 'components/Filters/Dropdown'
|
||||||
@ -63,15 +63,17 @@ export const BlogsPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let filtered = blogs?.filter(filterNsfwFn) || []
|
let filtered = blogs?.filter(filterNsfwFn) || []
|
||||||
const lowerCaseSearchTerm = searchTerm.toLowerCase()
|
const normalizedSearchTerm = normalizeSearchString(searchTerm)
|
||||||
|
|
||||||
if (searchTerm !== '') {
|
if (normalizedSearchTerm !== '') {
|
||||||
const filterSearchTermFn = (blog: Partial<BlogCardDetails>) =>
|
const filterSearchTermFn = (blog: Partial<BlogCardDetails>) =>
|
||||||
(blog.title || '').toLowerCase().includes(lowerCaseSearchTerm) ||
|
normalizeSearchString(blog.title || '').includes(
|
||||||
(blog.summary || '').toLowerCase().includes(lowerCaseSearchTerm) ||
|
normalizedSearchTerm
|
||||||
(blog.content || '').toLowerCase().includes(lowerCaseSearchTerm) ||
|
) ||
|
||||||
|
(blog.summary || '').toLowerCase().includes(normalizedSearchTerm) ||
|
||||||
|
(blog.content || '').toLowerCase().includes(normalizedSearchTerm) ||
|
||||||
(blog.tTags || []).findIndex((tag) =>
|
(blog.tTags || []).findIndex((tag) =>
|
||||||
tag.toLowerCase().includes(lowerCaseSearchTerm)
|
tag.toLowerCase().includes(normalizedSearchTerm)
|
||||||
) > -1
|
) > -1
|
||||||
filtered = filtered.filter(filterSearchTermFn)
|
filtered = filtered.filter(filterSearchTermFn)
|
||||||
}
|
}
|
||||||
|
@ -38,6 +38,7 @@ import {
|
|||||||
isModDataComplete,
|
isModDataComplete,
|
||||||
memoizedNormalizeSearchString,
|
memoizedNormalizeSearchString,
|
||||||
normalizeSearchString,
|
normalizeSearchString,
|
||||||
|
normalizeUserSearchString,
|
||||||
scrollIntoView
|
scrollIntoView
|
||||||
} from 'utils'
|
} from 'utils'
|
||||||
import { useCuratedSet } from 'hooks/useCuratedSet'
|
import { useCuratedSet } from 'hooks/useCuratedSet'
|
||||||
@ -295,18 +296,17 @@ const ModsResult = ({
|
|||||||
}, [searchTerm])
|
}, [searchTerm])
|
||||||
|
|
||||||
const filteredMods = useMemo(() => {
|
const filteredMods = useMemo(() => {
|
||||||
|
const normalizedSearchTerm = normalizeSearchString(searchTerm)
|
||||||
// Search page requires search term
|
// Search page requires search term
|
||||||
if (searchTerm === '') return []
|
if (normalizedSearchTerm === '') return []
|
||||||
|
|
||||||
const lowerCaseSearchTerm = searchTerm.toLowerCase()
|
|
||||||
|
|
||||||
const filterFn = (mod: ModDetails) =>
|
const filterFn = (mod: ModDetails) =>
|
||||||
mod.title.toLowerCase().includes(lowerCaseSearchTerm) ||
|
normalizeSearchString(mod.title).includes(normalizedSearchTerm) ||
|
||||||
mod.game.toLowerCase().includes(lowerCaseSearchTerm) ||
|
memoizedNormalizeSearchString(mod.game).includes(normalizedSearchTerm) ||
|
||||||
mod.summary.toLowerCase().includes(lowerCaseSearchTerm) ||
|
mod.summary.toLowerCase().includes(normalizedSearchTerm) ||
|
||||||
mod.body.toLowerCase().includes(lowerCaseSearchTerm) ||
|
mod.body.toLowerCase().includes(normalizedSearchTerm) ||
|
||||||
mod.tags.findIndex((tag) =>
|
mod.tags.findIndex((tag) =>
|
||||||
tag.toLowerCase().includes(lowerCaseSearchTerm)
|
tag.toLowerCase().includes(normalizedSearchTerm)
|
||||||
) > -1
|
) > -1
|
||||||
|
|
||||||
const filterSourceFn = (mod: ModDetails) => {
|
const filterSourceFn = (mod: ModDetails) => {
|
||||||
@ -379,13 +379,14 @@ const UsersResult = ({
|
|||||||
const userState = useAppSelector((state) => state.user)
|
const userState = useAppSelector((state) => state.user)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (searchTerm === '') {
|
const normalizedSearchTerm = normalizeUserSearchString(searchTerm)
|
||||||
|
if (normalizedSearchTerm === '') {
|
||||||
setProfiles([])
|
setProfiles([])
|
||||||
} else {
|
} else {
|
||||||
const sub = ndk.subscribe(
|
const sub = ndk.subscribe(
|
||||||
{
|
{
|
||||||
kinds: [NDKKind.Metadata],
|
kinds: [NDKKind.Metadata],
|
||||||
search: searchTerm
|
search: normalizedSearchTerm
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
closeOnEose: true,
|
closeOnEose: true,
|
||||||
@ -397,7 +398,7 @@ const UsersResult = ({
|
|||||||
|
|
||||||
// Stop the sub after 10 seconds if we are still searching the same term as before
|
// Stop the sub after 10 seconds if we are still searching the same term as before
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
if (sub.filter.search === searchTerm) {
|
if (sub.filter.search === normalizedSearchTerm) {
|
||||||
sub.stop()
|
sub.stop()
|
||||||
}
|
}
|
||||||
}, 10000)
|
}, 10000)
|
||||||
@ -502,9 +503,8 @@ const GamesResult = ({ searchTerm }: GamesResultProps) => {
|
|||||||
}, [searchTerm])
|
}, [searchTerm])
|
||||||
|
|
||||||
const filteredGames = useMemo(() => {
|
const filteredGames = useMemo(() => {
|
||||||
if (searchTerm === '') return []
|
|
||||||
|
|
||||||
const normalizedSearchTerm = normalizeSearchString(searchTerm)
|
const normalizedSearchTerm = normalizeSearchString(searchTerm)
|
||||||
|
if (normalizedSearchTerm === '') return []
|
||||||
|
|
||||||
return games.filter((game) =>
|
return games.filter((game) =>
|
||||||
memoizedNormalizeSearchString(game['Game Name']).includes(
|
memoizedNormalizeSearchString(game['Game Name']).includes(
|
||||||
|
@ -238,6 +238,7 @@ const romanRegex = new RegExp(
|
|||||||
)
|
)
|
||||||
|
|
||||||
export const normalizeSearchString = (str: string): string => {
|
export const normalizeSearchString = (str: string): string => {
|
||||||
|
str = str.trim()
|
||||||
str = str.toLowerCase()
|
str = str.toLowerCase()
|
||||||
str = str.replace(romanRegex, (match) => ROMAN_TO_ARABIC_MAP[match])
|
str = str.replace(romanRegex, (match) => ROMAN_TO_ARABIC_MAP[match])
|
||||||
str = removeAccents(str)
|
str = removeAccents(str)
|
||||||
@ -258,6 +259,17 @@ const memoizeNormalize = (func: (str: string) => string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Memoize normalized search strings
|
||||||
|
* Should only be used for games (large list)
|
||||||
|
*/
|
||||||
export const memoizedNormalizeSearchString = memoizeNormalize(
|
export const memoizedNormalizeSearchString = memoizeNormalize(
|
||||||
normalizeSearchString
|
normalizeSearchString
|
||||||
)
|
)
|
||||||
|
|
||||||
|
export const normalizeUserSearchString = (str: string): string => {
|
||||||
|
str = str.trim()
|
||||||
|
str = str.toLowerCase()
|
||||||
|
str = removeAccents(str)
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user