d0f4971dc9
## 概要 [Task2895: ヘッダの表示文言（タブ・タイトル）を翻訳ファイルを参照するように修正する](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2895) - ヘッダに表示するタイトルとタブの文言を翻訳ファイルに定義したラベルを利用するように修正しました。 ## レビューポイント - タブのフィルタ管理用に`key`プロパティを追加したが、構成として適切か - 表示項目の制御には従来通りの定数を利用したいのでkeyプロパティとして設定 - labelプロパティにタブに表示する文言の翻訳文言を参照するように設定 - 対応ラベルの箇所は適切か（各タブ名＋タイトル名） ## UIの変更 - [Task2895](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/Task2895?csf=1&web=1&e=Xs3Tac) ## 動作確認状況 - ローカルで確認
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import React, { useCallback, useEffect } from "react";
|
|
import styles from "styles/app.module.scss";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { AppDispatch } from "app/store";
|
|
import { useMsal } from "@azure/msal-react";
|
|
import { clearToken } from "features/auth";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
getUserInfoAsync,
|
|
selectUserName,
|
|
selectIsUserNameEmpty,
|
|
clearUserInfo,
|
|
} from "features/login";
|
|
import { getFilteredMenus } from "./utils";
|
|
import logo from "../../assets/images/OMS_logo_black.svg";
|
|
import ac from "../../assets/images/account_circle.svg";
|
|
import { LoginedPaths } from "./types";
|
|
import { HEADER_NAME } from "./constants";
|
|
import logout from "../../assets/images/logout.svg";
|
|
import { getTranslationID } from "../../translation";
|
|
|
|
interface HeaderProps {
|
|
activePath: LoginedPaths;
|
|
}
|
|
|
|
// ログイン後のヘッダー
|
|
const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
|
|
const { activePath } = props;
|
|
const filterMenus = getFilteredMenus();
|
|
const dispatch: AppDispatch = useDispatch();
|
|
const { instance } = useMsal();
|
|
const { t } = useTranslation();
|
|
|
|
// Headerのユーザー情報を取得する
|
|
const isUserNameEmpty = useSelector(selectIsUserNameEmpty);
|
|
const userName = useSelector(selectUserName);
|
|
|
|
useEffect(() => {
|
|
if (isUserNameEmpty) {
|
|
dispatch(getUserInfoAsync());
|
|
}
|
|
}, [dispatch, isUserNameEmpty]);
|
|
|
|
// ログアウト
|
|
const onSignoutButton = useCallback(
|
|
async () => {
|
|
// ダイアログ確認
|
|
// eslint-disable-next-line no-alert
|
|
if (window.confirm(t(getTranslationID("common.message.displayDialog")))) {
|
|
instance.logoutRedirect({ postLogoutRedirectUri: "/" });
|
|
dispatch(clearToken());
|
|
dispatch(clearUserInfo());
|
|
}
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[dispatch]
|
|
);
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<div className={styles.headerLogo}>
|
|
<img src={logo} alt="OM System" />
|
|
</div>
|
|
<div className={styles.headerSub}>{t(HEADER_NAME)}</div>
|
|
<div className={styles.headerMenu}>
|
|
<ul>
|
|
{filterMenus.map((x) => (
|
|
<li key={x.key}>
|
|
<a
|
|
href={x.path}
|
|
className={
|
|
activePath.toUpperCase() === x.path.toUpperCase()
|
|
? styles.isActive
|
|
: ""
|
|
}
|
|
>
|
|
{t(x.label)}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<p className={styles.accountInfo}>
|
|
<img src={ac} alt="" className={styles.accountIcon} />
|
|
<span>{userName}</span>
|
|
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
|
|
<span className={styles.accountSignout} onClick={onSignoutButton}>
|
|
<img src={logout} alt="" className={styles.accountIcon} />
|
|
{t(getTranslationID("common.label.signOutButton"))}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
export default LoginedHeader;
|