/master コメント追加

cafeore-tkb · Oct 24, 2024 · 7ddcfc9 · 7ddcfc9
1 parent 1f5a455
commit 7ddcfc9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/pos/app/components/molecules/InputComment.tsx 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
@@ -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>