trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: my likes page and redesign profile page

Browse source
This commit is contained in:
trafficlunar 2025-05-14 20:13:25 +01:00
parent 8f5296ca62
commit 9b8c697f66
9 changed files with 131 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/mii/[id]/page.tsx
View file

@ -205,12 +205,12 @@ export default async function MiiPage({ params }: Props) {
</div> </div>
{/* Buttons */} {/* Buttons */}
<div className="flex w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:h-12 *:w-14 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:[&_svg]:scale-[1.2]"> <div className="flex gap-3 w-fit bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 text-3xl text-orange-400 max-md:place-self-center *:size-12 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-xs">
{session && (Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && ( {session && (Number(session.user.id) === mii.userId || Number(session.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID)) && (
<> <>
<Link href={`/edit/${mii.id}`}> <Link href={`/edit/${mii.id}`}>
<Icon icon="mdi:pencil" /> <Icon icon="mdi:pencil" />
<span className="text-xs">Edit</span> <span>Edit</span>
</Link> </Link>
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage /> <DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
</> </>
@ -218,7 +218,7 @@ export default async function MiiPage({ params }: Props) {
<Link href={`/report/mii/${mii.id}`}> <Link href={`/report/mii/${mii.id}`}>
<Icon icon="material-symbols:flag-rounded" /> <Icon icon="material-symbols:flag-rounded" />
<span className="text-xs">Report</span> <span>Report</span>
</Link> </Link>
<ScanTutorialButton /> <ScanTutorialButton />
</div> </div>

8
src/app/profile/[id]/page.tsx
View file

@ -78,9 +78,11 @@ export default async function ProfilePage({ searchParams, params }: Props) {
return ( return (
<div> <div>
<ProfileInformation userId={user.id} /> <ProfileInformation userId={user.id} />
<Suspense fallback={<Skeleton />}> <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
<MiiList searchParams={await searchParams} userId={user.id} /> <Suspense fallback={<Skeleton />}>
</Suspense> <MiiList searchParams={await searchParams} userId={user.id} />
</Suspense>
</div>
</div> </div>
); );
} }

48
src/app/profile/likes/page.tsx Normal file
View file

@ -0,0 +1,48 @@
import { Metadata } from "next";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { auth } from "@/lib/auth";
import ProfileInformation from "@/components/profile-information";
import Skeleton from "@/components/mii-list/skeleton";
import MiiList from "@/components/mii-list";
interface Props {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export const metadata: Metadata = {
title: "My Likes - TomodachiShare",
description: "View the Miis that you have liked on TomodachiShare",
robots: {
index: false,
follow: false,
},
};
export default async function ProfileSettingsPage({ searchParams }: Props) {
const session = await auth();
if (!session) redirect("/login");
return (
<div>
<ProfileInformation page="likes" />
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
<div>
<h2 className="text-2xl font-bold">My Likes</h2>
<p className="text-sm text-zinc-500">View every Mii you have liked on TomodachiShare.</p>
</div>
<div className="h-5 flex items-center">
<hr className="flex-grow border-zinc-300" />
</div>
<Suspense fallback={<Skeleton />}>
<MiiList inLikesPage searchParams={await searchParams} />
</Suspense>
</div>
</div>
);
}

2
src/app/profile/settings/page.tsx
View file

@ -22,7 +22,7 @@ export default async function ProfileSettingsPage() {
return ( return (
<div> <div>
<ProfileInformation inSettings /> <ProfileInformation page="settings" />
<ProfileSettings /> <ProfileSettings />
</div> </div>
); );

2
src/components/delete-mii.tsx
View file

@ -53,7 +53,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
{inMiiPage ? ( {inMiiPage ? (
<button onClick={() => setIsOpen(true)} className="cursor-pointer"> <button onClick={() => setIsOpen(true)} className="cursor-pointer">
<Icon icon="mdi:trash" /> <Icon icon="mdi:trash" />
<span className="text-xs">Delete</span> <span>Delete</span>
</button> </button>
) : ( ) : (
<button onClick={() => setIsOpen(true)} title="Delete Mii" data-tooltip="Delete" className="cursor-pointer aspect-square"> <button onClick={() => setIsOpen(true)} title="Delete Mii" data-tooltip="Delete" className="cursor-pointer aspect-square">

15
src/components/mii-list/index.tsx
View file

@ -18,6 +18,7 @@ import Pagination from "./pagination";
interface Props { interface Props {
searchParams: { [key: string]: string | string[] | undefined }; searchParams: { [key: string]: string | string[] | undefined };
userId?: number; // Profiles userId?: number; // Profiles
inLikesPage?: boolean; // Self-explanatory
} }
const searchSchema = z.object({ const searchSchema = z.object({
@ -47,7 +48,7 @@ const searchSchema = z.object({
.optional(), .optional(),
}); });
export default async function MiiList({ searchParams, userId }: Props) { export default async function MiiList({ searchParams, userId, inLikesPage }: Props) {
const session = await auth(); const session = await auth();
const parsed = searchSchema.safeParse(searchParams); const parsed = searchSchema.safeParse(searchParams);
@ -55,7 +56,19 @@ export default async function MiiList({ searchParams, userId }: Props) {
const { q: query, sort, tags, page = 1, limit = 24 } = parsed.data; const { q: query, sort, tags, page = 1, limit = 24 } = parsed.data;
let miiIdsLiked: number[] | undefined = undefined;
if (inLikesPage && session?.user.id) {
const likedMiis = await prisma.like.findMany({
where: { userId: Number(session.user.id) },
select: { miiId: true },
});
miiIdsLiked = likedMiis.map((like) => like.miiId);
}
const where: Prisma.MiiWhereInput = { const where: Prisma.MiiWhereInput = {
// Only show liked miis on likes page
...(inLikesPage && miiIdsLiked && { id: { in: miiIdsLiked } }),
// Searching // Searching
...(query && { ...(query && {
OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }], OR: [{ name: { contains: query, mode: "insensitive" } }, { tags: { has: query } }],

97
src/components/profile-information.tsx
View file

@ -7,10 +7,10 @@ import { prisma } from "@/lib/prisma";
interface Props { interface Props {
userId?: number; userId?: number;
inSettings?: boolean; page?: "settings" | "likes";
} }
export default async function ProfileInformation({ userId, inSettings }: Props) { export default async function ProfileInformation({ userId, page }: Props) {
const session = await auth(); const session = await auth();
const id = userId ? userId : Number(session?.user.id); const id = userId ? userId : Number(session?.user.id);
@ -19,66 +19,83 @@ export default async function ProfileInformation({ userId, inSettings }: Props)
if (!user) return null; if (!user) return null;
const isAdmin = id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID);
const isContributor = process.env.NEXT_PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(id.toString());
const isOwnProfile = Number(session?.user.id) === id;
return ( return (
<div className="flex gap-4 mb-2 max-md:flex-col"> <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
<div className="flex w-full gap-4 overflow-x-scroll"> <div className="flex w-full gap-4 overflow-x-scroll">
{/* Profile picture */} {/* Profile picture */}
<Image <Link href={`/profile/${user.id}`} className="size-28 aspect-square">
src={user.image ?? "/guest.webp"} <Image
alt="profile picture" src={user.image ?? "/guest.webp"}
width={128} alt="profile picture"
height={128} width={128}
className="size-32 aspect-square rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" height={128}
/> className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center"
/>
</Link>
{/* User information */} {/* User information */}
<div className="flex flex-col w-full relative"> <div className="flex flex-col w-full relative py-3">
<h1 className="text-4xl font-extrabold w-full break-words flex items-center gap-2"> <div className="flex items-center gap-2">
{user.name} <Link href={`/profile/${user.id}`} className="text-3xl font-extrabold break-words">
{id === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && ( {user.name}
<div data-tooltip="Admin" className="font-normal text-orange-400"> </Link>
<Icon icon="mdi:shield-moon" /> {isAdmin && (
<div data-tooltip="Admin" className="text-orange-400">
<Icon icon="mdi:shield-moon" className="text-2xl" />
</div> </div>
)} )}
{process.env.NEXT_PUBLIC_CONTRIBUTORS_USER_IDS?.split(",").includes(id.toString()) && ( {isContributor && (
<div data-tooltip="Contributor" className="font-normal text-orange-400"> <div data-tooltip="Contributor" className="text-orange-400">
<Icon icon="mingcute:group-fill" /> <Icon icon="mingcute:group-fill" className="text-2xl" />
</div> </div>
)} )}
</h1> </div>
<h2 className="text-lg font-semibold break-words">@{user?.username}</h2> <h2 className="text-black/60 text-sm font-semibold break-words">@{user?.username}</h2>
<h4 className="mt-auto text-sm"> <div className="mt-auto text-sm flex gap-8">
Liked <span className="font-bold">{likedMiis}</span> Miis <h4 title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
</h4> <span className="font-medium">Created:</span>{" "}
<h4 className="text-sm" title={`${user.createdAt.toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}> {user.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
Created: {user.createdAt.toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })} </h4>
</h4> <h4>
Liked <span className="font-bold">{likedMiis}</span> Miis
</h4>
</div>
</div> </div>
</div> </div>
{/* Buttons */} {/* Buttons */}
<div className="flex flex-col items-end justify-end gap-1 max-md:flex-row"> <div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-90 *:hover:scale-[1.08] *:[&_span]:text-sm">
{Number(session?.user.id) != id && ( {!isOwnProfile && (
<Link href={`/report/user/${id}`} className="pill button !px-4"> <Link href={`/report/user/${id}`}>
<Icon icon="material-symbols:flag-rounded" className="text-2xl mr-2" /> <Icon icon="material-symbols:flag-rounded" />
<span>Report</span> <span>Report</span>
</Link> </Link>
)} )}
{Number(session?.user.id) == id && Number(session?.user.id) === Number(process.env.NEXT_PUBLIC_ADMIN_USER_ID) && ( {isOwnProfile && isAdmin && (
<Link href="/admin" className="pill button !px-4"> <Link href="/admin">
<Icon icon="mdi:shield-moon" className="text-2xl mr-2" /> <Icon icon="mdi:shield-moon" />
<span>Admin</span> <span>Admin</span>
</Link> </Link>
)} )}
{!inSettings && Number(session?.user.id) == id && ( {isOwnProfile && page !== "likes" && (
<Link href="/profile/settings" className="pill button !px-4"> <Link href="/profile/likes">
<Icon icon="material-symbols:settings-rounded" className="text-2xl mr-2" /> <Icon icon="icon-park-solid:like" />
<span>My Likes</span>
</Link>
)}
{isOwnProfile && page !== "settings" && (
<Link href="/profile/settings">
<Icon icon="material-symbols:settings-rounded" />
<span>Settings</span> <span>Settings</span>
</Link> </Link>
)} )}
{inSettings && ( {page && (
<Link href={`/profile/${id}`} className="pill button !px-4"> <Link href={`/profile/${id}`}>
<Icon icon="tabler:chevron-left" className="text-2xl mr-2" /> <Icon icon="tabler:chevron-left" />
<span>Back</span> <span>Back</span>
</Link> </Link>
)} )}

2
src/components/profile-settings/index.tsx
View file

@ -75,7 +75,7 @@ export default function ProfileSettings() {
</div> </div>
{/* Separator */} {/* Separator */}
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1"> <div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-1">
<hr className="flex-grow border-zinc-300" /> <hr className="flex-grow border-zinc-300" />
<span>Account Info</span> <span>Account Info</span>
<hr className="flex-grow border-zinc-300" /> <hr className="flex-grow border-zinc-300" />

2
src/components/tutorial/scan.tsx
View file

@ -38,7 +38,7 @@ export default function ScanTutorialButton() {
<> <>
<button type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer"> <button type="button" onClick={() => setIsOpen(true)} className="text-3xl cursor-pointer">
<Icon icon="fa:question-circle" /> <Icon icon="fa:question-circle" />
<span className="text-xs">Tutorial</span> <span>Tutorial</span>
</button> </button>
{isOpen && {isOpen &&