From 7ddcfc951634c42c9f2660bcd44fbfa64b4c8411 Mon Sep 17 00:00:00 2001
From: shoga <yayoiclimbing@gmail.com>
Date: Thu, 24 Oct 2024 14:23:57 +0900
Subject: [PATCH] =?UTF-8?q?/master=20=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pos/app/components/molecules/InputComment.tsx | 41 +++++++++++++++++++
 pos/app/routes/_header.master.tsx             | 35 +---------------
 2 files changed, 43 insertions(+), 33 deletions(-)
 create mode 100644 pos/app/components/molecules/InputComment.tsx

diff --git a/pos/app/components/molecules/InputComment.tsx b/pos/app/components/molecules/InputComment.tsx
new file mode 100644
index 00000000..0c793f7e
--- /dev/null
+++ b/pos/app/components/molecules/InputComment.tsx
@@ -0,0 +1,41 @@
+import { useSubmit } from "@remix-run/react";
+import type { WithId } from "common/lib/typeguard";
+import type { OrderEntity } from "common/models/order";
+import { useCallback, useState } from "react";
+import { Input } from "../ui/input";
+
+export const InputComment = ({ order }: { order: WithId<OrderEntity> }) => {
+  const submit = useSubmit();
+  const [descComment, setDescComment] = useState("");
+  const submitComment = useCallback(
+    (servedOrder: OrderEntity, descComment: string) => {
+      const order = servedOrder.clone();
+      order.addComment("master", descComment);
+      submit(
+        { servedOrder: JSON.stringify(order.toOrder()) },
+        { method: "PUT" },
+      );
+    },
+    [submit],
+  );
+  return (
+    <div className="my-2">
+      <Input
+        id="comment"
+        name="comment"
+        type="string"
+        value={descComment}
+        placeholder="追記事項"
+        onChange={(e) => {
+          setDescComment(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            submitComment(order, descComment);
+            setDescComment("");
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/pos/app/routes/_header.master.tsx b/pos/app/routes/_header.master.tsx
index b5a33eaa..083b16ef 100644
--- a/pos/app/routes/_header.master.tsx
+++ b/pos/app/routes/_header.master.tsx
@@ -12,12 +12,11 @@ import { OrderEntity, orderSchema } from "common/models/order";
 import { orderRepository } from "common/repositories/order";
 import dayjs from "dayjs";
 import { orderBy } from "firebase/firestore";
-import { useCallback, useState } from "react";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
+import { InputComment } from "~/components/molecules/InputComment";
 import { RealtimeElapsedTime } from "~/components/molecules/RealtimeElapsedTime";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
 import { cn } from "~/lib/utils";
 
 export const meta: MetaFunction = () => {
@@ -44,20 +43,6 @@ export default function FielsOfMaster() {
     return acc;
   }, 0);
 
-  const submitComment = useCallback(
-    (servedOrder: OrderEntity) => {
-      const order = servedOrder.clone();
-      order.addComment("master", descComment);
-      submit(
-        { servedOrder: JSON.stringify(order.toOrder()) },
-        { method: "PUT" },
-      );
-    },
-    [submit],
-  );
-
-  const [descComment, setDescComment] = useState("");
-
   return (
     <div className="p-4 font-sans">
       <div className="flex justify-between pb-4">
@@ -124,23 +109,7 @@ export default function FielsOfMaster() {
                         ))}
                       </div>
                     )}
-                    <div className="my-2">
-                      <Input
-                        id="comment"
-                        name="comment"
-                        type="string"
-                        value={descComment}
-                        placeholder="追記事項"
-                        onChange={(e) => {
-                          setDescComment(e.target.value);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            submitComment(order);
-                          }
-                        }}
-                      />
-                    </div>
+                    <InputComment order={order} />
                   </CardContent>
                 </Card>
               </div>