サーバーエラー時のキャッシュ読み取りへの対応

stateBox/useAllTrainDiagram.js

@@ -1,3 +1,4 @@
+import { AS } from "@/storageControl";
 import React, { createContext, useContext, useEffect, useState } from "react";
 const initialState = {
   allTrainDiagram: undefined,
@@ -16,9 +17,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
     [allTrainDiagram]
   );
   useEffect(() => {
-    fetch(
-      "https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original"
-    )
+    fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
       .then((res) => res.json())
       .then((res) => res.data)
       .then((res) => {
@@ -29,31 +28,22 @@ export const AllTrainDiagramProvider = ({ children }) => {
         });
         return data;
       })
-      .then((res) => setAllTrainDiagram(res))
+      .then((res) => {
+        setAllTrainDiagram(res);
+        AS.setItem("allTrainDiagram", JSON.stringify(res));
+      })
       .catch((d) => {
-        alert("allTrainDiagram取得エラー/再取得します");
-        alert(d);
-        fetch(
-          "https://script.google.com/macros/s/AKfycbx_s7RB-xTy-iAslFJg7LfplLV09-hjDXEjdi9kCP_JT45wq17Af_IPOKIOqIfaNDg/exec"
-        )
-          .then((res) => res.json())
-          .then((res) => {
-            const data = {};
-            res.forEach((d) => {
-              const keys = Object.keys(d);
-              data[keys] = d[keys];
-            });
-            return data;
-          })
-          .then((res) => {
-            setAllTrainDiagram(res);
+        AS.getItem("allTrainDiagram")
+          .then((d) => setAllTrainDiagram(JSON.parse(d)))
+          .catch(() => {
+            alert("初回の路線情報の取得に失敗しました。");
           });
       });
   }, []);
 
   return (
     <AllTrainDiagramContext.Provider
-      value={{ allTrainDiagram, setAllTrainDiagram,keyList }}
+      value={{ allTrainDiagram, setAllTrainDiagram, keyList }}
     >
       {children}
     </AllTrainDiagramContext.Provider>