jrshikoku/App.js

import React, { useEffect, useState, useRef } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Platform, UIManager, Text, Clipboard } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import * as Device from "expo-device";
import * as Notifications from "expo-notifications";
import Constants from "expo-constants";
import { UpdateAsync } from "./UpdateAsync.js";
import { AS } from "./storageControl";
import TNDView from "./ndView";
import { LogBox } from "react-native";
import useInterval from "./lib/useInterval";
import { HeaderConfig } from "./lib/HeaderConfig";
import { initIcon } from "./lib/initIcon";
import {
  useFavoriteStation,
  FavoriteStationProvider,
} from "./stateBox/useFavoriteStation";
import { Top } from "./Top.js";
import { MenuPage } from "./MenuPage.js";
import {
  useCurrentTrain,
  CurrentTrainProvider,
} from "./stateBox/useCurrentTrain.js";
import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
import {
  useBusAndTrainData,
  BusAndTrainDataProvider,
} from "./stateBox/useBusAndTrainData.js";
import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
import { SheetProvider } from "react-native-actions-sheet";
import "./components/ActionSheetComponents/sheets.js";
import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
import { SafeAreaProvider } from "react-native-safe-area-context";
LogBox.ignoreLogs([
  "ViewPropTypes will be removed",
  "ColorPropType will be removed",
]);
const Tab = createBottomTabNavigator();
if (Platform.OS === "android") {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});
async function registerForPushNotificationsAsync() {
  let token;

  if (Platform.OS === "android") {
    Notifications.setNotificationChannelAsync("default", {
      name: "default",
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: "#FF231F7C",
    });
  }

  if (Device.isDevice) {
    const { status: existingStatus } =
      await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== "granted") {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== "granted") {
      alert("Failed to get push token for push notification!");
      return;
    }
    token = await Notifications.getExpoPushTokenAsync({
      projectId: Constants.expoConfig.extra.eas.projectId,
    });
    console.log(token);
  } else {
    alert("Must use physical device for Push Notifications");
  }

  return token.data;
}
export default function App() {
  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then((token) =>
      setExpoPushToken(token)
    );

    notificationListener.current =
      Notifications.addNotificationReceivedListener((notification) => {
        setNotification(notification);
      });

    responseListener.current =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log(response);
      });

    return () => {
      Notifications.removeNotificationSubscription(
        notificationListener.current
      );
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);
  useEffect(() => UpdateAsync(), []);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <FavoriteStationProvider>
          <TrainDelayDataProvider>
            <CurrentTrainProvider>
              <AreaInfoProvider>
                <AllTrainDiagramProvider>
                  <BusAndTrainDataProvider>
                    <SheetProvider>
                      <Text onPress={() => Clipboard.setString(expoPushToken)}>
                        {expoPushToken}
                      </Text>
                      <AppContainer />
                    </SheetProvider>
                  </BusAndTrainDataProvider>
                </AllTrainDiagramProvider>
              </AreaInfoProvider>
            </CurrentTrainProvider>
          </TrainDelayDataProvider>
        </FavoriteStationProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}
export function AppContainer() {
  const { setBusAndTrainData, setTrainPairData } = useBusAndTrainData();
  useEffect(() => {
    AS.getItem("busAndTrain")
      .then((d) => {
        const returnData = JSON.parse(d);
        setBusAndTrainData(returnData);
      })
      .catch(() => {
        fetch(
          "https://script.google.com/macros/s/AKfycbw0UW6ZeCDgUYFRP0zxpc_Oqfy-91dBdbWv-cM8n3narKp14IyCd2wy5HW7taXcW7E/exec"
        )
          .then((d) => d.json())
          .then((d) => {
            setBusAndTrainData(d);
            AS.setItem("busAndTrain", JSON.stringify(d));
          });
      });
  }, []);
  useEffect(() => {
    AS.getItem("trainPairData")
      .then((d) => {
        const returnData = JSON.parse(d);
        setTrainPairData(returnData);
      })
      .catch(() => {
        fetch(
          "https://script.google.com/macros/s/AKfycbyoBH7_rBwzPmhU1ghRBNTAVuvGltIrZtWxE07gDdhGGlDL9Ip2qk3pFM5u2xtRBl8/exec"
        )
          .then((d) => d.json())
          .then((d) => {
            setTrainPairData(d);
            AS.setItem("trainPairData", JSON.stringify(d));
          });
      });
  }, []);

  const { areaInfo, setAreaInfo } = useAreaInfo();
  const getAreaData = () =>
    fetch(
      "https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
    )
      .then((d) => d.text())
      .then((d) => setAreaInfo(d));
  useEffect(getAreaData, []);
  useInterval(getAreaData, 60000); //60秒毎に全在線列車取得

  return (
    <NavigationContainer name="Root" style={{ flex: 1 }}>
      <Tab.Navigator
        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
      >
        <Tab.Screen
          name="login"
          options={{
            tabBarLabel: "位置情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("barchart", "AntDesign"),
          }}
        >
          {(props) => <Top {...props} />}
        </Tab.Screen>
        <Tab.Screen
          name="menuPage"
          options={{
            tabBarLabel: "リンク",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("ios-radio", "Ionicons"),
          }}
        >
          {(props) => <MenuPage {...props} />}
        </Tab.Screen>
        <Tab.Screen
          name="home"
          options={{
            tabBarLabel: "運行情報",
            headerTransparent: true,
            gestureEnabled: true,
            tabBarIcon: initIcon("md-train", "Ionicons"),
            tabBarBadge: areaInfo ? "!" : undefined,
          }}
        >
          {(props) => <TNDView {...props} />}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}