mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-06-28 14:44:15 +00:00
feat: reporting
This commit is contained in:
parent
334b6ec9b6
commit
f633648fee
15 changed files with 494 additions and 11 deletions
83
src/components/report/mii-form.tsx
Normal file
83
src/components/report/mii-form.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Mii, ReportReason } from "@prisma/client";
|
||||
|
||||
import ReasonSelector from "./reason-selector";
|
||||
import SubmitButton from "../submit-button";
|
||||
import LikeButton from "../like-button";
|
||||
|
||||
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(`/`);
|
||||
};
|
||||
|
||||
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">
|
||||
<Image 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}
|
||||
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>
|
||||
);
|
||||
}
|
||||
64
src/components/report/reason-selector.tsx
Normal file
64
src/components/report/reason-selector.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
"use client";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import { ReportReason } from "@prisma/client";
|
||||
import { useSelect } from "downshift";
|
||||
|
||||
interface Props {
|
||||
reason: ReportReason | undefined;
|
||||
setReason: React.Dispatch<React.SetStateAction<ReportReason | undefined>>;
|
||||
}
|
||||
|
||||
const reasonMap: Record<ReportReason, string> = {
|
||||
INAPPROPRIATE: "Inappropriate content",
|
||||
SPAM: "Spam",
|
||||
COPYRIGHT: "Copyrighted content",
|
||||
OTHER: "Other...",
|
||||
};
|
||||
|
||||
const reasonOptions = Object.entries(reasonMap).map(([value, label]) => ({
|
||||
value: value as ReportReason,
|
||||
label,
|
||||
}));
|
||||
|
||||
export default function ReasonSelector({ reason, setReason }: Props) {
|
||||
const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
|
||||
items: reasonOptions,
|
||||
selectedItem: reason ? reasonOptions.find((option) => option.value === reason) : null,
|
||||
itemToString: (item) => (item ? item.label : ""),
|
||||
onSelectedItemChange: ({ selectedItem }) => {
|
||||
if (selectedItem) {
|
||||
setReason(selectedItem.value);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative w-full col-span-2">
|
||||
{/* Toggle button to open the dropdown */}
|
||||
<button type="button" {...getToggleButtonProps()} className="pill input w-full gap-1 !justify-between text-nowrap">
|
||||
{selectedItem?.label || <span className="text-black/40">Select a reason for the report...</span>}
|
||||
<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
|
||||
</button>
|
||||
|
||||
{/* Dropdown menu */}
|
||||
<ul
|
||||
{...getMenuProps()}
|
||||
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
{isOpen &&
|
||||
reasonOptions.map((item, index) => (
|
||||
<li
|
||||
key={item.value}
|
||||
{...getItemProps({ item, index })}
|
||||
className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
|
||||
>
|
||||
{item.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
src/components/report/user-form.tsx
Normal file
87
src/components/report/user-form.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ReportReason, User } from "@prisma/client";
|
||||
|
||||
import ReasonSelector from "./reason-selector";
|
||||
import SubmitButton from "../submit-button";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
redirect(`/`);
|
||||
};
|
||||
|
||||
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 ?? "/missing.svg"}
|
||||
alt="profile picture"
|
||||
width={96}
|
||||
height={96}
|
||||
className="aspect-square rounded-full border-2 border-orange-400"
|
||||
/>
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
|
||||
<p className="text-sm font-bold overflow-hidden text-ellipsis">@{user.username}</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}
|
||||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue