jrshikoku/stateBox/useAreaInfo.tsx

import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  FC,
} from "react";
import useInterval from "../lib/useInterval";

const setoStationID = [
  "Y00",
  "Y01",
  "Y02",
  "Y03",
  "Y04",
  "Y05",
  "Y06",
  "Y07",
  "Y08",
  "Y09",
  "Y10",
  "Y11",
  "Y12",
];

const yosan1StationID = [
  "Y12",
  "Y13",
  "Y14",
  "Y15",
  "Y16",
  "Y17",
  "Y18",
  "Y19",
  "Y20",
  "Y21",
  "Y22",
  "Y23",
  "Y24",
  "Y25",
  "Y26",
  "Y27",
  "Y28",
  "Y29",
  "Y30",
  "Y31",
  "Y32",
  "Y33",
  "Y34",
  "Y35",
  "Y36",
  "Y37",
  "Y38",
  "Y39",
  "Y40",
  "Y41",
  "Y42",
  "Y43",
  "Y44",
  "Y45",
  "Y46",
  "Y47",
  "Y48",
  "Y49",
  "Y50",
  "Y51",
  "Y52",
  "Y53",
  "Y54",
  "Y55",
];

const yosan2StationID = [
  "U00",
  "U01",
  "U02",
  "U02-1",
  "U03",
  "U04",
  "U05",
  "U06",
  "U07",
  "U08",
  "U09",
  "U10",
  "U11",
  "U12",
  "U13",
  "U14",
  "U15",
  "U16",
  "U17",
  "U18",
  "U19",
  "U20",
  "U21",
  "U22",
  "U23",
  "U24",
  "U25",
  "U26",
  "U27",
  "U28",
  "S06",
  "S07",
  "S08",
  "S09",
  "S10",
  "S11",
  "S12",
  "S13",
  "S14",
  "S15",
  "S16",
  "S17",
  "S18",
];

const dosan1StationID = [
  "D12",
  "D13",
  "D14",
  "D15",
  "D16",
  "D17",
  "D18",
  "D19",
  "D20",
  "D21",
  "D22",
  "D23",
  "D24",
  "D25",
  "D26",
  "D27",
  "D28",
  "D29",
  "D30",
  "D31",
  "D32",
  "D33",
  "D34",
  "D35",
  "D36",
  "D37",
  "D38",
  "D39",
  "D40",
  "D41",
  "D42",
  "D43",
  "D44",
  "D45",
];
const dosan2StationID = [
  "K00",
  "K01",
  "K02",
  "K03",
  "K04",
  "K05",
  "K06",
  "K07",
  "K08",
  "K08-1",
  "K09",
  "K10",
  "K11",
  "K12",
  "K13",
  "K14",
  "K15",
  "K16",
  "K17",
  "K18",
  "K19",
  "K20",
  "K21",
  "K22",
  "K23",
  "K24",
  "K25",
  "K26",
];

const kotokuStationID = [
  "T00",
  "T01",
  "T02",
  "T03",
  "T04",
  "T05",
  "T06",
  "T07",
  "T08",
  "T09",
  "T10",
  "T11",
  "T12",
  "T13",
  "T14",
  "T15",
  "T16",
  "T17",
  "T18",
  "T19",
  "T20",
  "T21",
  "T22",
  "T23",
  "T24",
  "T25",
  "T26",
  "T27",
  "T28",
];

const mugiStationID = [
  "T00",
  "M00",
  "M01",
  "M02",
  "M03",
  "M04",
  "M05",
  "M06",
  "M07",
  "M08",
  "M09",
  "M10",
  "M11",
  "M12",
  "M13",
  "M14",
  "M15",
  "M16",
  "M17",
  "M18",
  "M19",
  "M20",
  "M21",
  "M22",
  "M23",
  "M24",
  "M25",
  "M26",
  "M27",
];

const tokushimaStationID = [
  "T00",
  "T01",
  "B00",
  "B01",
  "B02",
  "B03",
  "B04",
  "B05",
  "B06",
  "B07",
  "B08",
  "B09",
  "B10",
  "B11",
  "B12",
  "B13",
  "B14",
  "B15",
  "B16",
  "B17",
  "B18",
  "B19",
  "B20",
  "B21",
  "B22",
  "B23",
  "B24",
  "B25",
];

const narutoStationID = [
  "T00",
  "T01",
  "T02",
  "T03",
  "T04",
  "N04",
  "N05",
  "N06",
  "N07",
  "N08",
  "N09",
  "N10",
];

const yodoStationID = [
  "K26",
  "U28",
  "U27",
  "G27",
  "G28",
  "G29",
  "G30",
  "G31",
  "G32",
  "G33",
  "G34",
  "G35",
  "G36",
  "G37",
  "G38",
  "G39",
  "G40",
  "G41",
  "G42",
  "G43",
  "G44",
  "G45",
  "G46",
  "G47",
];

const areaStationPair = {
  seto: { id: "Y", stationID: setoStationID },
  yosan1: { id: "Y", stationID: yosan1StationID },
  yosan2: { id: "U,S", stationID: yosan2StationID },
  dosan1: { id: "D", stationID: dosan1StationID },
  dosan2: { id: "K", stationID: dosan2StationID },
  kotoku: { id: "T", stationID: kotokuStationID },
  mugi: { id: "M", stationID: mugiStationID },
  tokushima: { id: "B", stationID: tokushimaStationID },
  naruto: { id: "N", stationID: narutoStationID },
  yodo: { id: "G", stationID: yodoStationID },
};

const initialState = {
  areaInfo: "",
  setAreaInfo: () => {},
  areaIconBadgeText: "",
  areaStationID: [],
  isInfo: false,
  setIsInfo: () => {},
};
type initialStateType = {
  areaInfo: string;
  setAreaInfo: (e: string) => void;
  areaIconBadgeText: string;
  areaStationID: string[];
  isInfo: boolean;
  setIsInfo: (e: boolean) => void;
};

const AreaInfoContext = createContext<initialStateType>(initialState);

export const useAreaInfo = () => {
  return useContext(AreaInfoContext);
};
type props = { children: React.ReactNode };
export const AreaInfoProvider: FC<props> = ({ children }) => {
  const [areaInfo, setAreaInfo] = useState("");
  const [areaIconBadgeText, setAreaIconBadgeText] = useState("");
  const [areaStationID, setAreaStationID] = useState([]);
  const [isInfo, setIsInfo] = useState(false);
  const getAreaData = () => {
    fetch(
      "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
    )
      .then((d) => d.text())
      .then((d) => setAreaInfo(d));
    fetch("https://n8n.haruk.in/webhook/jr-shikoku-trainfo-flag")
      .then((d) => d.json())
      .then((d) => {
        if (!d.data) return;
        const lineInfo = d.data.filter((e) => e.area != "genelic");
        const genelicInfo = d.data.filter((e) => e.area == "genelic");
        const text = lineInfo
          .filter((e) => e.status)
          .map((e) => {
            return `${areaStationPair[e.area].id}`;
          });
        let stationIDList = [];
        lineInfo
          .filter((e) => e.status)
          .forEach((e) => {
            stationIDList = stationIDList.concat(
              areaStationPair[e.area].stationID
            );
          });
        const info = genelicInfo[0].status.includes("nodelay") ? true : false;
        setIsInfo(info);
        setAreaStationID(stationIDList);
        setAreaIconBadgeText(
          text.length == 0 ? (info ? "i" : "!") : text.join(",")
        );
      });
  };
  useEffect(() => {
    getAreaData();
  }, []);
  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
  return (
    <AreaInfoContext.Provider
      value={{
        areaInfo,
        setAreaInfo,
        areaIconBadgeText,
        areaStationID,
        isInfo,
        setIsInfo,
      }}
    >
      {children}
    </AreaInfoContext.Provider>
  );
};