From e789c076be7f098469f3b33c9d9ee8a0dd9f8e29 Mon Sep 17 00:00:00 2001
From: yasuaki640 <yasuaki640@gmail.com>
Date: Sat, 24 Feb 2024 22:56:50 +0900
Subject: [PATCH] Refactor room title display and update tests

---
 src/tests/index.spec.ts |  9 ++++-----
 src/views/RoomList.tsx  | 24 +++++++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/tests/index.spec.ts b/src/tests/index.spec.ts
index a14a724..49eee9c 100644
--- a/src/tests/index.spec.ts
+++ b/src/tests/index.spec.ts
@@ -108,13 +108,13 @@ describe("GET /chats", () => {
     vi.mocked(getAllRooms).mockResolvedValue([
       {
         roomId: "test-roomId1",
-        roomTitle: "test-roomTitle1",
+        roomTitle: null,
         roomCreated: "2021-01-01T00:00:00Z",
         roomUpdated: "2021-01-02T00:00:00Z",
       },
       {
         roomId: "test-roomId2",
-        roomTitle: "test-roomTitle2",
+        roomTitle: "test-roomTitle2test-roomTitle2test-roomTitle2",
         roomCreated: "2033-02-01T00:00:00Z",
         roomUpdated: "2033-02-02T00:00:00Z",
       },
@@ -132,9 +132,8 @@ describe("GET /chats", () => {
     expect(res.status).toBe(200);
     const actual = await res.text();
     expect(actual).toContain("test-roomId1");
-    expect(actual).toContain("test-roomId2");
-    expect(actual).toContain("test-roomTitle1");
-    expect(actual).toContain("test-roomTitle2");
+    expect(actual).not.toContain("<td>test-roomId2</td>");
+    expect(actual).toContain("test-roomTitle2test-...");
     expect(actual).toContain("2021-01-01T00:00:00Z");
     expect(actual).toContain("2033-02-01T00:00:00Z");
   });
diff --git a/src/views/RoomList.tsx b/src/views/RoomList.tsx
index 47eb3e2..d39762a 100644
--- a/src/views/RoomList.tsx
+++ b/src/views/RoomList.tsx
@@ -1,10 +1,20 @@
 import { FC } from "hono/dist/types/jsx";
-import {Rooms} from "../schema";
+import { Rooms } from "../schema";
 
 type Props = {
   rooms: (typeof Rooms.$inferSelect)[];
 };
 
+const TITLE_LENGTH = 20;
+const formatTitle = (room: typeof Rooms.$inferSelect) => {
+  if (!room.roomTitle) {
+    return room.roomId;
+  }
+  return room.roomTitle.length > TITLE_LENGTH
+    ? `${room.roomTitle.slice(0, TITLE_LENGTH)}...`
+    : room.roomTitle;
+};
+
 export const RoomList: FC<{ props: Props }> = ({ props }) => (
   <>
     <h1>Chat Rooms.</h1>
@@ -12,24 +22,24 @@ export const RoomList: FC<{ props: Props }> = ({ props }) => (
     <table>
       <thead>
         <tr>
-          <th>ID</th>
+          <th>Title</th>
           <th>Created</th>
           <th>Updated</th>
           <th>Link</th>
         </tr>
       </thead>
-      {props.rooms.map((room) => (
-        <tbody>
+      <tbody>
+        {props.rooms.map((room) => (
           <tr>
-            <td>{room.roomTitle}</td>
+            <td>{formatTitle(room)}</td>
             <td>{room.roomCreated}</td>
             <td>{room.roomUpdated}</td>
             <td>
               <a href={`/chats/${room.roomId}`}>Detail</a>
             </td>
           </tr>
-        </tbody>
-      ))}
+        ))}
+      </tbody>
     </table>
   </>
 );