From 40f526c81c729c3402fe860618c656b5fd46ff60 Mon Sep 17 00:00:00 2001
From: "saito.k" <saito.k@nds-tyo.co.jp>
Date: Thu, 14 Sep 2023 11:19:33 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=82=92=E4=BB=96=E7=94=BB=E9=9D=A2=E3=81=A8=E3=81=9D=E3=82=8D?=
 =?UTF-8?q?=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editOptionItemsPopup.tsx                  | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
index f41f8d6..36f07a7 100644
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
@@ -37,21 +37,15 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
   const closePopup = useCallback(() => {
     onClose();
     dispatch(cleanupWorktype());
-    // エラーをリセット
-    setOptionItemsErrors({
-      hasInvalidOptionItems: false,
-      hasIncorrectPatternOptionItems: false,
-    });
+    setIsPushSaveButton(false);
   }, [onClose, dispatch]);
 
   // 今の入力状態のエラー有無
-  const currentErrors = useSelector(selectHasErrorOptionItems);
-
-  // saveボタンを押したタイミングのエラー有無
-  const [optionItemsErrors, setOptionItemsErrors] = useState<{
-    hasInvalidOptionItems: boolean;
-    hasIncorrectPatternOptionItems: boolean;
-  }>({ hasInvalidOptionItems: false, hasIncorrectPatternOptionItems: false });
+  const { hasIncorrectPatternOptionItems, hasInvalidOptionItems } = useSelector(
+    selectHasErrorOptionItems
+  );
+  // 保存ボタンを押したかどうか
+  const [isPushSaveButton, setIsPushSaveButton] = useState<boolean>(false);
 
   useEffect(() => {
     // optionItems取得
@@ -79,13 +73,8 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
 
   // optionItemsの更新
   const onSubmit = useCallback(async () => {
-    // optionItemsのバリデーションチェック
-    setOptionItemsErrors(currentErrors);
-    const { hasInvalidOptionItems, hasIncorrectPatternOptionItems } =
-      currentErrors;
-
-    // エラーがある場合は実行しない
-    if (hasInvalidOptionItems || hasIncorrectPatternOptionItems) {
+    setIsPushSaveButton(true);
+    if (hasIncorrectPatternOptionItems || hasInvalidOptionItems) {
       return;
     }
 
@@ -94,7 +83,12 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
     if (meta.requestStatus === "fulfilled") {
       closePopup();
     }
-  }, [closePopup, dispatch, currentErrors]);
+  }, [
+    closePopup,
+    dispatch,
+    hasIncorrectPatternOptionItems,
+    hasInvalidOptionItems,
+  ]);
 
   return (
     <div className={`${styles.modal} ${isOpen ? styles.isShow : ""}`}>
@@ -215,7 +209,7 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
                     </tr>
                   ))}
                 </table>
-                {optionItemsErrors.hasInvalidOptionItems && (
+                {isPushSaveButton && hasInvalidOptionItems && (
                   <span className={`${styles.formError} ${styles.alignCenter}`}>
                     {t(
                       getTranslationID(
@@ -224,7 +218,7 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
                     )}
                   </span>
                 )}
-                {optionItemsErrors.hasIncorrectPatternOptionItems && (
+                {isPushSaveButton && hasIncorrectPatternOptionItems && (
                   <span className={`${styles.formError} ${styles.alignCenter}`}>
                     {t(
                       getTranslationID(