useExhibitions をリトライできるようにする (#225)

* fix(client/pages/Index.tsx): add refetch button to handle error and re-fetch data
fix(client/pages/scss/index.module.scss): add styles for error section

* fix(component): change the fallback component to use a div instead of a section to improve semantic correctness

* fix(api.ts): change error messages to japanese to improve localization

* fix(client/hooks/exhibition.ts): add dependency to fetchExhibitions to the useEffect hook

Author: peaks-and-valleys

client/src/api/exhibition.ts

@@ -6,7 +6,7 @@ export async function getExhibitions(): Promise<
 > {
   const response = await fetch(endpoint("/exhibitions"));
   if (!response.ok) {
-    throw new Error("Failed to fetch exhibitions");
+    throw new Error("華展一覧の取得に失敗しました。");
   }
   return response.json();
 }
@@ -22,7 +22,7 @@ export async function getExhibition(
   );
   const response = await fetch(path);
   if (!response.ok) {
-    throw new Error(`Failed to fetch exhibition with ID ${exhibitionId}`);
+    throw new Error(`華展ID ${exhibitionId} の華展情報取得に失敗しました。`);
   }
   return response.json();
 }
@@ -38,7 +38,7 @@ export async function getExhibitionWorkListItems(
   );
   const response = await fetch(path);
   if (!response.ok) {
-    throw new Error(`Failed to fetch works for exhibition with ID ${exhibitionId}`);
+    throw new Error(`華展ID ${exhibitionId} の作品一覧取得に失敗しました。`);
   }
   return response.json();
 }
@@ -54,7 +54,7 @@ export async function getExhibitionWorkListItem(
     .replace("{workId}", String(workId));
   const response = await fetch(path);
   if (!response.ok) {
-    throw new Error(`Failed to fetch work with ID ${workId} for exhibition ${exhibitionId}`);
+    throw new Error(`華展ID ${exhibitionId} の作品ID ${workId} の取得に失敗しました。`);
   }
   return response.json();
 }

client/src/components/Fallback.tsx

@@ -2,8 +2,8 @@ import styles from "./scss/fallback.module.scss";
 
 export default function Fallback({ message, isError }: { message: string; isError?: boolean }) {
   return (
-    <section className={styles.fallback} role="status">
+    <div className={styles.fallback} role="status">
       <p className={isError ? styles.error : styles.normal}>{message}</p>
-    </section>
+    </div>
   );
 }

client/src/hooks/exhibition.ts

@@ -14,31 +14,39 @@ interface UseExhibitionsReturn {
   exhibitions: Record<number, Exhibition>;
   isLoading: boolean;
   errorMessage: string | null;
+  refetch: () => void; // この API が特にデータ取得に失敗する確率が高いので、再取得のための refetch 関数を追加
 }
 
 export function useExhibitions(): UseExhibitionsReturn {
   const [exhibitions, setExhibitions] = useState<Record<number, Exhibition>>({});
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  useEffect(() => {
-    async function fetchExhibitions() {
-      try {
-        setIsLoading(true);
-        setErrorMessage(null);
-        const fetchedExhibitions = await getExhibitions();
-        setExhibitions(fetchedExhibitions);
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Unknown error occurred";
-        console.error("Failed to fetch exhibitions:", error);
-        setErrorMessage(message);
-        setExhibitions({}); // エラー時は空のオブジェクトを設定
-      } finally {
-        setIsLoading(false);
-      }
+
+  const fetchExhibitions = async () => {
+    try {
+      setIsLoading(true);
+      setErrorMessage(null);
+      const fetchedExhibitions = await getExhibitions();
+      setExhibitions(fetchedExhibitions);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error occurred";
+      console.error("Failed to fetch exhibitions:", error);
+      setErrorMessage(message);
+      setExhibitions({}); // エラー時は空のオブジェクトを設定
+    } finally {
+      setIsLoading(false);
     }
+  };
+
+  const refetch = () => {
     fetchExhibitions();
-  }, []);
-  return { exhibitions, isLoading, errorMessage };
+  };
+
+  useEffect(() => {
+    fetchExhibitions();
+  }, [fetchExhibitions]);
+
+  return { exhibitions, isLoading, errorMessage, refetch };
 }
 
 interface UseExhibitionReturn {

client/src/pages/Index.tsx

@@ -45,14 +45,19 @@ function ExhibitionList({ exhibitions }: { exhibitions: Exhibition[] }) {
 }
 
 export default function Index() {
-  const { exhibitions, isLoading, errorMessage } = useExhibitions();
+  const { exhibitions, isLoading, errorMessage, refetch } = useExhibitions();
   const exhibitionList: Exhibition[] = Object.values(exhibitions);
 
   if (isLoading) {
     return <Fallback message="華展一覧を読み込み中..." />;
   }
   if (errorMessage) {
-    return <Fallback message={errorMessage} isError />;
+    return (
+      <section className={styles.errorSection}>
+        <Fallback message={errorMessage} isError />
+        <button onClick={refetch}>再試行</button>
+      </section>
+    );
   }
 
   return (

client/src/pages/scss/index.module.scss

@@ -28,3 +28,10 @@
     }
   }
 }
+
+.errorSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}