MineGeo/components/MapCommunity.tsx

"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?next=${encodeURIComponent(`/servers/${datasetId}`)}`}
              >
                {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>
  );
}