OMDSCloud/dictation_client/src/pages/TypistGroupSettingPage/index.tsx

import React, { useCallback, useEffect, useState } from "react";
import Header from "components/header";
import Footer from "components/footer";
import styles from "styles/app.module.scss";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import progress_activit from "assets/images/progress_activit.svg";
import undo from "assets/images/undo.svg";
import group_add from "assets/images/group_add.svg";
import { useDispatch, useSelector } from "react-redux";
import {
  selectTypistGroups,
  selectIsLoading,
  listTypistGroupsAsync,
} from "features/workflow/typistGroup";
import { AppDispatch } from "app/store";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import { selectDelegatedAccessToken } from "features/auth/selectors";
import { DelegationBar } from "components/delegate";
import { EditTypistGroupPopup } from "./editTypistGroupPopup";
import { AddTypistGroupPopup } from "./addTypistGroupPopup";

const TypistGroupSettingPage: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
  // 代行操作用のトークンを取得する
  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
  const isLoading = useSelector(selectIsLoading);
  const typistGroup = useSelector(selectTypistGroups);

  const [isAddPopupOpen, setIsAddPopupOpen] = useState(false);
  const [isEditPopupOpen, setIsEditPopupOpen] = useState(false);
  const [editTypistGroupId, setEditTypistGroupId] = useState<number>(NaN);

  const onAddPopupOpen = useCallback(() => {
    // typist一覧を取得
    setIsAddPopupOpen(true);
  }, [setIsAddPopupOpen]);

  const onEditPopupOpen = useCallback(
    (typistGroupId: number) => {
      setEditTypistGroupId(typistGroupId);
      setIsEditPopupOpen(true);
    },
    [setIsEditPopupOpen]
  );

  useEffect(() => {
    dispatch(listTypistGroupsAsync());
  }, [dispatch]);

  return (
    <>
      <AddTypistGroupPopup
        onClose={() => {
          setIsAddPopupOpen(false);
        }}
        isOpen={isAddPopupOpen}
      />
      <EditTypistGroupPopup
        onClose={() => {
          setIsEditPopupOpen(false);
        }}
        isOpen={isEditPopupOpen}
        typistGroupId={editTypistGroupId}
      />
      <div
        className={`${styles.wrap} ${
          delegatedAccessToken ? styles.manage : ""
        }`}
      >
        {
          // 代行操作中の場合は、代行操作バーを表示する
          // TODO 代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
          delegatedAccessToken && (
            <DelegationBar delegatedCompanyName="XXXXXX" />
          )
        }
        <Header />
        <UpdateTokenTimer />
        <main className={styles.main}>
          <div>
            <div className={styles.pageHeader}>
              <h1 className={styles.pageTitle}>
                {t(getTranslationID("workflowPage.label.title"))}
              </h1>
              <p className={styles.pageTx}>{` ${t(
                getTranslationID("typistGroupSetting.label.title")
              )}`}</p>
            </div>

            <section className={styles.workflow}>
              <div>
                <ul className={styles.menuAction}>
                  <li>
                    <a
                      href="/workflow"
                      className={`${styles.menuLink} ${styles.isActive}`}
                    >
                      <img src={undo} alt="" className={styles.menuIcon} />
                      {t(getTranslationID("common.label.return"))}
                    </a>
                  </li>
                  <li>
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${styles.menuLink} ${styles.isActive}`}
                      onClick={onAddPopupOpen}
                    >
                      <img src={group_add} alt="" className={styles.menuIcon} />
                      {t(getTranslationID("typistGroupSetting.label.addGroup"))}
                    </a>
                  </li>
                </ul>

                <table className={`${styles.table} ${styles.group}`}>
                  <tr className={styles.tableHeader}>
                    <th className={styles.noLine}>
                      {t(
                        getTranslationID("typistGroupSetting.label.groupName")
                      )}
                    </th>
                    <th>{/** empty th */}</th>
                  </tr>
                  {!isLoading && typistGroup.length === 0 ? (
                    <p style={{ margin: "10px", textAlign: "center" }}>
                      {t(getTranslationID("common.message.listEmpty"))}
                    </p>
                  ) : (
                    typistGroup.map((group) => (
                      <tr key={group.id}>
                        <td>{group.name}</td>
                        <td>
                          <ul
                            className={`${styles.menuAction} ${styles.inTable}`}
                          >
                            <li>
                              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                              <a
                                className={`${styles.menuLink} ${styles.isActive}`}
                                onClick={() => {
                                  onEditPopupOpen(group.id);
                                }}
                              >
                                {t(getTranslationID("common.label.edit"))}
                              </a>
                            </li>
                          </ul>
                        </td>
                      </tr>
                    ))
                  )}
                </table>
                {isLoading && (
                  <img
                    src={progress_activit}
                    className={styles.icLoading}
                    alt="Loading"
                  />
                )}
              </div>
            </section>
          </div>
        </main>
        <Footer />
      </div>
    </>
  );
};

export default TypistGroupSettingPage;