From d2d95c6b0246a9daf15bd0828fcb69d86fb107dc Mon Sep 17 00:00:00 2001 From: "makabe.t" Date: Thu, 20 Apr 2023 03:44:43 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=2077:=20=E8=A8=80=E8=AA=9E=E5=88=87?= =?UTF-8?q?=E3=82=8A=E6=9B=BF=E3=81=88=E5=AF=BE=E5=BF=9C=E3=81=A7=E6=9A=AB?= =?UTF-8?q?=E5=AE=9A=E5=AF=BE=E5=BF=9C=E3=81=A8=E3=81=AA=E3=81=A3=E3=81=A6?= =?UTF-8?q?=E3=81=84=E3=82=8B=E7=AE=87=E6=89=80=E3=82=92=E6=95=B4=E7=90=86?= =?UTF-8?q?+Client=E3=82=B3=E3=83=B3=E3=83=86=E3=83=8A=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task1610: 言語切り替え対応で暫定対応となっている箇所を整理+Clientコンテナを修正](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1610) - Clientの言語選択の反映をApp.tsxのuseEffectを - 不要なclientコンテナの環境変数読み込みを削除しました。 ## レビューポイント - 競合しないようログイン時のログインAPI呼び出しをuseLayoutEffectで処理するようにしています。 - Reactフックの使い方として問題ないでしょうか？ ## UIの変更 - なし ## 動作確認状況 - ローカルで確認 - develop環境でマージ後に再度確認します。 --- .../.devcontainer/docker-compose.yml | 1 - dictation_client/src/App.tsx | 5 ++--- dictation_client/src/pages/LoginPage/index.tsx | 4 ++-- .../src/pages/SignupCompletePage/index.tsx | 15 ++------------- dictation_client/src/pages/SignupPage/index.tsx | 16 +--------------- .../src/pages/VerifyAlreadyExistPage/index.tsx | 14 +------------- .../src/pages/VerifyFailedPage/index.tsx | 15 ++------------- .../src/pages/VerifySuccessPage/index.tsx | 14 +------------- 8 files changed, 11 insertions(+), 73 deletions(-) diff --git a/dictation_client/.devcontainer/docker-compose.yml b/dictation_client/.devcontainer/docker-compose.yml index 9c70fe7..491fe15 100644 --- a/dictation_client/.devcontainer/docker-compose.yml +++ b/dictation_client/.devcontainer/docker-compose.yml @@ -2,7 +2,6 @@ version: "3" services: dictation_client: - env_file: ../.env build: . working_dir: /app/dictation_client ports: diff --git a/dictation_client/src/App.tsx b/dictation_client/src/App.tsx index 01e8577..0f33e23 100644 --- a/dictation_client/src/App.tsx +++ b/dictation_client/src/App.tsx @@ -3,7 +3,7 @@ import { BrowserRouter } from "react-router-dom"; import { PublicClientApplication } from "@azure/msal-browser"; import { MsalProvider, useMsal } from "@azure/msal-react"; import { msalConfig } from "common/msalConfig"; -import { useEffect, useLayoutEffect } from "react"; +import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import globalAxios, { AxiosError, AxiosResponse } from "axios"; import { clearToken } from "features/auth"; @@ -39,8 +39,7 @@ const App = (): JSX.Element => { }, [dispatch, instance]); // Language読み取り - // AADB2Cからのリダイレクト後にレンダリングより先に言語切り替えしたいのでuseLayoutEffectを使う - useLayoutEffect(() => { + useEffect(() => { const language = document.cookie .split(";") .map((x) => x.split("=")) diff --git a/dictation_client/src/pages/LoginPage/index.tsx b/dictation_client/src/pages/LoginPage/index.tsx index 8691e3f..a95fe75 100644 --- a/dictation_client/src/pages/LoginPage/index.tsx +++ b/dictation_client/src/pages/LoginPage/index.tsx @@ -4,7 +4,7 @@ import { AppDispatch } from "app/store"; import Footer from "components/footer"; import Header from "components/header"; import { loginAsync } from "features/login"; -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useLayoutEffect } from "react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; @@ -32,7 +32,7 @@ const LoginPage: React.FC = (): JSX.Element => { } }, [accounts, dispatch, instance, navigate]); - useEffect(() => { + useLayoutEffect(() => { // B2CからリダイレクトされてB2Cへのログインが完了してからAPIを呼ぶ if (isAuthenticated && inProgress === InteractionStatus.None) { login(); diff --git a/dictation_client/src/pages/SignupCompletePage/index.tsx b/dictation_client/src/pages/SignupCompletePage/index.tsx index 9fd2c19..2bcec44 100644 --- a/dictation_client/src/pages/SignupCompletePage/index.tsx +++ b/dictation_client/src/pages/SignupCompletePage/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React from "react"; import { useTranslation } from "react-i18next"; import { getTranslationID } from "translation"; import Header from "components/header"; @@ -7,18 +7,7 @@ import styles from "styles/app.module.scss"; import emailCheck from "../../assets/images/email_check.svg"; const SignupCompletePage: React.FC = (): JSX.Element => { - const [t, i18n] = useTranslation(); - - useEffect(() => { - const language = document.cookie - .split(";") - .map((x) => x.split("=")) - .find((x) => x.length === 2 && x[0] === "language"); - - if (language) { - i18n.changeLanguage(language[1]); - } - }, [i18n]); + const { t } = useTranslation(); return (
diff --git a/dictation_client/src/pages/SignupPage/index.tsx b/dictation_client/src/pages/SignupPage/index.tsx index e3a866b..4757cd3 100644 --- a/dictation_client/src/pages/SignupPage/index.tsx +++ b/dictation_client/src/pages/SignupPage/index.tsx @@ -1,29 +1,15 @@ import Footer from "components/footer"; import Header from "components/header"; import { selectPageState } from "features/signup/selectors"; -import React, { useEffect } from "react"; +import React from "react"; import { useSelector } from "react-redux"; import { Navigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; import SignupInput from "./signupInput"; import SignupConfirm from "./signupConfirm"; const SignupPage: React.FC<{ completeTo: string }> = ({ completeTo, }): JSX.Element => { - const { i18n } = useTranslation(); - - useEffect(() => { - const language = document.cookie - .split(";") - .map((x) => x.split("=")) - .find((x) => x.length === 2 && x[0] === "language"); - - if (language) { - i18n.changeLanguage(language[1]); - } - }, [i18n]); - const state = useSelector(selectPageState); return ( diff --git a/dictation_client/src/pages/VerifyAlreadyExistPage/index.tsx b/dictation_client/src/pages/VerifyAlreadyExistPage/index.tsx index 08d7cf0..1ff8e4b 100644 --- a/dictation_client/src/pages/VerifyAlreadyExistPage/index.tsx +++ b/dictation_client/src/pages/VerifyAlreadyExistPage/index.tsx @@ -3,22 +3,10 @@ import Header from "components/header"; import styles from "styles/app.module.scss"; import { useTranslation } from "react-i18next"; import { getTranslationID } from "translation"; -import { useEffect } from "react"; import check_circle from "../../assets/images/check_circle.svg"; const VerifyPage: React.FC = (): JSX.Element => { - const [t, i18n] = useTranslation(); - - useEffect(() => { - const language = document.cookie - .split(";") - .map((x) => x.split("=")) - .find((x) => x.length === 2 && x[0] === "language"); - - if (language) { - i18n.changeLanguage(language[1]); - } - }, [i18n]); + const { t } = useTranslation(); return (
diff --git a/dictation_client/src/pages/VerifyFailedPage/index.tsx b/dictation_client/src/pages/VerifyFailedPage/index.tsx index 4d0666d..fe04867 100644 --- a/dictation_client/src/pages/VerifyFailedPage/index.tsx +++ b/dictation_client/src/pages/VerifyFailedPage/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React from "react"; import Header from "components/header"; import Footer from "components/footer"; import styles from "styles/app.module.scss"; @@ -7,18 +7,7 @@ import { getTranslationID } from "translation"; import report from "../../assets/images/report.svg"; const VerifyFailedPage: React.FC = (): JSX.Element => { - const [t, i18n] = useTranslation(); - - useEffect(() => { - const language = document.cookie - .split(";") - .map((x) => x.split("=")) - .find((x) => x.length === 2 && x[0] === "language"); - - if (language) { - i18n.changeLanguage(language[1]); - } - }, [i18n]); + const { t } = useTranslation(); return (
diff --git a/dictation_client/src/pages/VerifySuccessPage/index.tsx b/dictation_client/src/pages/VerifySuccessPage/index.tsx index 0340934..08e52a3 100644 --- a/dictation_client/src/pages/VerifySuccessPage/index.tsx +++ b/dictation_client/src/pages/VerifySuccessPage/index.tsx @@ -3,22 +3,10 @@ import Header from "components/header"; import styles from "styles/app.module.scss"; import { useTranslation } from "react-i18next"; import { getTranslationID } from "translation"; -import { useEffect } from "react"; import check_circle from "../../assets/images/check_circle.svg"; const VerifySuccessPage: React.FC = (): JSX.Element => { - const [t, i18n] = useTranslation(); - - useEffect(() => { - const language = document.cookie - .split(";") - .map((x) => x.split("=")) - .find((x) => x.length === 2 && x[0] === "language"); - - if (language) { - i18n.changeLanguage(language[1]); - } - }, [i18n]); + const { t } = useTranslation(); return (