Skip to content

Commit 758d492

Browse files
bz-hashtag-0780bz-hashtag-0780
committed
Beast Owned filter
1 parent 81b77bc commit 758d492

File tree

2 files changed

+111
-69
lines changed

2 files changed

+111
-69
lines changed

‎components/ui/BeastMarket/BeastMarket.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -837,8 +837,9 @@ const BeastMarket: FC<Props> = () => {
837837

838838
const [favoriteBeasts, setFavoriteBeasts] = useState<any>([])
839839
const [favoriteToggled, setFavoriteToggled] = useState(false)
840+
const [ownedToggled, setOwnedToggled] = useState(false)
840841

841-
const { beasts, getAllBeasts } = useUser()
842+
const { beasts, getAllBeasts, userBeasts } = useUser()
842843

843844
const selectBeast = (beast: any) => {
844845
if (!selectedBeasts.includes(beast)) {
@@ -940,6 +941,21 @@ const BeastMarket: FC<Props> = () => {
940941
// console.log(favoriteBeasts)
941942
}, [favoriteToggled])
942943

944+
useEffect(() => {
945+
if (ownedToggled) {
946+
var newBeasts: any = []
947+
for (let key in displayBeasts) {
948+
var beast = displayBeasts[key]
949+
if (userBeasts?.map((beast: any) => beast.id).includes(beast.id)) {
950+
newBeasts.push(beast)
951+
}
952+
}
953+
setDisplayBeasts(newBeasts)
954+
} else {
955+
setDisplayBeasts(beasts)
956+
}
957+
}, [ownedToggled])
958+
943959
const [filter, setFilter] = useState<any>()
944960

945961
const [filters, setFilters] = useState<any>([
@@ -1327,6 +1343,8 @@ const BeastMarket: FC<Props> = () => {
13271343
setMobileFiltersOpen={setMobileFiltersOpen}
13281344
favoriteToggled={favoriteToggled}
13291345
setFavoriteToggled={setFavoriteToggled}
1346+
ownedToggled={ownedToggled}
1347+
setOwnedToggled={setOwnedToggled}
13301348
/>
13311349
</div>
13321350
)}

‎components/ui/BeastMarketFilters/BeastMarketFilters.tsx‎

Lines changed: 92 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ type Props = {
142142
setMobileFiltersOpen: any
143143
setFavoriteToggled: any
144144
favoriteToggled: any
145+
ownedToggled: boolean
146+
setOwnedToggled: any
145147
}
146148

147149
const sortOptions = [
@@ -168,6 +170,8 @@ const BeastMarketFilters: FC<Props> = ({
168170
setMobileFiltersOpen,
169171
favoriteToggled,
170172
setFavoriteToggled,
173+
ownedToggled,
174+
setOwnedToggled,
171175
}) => {
172176
// const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
173177

@@ -294,7 +298,7 @@ const BeastMarketFilters: FC<Props> = ({
294298
</button>
295299
</div>
296300

297-
{/* Filters */}
301+
{/* Filters for mobile*/}
298302
<form className="mt-4 border-t">
299303
<h3 className="sr-only">Categories</h3>
300304
<ul role="list" className="px-2 py-2 font-medium ">
@@ -463,7 +467,7 @@ const BeastMarketFilters: FC<Props> = ({
463467
</h2>
464468

465469
<div className="grid grid-cols-1 gap-x-8 gap-y-10 ">
466-
{/* Filters */}
470+
{/* Filters for desktop */}
467471
<form className="hidden lg:block">
468472
<h3 className="sr-only">Categories</h3>
469473
<ul role="list" className="pb-6 text-sm font-medium ">
@@ -487,76 +491,96 @@ const BeastMarketFilters: FC<Props> = ({
487491
<SwitchSlider></SwitchSlider>
488492
</Switch>
489493
)}
494+
{category.name == "Owned" && (
495+
<Switch>
496+
<SwitchInput
497+
defaultChecked={ownedToggled}
498+
type="checkbox"
499+
onChange={() => {
500+
setOwnedToggled(!ownedToggled)
501+
}}
502+
/>
503+
<SwitchSlider></SwitchSlider>
504+
</Switch>
505+
)}
490506
</li>
491507
))}
492508
</ul>
493-
494-
{filters?.map((section: any) => (
495-
<Disclosure
496-
as="div"
497-
key={section.id}
498-
style={{ backgroundColor: "#111823" }}
499-
className=" border-t border-gray-500 py-6"
500-
>
501-
{({ open }) => (
502-
<>
503-
<h3 className="-my-3 flow-root">
504-
<Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-white hover:text-gray-500">
505-
<span
506-
style={{ fontSize: "1.3em" }}
507-
className="font-medium "
508-
>
509-
{section.name}
510-
</span>
511-
<span className="ml-6 flex items-center">
512-
{open ? (
513-
<MinusIcon
514-
className="h-4 w-4"
515-
aria-hidden="true"
516-
/>
517-
) : (
518-
<PlusIcon
519-
className="h-4 w-4"
520-
aria-hidden="true"
521-
/>
522-
)}
523-
</span>
524-
</Disclosure.Button>
525-
</h3>
526-
<Disclosure.Panel className="pt-6">
527-
<div className="space-y-4">
528-
{section.options?.map(
529-
(option: any, optionIdx: any) => (
530-
<CheckboxWrapper
531-
key={option.value}
532-
className="flex items-center"
509+
{ownedToggled || favoriteToggled ? (
510+
<></>
511+
) : (
512+
<>
513+
{filters?.map((section: any) => (
514+
<Disclosure
515+
as="div"
516+
key={section.id}
517+
style={{ backgroundColor: "#111823" }}
518+
className=" border-t border-gray-500 py-6"
519+
>
520+
{({ open }) => (
521+
<>
522+
<h3 className="-my-3 flow-root">
523+
<Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-white hover:text-gray-500">
524+
<span
525+
style={{ fontSize: "1.3em" }}
526+
className="font-medium "
533527
>
534-
<input
535-
id={`filter-${section.id}-${optionIdx}`}
536-
name={`${section.id}[]`}
537-
defaultValue={option.value}
538-
type="checkbox"
539-
defaultChecked={option.checked}
540-
onChange={() =>
541-
handleChange(section.id, option.value)
542-
}
543-
className="h-4 w-4 rounded border-gray-300 focus:ring-indigo-500"
544-
/>
545-
<label
546-
htmlFor={`filter-${section.id}-${optionIdx}`}
547-
className="ml-3 text-sm "
548-
>
549-
{option.label}
550-
</label>
551-
</CheckboxWrapper>
552-
),
553-
)}
554-
</div>
555-
</Disclosure.Panel>
556-
</>
557-
)}
558-
</Disclosure>
559-
))}
528+
{section.name}
529+
</span>
530+
<span className="ml-6 flex items-center">
531+
{open ? (
532+
<MinusIcon
533+
className="h-4 w-4"
534+
aria-hidden="true"
535+
/>
536+
) : (
537+
<PlusIcon
538+
className="h-4 w-4"
539+
aria-hidden="true"
540+
/>
541+
)}
542+
</span>
543+
</Disclosure.Button>
544+
</h3>
545+
<Disclosure.Panel className="pt-6">
546+
<div className="space-y-4">
547+
{section.options?.map(
548+
(option: any, optionIdx: any) => (
549+
<CheckboxWrapper
550+
key={option.value}
551+
className="flex items-center"
552+
>
553+
<input
554+
id={`filter-${section.id}-${optionIdx}`}
555+
name={`${section.id}[]`}
556+
defaultValue={option.value}
557+
type="checkbox"
558+
defaultChecked={option.checked}
559+
onChange={() =>
560+
handleChange(
561+
section.id,
562+
option.value,
563+
)
564+
}
565+
className="h-4 w-4 rounded border-gray-300 focus:ring-indigo-500"
566+
/>
567+
<label
568+
htmlFor={`filter-${section.id}-${optionIdx}`}
569+
className="ml-3 text-sm "
570+
>
571+
{option.label}
572+
</label>
573+
</CheckboxWrapper>
574+
),
575+
)}
576+
</div>
577+
</Disclosure.Panel>
578+
</>
579+
)}
580+
</Disclosure>
581+
))}
582+
</>
583+
)}
560584
</form>
561585
</div>
562586
</section>

0 commit comments

Comments
 (0)