Cupcake/app/routes/note-detail.tsx

import { useState } from "react";
import { useParams } from "react-router";

import Article from "~/components/common/article";
import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
import Comments from "~/components/shared/comment";
import { add } from "~/components/ui/notice/utils";
import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
import { useHydrated } from "~/hooks/use-hydrated";
import { clsn, siteTitle } from "~/utils";
import { getImageThumbUrl } from "~/utils/media";

import type { Route } from "./+types/note-detail";
import { RiLoader5Fill } from "@remixicon/react";

const { APP_APIURL } = import.meta.env;

export function meta({ loaderData }: Route.MetaArgs) {
  return [
    { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
    { name: "description", content: loaderData?.data.except },
  ];
}

export async function loader({ params }: Route.LoaderArgs) {
  if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
    throw new Response("Not Found", { status: 404 });
  }

  const note = (await fetch(
    `${APP_APIURL}/api/note/get?id=${params.id}&year=${params.year}`,
  ).then((res) => res.json())) as API.Response<API.Note.INoteData>;

  if (note.status === "Failed") {
    throw new Response("Not Found", { status: 404 });
  }

  return note;
}

export default function NoteDetail({ loaderData }: Route.ComponentProps) {
  const note = loaderData;
  const params = useParams();
  const hydrated = useHydrated();
  const { ref: mediaLightBoxRef, open: onShowMediaLightBox } = useLightBox();

  const [likes, setLikes] = useState(note.data.likes);
  const [liked, setLiked] = useState(false);
  const [liking, setLiking] = useState(false);

  const mediaList = note.data.media?.length
    ? note.data.media.map((item) => ({
        ...item,
        thumb_url: item.thumb_url || getImageThumbUrl(item.url),
      }))
    : [];

  const hasMedia = mediaList.length > 0;
  const commentRef = `note-${params.year}-${params.id}`;

  const onLike = async () => {
    if (liking) {
      return;
    }

    setLiking(true);
    setLikes((prevLike) => prevLike + 1);

    const formData = new FormData();
    formData.append("id", String(params.id));
    formData.append("year", String(params.year));

    try {
      const res = (await fetch(`${APP_APIURL}/api/note/like`, {
        method: "POST",
        body: formData,
      }).then((r) => r.json())) as API.Response<unknown>;

      if (res.status === "Success") {
        add({
          title: "点赞成功",
          type: "success",
          content: res.msg,
        });

        setLiked(true);
      }
      else {
        add({
          title: "点赞失败",
          type: "error",
          content: res.msg,
        });

        setLikes((prevLike) => prevLike - 1);
      }
    }
    catch {
      add({
        title: "点赞失败",
        type: "error",
        content: "网络异常",
      });

      setLikes((prevLike) => prevLike - 1);
    }
    finally {
      setLiking(false);
    }
  };

  const onShare = () => {
    const shareData = {
      title: note.data.title,
      text: note.data.except,
      url: `${location.protocol}//${location.host}${location.pathname}`,
    };

    if ("share" in navigator) {
      navigator.share(shareData);
    } else {
      alert("当前操作系统尚未实现此 API");
    }
  };

  return (
    <main className="px-2 py-24 max-w-4xl mx-auto">
      <section className="mb-12">
        <h1
          className="text-center text-5xl/tight md:text-7xl/tight mb-4"
          style={{ viewTransitionName: `note-title-${note.data.id}` }}
        >
          {note.data.title}
        </h1>
        <p className="text-center opacity-60">{note.data.date}</p>
      </section>
      <section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-16">
        <Article html={note.data.content_html} />
        {hasMedia && (
          <div className="mt-8 flex flex-col gap-4">
            {mediaList.map((media, index) => {
              const isVideo = media.type === "mp4" || media.url.includes("mp4");

              if (isVideo) {
                return (
                  <video
                    key={media.id || media.url}
                    src={media.url}
                    controls
                    className="w-full rounded-xl cursor-pointer"
                    onClick={() => onShowMediaLightBox(index)}
                  />
                );
              }

              return (
                <img
                  key={media.id || media.url}
                  src={getImageThumbUrl(media.url)}
                  alt={media.title}
                  loading="lazy"
                  className="w-full rounded-xl cursor-pointer hover:opacity-90 transition-opacity"
                  onClick={() => onShowMediaLightBox(index)}
                />
              );
            })}
          </div>
        )}
      </section>
      <section className="flex gap-16 items-center justify-center text-base md:text-lg mb-16">
        <button
          onClick={onLike}
          disabled={liking}
          className={clsn("transition-colors cursor-pointer disabled:opacity-60", liked && "text-pink-400")}
        >
          {liking ? (
            <RiLoader5Fill className="animate-spin inline-block size-8 mr-2" />
          ) : (
            <ThumbUpFill className={clsn("inline-block size-8 mr-2 transition-colors", liked && "text-pink-400")} />
          )}
          {likes}
        </button>
        <button onClick={onShare}>
          <ShareFill className="inline-block h-8 w-8 mr-2" />
          分享
        </button>
        <button>
          <CupFill className="inline-block h-8 w-8 mr-2" />
          打赏
        </button>
      </section>

      <Comments refs={commentRef} />

      {hydrated && <LightBox ref={mediaLightBoxRef} list={mediaList} />}
    </main>
  );
}