Merged PR 77: 言語切り替え対応で暫定対応となっている箇所を整理+Clientコンテナを修正

## 概要
[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環境でマージ後に再度確認します。

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:

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("="))

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();

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 (
     <div className={styles.wrap}>

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 (

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 (
     <div className={styles.wrap}>

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 (
     <div className={styles.wrap}>

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 (
     <div className={styles.wrap}>