diff --git a/frontend/src/components/mii/list/gender-select.tsx b/frontend/src/components/mii/list/gender-select.tsx index 2fd9cdb..08bbc26 100644 --- a/frontend/src/components/mii/list/gender-select.tsx +++ b/frontend/src/components/mii/list/gender-select.tsx @@ -1,4 +1,4 @@ -import { useState, useTransition } from "react"; +import { useTransition } from "react"; import { Icon } from "@iconify/react"; import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared"; import { useNavigate, useSearchParams } from "react-router"; @@ -8,12 +8,11 @@ export default function GenderSelect() { const [searchParams] = useSearchParams(); const [, startTransition] = useTransition(); - const [selected, setSelected] = useState((searchParams.get("gender") as MiiGender) ?? null); + const selected = (searchParams.get("gender") as MiiGender) ?? null; const platform = (searchParams.get("platform") as MiiPlatform) || undefined; const handleClick = (gender: MiiGender) => { const filter = selected === gender ? null : gender; - setSelected(filter); const params = new URLSearchParams(searchParams); params.set("page", "1"); diff --git a/frontend/src/components/mii/list/makeup-select.tsx b/frontend/src/components/mii/list/makeup-select.tsx index 6747dbb..e6db902 100644 --- a/frontend/src/components/mii/list/makeup-select.tsx +++ b/frontend/src/components/mii/list/makeup-select.tsx @@ -1,4 +1,4 @@ -import { useState, useTransition } from "react"; +import { useTransition } from "react"; import { Icon } from "@iconify/react"; import type { MiiMakeup } from "@tomodachi-share/shared"; import { useNavigate, useSearchParams } from "react-router"; @@ -8,11 +8,10 @@ export default function MakeupSelect() { const [searchParams] = useSearchParams(); const [, startTransition] = useTransition(); - const [selected, setSelected] = useState((searchParams.get("makeup") as MiiMakeup) ?? null); + const selected = (searchParams.get("makeup") as MiiMakeup) ?? null; const handleClick = (makeup: MiiMakeup) => { const filter = selected === makeup ? null : makeup; - setSelected(filter); const params = new URLSearchParams(searchParams); params.set("page", "1"); diff --git a/frontend/src/components/mii/list/other-filters.tsx b/frontend/src/components/mii/list/other-filters.tsx index 3da9ebc..2d6276b 100644 --- a/frontend/src/components/mii/list/other-filters.tsx +++ b/frontend/src/components/mii/list/other-filters.tsx @@ -1,5 +1,5 @@ import type { MiiPlatform } from "@tomodachi-share/shared"; -import { type ChangeEvent, useState, useTransition } from "react"; +import { type ChangeEvent, useTransition } from "react"; import { useLocation, useNavigate, useSearchParams } from "react-router"; export default function OtherFilters() { @@ -9,16 +9,14 @@ export default function OtherFilters() { const [, startTransition] = useTransition(); const platform = (searchParams.get("platform") as MiiPlatform) || undefined; - const [allowCopying, setAllowCopying] = useState((searchParams.get("allowCopying") as unknown as boolean) ?? false); - const [quarantined, setQuarantined] = useState((searchParams.get("quarantined") as unknown as boolean) ?? false); + const allowCopying = searchParams.get("allowCopying") === "true"; + const quarantined = searchParams.get("quarantined") === "true"; const handleChangeAllowCopying = (e: ChangeEvent) => { - setAllowCopying(e.target.checked); - const params = new URLSearchParams(searchParams); params.set("page", "1"); - if (!allowCopying) { + if (e.target.checked) { params.set("allowCopying", "true"); } else { params.delete("allowCopying"); @@ -30,12 +28,10 @@ export default function OtherFilters() { }; const handleChangeQuarantined = (e: ChangeEvent) => { - setQuarantined(e.target.checked); - const params = new URLSearchParams(searchParams); params.set("page", "1"); - if (!quarantined) { + if (e.target.checked) { params.set("quarantined", "true"); } else { params.delete("quarantined"); diff --git a/frontend/src/components/mii/list/platform-select.tsx b/frontend/src/components/mii/list/platform-select.tsx index 01bdf79..6aa14cc 100644 --- a/frontend/src/components/mii/list/platform-select.tsx +++ b/frontend/src/components/mii/list/platform-select.tsx @@ -1,4 +1,4 @@ -import { useState, useTransition } from "react"; +import { useTransition } from "react"; import { Icon } from "@iconify/react"; import type { MiiPlatform } from "@tomodachi-share/shared"; import { useNavigate, useSearchParams } from "react-router"; @@ -7,19 +7,22 @@ export default function PlatformSelect() { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const [, startTransition] = useTransition(); - - const [selected, setSelected] = useState((searchParams.get("platform") as MiiPlatform) ?? null); + const selected = (searchParams.get("platform") as MiiPlatform) ?? null; const handleClick = (platform: MiiPlatform) => { const filter = selected === platform ? null : platform; - setSelected(filter); const params = new URLSearchParams(searchParams); + params.set("page", "1"); + if (filter) { params.set("platform", filter); } else { params.delete("platform"); } + if (params.get("gender") === "NONBINARY") params.delete("gender"); + params.delete("makeup"); + params.delete("allowCopying"); startTransition(() => { navigate(`?${params.toString()}`);