HT_DASHBOARD_frontend/src/pages/dashboard/qr-service/サービス券発行用QRコード.tsx

import { Box, Button, Paper, Stack } from "@mui/material";
import { HasChildren } from "@types";
import {
  QRサービス券取得用トークンリフレッシュ,
  QRサービス券取得用トークン取得,
} from "api/qr-service";
import useAPICall from "hooks/useAPICall";
import useAuth from "hooks/useAuth";
import useDashboard from "hooks/useDashBoard";
import { useDialog } from "hooks/useDialog";
import useSnackbarCustom from "hooks/useSnackbarCustom";
import { PageID, TabID } from "pages";
import QRCode from "qrcode";
import { useEffect, useMemo, useState } from "react";
import { getFullPath, getPath } from "routes/path";

export default function サービス券発行用QRコード() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.サービス券発行用QRコード,
    TabID.NONE
  );
  const size = 200;

  const { error } = useSnackbarCustom();
  const [token, setToken] = useState("");
  const [qr, setQr] = useState("");

  const { callAPI: callQRサービス券取得用トークン取得 } = useAPICall({
    apiMethod: QRサービス券取得用トークン取得,
    backDrop: true,
    onSuccess: ({ data }) => {
      setToken(data.token);
    },
    onFailed: () => {
      error("QR表示失敗しました");
    },
  });

  const url = useMemo(() => {
    if (!token) return "";
    return getFullPath(PageID.QRサービス券発行申請, {
      query: {
        token,
      },
    });
  }, [token]);

  const fetch = () => {
    callQRサービス券取得用トークン取得({});
  };

  useEffect(() => {
    if (url) {
      QRCode.toDataURL(url, {
        errorCorrectionLevel: "H",
      }).then((data: string) => {
        setQr(data);
      });
    }
  }, [url]);

  useEffect(() => {
    setHeaderTitle("サービス券発行用QRコード");
  }, [setHeaderTitle, setTabs]);

  useEffect(() => {
    fetch();
  }, []);

  return (
    <Box>
      <Stack spacing={2}>
        <Paper sx={{ p: 2 }}>
          <Stack>
            <Box mx="auto">
              {!!qr && <img src={qr} width={size} height={size}></img>}
            </Box>

            <Box mx="auto">{url}</Box>
            <Box mx="auto">
              <RefreshButton fetch={fetch}>QRコードリフレッシュ</RefreshButton>
            </Box>
          </Stack>
        </Paper>
      </Stack>
    </Box>
  );
}

type RefreshButtonProps = {
  fetch: VoidFunction;
} & HasChildren;
function RefreshButton({ fetch }: RefreshButtonProps) {
  const {} = useAuth();
  const { success, error } = useSnackbarCustom();
  const { callAPI: callQRサービス券取得用トークンリフレッシュ } = useAPICall({
    apiMethod: QRサービス券取得用トークンリフレッシュ,
    onSuccess: () => {
      success("リフレッシュしました");
      fetch();
    },
    onFailed: () => {
      error("失敗しました");
    },
  });

  const { element, open, isAgree } = useDialog({
    message: "リフレッシュすると以前のQRコードが使えなくなります",
  });

  const handleClick = () => {
    open();
  };

  useEffect(() => {
    if (isAgree) {
      callQRサービス券取得用トークンリフレッシュ({});
    }
  }, [isAgree]);

  return (
    <>
      {element}
      <Button onClick={handleClick}>QRコードリフレッシュ</Button>
    </>
  );
}