+ 
TomodachiShare
diff --git a/frontend/src/components/mii/list/index.tsx b/frontend/src/components/mii/list/index.tsx
index ab399ea..6c3ddba 100644
--- a/frontend/src/components/mii/list/index.tsx
+++ b/frontend/src/components/mii/list/index.tsx
@@ -1,184 +1,164 @@
-// import crypto from "crypto";
-// import seedrandom from "seedrandom";
+import { useEffect, useState } from "react";
+import { Link, useSearchParams } from "react-router";
+import Skeleton from "./skeleton";
+import FilterMenu from "./filter-menu";
+import SortSelect from "./sort-select";
+import Pagination from "../../pagination";
+import DeleteMiiButton from "../delete-mii-button";
+import { Icon } from "@iconify/react";
+import LikeButton from "../../like-button";
+import { useStore } from "@nanostores/react";
+import { session } from "../../../session";
-// import { searchSchema } from "@tomodachi-share/shared/schemas";
+interface ApiResponse {
+ totalCount: number;
+ miis: any[];
+ lastPage: number;
+}
-// import SortSelect from "./sort-select";
-// import Pagination from "./pagination";
-// import FilterMenu from "./filter-menu";
-// import MiiGrid from "./mii-grid";
+interface Props {
+ userId?: number;
+ parentPage?: "likes" | "admin";
+}
-// interface Props {
-// searchParams: URLSearchParams;
-// userId?: number; // Profiles
-// parentPage?: "likes" | "admin";
-// }
+export default function MiiList({ parentPage, userId }: Props) {
+ const [searchParams] = useSearchParams();
+ const [data, setData] = useState{parsed.error.issues[0].message}
; + const $session = useStore(session); -// const { q: query, sort, tags, exclude, platform, gender, makeup, allowCopying, quarantined, page = 1, limit = 24, seed } = parsed.data; + useEffect(() => { + const params = new URLSearchParams(searchParams.toString()); + if (userId) params.append("userId", userId.toString()); + if (parentPage) params.append("parentPage", parentPage); -// // My Likes page -// let miiIdsLiked: number[] | undefined = undefined; + fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${params.toString()}`, { credentials: "include" }) + .then((res) => { + if (!res.ok) throw new Error("Failed to fetch Miis"); + return res.json(); + }) + .then((data) => { + setData(data); + setLoading(false); + }) + .catch((err) => { + console.error(err); + setLoading(false); + }); + }, [searchParams, userId, parentPage]); -// if (parentPage === "likes" && session?.user?.id) { -// const likedMiis = await prisma.like.findMany({ -// where: { userId: Number(session.user.id) }, -// select: { miiId: true }, -// }); -// miiIdsLiked = likedMiis.map((like) => like.miiId); -// } + return ( + <> + {loading ? ( +
+
+ ) : (
+
+
-// const select: Prisma.MiiSelect = {
-// id: true,
-// // Don't show when userId is specified
-// ...(!userId && {
-// user: {
-// select: {
-// id: true,
-// name: true,
-// },
-// },
-// }),
-// platform: true,
-// name: true,
-// imageCount: true,
-// tags: true,
-// createdAt: true,
-// gender: true,
-// makeup: true,
-// allowedCopying: true,
-// quarantined: true,
-// in_queue: true,
-// // Mii liked check
-// ...(session?.user?.id && {
-// likedBy: {
-// where: { userId: Number(session.user.id) },
-// select: { userId: true },
-// },
-// }),
-// // Like count
-// _count: {
-// select: { likedBy: true },
-// },
-// };
+
+ {data.totalCount}
+ {data.totalCount === 1 ? "Mii" : "Miis"}
+
-// const where: Prisma.MiiWhereInput = {
-// // In queue logic
-// ...(parentPage === "admin"
-// ? { in_queue: true } // Only show queued Miis
-// : userId
-// ? {
-// // Include queued Miis if user is on their profile
-// ...(Number(session?.user?.id) === userId ? {} : { in_queue: false }),
-// userId,
-// }
-// : {
-// // Don't show queued Miis on main page
-// in_queue: false,
-// }),
-// // Only show liked miis on likes page
-// ...(parentPage === "likes" && miiIdsLiked && { id: { in: miiIdsLiked } }),
-// // Searching
-// ...(query && {
-// OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }, { description: { contains: query, mode: "insensitive" } }],
-// }),
-// // Tag filtering
-// ...(tags && tags.length > 0 && { tags: { hasEvery: tags } }),
-// ...(exclude && exclude.length > 0 && { NOT: { tags: { hasSome: exclude } } }),
-// // Platform
-// ...(platform && { platform: { equals: platform } }),
-// // Gender
-// ...(gender && { gender: { equals: gender } }),
-// // Allow Copying
-// ...(allowCopying && { allowedCopying: true }),
-// // Makeup
-// ...(makeup && { makeup: { equals: makeup } }),
-// // Quarantined
-// ...(!quarantined && !userId && { quarantined: false }),
-// };
+
+
+
+ {data.miis.map((mii) => (
+
+
+ {mii.in_queue && (
+ 
+
-// let totalCount: number;
-// let miis: Prisma.MiiGetPayload<{ select: typeof select }>[];
+
+ ))}
+
+
+ )}
-// const skip = (page - 1) * limit;
+
+
+
+
+
+ {mii.name}
+
+
+
-// if (sort === "random") {
-// // Get all IDs that match the where conditions
-// const matchingIds = await prisma.mii.findMany({
-// where,
-// select: { id: true },
-// });
+
+ {mii.platform === "SWITCH" ? (
+
+
+
+
+
+
+ )}
-// // Use seed for consistent random results
-// const randomSeed = seed || crypto.randomInt(0, 1_000_000_000);
-// const rng = seedrandom(randomSeed.toString());
+ {/* Admin Controls */}
+ {parentPage === "admin" && (
+
+
+ )}
+
+
+
-// // Randomize all IDs using the Durstenfeld algorithm
-// for (let i = matchingIds.length - 1; i > 0; i--) {
-// const j = Math.floor(rng() * (i + 1));
-// [matchingIds[i], matchingIds[j]] = [matchingIds[j], matchingIds[i]];
-// }
-
-// // Convert to number[] array
-// const selectedIds = matchingIds.slice(skip, skip + limit).map((i) => i.id);
-
-// miis = await prisma.mii.findMany({
-// where: {
-// id: { in: selectedIds },
-// },
-// select,
-// });
-// } else {
-// // Sorting by likes, newest, or oldest
-// let orderBy: Prisma.MiiOrderByWithRelationInput[];
-
-// if (sort === "likes") {
-// orderBy = [{ likedBy: { _count: "desc" } }, { name: "asc" }];
-// } else if (sort === "oldest") {
-// orderBy = [{ createdAt: "asc" }, { name: "asc" }];
-// } else {
-// // default to newest
-// orderBy = [{ createdAt: "desc" }, { name: "asc" }];
-// }
-
-// [totalCount, miis] = await Promise.all([
-// prisma.mii.count({ where: { ...where, userId } }),
-// prisma.mii.findMany({
-// where,
-// orderBy,
-// select,
-// skip,
-// take: limit,
-// }),
-// ]);
-// }
-
-// const lastPage = Math.ceil(totalCount / limit);
-
-// return (
-//
+
+
-//
-// );
-// }
+ {new Date(mii.createdAt).toLocaleString("en-GB", { timeZone: "UTC" })}
+
-//
-
-//
-// {totalCount}
-// {totalCount === 1 ? "Mii" : "Miis"}
-//
-
-//
-//
-// No Miis found, has the server died?
+ )} + + ); +} diff --git a/frontend/src/components/mii/list/mii-grid.tsx b/frontend/src/components/mii/list/mii-grid.tsx deleted file mode 100644 index f9a2e0a..0000000 --- a/frontend/src/components/mii/list/mii-grid.tsx +++ /dev/null @@ -1,105 +0,0 @@ -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 } } } }>[]; - miis: any[]; - userId?: number; - parentPage?: string; -} - -export default function MiiGrid({ miis, userId, parentPage }: Props) { - return ( -
- {miis.map((mii) => (
-
- );
-}
diff --git a/frontend/src/components/mii/list/skeleton.tsx b/frontend/src/components/mii/list/skeleton.tsx
index 5a44dbe..9e067d4 100644
--- a/frontend/src/components/mii/list/skeleton.tsx
+++ b/frontend/src/components/mii/list/skeleton.tsx
@@ -1,53 +1,54 @@
-import FilterSelect from "./tag-filter";
-import SortSelect from "./sort-select";
-import Pagination from "../../pagination";
-
-export default function Skeleton() {
- return (
-
- {mii.in_queue && (
-
-
-
-
- ))}
-
-
- )}
-
-
-
-
-
-
- {mii.name}
-
-
-
-
-
- {mii.platform === "SWITCH" ? (
-
-
-
-
-
-
- )} */}
-
- {/* Admin Controls */}
- {parentPage === "admin" && (
-
-
- )}
-
-
-
-
- {new Date(mii.createdAt).toLocaleString("en-GB", { timeZone: "UTC" })}
-
-
-
-
- );
-}
+import SortSelect from "./sort-select";
+import Pagination from "../../pagination";
+import FilterMenu from "./filter-menu";
+
+export default function Skeleton() {
+ return (
+
-
-
- - ??? Miis -
- -
-
-
- {[...Array(24)].map((_, index) => (
-
-
-
- {/* Carousel Skeleton */}
-
- ))}
-
-
-
-
- {/* Content */}
-
- {/* Name */}
-
-
- {/* Tags */}
-
-
-
-
-
-
- {/* Bottom row */}
-
-
-
-
-
-
-
+
+ );
+}
diff --git a/frontend/src/components/profile-information.tsx b/frontend/src/components/profile-information.tsx
index 209f9d0..67285ae 100644
--- a/frontend/src/components/profile-information.tsx
+++ b/frontend/src/components/profile-information.tsx
@@ -3,19 +3,20 @@ import { Icon } from "@iconify/react";
import Description from "./description";
import { useStore } from "@nanostores/react";
import { session } from "../session";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
interface Props {
user?: any;
- page?: "settings" | "likes";
}
-export default function ProfileInformation({ user, page }: Props) {
+export default function ProfileInformation({ user }: Props) {
+ const location = useLocation();
const $session = useStore(session);
if (!user) return null;
const currentUser = user ?? $session?.user;
+ const page = location.pathname;
const isAdmin = currentUser?.id === Number(import.meta.env.VITE_ADMIN_USER_ID);
const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(user?.id);
const isOwnProfile = currentUser?.id === user?.id;
@@ -24,8 +25,8 @@ export default function ProfileInformation({ user, page }: Props) {
+
+
+
+ ???
+ Miis
+
+
+
+
+
+ {[...Array(24)].map((_, index) => (
+
+
+
+ {/* Carousel Skeleton */}
+
+ ))}
+
+
+
+
+ {/* Content */}
+
+ {/* Name */}
+
+
+ {/* Tags */}
+
+
+
+
+
+
+ {/* Bottom row */}
+
+
+
+
+
+
+
{/* Profile picture */}
-
- 
+
+
{/* User information */}
@@ -72,19 +73,19 @@ export default function ProfileInformation({ user, page }: Props) {
Admin
)}
- {/* {isOwnProfile && page !== "likes" && (
+ {isOwnProfile && page !== "/profile/likes" && (
@@ -25,8 +27,9 @@ createRoot(document.getElementById("root")!).render(
+
(null);
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- fetch(`${import.meta.env.VITE_API_URL}/api/mii/list?${searchParams.toString()}`)
- .then((res) => {
- if (!res.ok) throw new Error("Failed to fetch Miis");
- return res.json();
- })
- .then((data) => {
- setData(data);
- setLoading(false);
- })
- .catch((err) => {
- console.error(err);
- setLoading(false);
- });
- }, [searchParams]);
return (
<>
(null);
const [loading, setLoading] = useState(true);
+ const $session = useStore(session);
useEffect(() => {
- fetch(`${import.meta.env.VITE_API_URL}/api/profile/${id}/info`)
+ if ($session === undefined) return; // session still loading
+ if ($session === null) {
+ // not logged in
+ navigate("/404");
+ return;
+ }
+
+ const userId = id ? id : $session.user!.id;
+
+ fetch(`${import.meta.env.VITE_API_URL}/api/profile/${userId}/info`)
.then((res) => {
if (!res.ok) throw new Error("Failed to fetch profile");
return res.json();
@@ -23,7 +35,7 @@ export default function ProfilePage() {
setLoading(false);
navigate("/404");
});
- }, [id]);
+ }, [id, $session]);
if (loading || !user) {
return
(null);
+// Undefined means still loading, null means no session
+export const session = atom(undefined);
{searchParams.get("tags") ? `Miis tagged with '${searchParams.get("tags")}' - TomodachiShare` : "TomodachiShare - index mii list"}
-We're currently going through some major code changes therefore some features won't work.
- -
-
- ) : (
-
-
-
-
- {data.totalCount}
- {data.totalCount === 1 ? "Mii" : "Miis"}
-
-
-
-
- No Miis found :( Has the server died?
- )} - +Loading...
;
if ($session) return Loading...
;
@@ -32,9 +44,7 @@ export default function ProfilePage() {
return (
+
+
+
+ My Likes
+View every Mii you have liked on TomodachiShare.
+Loading...
;
+ if ($session === null) return