mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 05:07:46 +00:00
feat: reports
This commit is contained in:
parent
896dc40553
commit
97f0fda25c
16 changed files with 315 additions and 389 deletions
|
|
@ -1,5 +1,7 @@
|
|||
# TomodachiShare Development Instructions
|
||||
|
||||
This is probably outdated.
|
||||
|
||||
Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
|
||||
|
||||
## Getting started
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p align="center">
|
||||
<img src="public/logo.svg" alt="TomodachiShare Logo" width="128" />
|
||||
<img src="backend/public/logo.svg" alt="TomodachiShare Logo" width="128" />
|
||||
</p>
|
||||
|
||||
<h1 align="center"><a href="https://tomodachishare.com">TomodachiShare</a></h1>
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
import { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
import ReportMiiForm from "@/components/report/mii-form";
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Report Mii - TomodachiShare",
|
||||
description: "Report a Mii on TomodachiShare",
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
},
|
||||
};
|
||||
|
||||
export default async function ReportMiiPage({ params }: Props) {
|
||||
const session = await auth();
|
||||
const { id } = await params;
|
||||
|
||||
const mii = await prisma.mii.findUnique({
|
||||
where: {
|
||||
id: Number(id),
|
||||
},
|
||||
include: {
|
||||
_count: {
|
||||
select: {
|
||||
likedBy: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!session) redirect("/login");
|
||||
if (!mii) redirect("/404");
|
||||
|
||||
return (
|
||||
<div className="flex justify-center w-full">
|
||||
<ReportMiiForm mii={mii} likes={mii._count.likedBy} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
import ReportUserForm from "@/components/report/user-form";
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Report User - TomodachiShare",
|
||||
description: "Report a user on TomodachiShare",
|
||||
robots: {
|
||||
index: false,
|
||||
follow: false,
|
||||
},
|
||||
};
|
||||
|
||||
export default async function ReportUserPage({ params }: Props) {
|
||||
const session = await auth();
|
||||
const { id } = await params;
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: Number(id),
|
||||
},
|
||||
});
|
||||
|
||||
if (!session) redirect("/login");
|
||||
if (!user) redirect("/404");
|
||||
|
||||
return (
|
||||
<div className="flex justify-center w-full">
|
||||
<ReportUserForm user={user} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import ReasonSelector from "./reason-selector";
|
||||
import SubmitButton from "../submit-button";
|
||||
import { Mii, ReportReason } from "@prisma/client";
|
||||
|
||||
interface Props {
|
||||
mii: Mii;
|
||||
likes: number;
|
||||
}
|
||||
|
||||
export default function ReportMiiForm({ mii, likes }: Props) {
|
||||
const [reason, setReason] = useState<ReportReason>();
|
||||
const [notes, setNotes] = useState<string>();
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`/api/report`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
|
||||
});
|
||||
const { error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
// redirect(`/`);
|
||||
window.location.href = "https://tomodachishare.com";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Report a Mii</h2>
|
||||
<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
|
||||
<img src={`/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
|
||||
<div className="p-4">
|
||||
<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
|
||||
{/* <LikeButton likes={likes} isLiked={true} disabled /> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="reason" className="font-semibold">
|
||||
Reason
|
||||
</label>
|
||||
<ReasonSelector reason={reason} setReason={setReason} />
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3">
|
||||
<label htmlFor="reason-note" className="font-semibold">
|
||||
Reason notes
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
maxLength={256}
|
||||
placeholder="Type notes here for the report..."
|
||||
className="pill input rounded-xl! resize-none col-span-2"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import ReasonSelector from "./reason-selector";
|
||||
import SubmitButton from "../submit-button";
|
||||
import { ReportReason, User } from "@prisma/client";
|
||||
import Image from "next/image";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
}
|
||||
|
||||
export default function ReportUserForm({ user }: Props) {
|
||||
const [reason, setReason] = useState<ReportReason>();
|
||||
const [notes, setNotes] = useState<string>();
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`/api/report`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
|
||||
});
|
||||
const { error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = "https://tomodachishare.com";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Report a User</h2>
|
||||
<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
|
||||
<Image
|
||||
src={user.image ?? "/guest.png"}
|
||||
alt="profile picture"
|
||||
width={96}
|
||||
height={96}
|
||||
className="aspect-square rounded-full border-2 border-orange-400"
|
||||
/>
|
||||
<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="reason" className="font-semibold">
|
||||
Reason
|
||||
</label>
|
||||
<ReasonSelector reason={reason} setReason={setReason} />
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3">
|
||||
<label htmlFor="reason-note" className="font-semibold">
|
||||
Reason notes
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
maxLength={256}
|
||||
placeholder="Type notes here for the report..."
|
||||
className="pill input rounded-xl! resize-none col-span-2"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface Props {
|
||||
onClick: () => void | Promise<void>;
|
||||
disabled?: boolean;
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleClick = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onClick();
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
|
||||
{text}
|
||||
{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import { Icon } from "@iconify/react";
|
||||
|
||||
import Description from "./description";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../session";
|
||||
import { Link, useLocation } from "react-router";
|
||||
|
||||
interface Props {
|
||||
user?: any;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* Profile picture */}
|
||||
<Link to={`${import.meta.env.VITE_API_URL}/profile/${user.id}`} className="size-28 aspect-square">
|
||||
<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center" />
|
||||
</Link>
|
||||
{/* User information */}
|
||||
<div className="flex flex-col w-full relative py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
|
||||
{isAdmin && (
|
||||
<div data-tooltip="Admin" className="text-orange-400">
|
||||
<Icon icon="mdi:shield-moon" className="text-2xl" />
|
||||
</div>
|
||||
)}
|
||||
{isContributor && (
|
||||
<div data-tooltip="Contributor" className="text-orange-400">
|
||||
<Icon icon="mingcute:group-fill" className="text-2xl" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
|
||||
|
||||
<div className="mt-3 text-sm flex gap-8">
|
||||
<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
|
||||
<span className="font-medium">Created:</span>{" "}
|
||||
{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
|
||||
</h4>
|
||||
<h4>
|
||||
Liked <span className="font-bold">{user._count.likes}</span> Miis
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{user.description && <Description text={user.description} className="max-h-32!" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<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-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
||||
{!isOwnProfile && (
|
||||
<Link aria-label="Report User" to={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
|
||||
<Icon icon="material-symbols:flag-rounded" />
|
||||
<span>Report</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && isAdmin && (
|
||||
<Link aria-label="Go to Admin" to="/admin">
|
||||
<Icon icon="mdi:shield-moon" />
|
||||
<span>Admin</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && page !== "/profile/likes" && (
|
||||
<Link aria-label="Go to My Likes" to="/profile/likes">
|
||||
<Icon icon="icon-park-solid:like" />
|
||||
<span>My Likes</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && page !== "/profile/settings" && (
|
||||
<Link aria-label="Go to Settings" to="/profile/settings">
|
||||
<Icon icon="material-symbols:settings-rounded" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
)}
|
||||
{(page === "/profile/likes" || page === "/profile/settings") && (
|
||||
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
|
||||
<Icon icon="tabler:chevron-left" />
|
||||
<span>Back</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import { ReportReason } from "@prisma/client";
|
||||
import type { ReportReason } from "@tomodachi-share/shared";
|
||||
import { useSelect } from "downshift";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -18,6 +18,8 @@ import LinkOutPage from "./pages/out.tsx";
|
|||
import Layout from "./layout.tsx";
|
||||
import ProfileLayout from "./pages/profile/layout.tsx";
|
||||
import ProfileLikesPage from "./pages/profile/likes.tsx";
|
||||
import ReportMiiPage from "./pages/report/mii.tsx";
|
||||
import ReportUserPage from "./pages/report/user.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
|
|
@ -34,6 +36,10 @@ createRoot(document.getElementById("root")!).render(
|
|||
</Route>
|
||||
<Route path="/submit" element={<SubmitPage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/report">
|
||||
<Route path="mii/:id" element={<ReportMiiPage />} />
|
||||
<Route path="profile/:id" element={<ReportUserPage />} />
|
||||
</Route>
|
||||
<Route path="/out" element={<LinkOutPage />} />
|
||||
<Route path="/privacy" element={<PrivacyPage />} />
|
||||
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
|
||||
|
|
|
|||
|
|
@ -294,7 +294,7 @@ export default function MiiPage() {
|
|||
{/* <AuthorButtons mii={mii} /> */}
|
||||
|
||||
<ShareMiiButton miiId={mii.id} />
|
||||
<Link aria-label="Report Mii" to={`${API_URL}/report/mii/${mii.id}`}>
|
||||
<Link aria-label="Report Mii" to={`/report/mii/${mii.id}`}>
|
||||
<Icon icon="material-symbols:flag-rounded" />
|
||||
<span>Report</span>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { Outlet, useNavigate, useParams } from "react-router";
|
||||
import ProfileInformation from "../../components/profile-information";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useStore } from "@nanostores/react";
|
||||
import { session } from "../../session";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Link } from "react-router";
|
||||
import Description from "../../components/description";
|
||||
|
||||
export default function ProfileLayout() {
|
||||
const { id } = useParams();
|
||||
|
|
@ -41,9 +43,93 @@ export default function ProfileLayout() {
|
|||
return <div className="p-6 text-center">Loading...</div>;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProfileInformation user={user} />
|
||||
<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">
|
||||
{/* Profile picture */}
|
||||
<Link to={`/profile/${user.id}`} className="size-28 aspect-square">
|
||||
<img
|
||||
src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
|
||||
onError={(e) => {
|
||||
e.currentTarget.onerror = null; // Prevent infinite loops
|
||||
e.currentTarget.src = "/guest.png";
|
||||
}}
|
||||
className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center"
|
||||
/>
|
||||
</Link>
|
||||
{/* User information */}
|
||||
<div className="flex flex-col w-full relative py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
|
||||
{isAdmin && (
|
||||
<div data-tooltip="Admin" className="text-orange-400">
|
||||
<Icon icon="mdi:shield-moon" className="text-2xl" />
|
||||
</div>
|
||||
)}
|
||||
{isContributor && (
|
||||
<div data-tooltip="Contributor" className="text-orange-400">
|
||||
<Icon icon="mingcute:group-fill" className="text-2xl" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
|
||||
|
||||
<div className="mt-3 text-sm flex gap-8">
|
||||
<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
|
||||
<span className="font-medium">Created:</span>{" "}
|
||||
{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
|
||||
</h4>
|
||||
<h4>
|
||||
Liked <span className="font-bold">{user._count.likes}</span> Miis
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{user.description && <Description text={user.description} className="max-h-32!" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<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-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
||||
{!isOwnProfile && (
|
||||
<Link aria-label="Report User" to={`/report/profile/${user.id}`}>
|
||||
<Icon icon="material-symbols:flag-rounded" />
|
||||
<span>Report</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && isAdmin && (
|
||||
<Link aria-label="Go to Admin" to="/admin">
|
||||
<Icon icon="mdi:shield-moon" />
|
||||
<span>Admin</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && page !== "/profile/likes" && (
|
||||
<Link aria-label="Go to My Likes" to="/profile/likes">
|
||||
<Icon icon="icon-park-solid:like" />
|
||||
<span>My Likes</span>
|
||||
</Link>
|
||||
)}
|
||||
{isOwnProfile && page !== "/profile/settings" && (
|
||||
<Link aria-label="Go to Settings" to="/profile/settings">
|
||||
<Icon icon="material-symbols:settings-rounded" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
)}
|
||||
{(page === "/profile/likes" || page === "/profile/settings") && (
|
||||
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
|
||||
<Icon icon="tabler:chevron-left" />
|
||||
<span>Back</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
103
frontend/src/pages/report/mii.tsx
Normal file
103
frontend/src/pages/report/mii.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { useNavigate, useParams } from "react-router";
|
||||
import ReasonSelector from "../../components/reason-selector";
|
||||
import { useEffect, useState } from "react";
|
||||
import { type ReportReason } from "@tomodachi-share/shared";
|
||||
import SubmitButton from "../../components/submit-button";
|
||||
|
||||
export default function ReportMiiPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [reason, setReason] = useState<ReportReason>();
|
||||
const [notes, setNotes] = useState<string>();
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const [mii, setMii] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_URL}/api/mii/${id}/info`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch Mii");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setMii(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
navigate("/404");
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
if (loading || !mii) {
|
||||
return <div className="p-6 text-center">Loading...</div>;
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
|
||||
credentials: "include",
|
||||
});
|
||||
const { error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grow flex items-center justify-center">
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Report a Mii</h2>
|
||||
<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
|
||||
<img src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
|
||||
<div className="p-4">
|
||||
<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="reason" className="font-semibold">
|
||||
Reason
|
||||
</label>
|
||||
<ReasonSelector reason={reason} setReason={setReason} />
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3">
|
||||
<label htmlFor="reason-note" className="font-semibold">
|
||||
Reason notes
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
maxLength={256}
|
||||
placeholder="Type notes here for the report..."
|
||||
className="pill input rounded-xl! resize-none col-span-2"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
111
frontend/src/pages/report/user.tsx
Normal file
111
frontend/src/pages/report/user.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import { useNavigate, useParams } from "react-router";
|
||||
import ReasonSelector from "../../components/reason-selector";
|
||||
import { useEffect, useState } from "react";
|
||||
import { type ReportReason } from "@tomodachi-share/shared";
|
||||
import SubmitButton from "../../components/submit-button";
|
||||
|
||||
export default function ReportUserPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [reason, setReason] = useState<ReportReason>();
|
||||
const [notes, setNotes] = useState<string>();
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_URL}/api/profile/${id}/info`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch profile");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setUser(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setLoading(false);
|
||||
navigate("/404");
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
if (loading || !user) {
|
||||
return <div className="p-6 text-center">Loading...</div>;
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
|
||||
credentials: "include",
|
||||
});
|
||||
const { error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grow flex items-center justify-center">
|
||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Report a User</h2>
|
||||
<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
|
||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
|
||||
<img
|
||||
src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
|
||||
onError={(e) => {
|
||||
e.currentTarget.onerror = null; // Prevent infinite loops
|
||||
e.currentTarget.src = "/guest.png";
|
||||
}}
|
||||
alt="profile picture"
|
||||
width={96}
|
||||
height={96}
|
||||
className="aspect-square rounded-full border-2 border-orange-400"
|
||||
/>
|
||||
<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3 items-center">
|
||||
<label htmlFor="reason" className="font-semibold">
|
||||
Reason
|
||||
</label>
|
||||
<ReasonSelector reason={reason} setReason={setReason} />
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-3">
|
||||
<label htmlFor="reason-note" className="font-semibold">
|
||||
Reason notes
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
maxLength={256}
|
||||
placeholder="Type notes here for the report..."
|
||||
className="pill input rounded-xl! resize-none col-span-2"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-zinc-300" />
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||
|
||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,4 +2,4 @@ export * from "./constants";
|
|||
export * from "./qr-codes";
|
||||
export * from "./switch";
|
||||
export * from "./three-ds-tomodachi-life-mii";
|
||||
export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform } from "./types";
|
||||
export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform, ReportReason } from "./types";
|
||||
|
|
|
|||
1
shared/src/types.d.ts
vendored
1
shared/src/types.d.ts
vendored
|
|
@ -1,6 +1,7 @@
|
|||
type MiiGender = "MALE" | "FEMALE" | "NONBINARY";
|
||||
type MiiPlatform = "THREE_DS" | "SWITCH";
|
||||
type MiiMakeup = "FULL" | "PARTIAL" | "NONE";
|
||||
type ReportReason = "INAPPROPRIATE" | "SPAM" | "BAD_QUALITY" | "OTHER";
|
||||
|
||||
export interface SwitchMiiInstructions {
|
||||
head: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue