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

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "app/store";
import Header from "components/header";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import undo from "assets/images/undo.svg";
import styles from "styles/app.module.scss";
import addTemplate from "assets/images/template_add.svg";
import progress_activit from "assets/images/progress_activit.svg";
import {
  selectTemplates,
  listTemplateAsync,
  selectIsLoading,
} from "features/workflow/template";
import { AddTemplateFilePopup } from "./addTemplateFilePopup";

export const TemplateFilePage: React.FC = () => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
  const templates = useSelector(selectTemplates);
  const isLoading = useSelector(selectIsLoading);

  // 追加Popupの表示制御
  const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);

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

  return (
    <>
      {isShowAddPopup && (
        <AddTemplateFilePopup
          onClose={() => {
            setIsShowAddPopup(false);
          }}
        />
      )}
      <div className={styles.wrap}>
        <Header userName="XXXXXXXX" />
        <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("templateFilePage.label.title"))}
              </p>
            </div>
          </div>
          <section className={styles.workflow}>
            <div>
              <ul className={`${styles.menuAction} ${styles.worktype}`}>
                <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={() => {
                      setIsShowAddPopup(true);
                    }}
                  >
                    <img src={addTemplate} alt="" className={styles.menuIcon} />
                    {t(getTranslationID("templateFilePage.label.addTemplate"))}
                  </a>
                </li>
              </ul>
              <table className={`${styles.table} ${styles.template}`}>
                <tr className={styles.tableHeader}>
                  <th className={styles.noLine}>
                    {t(getTranslationID("templateFilePage.label.fileName"))}
                  </th>
                  <th>{/** empty th */}</th>
                </tr>
                {templates?.map((template) => (
                  <tr key={template.id}>
                    <td>{template.name}</td>
                    <td>
                      <ul className={`${styles.menuAction} ${styles.inTable}`}>
                        <li>
                          <a
                            href=""
                            className={`${styles.menuLink} ${styles.isActive}`}
                          >
                            {t(getTranslationID("common.label.delete"))}
                          </a>
                        </li>
                      </ul>
                    </td>
                  </tr>
                ))}
                {!isLoading &&
                  (templates === undefined || templates.length === 0) && (
                    <p
                      style={{
                        margin: "10px",
                        textAlign: "center",
                      }}
                    >
                      {t(getTranslationID("common.message.listEmpty"))}
                    </p>
                  )}
                {isLoading && (
                  <img
                    src={progress_activit}
                    className={styles.icLoading}
                    alt="Loading"
                  />
                )}
              </table>
            </div>
          </section>
        </main>
      </div>
    </>
  );
};