OMDSCloud/dictation_client/src/components/header/loginedHeader.tsx

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, loadAccessToken } from "features/auth";
import { useTranslation } from "react-i18next";
import {
  getUserInfoAsync,
  selectUserName,
  selectIsUserNameEmpty,
  clearUserInfo,
} from "features/login";
import { useNavigate } from "react-router-dom";
import { selectDelegationAccessToken } from "features/auth/selectors";
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 dispatch: AppDispatch = useDispatch();
  const { instance } = useMsal();
  const { t } = useTranslation();
  const navigate = useNavigate();

  // メニューの代行操作表示制御
  const isDelegation = useSelector(selectDelegationAccessToken) !== null;
  const accessToken = loadAccessToken();
  const filterMenus = getFilteredMenus(isDelegation);

  // Headerのユーザー情報を取得する
  const isUserNameEmpty = useSelector(selectIsUserNameEmpty);
  const userName = useSelector(selectUserName);

  useEffect(() => {
    // ユーザー情報が空の場合、ユーザー情報を取得する（アクセストークンがある場合のみ）
    // ログアウト時にユーザー情報とアクセストークンをクリアするため、失敗するそのタイミングでユーザー情報を取得しないようにする
    if (accessToken !== null && isUserNameEmpty) {
      dispatch(getUserInfoAsync());
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, isUserNameEmpty]);

  // ログアウト
  const onSignoutButton = useCallback(
    async () => {
      // ダイアログ確認
      if (
        !isDelegation &&
        // eslint-disable-next-line no-alert
        window.confirm(t(getTranslationID("common.message.displayDialog")))
      ) {
        dispatch(clearToken());
        dispatch(clearUserInfo());
        instance.logoutRedirect({ postLogoutRedirectUri: "/" });
      }
    },
    // 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}>
              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
              <a
                onClick={() => navigate(x.path)}
                className={
                  activePath.toUpperCase() === x.path.toUpperCase()
                    ? styles.isActive
                    : ""
                }
                data-tag={`menu-${x.key}`}
              >
                {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}
            data-tag="logout"
            style={{ pointerEvents: isDelegation ? "none" : "auto" }}
          >
            <img src={logout} alt="" className={styles.accountIcon} />
            {t(getTranslationID("common.label.signOutButton"))}
          </span>
        </p>
      </div>
    </header>
  );
};
export default LoginedHeader;