排他エラー時のメッセージ表示

src/contexts/PageContext.tsx

@@ -1,3 +1,5 @@
+import { SettingsPhoneTwoTone } from "@mui/icons-material";
+import { Dialog, DialogActions, DialogContent, Button } from "@mui/material";
 import { HasChildren } from "@types";
 import { PageID, TabID } from "codes/page";
 import { createContext, useState } from "react";
@@ -7,12 +9,14 @@ type ContextProps = {
   tabId: TabID;
   setPageId: (pageId: PageID) => void;
   setTabId: (tabId: TabID) => void;
+  openDialog: (message: string) => void;
 };
 const contextInit: ContextProps = {
   pageId: PageID.NONE,
   tabId: TabID.NONE,
   setPageId: (pageId: PageID) => {},
   setTabId: (tabId: TabID) => {},
+  openDialog: (message: string) => {},
 };
 export const PageContext = createContext(contextInit);
 
@@ -21,6 +25,18 @@ export function PageContextProvider({ children }: Props) {
   const [pageId, setPageId] = useState<PageID>(PageID.NONE);
   const [tabId, setTabId] = useState<TabID>(TabID.NONE);
 
+  const [open, setOpen] = useState(false);
+  const [dialogMessage, setDialogMessage] = useState("");
+
+  const openDialog = (message: string) => {
+    setOpen(true);
+    setDialogMessage(message);
+  };
+
+  const close = () => {
+    setOpen(false);
+  };
+
   return (
     <PageContext.Provider
       value={{
@@ -28,9 +44,16 @@ export function PageContextProvider({ children }: Props) {
         tabId,
         setPageId,
         setTabId,
+        openDialog,
       }}
     >
       {children}
+      <Dialog open={open} onClose={close}>
+        <DialogContent>{dialogMessage}</DialogContent>
+        <DialogActions>
+          <Button onClick={close}>閉じる</Button>
+        </DialogActions>
+      </Dialog>
     </PageContext.Provider>
   );
 }

src/hooks/useAPICall.ts

@@ -3,6 +3,7 @@ import { APICommonResponse, apiRequest, ResultCode } from "api";
 import { UseFormReturn } from "react-hook-form";
 import { Dictionary } from "@types";
 import { useSnackbar } from "notistack";
+import usePage from "./usePage";
 
 export const APIErrorType = {
   NONE: "none",
@@ -38,6 +39,8 @@ export default function useAPICall<
   const [exclusiveError, setExclusiveError] = useState(false);
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
 
+  const { openDialog } = usePage();
+
   const { enqueueSnackbar } = useSnackbar();
 
   const clearErrors = () => {
@@ -127,6 +130,10 @@ export default function useAPICall<
     if (onFailed) {
       onFailed(res);
     }
+
+    if (res?.result === ResultCode.EXCLUSIVE_ERROR) {
+      openDialog("恐れ入りますが、ページを再読込後、再実行してください");
+    }
   };
 
   const handleValidationError = (error: any) => {