運行情報バッジに対象路線記号を追加

App.js

@@ -60,7 +60,7 @@ export default function App() {
   );
 }
 export function AppContainer() {
-  const { areaInfo } = useAreaInfo();
+  const { areaInfo, areaIconBadgeText } = useAreaInfo();
   const navigationRef = React.useRef();
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
@@ -98,7 +98,7 @@ export function AppContainer() {
             headerTransparent: true,
             gestureEnabled: true,
             tabBarIcon: initIcon("train", "Ionicons"),
-            tabBarBadge: areaInfo ? "!" : undefined,
+            tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
           }}
         >
           {(props) => <TNDView {...props} />}

stateBox/useAreaInfo.js

@@ -3,6 +3,7 @@ import useInterval from "../lib/useInterval";
 const initialState = {
   areaInfo: "",
   setAreainfo: () => {},
+  areaIconBadgeText: "",
 };
 
 const AreaInfoContext = createContext(initialState);
@@ -11,18 +12,43 @@ export const useAreaInfo = () => {
   return useContext(AreaInfoContext);
 };
 
+const areaStationPair = {
+  seto: ["Y"],
+  yosan1: ["Y"],
+  yosan2: ["U"],
+  dosan1: ["D"],
+  dosan2: ["K"],
+  kotoku: ["T"],
+  mugi: ["M"],
+  tokushima: ["B"],
+  naruto: ["N"],
+  yodo: ["G"],
+};
 export const AreaInfoProvider = ({ children }) => {
   const [areaInfo, setAreaInfo] = useState("");
-  const getAreaData = () =>
+  const [areaIconBadgeText, setAreaIconBadgeText] = useState("");
+  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 text = d.data
+          .filter((e) => e.status)
+          .map((e) => `${areaStationPair[e.area].join("")}`);
+        setAreaIconBadgeText(text.length == 0 ? "!" : text.join(","));
+      });
+  };
   useEffect(getAreaData, []);
   useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
   return (
-    <AreaInfoContext.Provider value={{ areaInfo, setAreaInfo }}>
+    <AreaInfoContext.Provider
+      value={{ areaInfo, setAreaInfo, areaIconBadgeText }}
+    >
       {children}
     </AreaInfoContext.Provider>
   );