From 4a0fc1c2361c184938e9b4bf13b51b38233cf5e8 Mon Sep 17 00:00:00 2001
From: Hong Minhee <hong@minhee.org>
Date: Sat, 15 Jun 2024 13:04:55 +0900
Subject: [PATCH] PUT /api/v1/media/:id

---
 src/api/v1/media.ts     | 22 +++++++++++++
 src/api/v1/statuses.ts  |  4 +--
 src/components/Post.tsx | 72 +++++++++++++++++++++++++++++++----------
 src/profile.tsx         |  9 +++---
 4 files changed, 84 insertions(+), 23 deletions(-)

diff --git a/src/api/v1/media.ts b/src/api/v1/media.ts
index 8ad6f38..9f7b24f 100644
--- a/src/api/v1/media.ts
+++ b/src/api/v1/media.ts
@@ -64,4 +64,26 @@ app.get("/:id", async (c) => {
   return c.json(serializeMedium(medium));
 });
 
+app.put("/:id", tokenRequired, scopeRequired(["write:media"]), async (c) => {
+  const mediumId = c.req.param("id");
+  let description: string | undefined;
+  try {
+    const json = await c.req.json();
+    description = json.description;
+  } catch (e) {
+    const form = await c.req.formData();
+    description = form.get("description")?.toString();
+  }
+  if (description == null) {
+    return c.json({ error: "description is required" }, 422);
+  }
+  const result = await db
+    .update(media)
+    .set({ description })
+    .where(eq(media.id, mediumId))
+    .returning();
+  if (result.length < 1) return c.json({ error: "Not found" }, 404);
+  return c.json(serializeMedium(result[0]));
+});
+
 export default app;
diff --git a/src/api/v1/statuses.ts b/src/api/v1/statuses.ts
index 97b33d0..42a964f 100644
--- a/src/api/v1/statuses.ts
+++ b/src/api/v1/statuses.ts
@@ -81,7 +81,7 @@ app.post(
     const content =
       data.status == null ? null : await formatText(db, data.status, fedCtx);
     const summary =
-      data.spoiler_text == null
+      data.spoiler_text == null || data.spoiler_text.trim() === ""
         ? null
         : await formatText(db, data.spoiler_text, fedCtx);
     const mentionedIds = [
@@ -198,7 +198,7 @@ app.put(
     const content =
       data.status == null ? null : await formatText(db, data.status, fedCtx);
     const summary =
-      data.spoiler_text == null
+      data.spoiler_text == null || data.spoiler_text.trim() === ""
         ? null
         : await formatText(db, data.spoiler_text, fedCtx);
     const hashtags = [
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 75254da..80914b3 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -1,8 +1,8 @@
 import type { FC } from "hono/jsx";
-import type { Account, Post as DbPost } from "../schema";
+import type { Account, Medium as DbMedium, Post as DbPost } from "../schema";
 
 export interface PostProps {
-  post: DbPost & { account: Account };
+  post: DbPost & { account: Account; media: DbMedium[] };
 }
 
 export const Post: FC<PostProps> = ({ post }) => {
@@ -28,14 +28,8 @@ export const Post: FC<PostProps> = ({ post }) => {
           </p>
         </hgroup>
       </header>
-      {post.summaryHtml == null ? (
-        post.contentHtml && (
-          <div
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: xss
-            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
-            lang={post.language ?? undefined}
-          />
-        )
+      {post.summaryHtml == null || post.summaryHtml.trim() === "" ? (
+        <PostContent post={post} />
       ) : (
         <details>
           <summary
@@ -43,13 +37,7 @@ export const Post: FC<PostProps> = ({ post }) => {
             dangerouslySetInnerHTML={{ __html: post.summaryHtml }}
             lang={post.language ?? undefined}
           />
-          {post.contentHtml && (
-            <div
-              // biome-ignore lint/security/noDangerouslySetInnerHtml: xss
-              dangerouslySetInnerHTML={{ __html: post.contentHtml }}
-              lang={post.language ?? undefined}
-            />
-          )}
+          <PostContent post={post} />
         </details>
       )}
       <footer>
@@ -67,4 +55,54 @@ export const Post: FC<PostProps> = ({ post }) => {
   );
 };
 
+interface PostContentProps {
+  readonly post: DbPost & { media: DbMedium[] };
+}
+
+const PostContent: FC<PostContentProps> = ({ post }: PostContentProps) => {
+  return (
+    <>
+      {post.contentHtml && (
+        <div
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: xss
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          lang={post.language ?? undefined}
+        />
+      )}
+      {post.media.length > 0 && (
+        <div>
+          {post.media.map((medium) =>
+            medium.description && medium.description.trim() !== "" ? (
+              <figure>
+                <Medium medium={medium} />
+                <figcaption>{medium.description}</figcaption>
+              </figure>
+            ) : (
+              <Medium medium={medium} />
+            ),
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+interface MediumProps {
+  medium: DbMedium;
+}
+
+const Medium: FC<MediumProps> = ({ medium }) => {
+  return (
+    <a href={medium.url}>
+      <img
+        key={medium.id}
+        src={medium.thumbnailUrl}
+        alt={medium.description ?? ""}
+        width={medium.thumbnailWidth}
+        height={medium.thumbnailHeight}
+      />
+    </a>
+  );
+};
+
 export default Post;
diff --git a/src/profile.tsx b/src/profile.tsx
index 0ba15d5..bb61085 100644
--- a/src/profile.tsx
+++ b/src/profile.tsx
@@ -8,6 +8,7 @@ import { db } from "./db";
 import {
   type Account,
   type AccountOwner,
+  type Medium,
   type Post,
   accountOwners,
   posts,
@@ -30,14 +31,14 @@ app.get("/", async (c) => {
       or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
     ),
     orderBy: desc(posts.id),
-    with: { account: true },
+    with: { account: true, media: true },
   });
   return c.html(<ProfilePage accountOwner={owner} posts={postList} />);
 });
 
 export interface ProfilePageProps {
   accountOwner: AccountOwner & { account: Account };
-  posts: (Post & { account: Account })[];
+  posts: (Post & { account: Account; media: Medium[] })[];
 }
 
 export const ProfilePage: FC<ProfilePageProps> = ({ accountOwner, posts }) => {
@@ -73,14 +74,14 @@ app.get("/:id", async (c) => {
       eq(posts.id, postId),
       or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
     ),
-    with: { account: true },
+    with: { account: true, media: true },
   });
   if (post == null) return c.notFound();
   return c.html(<PostPage post={post} />);
 });
 
 export interface PostPageProps {
-  post: Post & { account: Account };
+  post: Post & { account: Account; media: Medium[] };
 }
 
 export const PostPage: FC<PostPageProps> = ({ post }) => {