110 lines
No EOL
3.3 KiB
TypeScript
110 lines
No EOL
3.3 KiB
TypeScript
import { View, Text, StyleSheet, Image, Appearance } from 'react-native'
|
|
import React, { useState } from 'react'
|
|
import { SIZES } from '../../../constants/theme'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { ButtonSetting, ToggleSetting } from '../../../components'
|
|
import { useTheme } from '../../contexts/ThemeContext'
|
|
import { deleteExpenses, DEV_populateDatabase } from '../../../services/database'
|
|
import { useAuth } from '../../contexts/AuthContext'
|
|
import { TouchableOpacity } from 'react-native-gesture-handler'
|
|
|
|
|
|
export default function userSettings() {
|
|
const {onLogout} = useAuth();
|
|
const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme();
|
|
|
|
const backgroundColor = colors.backgroundColor
|
|
styles.text = {...styles.text, color: colors.primaryText}
|
|
|
|
const [systemTheme, setSystemTheme] = useState<boolean>(isSystemTheme!)
|
|
const [darkMode, setDarkMode] = useState<boolean>(theme === "dark" ? true : false)
|
|
|
|
const handleSystemTheme = () => {
|
|
const newTheme = darkMode ? "dark" : "light"
|
|
if(systemTheme){
|
|
applyTheme!(newTheme)
|
|
}else{
|
|
applySystemTheme!()
|
|
}
|
|
|
|
setSystemTheme(prev => !prev)
|
|
|
|
}
|
|
|
|
const handleDarkMode = () => {
|
|
const newTheme = darkMode ? "light" : "dark"
|
|
|
|
setDarkMode(prev => !prev)
|
|
applyTheme!(newTheme);
|
|
}
|
|
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
|
|
<View>
|
|
<View style={styles.header}>
|
|
<Image style={{height: 70, width: 70, borderRadius: 200}}source={require("../../../assets/images/profile.jpg")} height={60} width={20} resizeMode='cover'/>
|
|
<Text style={{fontSize: SIZES.xxLarge, color: colors.primaryText}}>My Profile</Text>
|
|
<View></View>
|
|
</View>
|
|
<View style={styles.settingsContainer}>
|
|
<ToggleSetting settingsTitle='Use System Theme' value={systemTheme} onChange={handleSystemTheme}/>
|
|
<ToggleSetting settingsTitle='Dark Mode' disabled={systemTheme} onChange={handleDarkMode} value={darkMode}/>
|
|
<ButtonSetting settingsTitle='Reset Expenses' onPress={() => {
|
|
deleteExpenses().then(() => {
|
|
console.log("Expenses Deleted!");
|
|
})}}
|
|
/>
|
|
<ButtonSetting settingsTitle='Populate Database' onPress={() => {
|
|
const del = async () => {
|
|
await DEV_populateDatabase()
|
|
}
|
|
del()
|
|
}}/>
|
|
</View>
|
|
|
|
</View>
|
|
<View style={styles.bottomNavigation}>
|
|
<TouchableOpacity onPress={onLogout}>
|
|
<View style={[styles.button, {backgroundColor: colors.accentColor}]}>
|
|
<Text style={{fontSize: SIZES.large, color: colors.primaryText}}>Sign Out</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "space-between"
|
|
},
|
|
|
|
header:{
|
|
flexDirection: 'row',
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
margin: 10,
|
|
},
|
|
settingsContainer: {
|
|
marginHorizontal: 10
|
|
},
|
|
|
|
upperPart:{
|
|
flex: 1
|
|
},
|
|
|
|
bottomNavigation:{
|
|
marginBottom: 20,
|
|
alignItems:"center"
|
|
|
|
},
|
|
button:{
|
|
borderRadius: 80,
|
|
minHeight: 60,
|
|
justifyContent: "center",
|
|
paddingHorizontal: 20
|
|
},
|
|
text: {}
|
|
}) |