From 1454929710cf65a3da51fb675a291f68ec310bf6 Mon Sep 17 00:00:00 2001 From: enes <enes@nostrdev.com> Date: Wed, 4 Dec 2024 14:16:39 +0100 Subject: [PATCH] feat(category): initial filter prep --- .../Filters/CategoryFilterPopup.tsx | 3 ++ src/components/Filters/ModsFilter.tsx | 6 ++- src/components/ModForm.tsx | 2 +- src/pages/game.tsx | 43 ++++++++++++++++++- src/pages/mod/index.tsx | 2 +- 5 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 src/components/Filters/CategoryFilterPopup.tsx 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<Props>) => { const userState = useAppSelector((state) => state.user) const [filterOptions, setFilterOptions] = useLocalStorage<FilterOptions>( filterKey, @@ -176,6 +176,8 @@ export const ModFilter = React.memo( Show All </Option> </Dropdown> + + {children} </Filter> ) } 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<HTMLDivElement>(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 = () => { /> </div> </div> - <ModFilter /> + <ModFilter> + <div className='FiltersMainElement'> + <button + className='btn btnMain btnMainDropdown' + type='button' + onClick={() => { + setShowCategoryPopup(true) + }} + > + Categories + <svg + xmlns='http://www.w3.org/2000/svg' + viewBox='0 0 512 512' + width='1em' + height='1em' + fill='currentColor' + > + <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' /> + </svg> + </button> + </div> + </ModFilter> + <div className='IBMSecMain IBMSMListWrapper'> <div className='IBMSMList'> {currentMods.map((mod) => ( @@ -204,6 +242,7 @@ export const GamePage = () => { </div> </div> </div> + {showCategoryPopup && <CategoryFilterPopup />} </> ) } 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}` }} > <p>{capitalizeEachWord(c)}</p>