[frontend] Fixes around room page (#51)

roomのupdate、delete関数定義場所をcomponentsからclient-actionsに変更
ファイル名、引数名などの統一

frontend/app/lib/client-actions.ts

@@ -54,3 +54,53 @@ export async function createRoom(formData: FormData) {
     redirect(`/room/${data.id}`, RedirectType.push);
   }
 }
+
+export async function updateRoom(
+  event: React.FormEvent<HTMLFormElement>,
+  roomId: number,
+) {
+  event.preventDefault();
+  const { id, ...updateData } = Object.fromEntries(
+    new FormData(event.currentTarget),
+  );
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/room/${roomId}`, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(updateData),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    toast({
+      title: res.status + " " + res.statusText,
+      description: data.message,
+    });
+  } else {
+    toast({
+      title: "Success",
+      description: "room updated successfully.",
+    });
+    redirect("/room", RedirectType.push);
+  }
+}
+
+export async function deleteRoom(event: React.SyntheticEvent, roomId: number) {
+  event.preventDefault();
+  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/room/${roomId}`, {
+    method: "DELETE",
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    toast({
+      title: res.status + " " + res.statusText,
+      description: data.message,
+    });
+  } else {
+    toast({
+      title: "Success",
+      description: "room deleted successfully.",
+    });
+    redirect("/room", RedirectType.push);
+  }
+}

frontend/app/room/create/page.tsx

@@ -7,7 +7,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import Form from "@/app/ui/room/create-room";
+import Form from "@/app/ui/room/create-form";
 
 export default function CreateChatRoom() {
   return (

frontend/app/room/page.tsx

@@ -1,6 +1,5 @@
-import RoomCard from "@/components/RoomCard";
-
-export type Room = { id: number; name?: string };
+import RoomCard from "@/components/room-card";
+import type { Room } from "@/components/room-card";
 
 async function getRooms(): Promise<Room[]> {
   const res = await fetch(`${process.env.API_URL}/room`, {

frontend/components/room-card.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { redirect } from "next/navigation";
+
+// components
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { updateRoom, deleteRoom } from "@/app/lib/client-actions";
+
+type Room = { id: number; name?: string };
+
+export type { Room };
+
+export default function RoomCard({ room }: { room: Room }) {
+  return (
+    <>
+      <Card className="w-[300px]">
+        <CardHeader>Room ID: {room.id}</CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              updateRoom(e, room.id);
+            }}
+            id={"UpdateRoomForm." + room.id}
+          >
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  name="name"
+                  defaultValue={room.name}
+                />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button asChild>
+            <Link href={`/room/${room.id}`}>Join</Link>
+          </Button>
+          <Button
+            type="button"
+            onClick={(e) => {
+              deleteRoom(e, room.id);
+            }}
+          >
+            Delete
+          </Button>
+          <Button
+            variant="outline"
+            type="submit"
+            form={"UpdateRoomForm." + room.id}
+          >
+            Update
+          </Button>
+        </CardFooter>
+      </Card>
+    </>
+  );
+}