Fix: エラーハンドリングを改善し、Tauriダイアログを使用してエラーメッセージを表示

shm11C3 · Nov 23, 2024 · 0d47efc · 0d47efc
1 parent 93836f7
commit 0d47efc
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 9 deletions.
diff --git a/src/atom/useHardwareInfoAtom.ts b/src/atom/useHardwareInfoAtom.ts
@@ -1,3 +1,4 @@
+import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { type SysInfo, commands } from "@/rspc/bindings";
 import { isError } from "@/types/result";
 import { atom, useAtom } from "jotai";
@@ -10,11 +11,12 @@ const hardInfoAtom = atom<SysInfo>({
 
 export const useHardwareInfoAtom = () => {
   const [hardwareInfo, setHardInfo] = useAtom(hardInfoAtom);
+  const { error } = useTauriDialog();
 
   const init = async () => {
     const fetchedHardwareInfo = await commands.getHardwareInfo();
-
     if (isError(fetchedHardwareInfo)) {
+      error(fetchedHardwareInfo.error);
       console.error("Failed to fetch hardware info:", fetchedHardwareInfo);
       return;
     }

diff --git a/src/atom/useSettingsAtom.ts b/src/atom/useSettingsAtom.ts
@@ -1,4 +1,5 @@
 import { defaultColorRGB } from "@/consts/chart";
+import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { type Result, commands } from "@/rspc/bindings";
 import type { ChartDataType } from "@/types/hardwareDataType";
 import { isError } from "@/types/result";
@@ -26,6 +27,7 @@ const settingsAtom = atom<Settings>({
 });
 
 export const useSettingsAtom = () => {
+  const { error } = useTauriDialog();
   const mapSettingUpdater: {
     [K in keyof Omit<Settings, "state" | "lineGraphColor">]: (
       value: Settings[K],
@@ -46,10 +48,12 @@ export const useSettingsAtom = () => {
 
   const [settings, setSettings] = useAtom(settingsAtom);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const loadSettings = useCallback(async () => {
     const setting = await commands.getSettings();
 
     if (isError(setting)) {
+      error(setting.error);
       console.error("Failed to fetch settings:", setting.error);
       return;
     }
@@ -69,6 +73,7 @@ export const useSettingsAtom = () => {
     const result = await mapSettingUpdater[key](value);
 
     if (isError(result)) {
+      error(result.error);
       console.error(result.error);
       setSettings((prev) => ({ ...prev, [key]: previousValue }));
     }
@@ -82,6 +87,7 @@ export const useSettingsAtom = () => {
     const result = await commands.setDisplayTargets(newTargets);
 
     if (isError(result)) {
+      error(result.error);
       console.error(result.error);
       return;
     }
@@ -102,6 +108,7 @@ export const useSettingsAtom = () => {
     const result = await commands.setLineGraphColor(key, value);
 
     if (isError(result)) {
+      error(result.error);
       console.error(result.error);
       return;
     }

diff --git a/src/components/charts/ProcessTable.tsx b/src/components/charts/ProcessTable.tsx
@@ -1,3 +1,4 @@
+import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { type ProcessInfo, commands } from "@/rspc/bindings";
 import { CaretDown } from "@phosphor-icons/react";
 import { atom, useAtom, useSetAtom } from "jotai";
@@ -10,6 +11,7 @@ const ProcessesTable = ({
   defaultItemLength,
 }: { defaultItemLength: number }) => {
   const { t } = useTranslation();
+  const { error } = useTauriDialog();
   const [processes] = useAtom(processesAtom);
   const setAtom = useSetAtom(processesAtom);
   const [showAllItem, setShowAllItem] = useState<boolean>(false);
@@ -23,8 +25,9 @@ const ProcessesTable = ({
       try {
         const processesData = await commands.getProcessList();
         setAtom(processesData);
-      } catch (error) {
-        console.error("Failed to fetch processes:", error);
+      } catch (err) {
+        error(err as string);
+        console.error("Failed to fetch processes:", err);
       }
     };
 
@@ -33,7 +36,7 @@ const ProcessesTable = ({
     const interval = setInterval(fetchProcesses, 3000);
 
     return () => clearInterval(interval);
-  }, [setAtom]);
+  }, [setAtom, error]);
 
   const sortedProcesses = [...processes];
   if (sortConfig !== null) {

diff --git a/src/components/forms/UploadImage/useUploadImageForm.ts b/src/components/forms/UploadImage/useUploadImageForm.ts
@@ -1,4 +1,5 @@
 import { useBackgroundImage } from "@/hooks/useBgImage";
+import { useTauriDialog } from "@/hooks/useTauriDialog";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -8,6 +9,7 @@ import { z } from "zod";
 //　画像アップロードカスタムフック
 export const useUploadImage = () => {
   const { t } = useTranslation();
+  const { error } = useTauriDialog();
   const [displayUrl, setDisplayUrl] = useState<string | null>(null);
   const [fileName, setFilename] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -37,8 +39,9 @@ export const useUploadImage = () => {
     try {
       await saveBackgroundImage(values.picture);
       form.reset();
-    } catch (error) {
-      console.error("Error saveBackgroundImage:", error);
+    } catch (err) {
+      error(err as string);
+      console.error("Error saveBackgroundImage:", err);
     }
 
     setIsSubmitting(false);

diff --git a/src/hooks/useBgImage.ts b/src/hooks/useBgImage.ts
@@ -5,17 +5,20 @@ import { isError, isOk } from "@/types/result";
 import type { BackgroundImage } from "@/types/settingsType";
 import { atom, useAtom } from "jotai";
 import { useCallback, useEffect } from "react";
+import { useTauriDialog } from "./useTauriDialog";
 
 const backgroundImageAtom = atom<string | null>(null);
 const uploadedBackgroundImagesAtom = atom<Array<BackgroundImage>>([]);
 
 export const useBackgroundImage = () => {
+  const { error } = useTauriDialog();
   const [backgroundImage, setBackgroundImage] = useAtom(backgroundImageAtom);
   const { initBackgroundImages, backgroundImageList, setBackgroundImageList } =
     useBackgroundImageList();
 
   const { settings, updateSettingAtom } = useSettingsAtom();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   const initBackgroundImage = useCallback(async () => {
     if (settings.selectedBackgroundImg) {
       const base64Image = await commands.getBackgroundImage(
@@ -25,6 +28,7 @@ export const useBackgroundImage = () => {
       if (isOk(base64Image)) {
         setBackgroundImage(`data:image/png;base64,${base64Image.data}`);
       } else {
+        error(base64Image.error);
         console.error("Failed to load background image:", base64Image.error);
       }
     } else {
@@ -43,6 +47,7 @@ export const useBackgroundImage = () => {
     const fileId = await commands.saveBackgroundImage(base64Image);
 
     if (isError(fileId)) {
+      error(fileId.error);
       console.error("Failed to save background image:", fileId.error);
       return;
     }
@@ -63,8 +68,9 @@ export const useBackgroundImage = () => {
         (v) => v.fileId !== fileId,
       );
       setBackgroundImageList(newBackgroundImages);
-    } catch (error) {
-      console.error("Failed to delete background image:", error);
+    } catch (err) {
+      error(err as string);
+      console.error("Failed to delete background image:", err);
     }
   };
 
@@ -77,6 +83,7 @@ export const useBackgroundImage = () => {
 };
 
 export const useBackgroundImageList = () => {
+  const { error } = useTauriDialog();
   const [backgroundImageList, setBackgroundImageList] = useAtom(
     uploadedBackgroundImagesAtom,
   );
@@ -85,6 +92,7 @@ export const useBackgroundImageList = () => {
     const uploadedBackgroundImages = await commands.getBackgroundImages();
 
     if (isError(uploadedBackgroundImages)) {
+      error(uploadedBackgroundImages.error);
       console.error(
         "Failed to load background images:",
         uploadedBackgroundImages.error,

diff --git a/src/hooks/useInputListener.ts b/src/hooks/useInputListener.ts
@@ -1,8 +1,10 @@
 import { commands } from "@/rspc/bindings";
 import { useEffect } from "react";
+import { useTauriDialog } from "./useTauriDialog";
 import { useTauriStore } from "./useTauriStore";
 
 export const useKeydown = () => {
+  const { error } = useTauriDialog();
   const [isDecorated, setDecorated] = useTauriStore("window_decorated", false);
 
   useEffect(() => {
@@ -11,6 +13,7 @@ export const useKeydown = () => {
         await commands.setDecoration(!isDecorated);
         await setDecorated(!isDecorated);
       } catch (e) {
+        error(e as string);
         console.error("Failed to toggle window decoration:", e);
       }
     };
@@ -23,5 +26,5 @@ export const useKeydown = () => {
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isDecorated, setDecorated]);
+  }, [isDecorated, setDecorated, error]);
 };
diff --git a/src/hooks/useTauriDialog.ts b/src/hooks/useTauriDialog.ts
@@ -0,0 +1,62 @@
+import {
+  ask as showAsk,
+  confirm as showConfirm,
+  message as showMessage,
+} from "@tauri-apps/plugin-dialog";
+import { useTranslation } from "react-i18next";
+
+type Kind = "info" | "warning" | "error";
+type TitleType =
+  | "info"
+  | "confirm"
+  | "success"
+  | "warning"
+  | "error"
+  | "unexpected";
+
+export const useTauriDialog = () => {
+  const { t } = useTranslation();
+
+  const ask = async ({
+    title,
+    message,
+    kind,
+  }: { title?: TitleType; message: string; kind?: Kind }): Promise<boolean> => {
+    return await showAsk(message, {
+      title: title ? t(`error.title.${title}`) : undefined,
+      kind,
+    });
+  };
+
+  const confirm = async ({
+    title,
+    message,
+    kind,
+  }: { title?: TitleType; message: string; kind?: Kind }): Promise<boolean> => {
+    return await showConfirm(message, {
+      title: title ? t(`error.title.${title}`) : undefined,
+      kind,
+    });
+  };
+
+  const message = async ({
+    title,
+    message,
+    kind,
+  }: { title?: TitleType; message: string; kind?: Kind }): Promise<void> => {
+    return await showMessage(message, {
+      title: title ? t(`error.title.${title}`) : undefined,
+      kind,
+    });
+  };
+
+  const error = async (errorMessage: string) => {
+    return await message({
+      title: "error",
+      message: errorMessage,
+      kind: "error",
+    });
+  };
+
+  return { ask, confirm, message, error };
+};
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -69,5 +69,16 @@
         "opacity": "Opacity"
       }
     }
+  },
+
+  "error": {
+    "title": {
+      "info": "Info",
+      "confirm": "Confirm",
+      "warning": "Warning",
+      "error": "Error",
+      "success": "Success",
+      "unexpected": "Unexpected Error"
+    }
   }
 }
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
@@ -69,5 +69,16 @@
         "opacity": "透過率"
       }
     }
+  },
+
+  "error": {
+    "title": {
+      "info": "情報",
+      "confirm": "確認",
+      "warning": "警告",
+      "error": "エラー",
+      "success": "成功しました",
+      "unexpected": "予期せぬエラーが発生しました"
+    }
   }
 }