jrshikoku/stateBox/useAllTrainDiagram.js

53 lines
1.6 KiB
JavaScript

import trainList from "@/assets/originData/trainList";
import { AS } from "@/storageControl";
import React, { createContext, useContext, useEffect, useState } from "react";
const initialState = {
allTrainDiagram: undefined,
setAllTrainDiagram: () => {},
};
const AllTrainDiagramContext = createContext(initialState);
export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
export const AllTrainDiagramProvider = ({ children }) => {
const [allTrainDiagram, setAllTrainDiagram] = useState(trainList);
const [keyList, setKeyList] = useState(); // 第二要素
useEffect(
() => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
[allTrainDiagram]
);
useEffect(() => {
fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
.then((res) => res.json())
.then((res) => res.data)
.then((res) => {
const data = {};
res.forEach((d) => {
const keys = Object.keys(d);
data[keys] = d[keys];
});
return data;
})
.then((res) => {
setAllTrainDiagram(res);
AS.setItem("allTrainDiagram", JSON.stringify(res));
})
.catch((d) => {
AS.getItem("allTrainDiagram")
.then((d) => setAllTrainDiagram(JSON.parse(d)))
.catch(() => {
alert("初回の路線情報の取得に失敗しました。");
});
});
}, []);
return (
<AllTrainDiagramContext.Provider
value={{ allTrainDiagram, setAllTrainDiagram, keyList }}
>
{children}
</AllTrainDiagramContext.Provider>
);
};