feat: Handle network error on library panels

- `fetch` throws only when network error happens.
miyanokomiya · Oct 21, 2024 · 1e44806 · 1e44806
1 parent 166f0a6
commit 1e44806
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 53 deletions.
diff --git a/src/components/molecules/ShapeLibraryGroup.tsx b/src/components/molecules/ShapeLibraryGroup.tsx
@@ -5,6 +5,7 @@ import { getAssetSearchTag } from "../../utils/route";
 import { newKeywordFilter } from "../../composables/keywordFilter";
 import { ClickOrDragHandler } from "../atoms/ClickOrDragHandler";
 import { Size } from "../../models";
+import { useTranslation } from "react-i18next";
 
 type IconEventHandler = (url: string, id: string, size: Size) => void;
 
@@ -75,17 +76,26 @@ interface ShapeLibraryGroupProps {
 
 const ShapeLibraryGroup: React.FC<ShapeLibraryGroupProps> = ({ name, type, size, onIconDragStart, onIconClick }) => {
   const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string>();
   const [indexData, setIndexData] = useState<ListItemData>();
   const basePath = `${baseURL}${type}/${name}`;
+  const { t } = useTranslation();
 
   const fetchIndex = useCallback(async () => {
     if (indexData) return;
 
-    const res = await fetch(`${basePath}/index.json`);
-    const data = await res.json();
-    setIndexData(data);
-    setLoading(false);
-  }, [indexData, basePath]);
+    try {
+      setLoading(true);
+      const res = await fetch(`${basePath}/index.json`);
+      const data = await res.json();
+      setIndexData(data);
+      setErrorMessage(undefined);
+    } catch (e) {
+      setErrorMessage(t("error.network.maybe_offline"));
+    } finally {
+      setLoading(false);
+    }
+  }, [indexData, basePath, t]);
 
   useEffect(() => {
     fetchIndex();
@@ -134,57 +144,59 @@ const ShapeLibraryGroup: React.FC<ShapeLibraryGroupProps> = ({ name, type, size,
     });
   }, [filteredIndexData, indexDataForSearch, sortedIndexData]);
 
+  if (loading) {
+    return <div className="py-2 text-center">Loading...</div>;
+  }
+
+  if (errorMessage) {
+    return <div className="py-2 text-red-500 font-semibold">{errorMessage}</div>;
+  }
+
   return (
     <div>
-      {loading ? (
-        <div>Loading...</div>
+      <div className="py-1">
+        <TextInput
+          value={keyword}
+          onChange={handleKeywordChange}
+          placeholder="Search items"
+          autofocus
+          keepFocus
+          clearable
+        />
+      </div>
+      {rootItems ? (
+        rootItems.length === 0 ? (
+          <div className="p-4 text-center">No result</div>
+        ) : (
+          <ul className="p-1 flex flex-wrap gap-1">
+            {rootItems.map(({ url, id, name }) => {
+              return (
+                <IconItem
+                  key={url}
+                  url={url}
+                  name={name}
+                  id={id}
+                  size={size}
+                  onDragStart={onIconDragStart}
+                  onClick={onIconClick}
+                />
+              );
+            })}
+          </ul>
+        )
       ) : (
-        <div>
-          <div className="py-1">
-            <TextInput
-              value={keyword}
-              onChange={handleKeywordChange}
-              placeholder="Search items"
-              autofocus
-              keepFocus
-              clearable
-            />
-          </div>
-          {rootItems ? (
-            rootItems.length === 0 ? (
-              <div className="p-4 text-center">No result</div>
-            ) : (
-              <ul className="p-1 flex flex-wrap gap-1">
-                {rootItems.map(({ url, id, name }) => {
-                  return (
-                    <IconItem
-                      key={url}
-                      url={url}
-                      name={name}
-                      id={id}
-                      size={size}
-                      onDragStart={onIconDragStart}
-                      onClick={onIconClick}
-                    />
-                  );
-                })}
-              </ul>
-            )
-          ) : (
-            sortedIndexData.map(([key, item]) => (
-              <ListItem
-                key={key}
-                name={key}
-                item={item as ListItemData}
-                level={0}
-                path={basePath}
-                size={size}
-                onIconDragStart={onIconDragStart}
-                onIconClick={onIconClick}
-              />
-            ))
-          )}
-        </div>
+        sortedIndexData.map(([key, item]) => (
+          <ListItem
+            key={key}
+            name={key}
+            item={item as ListItemData}
+            level={0}
+            path={basePath}
+            size={size}
+            onIconDragStart={onIconDragStart}
+            onIconClick={onIconClick}
+          />
+        ))
       )}
     </div>
   );

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -24,6 +24,7 @@ const en = {
     "term.workspace":
       'A workspace is a folder where a diagram data is saved. Each sheet is saved as a separate file. All asset files are saved in the "assets" folder.',
     "term.make_polygon": "To make a polygon, source line has to be neither an elbow nor a segment.",
+    "error.network.maybe_offline": "Network error happened. The device may be offline.",
   },
 };
 type TranslationResource = typeof en;
@@ -49,6 +50,7 @@ const ja: TranslationResource = {
     "term.workspace":
       'ワークスペースは、ダイアグラムの保存先となるフォルダです。各シートは別々のファイルとして保存され、アセットファイルは"assets"フォルダに格納されます。',
     "term.make_polygon": "エルボー、あるいは単一線分はポリゴン化できません。",
+    "error.network.maybe_offline": "通信エラーが発生しました。端末がオフラインの可能性があります。",
   },
 };