From bc442e1a2e22bb3625d57e11896d7f9f445e8b5b Mon Sep 17 00:00:00 2001
From: "makabe.t" <makabe.t@nds-tyo.co.jp>
Date: Wed, 14 Jun 2023 03:57:40 +0000
Subject: [PATCH] =?UTF-8?q?Merged=20PR=20143:=20=E8=AA=8D=E8=A8=BC?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=82=84=E8=87=AA=E5=8B=95=E3=83=AD?=
 =?UTF-8?q?=E3=82=B0=E3=82=A2=E3=82=A6=E3=83=88=E6=99=82=E3=81=AB=E3=82=B9?=
 =?UTF-8?q?=E3=83=8A=E3=83=83=E3=82=AF=E3=83=90=E3=83=BC=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E5=AE=9F=E8=A3=85=E3=82=92=E8=A1=8C?=
 =?UTF-8?q?=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 概要
[Task1917: 認証エラーや自動ログアウト時にスナックバーを表示する実装を行う](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1917)

- 認証エラーなどでトップページに遷移する際にクエリパラメータを持たせて、トップページでスナックバーを出すようにしました。

## レビューポイント
- 認証エラーでの遷移かの判定をクエリパラメータで行っているが問題ないか
- 表示メッセージは適切か

## UIの変更
- [Task1917](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/Task1917?csf=1&web=1&e=q664WR)
## 動作確認状況
- ローカルで確認
---
 dictation_client/src/App.tsx                  |  2 +-
 .../src/components/auth/routeAuthGuard.tsx    | 18 ++++----------
 dictation_client/src/pages/TopPage/index.tsx  | 24 ++++++++++++++++++-
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/dictation_client/src/App.tsx b/dictation_client/src/App.tsx
index cfd0d78..10c1610 100644
--- a/dictation_client/src/App.tsx
+++ b/dictation_client/src/App.tsx
@@ -26,7 +26,7 @@ const App = (): JSX.Element => {
         if (e?.response?.status === 401) {
           dispatch(clearToken());
           instance.logout({
-            postLogoutRedirectUri: "/",
+            postLogoutRedirectUri: "/?logout=true",
           });
         }
         return Promise.reject(e);
diff --git a/dictation_client/src/components/auth/routeAuthGuard.tsx b/dictation_client/src/components/auth/routeAuthGuard.tsx
index 78813d5..7b4d9d0 100644
--- a/dictation_client/src/components/auth/routeAuthGuard.tsx
+++ b/dictation_client/src/components/auth/routeAuthGuard.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
 import {
   isAuthenticatedSelector,
   isTokenExpired,
@@ -17,25 +16,18 @@ export const RouteAuthGuard = (props: RouteAuthGuardProps) => {
   const isAuth = useSelector(isAuthenticatedSelector);
   const isExpired = useSelector(isTokenExpired);
   const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
   const { instance } = useMsal();
   const { component } = props;
-  // トークンの有効期限が切れていたらTopへリダイレクト
+  // トークンがないor有効期限が切れていたらログアウトしてTopへリダイレクト
   useEffect(() => {
-    if (!isAuth) {
-      navigate("/");
-    } else if (isExpired) {
+    if (!isAuth || isExpired) {
       dispatch(clearToken());
       // B2Cからもログアウトする
       instance.logout({
-        postLogoutRedirectUri: "/",
+        postLogoutRedirectUri: "/?logout=true",
       });
     }
-  }, [isAuth, isExpired, dispatch, navigate, instance]);
-
-  if (!isAuth || isExpired) {
-    return <div />;
-  }
+  }, [isAuth, isExpired, dispatch, instance]);
 
   return component;
 };
diff --git a/dictation_client/src/pages/TopPage/index.tsx b/dictation_client/src/pages/TopPage/index.tsx
index 0ac6497..2a119a7 100644
--- a/dictation_client/src/pages/TopPage/index.tsx
+++ b/dictation_client/src/pages/TopPage/index.tsx
@@ -1,10 +1,14 @@
 import { useMsal } from "@azure/msal-react";
 import { loginRequest } from "common/msalConfig";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { getTranslationID } from "translation";
 import Header from "components/header";
 import Footer from "components/footer";
+import { AppDispatch } from "app/store";
+import { useDispatch } from "react-redux";
+import { closeSnackbar, openSnackbar } from "features/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 import { LANGUAGE_LIST } from "../../features/top/constants";
 import arrow_forward from "../../assets/images/arrow_forward.svg";
 import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
@@ -14,6 +18,24 @@ const TopPage: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
   // eslint-disable-next-line
   const [t, i18n] = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+  const { search } = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const query = new URLSearchParams(search);
+    const logout = query.get("logout");
+    if (logout) {
+      dispatch(closeSnackbar());
+      dispatch(
+        openSnackbar({
+          level: "error",
+          message: getTranslationID("topPage.message.logout"),
+        })
+      );
+      navigate("/", { replace: true });
+    }
+  }, [dispatch, search, navigate]);
 
   return (
     <div className={`${styles.wrap} ${styles.home}`}>