修正

cafeore-tkb · Oct 24, 2024 · 45589db · 45589db
1 parent 2c19ba7
commit 45589db
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/pos/app/components/molecules/InputComment.tsx b/pos/app/components/molecules/InputComment.tsx
@@ -1,40 +1,30 @@
-import { useSubmit } from "@remix-run/react";
 import type { WithId } from "common/lib/typeguard";
-import type { Author, OrderEntity } from "common/models/order";
-import { useCallback, useState } from "react";
+import type { OrderEntity } from "common/models/order";
+import { useState } from "react";
 import { Input } from "../ui/input";
 
-export const InputComment = ({
-  order,
-  author,
-}: { order: WithId<OrderEntity>; author: Author }) => {
-  const submit = useSubmit();
+type props = {
+  order: WithId<OrderEntity>;
+  mutateOrder: (order: WithId<OrderEntity>, descComment: string) => void; // これをコンポーネントの中で呼び出す
+};
+
+export const InputComment = ({ order, mutateOrder }: props) => {
   const [descComment, setDescComment] = useState("");
-  const submitComment = useCallback(
-    (servedOrder: OrderEntity, author: Author, descComment: string) => {
-      const order = servedOrder.clone();
-      order.addComment(author, 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="コメント"
+        placeholder="追記"
         onChange={(e) => {
           setDescComment(e.target.value);
         }}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
-            submitComment(order, author, descComment);
+            mutateOrder(order, descComment);
             setDescComment("");
           }
         }}

diff --git a/pos/app/routes/_header.master.tsx b/pos/app/routes/_header.master.tsx
@@ -12,6 +12,7 @@ import { OrderEntity, orderSchema } from "common/models/order";
 import { orderRepository } from "common/repositories/order";
 import dayjs from "dayjs";
 import { orderBy } from "firebase/firestore";
+import { useCallback } from "react";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
 import { InputComment } from "~/components/molecules/InputComment";
@@ -25,6 +26,17 @@ export const meta: MetaFunction = () => {
 
 export default function FielsOfMaster() {
   const submit = useSubmit();
+  const mutateOrder = useCallback(
+    (servedOrder: OrderEntity, descComment: string) => {
+      const order = servedOrder.clone();
+      order.addComment("master", descComment);
+      submit(
+        { servedOrder: JSON.stringify(order.toOrder()) },
+        { method: "PUT" },
+      );
+    },
+    [submit],
+  );
 
   const { data: orders } = useSWRSubscription(
     "orders",
@@ -104,7 +116,7 @@ export default function FielsOfMaster() {
                         ))}
                       </div>
                     )}
-                    <InputComment order={order} author={"master"} />
+                    <InputComment order={order} mutateOrder={mutateOrder} />
                   </CardContent>
                 </Card>
               </div>

diff --git a/pos/app/routes/_header.serve.tsx b/pos/app/routes/_header.serve.tsx
@@ -33,6 +33,18 @@ export const clientLoader = async () => {
 
 export default function Serve() {
   const submit = useSubmit();
+  const mutateOrder = useCallback(
+    (servedOrder: OrderEntity, descComment: string) => {
+      const order = servedOrder.clone();
+      order.addComment("serve", descComment);
+      submit(
+        { servedOrder: JSON.stringify(order.toOrder()) },
+        { method: "PUT" },
+      );
+    },
+    [submit],
+  );
+
   const { data: orders } = useSWRSubscription(
     "orders",
     collectionSub({ converter: orderConverter }, orderBy("orderId", "asc")),
@@ -123,15 +135,15 @@ export default function Serve() {
                         {order.comments.map((comment, index) => (
                           <div
                             key={`${comment.author}-${comment.text}`}
-                            className="my-2 flex rounded-md bg-gray-200 p-1"
+                            className="my-2 flex rounded-md bg-gray-200 px-2 py-1"
                           >
                             <div className="flex-none">{comment.author}：</div>
                             <div>{comment.text}</div>
                           </div>
                         ))}
                       </div>
                     )}
-                    <InputComment order={order} author={"serve"} />
+                    <InputComment order={order} mutateOrder={mutateOrder} />
                     <div className="mt-4 flex justify-between">
                       <Button
                         onClick={() => {