From ec5df50aa0c428b98928d0558a7c3fb209a32348 Mon Sep 17 00:00:00 2001
From: "makabe.t" <makabe.t@nds-tyo.co.jp>
Date: Tue, 19 Sep 2023 09:29:04 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20420:=20=E7=B5=90=E5=90=88?=
 =?UTF-8?q?=E5=8B=95=E4=BD=9C=E7=A2=BA=E8=AA=8D=E4=B8=8D=E5=85=B7=E5=90=88?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task2684: 結合動作確認不具合対応](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2684)

- Active WorktypeIDの変更について結合動作確認で見つかった不具合に対応しました。
  - ActiveWorktypeIDの変更がダイアログ表示の前にセレクトボックスに反映される
  - 変更成功時に成功スナックバーを表示する

## レビューポイント
- セレクトボックスの変更時のイベントの取り扱いは適切か

## UIの変更
- [Task2648](https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2648?csf=1&web=1&e=rxWAF0)

## 動作確認状況
- ローカルで確認
---
 .../features/workflow/worktype/operations.ts  |  6 +++
 .../src/pages/WorkTypeIdSettingPage/index.tsx | 47 ++++++++++++++-----
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/dictation_client/src/features/workflow/worktype/operations.ts b/dictation_client/src/features/workflow/worktype/operations.ts
index 6cbd133..0e45d33 100644
--- a/dictation_client/src/features/workflow/worktype/operations.ts
+++ b/dictation_client/src/features/workflow/worktype/operations.ts
@@ -312,6 +312,12 @@ export const updateActiveWorktypeAsync = createAsyncThunk<
         headers: { authorization: `Bearer ${accessToken}` },
       }
     );
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "info",
+        message: getTranslationID("common.message.success"),
+      })
+    );
 
     return {};
   } catch (e) {
diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
index b2b8715..e176adf 100644
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
@@ -1,7 +1,7 @@
 import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
 import Footer from "components/footer";
 import Header from "components/header";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { getTranslationID } from "translation";
 import styles from "styles/app.module.scss";
 import undo from "assets/images/undo.svg";
@@ -39,32 +39,51 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const [isShowEditOptionItemPopup, setIsShowEditOptionItemPopup] =
     useState<boolean>(false);
 
+  // ActiveWorktypeIDのセレクトボックス表示の値
+  const [selectedActiveWorktypeId, setSelectedActiveWorktypeId] = useState<
+    number | undefined
+  >(undefined);
+
+  // 初期表示
   useEffect(() => {
     dispatch(listWorktypesAsync());
   }, [dispatch]);
 
-  const onChangeActiveWorktype = useCallback(
-    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+  // APIから取得したactiveWorktypeIdを画面表示に反映
+  useEffect(() => {
+    setSelectedActiveWorktypeId(activeWorktypeId);
+  }, [activeWorktypeId]);
+
+  // ActiveWorktypeIDのセレクトボックス変更時（セレクトボックスに表示するActiveWorktypeIDの変更時）
+  useEffect(() => {
+    // 画面表示の変更後にダイアログを表示するため、setTimeoutを使用
+    const timeout = setTimeout(async () => {
+      if (selectedActiveWorktypeId === activeWorktypeId) {
+        return;
+      }
       // ダイアログ確認
       if (
         // eslint-disable-next-line no-alert
         !window.confirm(t(getTranslationID("common.message.dialogConfirm")))
       ) {
+        setSelectedActiveWorktypeId(activeWorktypeId);
         return;
       }
-      const { value } = e.target;
-      const active = value === "" ? undefined : Number(value);
-
       const { meta } = await dispatch(
-        updateActiveWorktypeAsync({ id: active })
+        updateActiveWorktypeAsync({ id: selectedActiveWorktypeId })
       );
 
       if (meta.requestStatus === "fulfilled") {
         dispatch(listWorktypesAsync());
+      } else {
+        setSelectedActiveWorktypeId(activeWorktypeId);
       }
-    },
-    [dispatch, t]
-  );
+    }, 0);
+    return () => {
+      clearTimeout(timeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedActiveWorktypeId]);
 
   return (
     <>
@@ -140,8 +159,12 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
                     <select
                       name="Active Worktype"
                       className={styles.formInput}
-                      value={activeWorktypeId ?? ""}
-                      onChange={onChangeActiveWorktype}
+                      value={selectedActiveWorktypeId ?? ""}
+                      onChange={(e) => {
+                        const { value } = e.target;
+                        const active = value === "" ? undefined : Number(value);
+                        setSelectedActiveWorktypeId(active);
+                      }}
                     >
                       {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                       <option value="" />