Add map community reactions, comments, and moderation
Some checks failed
Deploy MineGeo to Dokploy / deploy (push) Failing after 3m22s
Some checks failed
Deploy MineGeo to Dokploy / deploy (push) Failing after 3m22s
This commit is contained in:
251
components/MapCommunity.tsx
Normal file
251
components/MapCommunity.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThumbsUp, ThumbsDown, Trash2 } from "lucide-react";
|
||||
import { api } from "@/lib/client-api";
|
||||
import type { MapCommunityView } from "@/shared/community";
|
||||
import { useI18n } from "./I18nProvider";
|
||||
import { Username } from "./Username";
|
||||
import { ReportCommunity } from "./ReportCommunity";
|
||||
|
||||
export function MapCommunity({
|
||||
datasetId,
|
||||
ownerId,
|
||||
}: {
|
||||
datasetId: string;
|
||||
ownerId: string | null;
|
||||
}) {
|
||||
const { t, locale } = useI18n();
|
||||
const [data, setData] = useState<MapCommunityView | null>(null);
|
||||
const [body, setBody] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
async function refresh() {
|
||||
const result = await api<MapCommunityView>(`maps/${datasetId}/community`);
|
||||
setData(result);
|
||||
}
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
api<MapCommunityView>(`maps/${datasetId}/community`)
|
||||
.then((result) => {
|
||||
if (active) {
|
||||
setData(result);
|
||||
setError("");
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
if (active) setError(e.message);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [datasetId]);
|
||||
async function act(action: () => Promise<unknown>, success?: string) {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
setMessage("");
|
||||
try {
|
||||
await action();
|
||||
if (success) setMessage(success);
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
async function more() {
|
||||
if (data?.nextCursor == null) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const next = await api<MapCommunityView>(
|
||||
`maps/${datasetId}/community?cursor=${encodeURIComponent(data.nextCursor)}`,
|
||||
);
|
||||
setData((current) =>
|
||||
current
|
||||
? {
|
||||
...next,
|
||||
comments: [
|
||||
...current.comments,
|
||||
...next.comments.filter(
|
||||
(c) =>
|
||||
!current.comments.some((existing) => existing.id === c.id),
|
||||
),
|
||||
],
|
||||
}
|
||||
: next,
|
||||
);
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<section
|
||||
className="map-community tool-card"
|
||||
aria-label={t("Map community")}
|
||||
>
|
||||
<h2>{t("Map community")}</h2>
|
||||
{error && (
|
||||
<p role="alert" className="error-message">
|
||||
{t(error)}{" "}
|
||||
<button
|
||||
className="button"
|
||||
disabled={busy}
|
||||
onClick={() => act(async () => {})}
|
||||
>
|
||||
{t("Try again")}
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
{!data && !error && <p role="status">{t("Loading comments…")}</p>}
|
||||
{data && (
|
||||
<>
|
||||
<div
|
||||
className="inline-actions"
|
||||
role="group"
|
||||
aria-label={t("Map reactions")}
|
||||
>
|
||||
<button
|
||||
className="button"
|
||||
aria-pressed={data.reaction === 1}
|
||||
disabled={!data.viewer || busy}
|
||||
onClick={() =>
|
||||
act(() =>
|
||||
api(`maps/${datasetId}/reaction`, {
|
||||
value: data.reaction === 1 ? 0 : 1,
|
||||
}),
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThumbsUp size={18} aria-hidden="true" /> {t("Like")}{" "}
|
||||
<span>{data.likes}</span>
|
||||
</button>
|
||||
<button
|
||||
className="button"
|
||||
aria-pressed={data.reaction === -1}
|
||||
disabled={!data.viewer || busy}
|
||||
onClick={() =>
|
||||
act(() =>
|
||||
api(`maps/${datasetId}/reaction`, {
|
||||
value: data.reaction === -1 ? 0 : -1,
|
||||
}),
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThumbsDown size={18} aria-hidden="true" /> {t("Dislike")}{" "}
|
||||
<span>{data.dislikes}</span>
|
||||
</button>
|
||||
{data.viewer && ownerId && ownerId !== data.viewer.id && (
|
||||
<ReportCommunity target="account" targetId={ownerId} />
|
||||
)}
|
||||
</div>
|
||||
{!data.viewer && (
|
||||
<p>
|
||||
<Link className="button" href="/log-in">
|
||||
{t("Sign in to react, comment, or report.")}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
<h3>{t("Comments")}</h3>
|
||||
{data.viewer && (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
act(async () => {
|
||||
await api(`maps/${datasetId}/comments`, { body });
|
||||
setBody("");
|
||||
}, "Comment published.");
|
||||
}}
|
||||
>
|
||||
<label className="field">
|
||||
{t("Write a comment")}
|
||||
<textarea
|
||||
required
|
||||
maxLength={2000}
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder={t("Share your thoughts about this map.")}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button primary"
|
||||
disabled={busy || !body.trim()}
|
||||
>
|
||||
{t(busy ? "Saving…" : "Publish comment")}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{message && (
|
||||
<p role="status" className="success-message">
|
||||
{t(message)}
|
||||
</p>
|
||||
)}
|
||||
{!data.comments.length && (
|
||||
<p className="muted">
|
||||
{t("No comments yet. Be the first to share your thoughts.")}
|
||||
</p>
|
||||
)}
|
||||
<div className="map-comments">
|
||||
{data.comments.map((comment) => (
|
||||
<article className="map-comment" key={comment.id}>
|
||||
<div className="map-comment-meta">
|
||||
<Username
|
||||
name={comment.author}
|
||||
appearance={comment.appearance}
|
||||
/>
|
||||
<time className="muted" dateTime={comment.created_at}>
|
||||
{new Date(comment.created_at).toLocaleString(
|
||||
locale === "ru" ? "ru-RU" : "en-GB",
|
||||
)}
|
||||
</time>
|
||||
</div>
|
||||
<p className="community-body">{comment.body}</p>
|
||||
{data.viewer && (
|
||||
<div className="inline-actions">
|
||||
<ReportCommunity target="comment" targetId={comment.id} />
|
||||
{comment.author_id &&
|
||||
comment.author_id !== data.viewer.id && (
|
||||
<ReportCommunity
|
||||
target="account"
|
||||
targetId={comment.author_id}
|
||||
/>
|
||||
)}
|
||||
{data.viewer.canModerate && (
|
||||
<button
|
||||
className="button"
|
||||
disabled={busy}
|
||||
onClick={() =>
|
||||
act(
|
||||
() =>
|
||||
api(
|
||||
`community/comments/${comment.id}`,
|
||||
undefined,
|
||||
"DELETE",
|
||||
),
|
||||
"Comment removed.",
|
||||
)
|
||||
}
|
||||
>
|
||||
<Trash2 size={15} aria-hidden="true" />{" "}
|
||||
{t("Remove comment")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
{data.nextCursor !== null && (
|
||||
<button className="button" disabled={busy} onClick={more}>
|
||||
{t("Load more comments")}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user