degmods/degmods.com
5
0
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: show appropriate filters based on searching item
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
Details

Browse Source
This commit is contained in:
daniyal 2024-09-23 14:56:14 +05:00
parent d11ad60ede
commit 6a087e659c
1 changed files with 110 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/pages/search.tsx
View File

@ -51,6 +51,7 @@ interface FilterOptions {
sort: SortByEnum sort: SortByEnum
moderated: ModeratedFilterEnum moderated: ModeratedFilterEnum
searching: SearchingFilterEnum searching: SearchingFilterEnum
source: string
} }
export const SearchPage = () => { export const SearchPage = () => {
@ -61,6 +62,7 @@ export const SearchPage = () => {
const [filterOptions, setFilterOptions] = useState<FilterOptions>({ const [filterOptions, setFilterOptions] = useState<FilterOptions>({
sort: SortByEnum.Latest, sort: SortByEnum.Latest,
moderated: ModeratedFilterEnum.Moderated, moderated: ModeratedFilterEnum.Moderated,
source: window.location.host,
searching: searching:
(searchParams.get('searching') as SearchingFilterEnum) || (searchParams.get('searching') as SearchingFilterEnum) ||
SearchingFilterEnum.Mods SearchingFilterEnum.Mods
@ -164,73 +166,121 @@ const Filters = React.memo(
return ( return (
<div className='IBMSecMain'> <div className='IBMSecMain'>
<div className='FiltersMain'> <div className='FiltersMain'>
<div className='FiltersMainElement'> {filterOptions.searching === SearchingFilterEnum.Mods && (
<div className='dropdown dropdownMain'> <div className='FiltersMainElement'>
<button <div className='dropdown dropdownMain'>
className='btn dropdown-toggle btnMain btnMainDropdown' <button
aria-expanded='false' className='btn dropdown-toggle btnMain btnMainDropdown'
data-bs-toggle='dropdown' aria-expanded='false'
type='button' data-bs-toggle='dropdown'
> type='button'
{filterOptions.sort} >
</button> {filterOptions.sort}
</button>
<div className='dropdown-menu dropdownMainMenu'> <div className='dropdown-menu dropdownMainMenu'>
{Object.values(SortByEnum).map((item, index) => ( {Object.values(SortByEnum).map((item, index) => (
<div
key={`sortByItem-${index}`}
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
setFilterOptions((prev) => ({
...prev,
sort: item
}))
}
>
{item}
</div>
))}
</div>
</div>
</div>
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
{filterOptions.moderated}
</button>
<div className='dropdown-menu dropdownMainMenu'>
{Object.values(ModeratedFilterEnum).map((item, index) => {
if (item === ModeratedFilterEnum.Unmoderated_Fully) {
const isAdmin =
userState.user?.npub ===
import.meta.env.VITE_REPORTING_NPUB
if (!isAdmin) return null
}
return (
<div <div
key={`moderatedFilterItem-${index}`} key={`sortByItem-${index}`}
className='dropdown-item dropdownMainMenuItem' className='dropdown-item dropdownMainMenuItem'
onClick={() => onClick={() =>
setFilterOptions((prev) => ({ setFilterOptions((prev) => ({
...prev, ...prev,
moderated: item sort: item
})) }))
} }
> >
{item} {item}
</div> </div>
) ))}
})} </div>
</div> </div>
</div> </div>
</div> )}
{(filterOptions.searching === SearchingFilterEnum.Mods ||
filterOptions.searching === SearchingFilterEnum.Users) && (
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
{filterOptions.moderated}
</button>
<div className='dropdown-menu dropdownMainMenu'>
{Object.values(ModeratedFilterEnum).map((item, index) => {
if (item === ModeratedFilterEnum.Unmoderated_Fully) {
const isAdmin =
userState.user?.npub ===
import.meta.env.VITE_REPORTING_NPUB
if (!isAdmin) return null
}
return (
<div
key={`moderatedFilterItem-${index}`}
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
setFilterOptions((prev) => ({
...prev,
moderated: item
}))
}
>
{item}
</div>
)
})}
</div>
</div>
</div>
)}
{filterOptions.searching === SearchingFilterEnum.Mods && (
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
{filterOptions.source === window.location.host
? `Show From: ${filterOptions.source}`
: 'Show All'}
</button>
<div className='dropdown-menu dropdownMainMenu'>
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
setFilterOptions((prev) => ({
...prev,
source: window.location.host
}))
}
>
Show From: {window.location.host}
</div>
<div
className='dropdown-item dropdownMainMenuItem'
onClick={() =>
setFilterOptions((prev) => ({
...prev,
source: 'Show All'
}))
}
>
Show All
</div>
</div>
</div>
</div>
)}
<div className='FiltersMainElement'> <div className='FiltersMainElement'>
<div className='dropdown dropdownMain'> <div className='dropdown dropdownMain'>
<button <button
@ -353,6 +403,11 @@ const ModsResult = ({
const filteredModList = useMemo(() => { const filteredModList = useMemo(() => {
let filtered: ModDetails[] = [...filteredMods] let filtered: ModDetails[] = [...filteredMods]
if (filterOptions.source === window.location.host) {
filtered = filtered.filter((mod) => mod.rTag === window.location.host)
}
const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
const isUnmoderatedFully = const isUnmoderatedFully =
filterOptions.moderated === ModeratedFilterEnum.Unmoderated_Fully filterOptions.moderated === ModeratedFilterEnum.Unmoderated_Fully
@ -386,6 +441,7 @@ const ModsResult = ({
userState.user?.npub, userState.user?.npub,
filterOptions.sort, filterOptions.sort,
filterOptions.moderated, filterOptions.moderated,
filterOptions.source,
muteLists muteLists
]) ])