From bc3aca8c4183b4b7740bcbcacce8dfd9c9142e24 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Mon, 10 Mar 2025 17:48:51 +0000
Subject: [PATCH] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E7=94=BB=E9=9D=A2=E3=81=AE?=
 =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=82=92=E4=B8=80=E6=96=89?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Settings/FavoriteSettings.js     |  44 +-------
 components/Settings/LauncherIconSettings.js |  41 +------
 components/Settings/LayoutSettings.js       |  41 +------
 components/Settings/NotificationSettings.js | 115 +++++---------------
 components/Settings/SettingTopPage.js       |  44 +-------
 components/Settings/WidgetSettings.js       |  44 +-------
 components/atom/SheetHeaderItem.tsx         |  48 ++++++++
 7 files changed, 97 insertions(+), 280 deletions(-)
 create mode 100644 components/atom/SheetHeaderItem.tsx

diff --git a/components/Settings/FavoriteSettings.js b/components/Settings/FavoriteSettings.js
index 4c4e0ec..9a08d43 100644
--- a/components/Settings/FavoriteSettings.js
+++ b/components/Settings/FavoriteSettings.js
@@ -4,51 +4,17 @@ import { useNavigation } from "@react-navigation/native";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
 import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            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 }}></View>
-      </View>
+      <SheetHeaderItem
+        title="お気に入り設定"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+      />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         {favoriteStation.map((currentStation, index, array) => (
           <FavoriteSettingsItem
diff --git a/components/Settings/LauncherIconSettings.js b/components/Settings/LauncherIconSettings.js
index 5bcf07c..1321ac4 100644
--- a/components/Settings/LauncherIconSettings.js
+++ b/components/Settings/LauncherIconSettings.js
@@ -14,6 +14,7 @@ import { AS } from "../../storageControl";
 import icons from "../../assets/icons/icons";
 import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons";
 import { widthPercentageToDP } from "react-native-responsive-screen";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const LauncherIconSettings = ({ navigate }) => {
   const { goBack } = useNavigation();
@@ -21,45 +22,7 @@ export const LauncherIconSettings = ({ navigate }) => {
   const [currentIcon] = useState(getAppIconName());
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            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 }}></View>
-      </View>
+      <SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         {currentIcon ? (
           <>
diff --git a/components/Settings/LayoutSettings.js b/components/Settings/LayoutSettings.js
index e92af7b..4020857 100644
--- a/components/Settings/LayoutSettings.js
+++ b/components/Settings/LayoutSettings.js
@@ -4,6 +4,7 @@ import { useNavigation } from "@react-navigation/native";
 import { SwitchArea } from "../atom/SwitchArea";
 import { CheckBox } from "react-native-elements";
 import { TripleSwitchArea } from "../atom/TripleSwitchArea";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const LayoutSettings = ({
   navigate,
@@ -25,45 +26,7 @@ export const LayoutSettings = ({
   const { goBack } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            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 }}></View>
-      </View>
+      <SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ flex: 1 }}>
           <SwitchArea
diff --git a/components/Settings/NotificationSettings.js b/components/Settings/NotificationSettings.js
index 8789347..5e73b45 100644
--- a/components/Settings/NotificationSettings.js
+++ b/components/Settings/NotificationSettings.js
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import * as Clipboard from 'expo-clipboard';
+import * as Clipboard from "expo-clipboard";
 
 import { CheckBox } from "react-native-elements";
 import { AS } from "../../storageControl";
 import { useNotification } from "../../stateBox/useNotifications";
 import { useNavigation } from "@react-navigation/native";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const NotificationSettings = () => {
   const { expoPushToken } = useNotification();
@@ -19,92 +20,36 @@ export const NotificationSettings = () => {
     AS.getItem("strangeTrain").then(setStrangeTrain);
   }, []);
 
+  const setRegister = () => {
+    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("通知の設定を保存、登録しました"));
+    });
+  };
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            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>
+      <SheetHeaderItem
+        title="通知設定(β)"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+        RightItem={{ title: "登録実行", onPress: setRegister }}
+      />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <SimpleSwitch
           bool={traInfoEX}
diff --git a/components/Settings/SettingTopPage.js b/components/Settings/SettingTopPage.js
index 58326dd..bfbe858 100644
--- a/components/Settings/SettingTopPage.js
+++ b/components/Settings/SettingTopPage.js
@@ -15,6 +15,7 @@ import { ListItem } from "@rneui/themed";
 import TouchableScale from "react-native-touchable-scale";
 import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 const versionCode = "6.0";
 
@@ -29,45 +30,10 @@ export const SettingTopPage = ({
   const navigation = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={() => navigation.goBack()}
-            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 }}></View>
-      </View>
+      <SheetHeaderItem title="アプリの設定画面" LeftItem={{
+        title: "閉じる",
+        onPress: () => navigation.goBack(),
+      }} />
       <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
         <View style={{ height: 300, padding: 10 }}>
           <View style={{ flex: 1 }} />
diff --git a/components/Settings/WidgetSettings.js b/components/Settings/WidgetSettings.js
index 25b2628..f5213e5 100644
--- a/components/Settings/WidgetSettings.js
+++ b/components/Settings/WidgetSettings.js
@@ -8,6 +8,7 @@ import { getInfoString } from "../AndroidWidget/InfoWidget";
 import { AS } from "../../storageControl";
 import { nameToWidget } from "../AndroidWidget/widget-task-handler";
 import { ListItem } from "native-base";
+import { SheetHeaderItem } from "../atom/SheetHeaderItem";
 
 export const WidgetSettings = ({ navigate }) => {
   const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
@@ -41,45 +42,10 @@ export const WidgetSettings = ({ navigate }) => {
   }, []);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={goBack}
-            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 }}></View>
-      </View>
+      <SheetHeaderItem
+        title="ウィジェット設定"
+        LeftItem={{ title: "＜ 設定", onPress: goBack }}
+      />
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ alignContent: "center", alignItems: "center" }}>
           <View
diff --git a/components/atom/SheetHeaderItem.tsx b/components/atom/SheetHeaderItem.tsx
new file mode 100644
index 0000000..601a0d1
--- /dev/null
+++ b/components/atom/SheetHeaderItem.tsx
@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { View, Text, TouchableOpacity, TextStyle } from "react-native";
+
+type Props = {
+  LeftItem?: SideItemProps;
+  RightItem?: SideItemProps;
+  title: string;
+};
+
+const textStyle: TextStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+  color: "white",
+  padding: 10,
+  textAlignVertical: "center",
+};
+export const SheetHeaderItem: FC<Props> = (props) => {
+  const { LeftItem, RightItem, title } = props;
+  return (
+    <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+      <View style={{ flex: 1 }}>
+        {LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
+      </View>
+      <Text style={{ textAlign: "center",...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }}>
+        {RightItem ? <SideItem {...RightItem} position="right" /> : <></>}
+      </View>
+    </View>
+  );
+};
+
+type SideItemProps = {
+  onPress: () => void;
+  title: string;
+  position: "left" | "right";
+};
+const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{ flexDirection: "column", flex: 1 }}
+    >
+      <View style={{ flex: 1 }} />
+      <Text style={{ textAlign: position, ...textStyle }}>{title}</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};