diff --git a/src/components/Filters/CategoryFilterPopup.tsx b/src/components/Filters/CategoryFilterPopup.tsx new file mode 100644 index 0000000..2257fa6 --- /dev/null +++ b/src/components/Filters/CategoryFilterPopup.tsx @@ -0,0 +1,3 @@ +export const CategoryFilterPopup = () => { + return <>Popup +} diff --git a/src/components/Filters/ModsFilter.tsx b/src/components/Filters/ModsFilter.tsx index afa43c4..3d72d0c 100644 --- a/src/components/Filters/ModsFilter.tsx +++ b/src/components/Filters/ModsFilter.tsx @@ -1,5 +1,5 @@ import { useAppSelector, useLocalStorage } from 'hooks' -import React from 'react' +import React, { PropsWithChildren } from 'react' import { FilterOptions, SortBy, @@ -19,7 +19,7 @@ type Props = { } export const ModFilter = React.memo( - ({ author, filterKey = 'filter' }: Props) => { + ({ author, filterKey = 'filter', children }: PropsWithChildren) => { const userState = useAppSelector((state) => state.user) const [filterOptions, setFilterOptions] = useLocalStorage( filterKey, @@ -176,6 +176,8 @@ export const ModFilter = React.memo( Show All + + {children} ) } diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx index 67e1f3f..7cd965b 100644 --- a/src/components/ModForm.tsx +++ b/src/components/ModForm.tsx @@ -1152,7 +1152,7 @@ export const CategoryAutocomplete = ({ key={`category-${i}`} to={{ pathname: getGamePageRoute(game), - search: `c=${c}` + search: `l=${c}` }} className='IBMSMSMBSSCategoriesBoxItem' > diff --git a/src/pages/game.tsx b/src/pages/game.tsx index da49f87..ea81648 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -27,6 +27,7 @@ import { scrollIntoView } from 'utils' import { useCuratedSet } from 'hooks/useCuratedSet' +import { CategoryFilterPopup } from 'components/Filters/CategoryFilterPopup' export const GamePage = () => { const scrollTargetRef = useRef(null) @@ -52,6 +53,13 @@ export const GamePage = () => { const [searchParams, setSearchParams] = useSearchParams() const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '') + // Categories filter + const [categories, setCategories] = useState(searchParams.getAll('l') || []) + const [heirarchies, setFullHeirarchies] = useState( + searchParams.getAll('h') || [] + ) + const [showCategoryPopup, setShowCategoryPopup] = useState(false) + const handleSearch = () => { const value = searchTermRef.current?.value || '' // Access the input value from the ref setSearchTerm(value) @@ -128,6 +136,14 @@ export const GamePage = () => { '#t': [T_TAG_VALUE] } + if (categories.length) { + filter['#l'] = categories.map((l) => `com.degmods:${l}`) + } + + if (heirarchies.length) { + filter['#L'] = heirarchies.map((L) => `com.degmods:${L}`) + } + const subscription = ndk.subscribe(filter, { cacheUsage: NDKSubscriptionCacheUsage.PARALLEL, closeOnEose: true @@ -151,7 +167,7 @@ export const GamePage = () => { return () => { subscription.stop() } - }, [gameName, ndk]) + }, [gameName, ndk, categories, heirarchies]) if (!gameName) return null @@ -188,7 +204,29 @@ export const GamePage = () => { /> - + +
+ +
+
+
{currentMods.map((mod) => ( @@ -204,6 +242,7 @@ export const GamePage = () => {
+ {showCategoryPopup && } ) } diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx index e8f0831..4006586 100644 --- a/src/pages/mod/index.tsx +++ b/src/pages/mod/index.tsx @@ -550,7 +550,7 @@ const Body = ({ className='IBMSMSMBSSCategoriesBoxItem' to={{ pathname: getGamePageRoute(game), - search: `c=${c}` + search: `l=${c}` }} >

{capitalizeEachWord(c)}