diff --git a/app/components/molecules/AttractiveTextBox.tsx b/app/components/molecules/AttractiveTextBox.tsx index 8b16aa2a..a80ad8c6 100644 --- a/app/components/molecules/AttractiveTextBox.tsx +++ b/app/components/molecules/AttractiveTextBox.tsx @@ -1,4 +1,10 @@ -import { type ChangeEventHandler, useCallback, useEffect, useRef } from "react"; +import { + type ChangeEventHandler, + useCallback, + useEffect, + useRef, + useState, +} from "react"; import { Input, type InputProps } from "../ui/input"; type props = InputProps & { @@ -8,22 +14,33 @@ type props = InputProps & { // focus が true のときにフォーカスを当てるテキストボックス const AttractiveTextBox = ({ focus, onTextSet, ...props }: props) => { + const [text, setText] = useState(""); const DOMRef = useRef(null); - const handler: ChangeEventHandler = useCallback( - (event) => { - onTextSet(event.target.value); - }, - [onTextSet], + const onChangeHandler: ChangeEventHandler = useCallback( + (event) => setText(event.target.value), + [], ); + useEffect(() => { + onTextSet(text); + }, [text, onTextSet]); + useEffect(() => { if (focus) { DOMRef.current?.focus(); } }, [focus]); - return ; + return ( + + ); }; export { AttractiveTextBox }; diff --git a/app/components/pages/CashierV2.tsx b/app/components/pages/CashierV2.tsx index 7d40c6f0..166ca74a 100644 --- a/app/components/pages/CashierV2.tsx +++ b/app/components/pages/CashierV2.tsx @@ -90,8 +90,6 @@ const reducer = (state: OrderEntity, action: Action): OrderEntity => { switch (action.type) { case "clear": return OrderEntity.createNew({ orderId: state.orderId }); - case "updateOrderId": - return updateOrderId(action.orderId); case "applyDiscount": return applyDiscount(action.discountOrder); case "removeDiscount": @@ -104,6 +102,8 @@ const reducer = (state: OrderEntity, action: Action): OrderEntity => { return setReceived(action.received); case "setDescription": return setDescription(action.description); + case "updateOrderId": + return updateOrderId(action.orderId); } }; @@ -115,19 +115,22 @@ const latestOrderId = (orders: WithId[] | undefined): number => { }; const CashierV2 = ({ items, orders, submitPayload }: props) => { - const nextOrderId = useMemo(() => latestOrderId(orders) + 1, [orders]); const [newOrder, dispatch] = useReducer( reducer, - OrderEntity.createNew({ orderId: nextOrderId }), + OrderEntity.createNew({ orderId: -1 }), ); const [inputStatus, setInputStatus] = useState<(typeof InputStatus)[number]>("discount"); const [dialogOpen, setDialogOpen] = useState(false); + const nextOrderId = useMemo(() => latestOrderId(orders) + 1, [orders]); + useEffect(() => { + dispatch({ type: "updateOrderId", orderId: nextOrderId }); + }, [nextOrderId]); + const charge = newOrder.received - newOrder.billingAmount; const chargeView: string | number = charge < 0 ? "不足しています" : charge; - const descriptionDOM = useRef(null); const discountInputDOM = useRef(null); const proceedStatus = useCallback(() => { @@ -164,7 +167,6 @@ const CashierV2 = ({ items, orders, submitPayload }: props) => { case "received": break; case "description": - descriptionDOM.current?.focus(); setDialogOpen(false); break; case "submit": @@ -222,7 +224,7 @@ const CashierV2 = ({ items, orders, submitPayload }: props) => {
  • 注文をクリア: Esc
  • -

    {`No. ${nextOrderId}`}

    +

    {`No. ${newOrder.orderId}`}

    合計金額

    {newOrder.billingAmount}