jrshikoku/components/settings.js

import React, { useState, useEffect, useLayoutEffect } from "react";
import { View, Text, TouchableOpacity, Linking } from "react-native";
import * as ExpoFelicaReader from "../modules/expo-felica-reader/src";
import * as Updates from "expo-updates";
import StatusbarDetect from "../StatusbarDetect";
import { AS } from "../storageControl";
var Status = StatusbarDetect();
import { Switch } from "react-native-elements";

export default function Setting(props) {
  const {
    navigation: { navigate },
  } = props;
  const [iconSetting, setIconSetting] = useState(false);
  const [mapSwitch, setMapSwitch] = useState(false);
  const [stationMenu, setStationMenu] = useState(false);
  const [usePDFView, setUsePDFView] = useState(false);
  const [trainMenu, setTrainMenu] = useState(false);
  const [trainPosition, setTrainPosition] = useState(false);
  useLayoutEffect(() => {
    AS.getItem("iconSwitch").then(setIconSetting);
    AS.getItem("mapSwitch").then(setMapSwitch);
    AS.getItem("stationSwitch").then(setStationMenu);
    AS.getItem("usePDFView").then(setUsePDFView);
    AS.getItem("trainSwitch").then(setTrainMenu);
    AS.getItem("trainPositionSwitch").then(setTrainPosition);
  }, []);
  const testNFC = async () => {
    const resulit = await ExpoFelicaReader.scan();
    alert(resulit);
  };
  const updateAndReload = () => {
    Promise.all([
      AS.setItem("iconSwitch", iconSetting.toString()),
      AS.setItem("mapSwitch", mapSwitch.toString()),
      AS.setItem("stationSwitch", stationMenu.toString()),
      AS.setItem("usePDFView", usePDFView.toString()),
      AS.setItem("trainSwitch", trainMenu.toString()),
      AS.setItem("trainPositionSwitch", trainPosition.toString()),
    ]).then(() => {
      Updates.reloadAsync();
    });
  };
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ backgroundColor: "#0099CC" }}>
          <Text
            style={{
              fontSize: 30,
              fontWeight: "bold",
              textAlign: "center",
              color: "white",
              padding: 10,
            }}
          >
            設定画面
          </Text>
        </View>
        <View style={{ flex: 1 }}>
          <SwitchArea
            str="列車アイコンを表示する"
            bool={iconSetting}
            setBool={setIconSetting}
          />
          <SwitchArea
            str="マップを表示する(beta)"
            bool={mapSwitch}
            setBool={setMapSwitch}
          />
          <SwitchArea
            str="駅メニューを表示"
            bool={stationMenu}
            setBool={setStationMenu}
          />
          <SwitchArea
            str="時刻表PDFをアプリ外で表示"
            bool={usePDFView}
            setBool={setUsePDFView}
          />
          <SwitchArea
            str="列車メニュー"
            bool={trainMenu}
            setBool={setTrainMenu}
          />
          <SwitchArea
            str="列車現在位置表示(alpha)"
            bool={trainPosition}
            setBool={setTrainPosition}
          />
          <View style={{ flexDirection: "row", padding: 10 }}>
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              内部バージョン: 5.0
            </Text>
            <View style={{ flex: 1 }} />
          </View>
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 10 }}
            //onPress={testNFC}
          >
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              releaseChannel: {Updates.channel}
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 10 }}
            onPress={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
              )
            }
          >
            <Text
              style={{
                fontSize: 25,
                alignItems: "center",
                alignContent: "center",
                textAlign: "center",
                textAlignVertical: "center",
              }}
            >
              プライバシーポリシー
            </Text>
            <View style={{ flex: 1 }} />
          </TouchableOpacity>
        </View>
      </View>
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
        }}
        onPress={updateAndReload}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          設定を保存して再読み込み
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}
const SimpleSwitch = ({ bool, setBool, color }) => (
  <Switch
    value={bool == "true" ? true : false}
    color={bool == "true" ? color : null}
    onValueChange={(value) => setBool(value.toString())}
  />
);
const SwitchArea = ({ str, bool, setBool }) => {
  return (
    <View style={{ flexDirection: "row", padding: 10 }}>
      <Text
        style={{
          fontSize: 25,
          alignItems: "center",
          alignContent: "center",
          textAlign: "center",
          textAlignVertical: "center",
        }}
      >
        {str}
      </Text>
      <View style={{ flex: 1 }} />
      <SimpleSwitch bool={bool} setBool={setBool} color="red" />
    </View>
  );
};