413 lines
12 KiB
JavaScript
413 lines
12 KiB
JavaScript
import { useMutation } from "@apollo/react-hooks";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { useNavigation, useTheme } from "@react-navigation/native";
|
|
import * as Device from "expo-device";
|
|
import * as Localization from "expo-localization";
|
|
import * as Notifications from "expo-notifications";
|
|
import gql from "graphql-tag";
|
|
import React, { useContext, useEffect, useRef, useState } from "react";
|
|
import {
|
|
AppState,
|
|
Linking,
|
|
Platform,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
|
|
import { Modalize } from "react-native-modalize";
|
|
import i18n from "../../../i18n";
|
|
import { moderateScale } from "../../utils/scaling";
|
|
|
|
import {
|
|
updateUser,
|
|
profile,
|
|
pushToken,
|
|
updateNotificationStatus,
|
|
} from "../../apollo/server";
|
|
import {
|
|
CustomIcon,
|
|
FlashMessage,
|
|
Spinner,
|
|
TextDefault,
|
|
WrapperView,
|
|
} from "../../components";
|
|
import SwitchBtn from "../../components/FdSwitch/SwitchBtn";
|
|
import UserContext from "../../context/User";
|
|
import { alignment } from "../../utils/alignment";
|
|
import { ICONS_NAME } from "../../utils/constant";
|
|
import { scale } from "../../utils/scaling";
|
|
import SettingModal from "./components/SettingModal";
|
|
import useStyle from "./styles";
|
|
|
|
const languageTypes = [
|
|
{ value: "English", code: "en", index: 0 },
|
|
{ value: "français", code: "fr", index: 1 },
|
|
{ value: "ភាសាខ្មែរ", code: "km", index: 2 },
|
|
{ value: "中文", code: "zh", index: 3 },
|
|
{ value: "Deutsche", code: "de", index: 4 },
|
|
{ value: "Arabic", code: "ar", index: 5 },
|
|
];
|
|
|
|
const PUSH_TOKEN = gql`
|
|
${pushToken}
|
|
`;
|
|
const UPDATE_NOTIFICATION_TOKEN = gql`
|
|
${updateNotificationStatus}
|
|
`;
|
|
const PROFILE = gql`
|
|
${profile}
|
|
`;
|
|
const UPDATEUSER = gql`
|
|
${updateUser}
|
|
`;
|
|
function Settings() {
|
|
const styles = useStyle();
|
|
const { colors } = useTheme();
|
|
const navigation = useNavigation();
|
|
const { profile, logout } = useContext(UserContext);
|
|
|
|
const [languageName, languageNameSetter] = useState("English");
|
|
const [offerNotification, offerNotificationSetter] = useState(
|
|
profile.is_offer_notification
|
|
);
|
|
const [orderNotification, orderNotificationSetter] = useState(
|
|
profile.is_order_notification
|
|
);
|
|
const [activeRadio, activeRadioSetter] = useState(languageTypes[0].index);
|
|
const [appState, setAppState] = useState(AppState.currentState);
|
|
const [uploadToken] = useMutation(PUSH_TOKEN);
|
|
const [updateUserInfo] = useMutation(UPDATEUSER);
|
|
const [mutate, { loading }] = useMutation(UPDATE_NOTIFICATION_TOKEN, {
|
|
onCompleted,
|
|
onError,
|
|
refetchQueries: [{ query: PROFILE }],
|
|
});
|
|
const modalizeRef = useRef(null);
|
|
const modalizeRef1 = useRef(null);
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: i18n.t("titleSettings"),
|
|
headerRight: null,
|
|
});
|
|
selectLanguage();
|
|
checkPermission();
|
|
}, [navigation]);
|
|
|
|
const _handleAppStateChange = async (nextAppState) => {
|
|
if (nextAppState === "active") {
|
|
let token = null;
|
|
const permission = await getPermission();
|
|
if (permission === "granted") {
|
|
if (!profile.notificationToken) {
|
|
token = (await Notifications.getExpoPushTokenAsync()).data;
|
|
uploadToken({ variables: { token } });
|
|
}
|
|
offerNotificationSetter(profile.is_offer_notification);
|
|
orderNotificationSetter(profile.is_order_notification);
|
|
} else {
|
|
offerNotificationSetter(false);
|
|
orderNotificationSetter(false);
|
|
}
|
|
}
|
|
setAppState(nextAppState);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const subscription = AppState.addEventListener(
|
|
"change",
|
|
_handleAppStateChange
|
|
);
|
|
return () => {
|
|
subscription.remove("change", _handleAppStateChange);
|
|
};
|
|
}, []);
|
|
|
|
async function checkPermission() {
|
|
const permission = await getPermission();
|
|
if (permission !== "granted") {
|
|
offerNotificationSetter(false);
|
|
orderNotificationSetter(false);
|
|
} else {
|
|
offerNotificationSetter(profile.is_offer_notification);
|
|
orderNotificationSetter(profile.is_order_notification);
|
|
}
|
|
}
|
|
|
|
async function getPermission() {
|
|
const { status } = await Notifications.getPermissionsAsync();
|
|
return status;
|
|
}
|
|
|
|
async function selectLanguage() {
|
|
const lang = await AsyncStorage.getItem("enatega-language");
|
|
if (lang) {
|
|
const defLang = languageTypes.findIndex((el) => el.code === lang);
|
|
const langName = languageTypes[defLang].value;
|
|
activeRadioSetter(defLang);
|
|
languageNameSetter(langName);
|
|
}
|
|
}
|
|
|
|
const onSelectedLanguage = async (active) => {
|
|
const languageInd = active;
|
|
if (Platform.OS === "android") {
|
|
const localization = await Localization.getLocalizationAsync();
|
|
localization.locale = languageTypes[languageInd].code;
|
|
await AsyncStorage.setItem(
|
|
"enatega-language",
|
|
languageTypes[languageInd].code
|
|
);
|
|
i18n.locale = languageTypes[languageInd].code;
|
|
const lang = await AsyncStorage.getItem("enatega-language");
|
|
console.log(lang);
|
|
const defLang = languageTypes.findIndex((el) => el.code === lang);
|
|
const langName = languageTypes[defLang].value;
|
|
activeRadioSetter(defLang);
|
|
languageNameSetter(langName);
|
|
}
|
|
};
|
|
|
|
const onClose = () => {
|
|
modalizeRef.current.close();
|
|
};
|
|
|
|
function onCompleted() {
|
|
FlashMessage({
|
|
message: i18n.t("notificationUpdate"),
|
|
});
|
|
}
|
|
|
|
function onError(error) {
|
|
try {
|
|
FlashMessage({
|
|
message: error.networkError.result.errors[0].message,
|
|
});
|
|
} catch (err) {}
|
|
}
|
|
|
|
async function updateNotificationStatus(notificationCheck) {
|
|
let orderNotify, offerNotify;
|
|
if (!Device.isDevice) {
|
|
FlashMessage({
|
|
message: "Notification do not work on simulator",
|
|
});
|
|
return;
|
|
}
|
|
|
|
const permission = await getPermission();
|
|
if (!profile.notificationToken || permission !== "granted") {
|
|
Linking.openSettings();
|
|
}
|
|
if (notificationCheck === "offer") {
|
|
offerNotificationSetter(!offerNotification);
|
|
orderNotify = orderNotification;
|
|
offerNotify = !offerNotification;
|
|
}
|
|
|
|
if (notificationCheck === "order") {
|
|
orderNotificationSetter(!orderNotification);
|
|
orderNotify = !orderNotification;
|
|
offerNotify = offerNotification;
|
|
}
|
|
mutate({
|
|
variables: {
|
|
offerNotification: offerNotify,
|
|
orderNotification: orderNotify,
|
|
},
|
|
});
|
|
}
|
|
|
|
async function updateUserInformation() {
|
|
console.log("profile data", profile);
|
|
updateUserInfo({
|
|
variables: {
|
|
name: profile.name,
|
|
phone: profile.phone,
|
|
is_active: false,
|
|
},
|
|
});
|
|
}
|
|
return (
|
|
<WrapperView>
|
|
{loading && (
|
|
<View style={{ ...StyleSheet.absoluteFill }}>
|
|
<Spinner />
|
|
</View>
|
|
)}
|
|
<View style={[styles.flex, styles.mainContainer]}>
|
|
<View style={alignment.Plarge}>
|
|
{Platform.OS === "android" && (
|
|
<View style={[styles.languageContainer, styles.shadow]}>
|
|
<View style={styles.changeLanguage}>
|
|
<View style={styles.headingLanguage}>
|
|
<TextDefault
|
|
numberOfLines={1}
|
|
textColor={colors.fontSecondColor}
|
|
medium
|
|
H5
|
|
>
|
|
{i18n.t("language")}
|
|
</TextDefault>
|
|
<TextDefault medium H5>
|
|
({languageName})
|
|
</TextDefault>
|
|
</View>
|
|
<TouchableOpacity
|
|
activeOpacity={0.5}
|
|
onPress={() => modalizeRef.current.open("top")}
|
|
style={styles.button}
|
|
>
|
|
<CustomIcon
|
|
name={ICONS_NAME.Pencil}
|
|
size={scale(22)}
|
|
color={colors.fontMainColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
)}
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
updateNotificationStatus("offer");
|
|
}}
|
|
style={[styles.notificationContainer, styles.shadow]}
|
|
>
|
|
<View style={styles.notificationChekboxContainer}>
|
|
<TextDefault
|
|
numberOfLines={1}
|
|
textColor={colors.statusSecondColor}
|
|
>
|
|
{" "}
|
|
{i18n.t("receiveOffers")}{" "}
|
|
</TextDefault>
|
|
<SwitchBtn
|
|
isEnabled={offerNotification}
|
|
onPress={() => {
|
|
updateNotificationStatus("offer");
|
|
}}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => {
|
|
updateNotificationStatus("order");
|
|
}}
|
|
style={[styles.notificationContainer, styles.shadow]}
|
|
>
|
|
<View style={styles.notificationChekboxContainer}>
|
|
<TextDefault
|
|
numberOfLines={1}
|
|
textColor={colors.statusSecondColor}
|
|
>
|
|
{" "}
|
|
{i18n.t("getUpdatesText")}{" "}
|
|
</TextDefault>
|
|
<SwitchBtn
|
|
isEnabled={orderNotification}
|
|
onPress={() => {
|
|
updateNotificationStatus("order");
|
|
}}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => modalizeRef1.current.open("top")}
|
|
style={[styles.notificationContainer, styles.shadow]}
|
|
>
|
|
<View style={styles.notificationChekboxContainer}>
|
|
<TextDefault numberOfLines={1} textColor={"red"}>
|
|
{" "}
|
|
{i18n.t("delAcc")}{" "}
|
|
</TextDefault>
|
|
<CustomIcon
|
|
name={ICONS_NAME.Trash}
|
|
size={scale(28)}
|
|
color={"red"}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<TextDefault
|
|
textColor={colors.fontSecondColor}
|
|
style={alignment.MBsmall}
|
|
center
|
|
>
|
|
{i18n.t("rightsReserved")}
|
|
</TextDefault>
|
|
|
|
{/* Modal for language Changes */}
|
|
<Modalize
|
|
ref={modalizeRef}
|
|
adjustToContentHeight
|
|
handlePosition="inside"
|
|
avoidKeyboardLikeIOS={Platform.select({
|
|
ios: true,
|
|
android: false,
|
|
})}
|
|
keyboardAvoidingOffset={2}
|
|
keyboardAvoidingBehavior="height"
|
|
>
|
|
<SettingModal
|
|
onClose={onClose}
|
|
onSelectedLanguage={onSelectedLanguage}
|
|
activeRadio={activeRadio}
|
|
/>
|
|
</Modalize>
|
|
{/* Modal for Delete Account */}
|
|
<Modalize
|
|
ref={modalizeRef1}
|
|
adjustToContentHeight
|
|
handlePosition="inside"
|
|
avoidKeyboardLikeIOS={Platform.select({
|
|
ios: true,
|
|
android: true,
|
|
})}
|
|
keyboardAvoidingOffset={2}
|
|
keyboardAvoidingBehavior="height"
|
|
>
|
|
<View style={{ flex: 1, alignItems: "center" }}>
|
|
<TextDefault bolder H5 style={{ marginTop: 20 }}>
|
|
{i18n.t("delAccText")}
|
|
</TextDefault>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={{
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: colors.buttonBackgroundBlue,
|
|
borderRadius: moderateScale(10),
|
|
width: "70%",
|
|
padding: moderateScale(15),
|
|
...alignment.MTlarge,
|
|
}}
|
|
onPress={async () => {
|
|
await updateUserInformation();
|
|
logout();
|
|
navigation.reset({
|
|
routes: [{ name: "Menu" }],
|
|
});
|
|
}}
|
|
>
|
|
<TextDefault center>Delete Account</TextDefault>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
style={[styles.width100, alignment.PBlarge, alignment.PTlarge]}
|
|
onPress={() => onClose()}
|
|
>
|
|
<TextDefault center>{i18n.t("cancel")}</TextDefault>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Modalize>
|
|
</WrapperView>
|
|
);
|
|
}
|
|
export default Settings;
|