チャットメッセージ削除・編集 (#291)

* チャットメッセージ削除機能実装

* make node_modules ignored

* 未稼働の関数の消去

Author: RRRyoma

.gitignore

@@ -4,12 +4,14 @@ scripts/seed/node_modules
 /.env
 
 # web
+web/node_modules
 web/dist
 web/.next
 web/next-env.d.ts
 web/.vercel
 web/.dev.vars
 # server
+server/node_modules
 server/target
 
 # ?

server/routes/chat.ts

@@ -417,7 +417,7 @@ const router = new Hono()
     },
   )
   .delete(
-    "/messages/:message",
+    "/messages/:message/:room",
     zValidator(
       "param",
       z.object({

web/src/app/[locale]/(auth)/chat/[id]/page.tsx

@@ -139,6 +139,7 @@ function MessageList({
   room: string;
 }) {
   const [messages, setMessages] = useState(data);
+  const { idToken: Authorization } = useAuthContext();
 
   useEffect(() => {
     handlers.onCreate = (message) => {
@@ -188,12 +189,62 @@ function MessageList({
     bottomRef.current?.scrollIntoView({ behavior: "auto" });
   }, [messages]);
 
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [deletingMessageId, setDeletingMessageId] = useState<string | null>(null);
+  const longPressTimer = useRef<NodeJS.Timer | null>(null);
+
+  const handleRequestDelete = (id: string) => {
+    setDeletingMessageId(id);
+    setShowConfirmModal(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deletingMessageId) return;
+
+    try {
+      await client.chat.messages[":message"][":room"].$delete({
+        header: { Authorization },
+        param: { message: deletingMessageId, room: room },
+      });
+
+      setMessages((prev) => prev.filter((m) => m.id !== deletingMessageId));
+
+      setDeletingMessageId(null);
+      setShowConfirmModal(false);
+    } catch (error) {
+      alert("削除に失敗しました");
+    }
+  };
+
+  const handleEdit = (id: string) => {
+    console.log("編集", id);
+    setSelectedMessageId(null);
+  };
+
+  const handleLongPressStart = (id: string) => {
+    longPressTimer.current = setTimeout(() => {
+      setSelectedMessageId(id);
+    }, 600); // 600ms 長押しで発動
+  };
+
+  const handleLongPressEnd = () => {
+    if (longPressTimer.current) clearTimeout(longPressTimer.current);
+  };
+
   return (
     <ul className="mx-3 mt-[56px] mb-[76px] grow overflow-y-scroll sm:pb-0" id="scroll-bottom">
       {messages.map((m) => (
         // TODO: handle pictures
         <li key={m.id}>
-          <div className={`chat ${m.senderId === me.id ? "chat-end" : "chat-start"}`}>
+          <div
+            className={`chat ${m.senderId === me.id ? "chat-end" : "chat-start"}`}
+            onTouchStart={() => handleLongPressStart(m.id)}
+            onTouchEnd={handleLongPressEnd}
+            onMouseDown={() => handleLongPressStart(m.id)}
+            onMouseUp={handleLongPressEnd}
+            onMouseLeave={handleLongPressEnd}
+          >
             <div className="chat-header">
               <time className="text-xs opacity-50">{m.createdAt.toLocaleString()}</time>
             </div>
@@ -204,8 +255,42 @@ function MessageList({
                   <br />
                 </div>
               ))}
+
+              {selectedMessageId === m.id && (
+                <div className="absolute top-0 right-0 z-10 flex gap-1 rounded border bg-white p-1 shadow">
+                  <button
+                    type="button"
+                    className="text-blue-600 text-sm hover:underline"
+                    onClick={() => handleEdit(m.id)}
+                  >
+                    編集
+                  </button>
+                  <button type="button" onClick={() => handleRequestDelete(m.id)} className="text-red-600">
+                    削除
+                  </button>
+                </div>
+              )}
             </div>
             {/* <div className="chat-footer opacity-50">Seen</div> */}
+            {showConfirmModal && (
+              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
+                <div className="rounded-lg bg-white p-4 shadow-lg">
+                  <p className="mb-4">このメッセージを削除しますか？</p>
+                  <div className="flex justify-end gap-3">
+                    <button
+                      type="button"
+                      className="rounded bg-gray-300 px-4 py-2"
+                      onClick={() => setShowConfirmModal(false)}
+                    >
+                      キャンセル
+                    </button>
+                    <button type="button" className="rounded bg-red-500 px-4 py-2 text-white" onClick={handleDelete}>
+                      削除
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </li>
       ))}