TomodachiShare
-
+
-
-
- + - - + Submit - +
-
-
- {isOpen && (
-
- );
-}
+import { useEffect, useMemo, useState } from "react";
+import { Icon } from "@iconify/react";
+
+import PlatformSelect from "./platform-select";
+import TagFilter from "./tag-filter";
+import GenderSelect from "./gender-select";
+import OtherFilters from "./other-filters";
+import MakeupSelect from "./makeup-select";
+import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared";
+import { useSearchParams } from "react-router";
+
+export default function FilterMenu() {
+ const [searchParams] = useSearchParams();
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [isVisible, setIsVisible] = useState(false);
+
+ const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+ const gender = (searchParams.get("gender") as MiiGender) || undefined;
+ const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined;
+ const rawTags = searchParams.get("tags") || "";
+ const rawExclude = searchParams.get("exclude") || "";
+ const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
+
+ const tags = useMemo(
+ () =>
+ rawTags
+ ? rawTags
+ .split(",")
+ .map((tag) => tag.trim())
+ .filter((tag) => tag.length > 0)
+ : [],
+ [rawTags],
+ );
+ const exclude = useMemo(
+ () =>
+ rawExclude
+ ? rawExclude
+ .split(",")
+ .map((tag) => tag.trim())
+ .filter((tag) => tag.length > 0)
+ : [],
+ [rawExclude],
+ );
+
+ const [filterCount, setFilterCount] = useState(tags.length);
+
+ // Filter menu button handler
+ const handleClick = () => {
+ if (!isOpen) {
+ setIsOpen(true);
+ // slight delay to trigger animation
+ setTimeout(() => setIsVisible(true), 10);
+ } else {
+ setIsVisible(false);
+ setTimeout(() => {
+ setIsOpen(false);
+ }, 200);
+ }
+ };
+
+ // Count all active filters
+ useEffect(() => {
+ let count = tags.length + exclude.length;
+ if (platform) count++;
+ if (gender) count++;
+ if (allowCopying) count++;
+ if (makeup) count++;
+
+ setFilterCount(count);
+ }, [tags, exclude, platform, gender, allowCopying, makeup]);
+
+ return (
+
- {/* Arrow */}
-
-
-
- )}
-
-
- Platform -
-
- - Platform -
-
-
- Gender -
-
- - Gender -
-
-
- Tags Include -
-
- - Tags Include -
-
-
- Tags Exclude -
-
- - Tags Exclude -
-
-
- Face Paint -
-
- - Face Paint -
-
+
+
+ {isOpen && (
+
+ );
+}
diff --git a/frontend/src/components/mii/list/gender-select.tsx b/frontend/src/components/mii/list/gender-select.tsx
index cdf70db..2fd9cdb 100644
--- a/frontend/src/components/mii/list/gender-select.tsx
+++ b/frontend/src/components/mii/list/gender-select.tsx
@@ -1,72 +1,73 @@
-import { useState, useTransition } from "react";
-import { Icon } from "@iconify/react";
-import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
-
-export default function GenderSelect() {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const [selected, setSelected] = useState
+ {/* Arrow */}
+
+
+
+ )}
+
+
+ Platform +
+
+ + Platform +
+
+
+ Gender +
+
+ + Gender +
+
+
+ Tags Include +
+
+ + Tags Include +
+
+
+ Tags Exclude +
+
+ + Tags Exclude +
+
+
+ Face Paint +
+
+ + Face Paint +
+
-
-
-
-
- {platform !== "THREE_DS" && (
-
- )}
-
- );
-}
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
+import { useNavigate, useSearchParams } from "react-router";
+
+export default function GenderSelect() {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const [selected, setSelected] = useState
+
+
+
+
+ {platform !== "THREE_DS" && (
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/mii/list/makeup-select.tsx b/frontend/src/components/mii/list/makeup-select.tsx
index 40f8926..6747dbb 100644
--- a/frontend/src/components/mii/list/makeup-select.tsx
+++ b/frontend/src/components/mii/list/makeup-select.tsx
@@ -1,72 +1,73 @@
-import { useState, useTransition } from "react";
-import { Icon } from "@iconify/react";
-import type { MiiMakeup } from "@tomodachi-share/shared";
-
-export default function MakeupSelect() {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const [selected, setSelected] = useState
- {/* Full Makeup */}
-
-
- {/* Partial Makeup */}
-
-
- {/* No Makeup */}
-
-
- );
-}
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import type { MiiMakeup } from "@tomodachi-share/shared";
+import { useNavigate, useSearchParams } from "react-router";
+
+export default function MakeupSelect() {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const [selected, setSelected] = useState
+ {/* Full Makeup */}
+
+
+ {/* Partial Makeup */}
+
+
+ {/* No Makeup */}
+
+
+ );
+}
diff --git a/frontend/src/components/mii/list/mii-grid.tsx b/frontend/src/components/mii/list/mii-grid.tsx
index f9382fd..f9a2e0a 100644
--- a/frontend/src/components/mii/list/mii-grid.tsx
+++ b/frontend/src/components/mii/list/mii-grid.tsx
@@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
import LikeButton from "../../like-button";
import DeleteMiiButton from "../delete-mii-button";
+import { Link } from "react-router";
interface Props {
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
@@ -25,7 +26,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
-
+
{mii.name}
-
+
((searchParams.get("allowCopying") as unknown as boolean) ?? false);
- const [quarantined, setQuarantined] = useState((searchParams.get("quarantined") as unknown as boolean) ?? false);
-
- const handleChangeAllowCopying = (e: ChangeEvent) => {
- setAllowCopying(e.target.checked);
-
- const params = new URLSearchParams(searchParams);
- params.set("page", "1");
-
- if (!allowCopying) {
- params.set("allowCopying", "true");
- } else {
- params.delete("allowCopying");
- }
-
- startTransition(() => {
- // router.push(`?${params.toString()}`, { scroll: false });
- window.location.href = `?${params.toString()}`;
- });
- };
-
- const handleChangeQuarantined = (e: ChangeEvent) => {
- setQuarantined(e.target.checked);
-
- const params = new URLSearchParams(searchParams);
- params.set("page", "1");
-
- if (!quarantined) {
- params.set("quarantined", "true");
- } else {
- params.delete("quarantined");
- }
-
- startTransition(() => {
- // router.push(`?${params.toString()}`, { scroll: false });
- window.location.href = `?${params.toString()}`;
- });
- };
-
- const showAllowCopying = platform !== "SWITCH";
- const showQuarantined = !location.pathname.startsWith("/profile");
-
- if (!showAllowCopying && !showQuarantined) return null;
-
- return (
- <>
- ((searchParams.get("allowCopying") as unknown as boolean) ?? false);
+ const [quarantined, setQuarantined] = useState((searchParams.get("quarantined") as unknown as boolean) ?? false);
+
+ const handleChangeAllowCopying = (e: ChangeEvent) => {
+ setAllowCopying(e.target.checked);
+
+ const params = new URLSearchParams(searchParams);
+ params.set("page", "1");
+
+ if (!allowCopying) {
+ params.set("allowCopying", "true");
+ } else {
+ params.delete("allowCopying");
+ }
+
+ startTransition(() => {
+ navigate(`?${params.toString()}`);
+ });
+ };
+
+ const handleChangeQuarantined = (e: ChangeEvent) => {
+ setQuarantined(e.target.checked);
+
+ const params = new URLSearchParams(searchParams);
+ params.set("page", "1");
+
+ if (!quarantined) {
+ params.set("quarantined", "true");
+ } else {
+ params.delete("quarantined");
+ }
+
+ startTransition(() => {
+ navigate(`?${params.toString()}`);
+ });
+ };
+
+ const showAllowCopying = platform !== "SWITCH";
+ const showQuarantined = !location.pathname.startsWith("/profile");
+
+ if (!showAllowCopying && !showQuarantined) return null;
+
+ return (
+ <>
+ ((searchParams.get("platform") as MiiPlatform) ?? null);
-
- const handleClick = (platform: MiiPlatform) => {
- const filter = selected === platform ? null : platform;
- setSelected(filter);
-
- const params = new URLSearchParams(searchParams);
- if (filter) {
- params.set("platform", filter);
- } else {
- params.delete("platform");
- }
-
- startTransition(() => {
- // router.push(`?${params.toString()}`);
- window.location.href = `?${params.toString()}`;
- });
- };
-
- return (
- ((searchParams.get("platform") as MiiPlatform) ?? null);
+
+ const handleClick = (platform: MiiPlatform) => {
+ const filter = selected === platform ? null : platform;
+ setSelected(filter);
+
+ const params = new URLSearchParams(searchParams);
+ if (filter) {
+ params.set("platform", filter);
+ } else {
+ params.delete("platform");
+ }
+
+ startTransition(() => {
+ navigate(`?${params.toString()}`);
+ });
+ };
+
+ return (
+ (preexistingTags);
-
- // Sync state if the URL tags change (e.g. via navigation)
- useEffect(() => {
- setTags(preexistingTags);
- }, [preexistingTags]);
-
- // Redirect automatically on tags change
- useEffect(() => {
- const urlTags = preexistingTags.join(",");
- const stateTags = tags.join(",");
-
- if (urlTags === stateTags) return;
-
- const params = new URLSearchParams(searchParams);
- params.set("page", "1");
-
- if (tags.length > 0) {
- params.set(isExclude ? "exclude" : "tags", stateTags);
- } else {
- params.delete(isExclude ? "exclude" : "tags");
- }
-
- startTransition(() => {
- // router.push(`?${params.toString()}`, { scroll: false });
- window.location.href = `?${params.toString()}`;
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [tags]);
-
- return (
- (preexistingTags);
+
+ // Sync state if the URL tags change (e.g. via navigation)
+ useEffect(() => {
+ setTags(preexistingTags);
+ }, [preexistingTags]);
+
+ // Redirect automatically on tags change
+ useEffect(() => {
+ const urlTags = preexistingTags.join(",");
+ const stateTags = tags.join(",");
+
+ if (urlTags === stateTags) return;
+
+ const params = new URLSearchParams(searchParams);
+ params.set("page", "1");
+
+ if (tags.length > 0) {
+ params.set(isExclude ? "exclude" : "tags", stateTags);
+ } else {
+ params.delete(isExclude ? "exclude" : "tags");
+ }
+
+ startTransition(() => {
+ navigate(`?${params.toString()}`);
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [tags]);
+
+ return (
+
{mii.platform === "SWITCH" ? (
@@ -60,16 +61,16 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
-
+
)} */}
diff --git a/frontend/src/components/mii/list/other-filters.tsx b/frontend/src/components/mii/list/other-filters.tsx
index 24b4a0e..3da9ebc 100644
--- a/frontend/src/components/mii/list/other-filters.tsx
+++ b/frontend/src/components/mii/list/other-filters.tsx
@@ -1,79 +1,80 @@
-import type { MiiPlatform } from "@tomodachi-share/shared";
-import { type ChangeEvent, useState, useTransition } from "react";
-
-export default function OtherFilters() {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
- const [allowCopying, setAllowCopying] = useState
-
- Other -
-
-
- {showAllowCopying && (
- - Other -
-
-
-
-
- )}
- {showQuarantined && (
-
-
-
-
- )}
-
- );
-}
+import type { MiiPlatform } from "@tomodachi-share/shared";
+import { type ChangeEvent, useState, useTransition } from "react";
+import { useLocation, useNavigate, useSearchParams } from "react-router";
+
+export default function OtherFilters() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
+ const [allowCopying, setAllowCopying] = useState
+
+ Other +
+
+
+ {showAllowCopying && (
+ + Other +
+
+
+
+
+ )}
+ {showQuarantined && (
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/mii/list/platform-select.tsx b/frontend/src/components/mii/list/platform-select.tsx
index 38e9086..01bdf79 100644
--- a/frontend/src/components/mii/list/platform-select.tsx
+++ b/frontend/src/components/mii/list/platform-select.tsx
@@ -1,55 +1,56 @@
-import { useState, useTransition } from "react";
-import { Icon } from "@iconify/react";
-import type { MiiPlatform } from "@tomodachi-share/shared";
-
-export default function PlatformSelect() {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const [selected, setSelected] = useState
-
-
-
-
- );
-}
+import { useState, useTransition } from "react";
+import { Icon } from "@iconify/react";
+import type { MiiPlatform } from "@tomodachi-share/shared";
+import { useNavigate, useSearchParams } from "react-router";
+
+export default function PlatformSelect() {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const [selected, setSelected] = useState
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/mii/list/sort-select.tsx b/frontend/src/components/mii/list/sort-select.tsx
index 7aff6ac..a28d1f8 100644
--- a/frontend/src/components/mii/list/sort-select.tsx
+++ b/frontend/src/components/mii/list/sort-select.tsx
@@ -1,61 +1,58 @@
-import { useTransition } from "react";
-import { useSelect } from "downshift";
-import { Icon } from "@iconify/react";
-
-type Sort = "likes" | "newest" | "oldest" | "random";
-
-const items = ["likes", "newest", "oldest", "random"];
-
-export default function SortSelect() {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const currentSort = (searchParams.get("sort") as Sort) || "newest";
-
- const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
- items,
- selectedItem: currentSort,
- onSelectedItemChange: ({ selectedItem }) => {
- if (!selectedItem) return;
-
- const params = new URLSearchParams(searchParams);
- params.set("page", "1");
- params.set("sort", selectedItem);
-
- if (selectedItem == "random") {
- params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString());
- }
-
- startTransition(() => {
- // router.push(`?${params.toString()}`, { scroll: false });
- window.location.href = `?${params.toString()}`;
- });
- },
- });
-
- return (
-
- {/* Toggle button to open the dropdown */}
-
-
- {/* Dropdown menu */}
-
- );
-}
+import { useTransition } from "react";
+import { useSelect } from "downshift";
+import { Icon } from "@iconify/react";
+import { useNavigate, useSearchParams } from "react-router";
+
+type Sort = "likes" | "newest" | "oldest";
+
+const items = ["likes", "newest", "oldest"];
+
+export default function SortSelect() {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const currentSort = (searchParams.get("sort") as Sort) || "newest";
+
+ const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
+ items,
+ selectedItem: currentSort,
+ onSelectedItemChange: ({ selectedItem }) => {
+ if (!selectedItem) return;
+
+ const params = new URLSearchParams(searchParams);
+ params.set("page", "1");
+ params.set("sort", selectedItem);
+
+ startTransition(() => {
+ navigate(`?${params.toString()}`);
+ });
+ },
+ });
+
+ return (
+ -
- {isOpen &&
- items.map((item, index) => (
-
- - {item} - - ))} -
+ {/* Toggle button to open the dropdown */}
+
+
+ {/* Dropdown menu */}
+
+ );
+}
diff --git a/frontend/src/components/mii/list/tag-filter.tsx b/frontend/src/components/mii/list/tag-filter.tsx
index 2c89171..a7df351 100644
--- a/frontend/src/components/mii/list/tag-filter.tsx
+++ b/frontend/src/components/mii/list/tag-filter.tsx
@@ -1,59 +1,60 @@
-import { useEffect, useMemo, useState, useTransition } from "react";
-import TagSelector from "../../tag-selector";
-
-interface Props {
- isExclude?: boolean;
-}
-
-export default function TagFilter({ isExclude }: Props) {
- const searchParams = new URLSearchParams(window.location.search);
- const [, startTransition] = useTransition();
-
- const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
- const preexistingTags = useMemo(
- () =>
- rawTags
- ? rawTags
- .split(",")
- .map((tag) => tag.trim())
- .filter((tag) => tag.length > 0)
- : [],
- [rawTags],
- );
-
- const [tags, setTags] = useState-
+ {isOpen &&
+ items.map((item, index) => (
+
- + {item} + + ))} +
-
- );
-}
+import { useEffect, useMemo, useState, useTransition } from "react";
+import TagSelector from "../../tag-selector";
+import { useNavigate, useSearchParams } from "react-router";
+
+interface Props {
+ isExclude?: boolean;
+}
+
+export default function TagFilter({ isExclude }: Props) {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [, startTransition] = useTransition();
+
+ const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
+ const preexistingTags = useMemo(
+ () =>
+ rawTags
+ ? rawTags
+ .split(",")
+ .map((tag) => tag.trim())
+ .filter((tag) => tag.length > 0)
+ : [],
+ [rawTags],
+ );
+
+ const [tags, setTags] = useState
+
+ );
+}
diff --git a/frontend/src/components/mii/share-mii-button.tsx b/frontend/src/components/mii/share-mii-button.tsx
index 38f3d37..8ce513b 100644
--- a/frontend/src/components/mii/share-mii-button.tsx
+++ b/frontend/src/components/mii/share-mii-button.tsx
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { Icon } from "@iconify/react";
+import { Link } from "react-router";
interface Props {
miiId: number;
@@ -128,15 +129,15 @@ export default function ShareMiiButton({ miiId }: Props) {
{/* Save button */}
-