画面整備

components/Settings/NotificationSettings.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, ScrollView,Clipboard } from "react-native";
+
+import { CheckBox } from "react-native-elements";
+import { AS } from "../../storageControl";
+import { useNotification } from "../../stateBox/useNotifications";
+
+export const NotificationSettings = ({ navigate }) => {
+  const { expoPushToken } = useNotification();
+  const [traInfoEX, setTraInfoEX] = useState(false);
+  const [informations, setInformations] = useState(false);
+  const [strangeTrain, setStrangeTrain] = useState(false);
+  useEffect(() => {
+    AS.getItem("traInfoEX").then(setTraInfoEX);
+    AS.getItem("informations").then(setInformations);
+    AS.getItem("strangeTrain").then(setStrangeTrain);
+  }, []);
+
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity
+            onPress={() => {
+              navigate("settingTopPage");
+            }}
+            style={{
+              flexDirection: "column",
+              flex: 1,
+            }}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: "bold",
+                textAlign: "left",
+                textAlignVertical: "center",
+                color: "white",
+                padding: 10,
+              }}
+            >
+              ＜ 設定/送信
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 20,
+            fontWeight: "bold",
+            textAlign: "center",
+            color: "white",
+            padding: 10,
+          }}
+        >
+          通知設定(β)
+        </Text>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity
+            onPress={() => {
+              fetch(
+                "https://n8n.haruk.in/webhook/jr-shikoku-notification-configurations",
+                {
+                  method: "POST",
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({
+                    token: expoPushToken,
+                    traInfoEX,
+                    informations,
+                    strangeTrain,
+                  }),
+                }
+              ).then(() => {
+                Promise.all([
+                  AS.setItem("traInfoEX", traInfoEX.toString()),
+                  AS.setItem("informations", informations.toString()),
+                  AS.setItem("strangeTrain", strangeTrain.toString()),
+                ]).then(()=>alert("通知の設定を保存、登録しました"));
+              });
+            }}
+            style={{
+              flexDirection: "column",
+              flex: 1,
+            }}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: "bold",
+                textAlign: "right",
+                textAlignVertical: "center",
+                color: "pink",
+                padding: 10,
+              }}
+            >
+              登録実行
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+      </View>
+      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+        <SimpleSwitch
+          bool={traInfoEX}
+          setBool={setTraInfoEX}
+          str="遅延速報EX"
+        />
+        <SimpleSwitch
+          bool={informations}
+          setBool={setInformations}
+          str="運行情報"
+        />
+        <SimpleSwitch
+          bool={strangeTrain}
+          setBool={setStrangeTrain}
+          str="怪レい列車"
+        />
+        <Text style={{fontWeight: "bold", padding: 10 }} onPress={()=>{
+          Clipboard.setString(expoPushToken);
+        }}>
+          通知を受け取りたい項目を選択してください。チェックボックスを選び、右上の「登録実行」を押すと設定が反映され、通知が届くようになります。
+        </Text>
+      </ScrollView>
+    </View>
+  );
+};
+
+const SimpleSwitch = ({ bool, setBool, str }) => (
+  <View style={{ flexDirection: "row" }}>
+    <CheckBox
+      checked={bool == "true" ? true : false}
+      checkedColor="red"
+      onPress={() => setBool(bool == "true" ? "false" : "true")}
+      containerStyle={{
+        flex: 1,
+        backgroundColor: "#00000000",
+        borderColor: "white",
+        alignContent: "center",
+      }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      title={str}
+    />
+  </View>
+);

components/Settings/SettingTopPage.js

@@ -12,11 +12,19 @@ import * as Updates from "expo-updates";
 import { useWindowDimensions } from "react-native";
 import { ListItem } from "native-base";
 import { SwitchArea } from "../atom/SwitchArea";
+import { useNotification } from "../../stateBox/useNotifications";
 
 const versionCode = "5.5.1";
 
-export const SettingTopPage = ({ navigate, testNFC,startPage,setStartPage, updateAndReload }) => {
+export const SettingTopPage = ({
+  navigate,
+  testNFC,
+  startPage,
+  setStartPage,
+  updateAndReload,
+}) => {
   const { width } = useWindowDimensions();
+  const { expoPushToken } = useNotification();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
@@ -102,18 +110,18 @@ export const SettingTopPage = ({ navigate, testNFC,startPage,setStartPage, updat
 
         <View style={{ flex: 1, borderTopWidth: 1, borderColor: "gray" }}>
           <SwitchArea
-              str="起動時に表示する画面"
-              bool={startPage}
-              setBool={setStartPage}
-              falseImage={require("../../assets/configuration/showSetting0.jpg")}
-              trueImage={require("../../assets/configuration/showSetting1.jpg")}
-              falseText={"リンクメニュー"}
-              trueText={"列車位置情報"}
-            /><ListItem
+            str="起動時に表示する画面"
+            bool={startPage}
+            setBool={setStartPage}
+            falseImage={require("../../assets/configuration/showSetting0.jpg")}
+            trueImage={require("../../assets/configuration/showSetting1.jpg")}
+            falseText={"リンクメニュー"}
+            trueText={"列車位置情報"}
+          />
+          <ListItem
             style={{ flexDirection: "row" }}
             onPress={() => navigate("FavoriteSettings")}
           >
-            
             <Text
               style={{
                 fontSize: 20,
@@ -138,6 +146,35 @@ export const SettingTopPage = ({ navigate, testNFC,startPage,setStartPage, updat
               {">"}
             </Text>
           </ListItem>
+          <ListItem
+            style={{ flexDirection: "row" }}
+            onPress={() => navigate("NotificationSettings")}
+            disabled={expoPushToken == ""}
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              通知設定{expoPushToken == "" ? "(通知設定をオンにしてください)" : "(β)"}
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              {">"}
+            </Text>
+          </ListItem>
           <ListItem
             style={{ flexDirection: "row" }}
             onPress={() => navigate("LayoutSettings")}

components/Settings/settings.js

@@ -22,6 +22,7 @@ import { SettingTopPage } from "./SettingTopPage";
 import { LayoutSettings } from "./LayoutSettings";
 import { FavoriteSettings } from "./FavoriteSettings";
 import { WidgetSettings } from "./WidgetSettings";
+import { NotificationSettings } from "./NotificationSettings";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -118,6 +119,23 @@ export default function Setting(props) {
           />
         )}
       </Stack.Screen>
+      <Stack.Screen
+        name="NotificationSettings"
+        options={{
+          //gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => (
+          <NotificationSettings
+            {...props}
+            navigate={navigate}
+          />
+        )}
+      </Stack.Screen>
       <Stack.Screen
         name="WidgetSettings"
         options={{

stateBox/useNotifications.tsx

@@ -28,8 +28,8 @@ Notifications.setNotificationHandler({
 });
 
 function handleRegistrationError(errorMessage: string) {
-  alert(errorMessage);
-  throw new Error(errorMessage);
+  console.log(errorMessage);
+  //throw new Error(errorMessage);
 }
 
 async function registerForPushNotificationsAsync() {
@@ -135,19 +135,8 @@ export const NotificationProvider: FC<Props> = ({ children }) => {
         Notifications.removeNotificationSubscription(responseListener.current);
     };
   }, []);
-  useEffect(() => {
-    if (expoPushToken) {
-      //alert(expoPushToken);
-      Clipboard.setString(expoPushToken);
-      //sendPushNotification(expoPushToken);
-    }
-  }, [expoPushToken]);
   return (
-    <NotificationContext.Provider
-      value={{
-        expoPushToken,
-      }}
-    >
+    <NotificationContext.Provider value={{ expoPushToken }}>
       {children}
     </NotificationContext.Provider>
   );