105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { useRouter } from "expo-router";
|
|
import { useEffect, useState } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
import EnIcon from "@/assets/icons/en_icon.png";
|
|
import VnIcon from "@/assets/icons/vi_icon.png";
|
|
import RotateSwitch from "@/components/rotate-switch";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { DOMAIN, TOKEN } from "@/constants";
|
|
import { useI18n } from "@/hooks/use-i18n";
|
|
import { removeStorageItem } from "@/utils/storage";
|
|
type Todo = {
|
|
userId: number;
|
|
id: number;
|
|
title: string;
|
|
completed: boolean;
|
|
};
|
|
|
|
export default function SettingScreen() {
|
|
const router = useRouter();
|
|
const [data, setData] = useState<Todo | null>(null);
|
|
const { t, locale, setLocale } = useI18n();
|
|
const [isEnabled, setIsEnabled] = useState(locale === "vi");
|
|
// Sync isEnabled state khi locale thay đổi
|
|
useEffect(() => {
|
|
setIsEnabled(locale === "vi");
|
|
}, [locale]);
|
|
|
|
const toggleSwitch = async () => {
|
|
const newLocale = isEnabled ? "en" : "vi";
|
|
await setLocale(newLocale);
|
|
};
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<ThemedText type="title">{t("navigation.setting")}</ThemedText>
|
|
|
|
<View style={styles.settingItem}>
|
|
<ThemedText type="default">{t("common.language")}</ThemedText>
|
|
{/* <Switch
|
|
trackColor={{ false: "#767577", true: "#81b0ff" }}
|
|
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
|
|
ios_backgroundColor="#3e3e3e"
|
|
onValueChange={toggleSwitch}
|
|
value={isEnabled}
|
|
/> */}
|
|
<RotateSwitch
|
|
initialValue={isEnabled}
|
|
onChange={toggleSwitch}
|
|
size="sm"
|
|
offImage={EnIcon}
|
|
onImage={VnIcon}
|
|
/>
|
|
</View>
|
|
|
|
<ThemedView
|
|
style={styles.button}
|
|
onTouchEnd={async () => {
|
|
await removeStorageItem(TOKEN);
|
|
await removeStorageItem(DOMAIN);
|
|
router.navigate("/auth/login");
|
|
}}
|
|
>
|
|
<ThemedText type="defaultSemiBold">{t("auth.logout")}</ThemedText>
|
|
</ThemedView>
|
|
|
|
{data && (
|
|
<ThemedView style={{ marginTop: 20 }}>
|
|
<ThemedText type="default">{data.title}</ThemedText>
|
|
<ThemedText type="default">{data.completed}</ThemedText>
|
|
<ThemedText type="default">{data.id}</ThemedText>
|
|
</ThemedView>
|
|
)}
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: 20,
|
|
gap: 16,
|
|
},
|
|
settingItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderRadius: 8,
|
|
backgroundColor: "rgba(0, 122, 255, 0.1)",
|
|
},
|
|
button: {
|
|
marginTop: 20,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 20,
|
|
backgroundColor: "#007AFF",
|
|
borderRadius: 8,
|
|
},
|
|
});
|