rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

Merge branch '41-add-user-settings-modal-on-home-page' into 'main'

Browse source 
Resolve "Add user settings modal on home Page"

Closes #41

See merge request thschleicher/interaktive-systeme!23
This commit is contained in:
jastornig 2023-12-18 17:29:18 +00:00
commit 69f1dd0234
13 changed files with 367 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/(tabs)/_layout.tsx
View file

@ -13,10 +13,6 @@ export default function Layout() {
// const backgroundColor: string = useThemeColor("backgroundColor");
// const tabBarColor: string = useThemeColor("tabBarColor");
const {authState} = useAuth()
useEffect(()=>{
console.log(authState, "in root Layout")
},[authState])
const styles = StyleSheet.create({
sceneContainer: {
@ -53,7 +49,8 @@ export default function Layout() {
tabBarLabel: "Home",
tabBarIcon: ({size, color}) => (
<FontAwesome name="home" size={size} color={color}/>),
unmountOnBlur: true
unmountOnBlur: true,
href: "(tabs)/home/"
}
}/>
<Tabs.Screen name="stats/index" options={

22
app/(tabs)/home/_layout.tsx
View file

@ -2,15 +2,35 @@ import { Stack } from "expo-router";
import { View, Text } from 'react-native'
import React from 'react'
import { useThemeColor } from "../../../hooks/useThemeColor";
import { useTheme } from "../../contexts/ThemeContext";
export default function _Layout() {
const { colors } = useTheme();
return (
<Stack>
<Stack
initialRouteName="index"
screenOptions={{
contentStyle: {
backgroundColor:colors.backgroundColor,
},
headerStyle: {
backgroundColor: colors.backgroundColor
},
headerTintColor: colors.primaryText
}}>
<Stack.Screen name="index" options={{
title: "test",
headerShown: false,
}}/>
<Stack.Screen name="addItem"/>
<Stack.Screen name="userSettings" options={{
animation: "slide_from_left",
title: "User Settings",
headerShown: false,
}}/>
</Stack>
)
}

4
app/(tabs)/home/index.tsx
View file

@ -7,6 +7,7 @@ import useFetch from '../../../hooks/useFetch';
import { useThemeColor } from "../../../hooks/useThemeColor";
import { addExpense } from "../../../services/database";
import { useAuth } from '../../contexts/AuthContext';
import { useRouter } from "expo-router";
export default function Page() {
@ -31,6 +32,7 @@ export default function Page() {
}
});
const router = useRouter();
const {onLogout} = useAuth();
const [plusShow, setPlusShow] = useState(true);
const prevOffset = useRef(0);
@ -73,7 +75,7 @@ export default function Page() {
data={data}
ListHeaderComponent={
<>
<Welcome name="My Dude" image={profile} onPress={onLogout!}></Welcome>
<Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}></Welcome>
<SearchBar placeholder='Type to Search...'></SearchBar>
</>
}

110
app/(tabs)/home/userSettings.tsx Normal file
View file

@ -0,0 +1,110 @@
import { View, Text, StyleSheet, Image, Appearance } from 'react-native'
import React, { useState } from 'react'
import { useThemeColor } from '../../../hooks/useThemeColor'
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 } from '../../../services/database'
import { useAuth } from '../../contexts/AuthContext'
import { TouchableOpacity } from 'react-native-gesture-handler'
const generateStyles = (): void => {
styles.text = {
color: useThemeColor('primaryText')
}
}
export default function userSettings() {
const {onLogout} = useAuth();
const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme();
const backgroundColor = useThemeColor("backgroundColor");
styles.text = {...styles.text, color: useThemeColor("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!");
})}}
/>
</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: {}
})

8
app/_layout.tsx
View file

@ -1,7 +1,8 @@
import { Slot } from 'expo-router';
import React, { useEffect } from 'react';
import { initDatabase } from '../services/database';
import { addCategory, initDatabase } from '../services/database';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
export default function _layout() {
@ -9,10 +10,11 @@ export default function _layout() {
initDatabase();
}, []);
console.log("layout called")
return (
<AuthProvider>
<Slot />
<ThemeProvider>
<Slot />
</ThemeProvider>
</AuthProvider>
)
}

58
app/contexts/AuthContext.tsx
View file

@ -4,9 +4,10 @@ import * as SecureStore from 'expo-secure-store'
interface AuthProps {
authState?: {email: string | null; authenticated: boolean | null; session: string | null};
isLoading?: boolean | null;
onRegister?: (email: string, password: string) => Promise<any>;
onLogin?: (email: string, password: string) => Promise<any>
onLogout?: () => void
onLogin?: (email: string, password: string) => Promise<any>;
onLogout?: () => void;
}
const SESSION_KEY = 'my_session'
@ -50,38 +51,31 @@ export const AuthProvider = ({children}: any) => {
email: string | null;
authenticated: boolean | null;
session : string | null;
isLoading: boolean;
}>({
email: null, authenticated: null, session: null, isLoading: false
email: null, authenticated: null, session: null
});
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
const loadSession = async () => {
setAuthState((prev) => {
return {
...prev,
isLoading: true
}
})
setIsLoading(true)
const session = await getStorageItemAsync(SESSION_KEY)
const email = await getStorageItemAsync(USER_KEY)
if(session && email){
setAuthState({
email: email,
authenticated: true,
session: session,
isLoading: false
if(session !== null && email !== null){
console.log("applied session", session, email)
setAuthState( (prev) => {
return {
email: email,
authenticated: true,
session: session,
}
})
}
setAuthState((prev) => {
return {
...prev,
isLoading: false
}
})
setIsLoading(false)
}
loadSession()
},[])
@ -92,29 +86,23 @@ export const AuthProvider = ({children}: any) => {
}
const login = async (email: string, password: string) => {
setIsLoading(true)
//login functionality goes here
console.log("login called")
setAuthState((prev) => {
return{
...prev,
isLoading: true
}
})
setAuthState({
email: email,
authenticated: true,
session: "super duper session token das wir vlt mal brauchen",
isLoading: false
session: "super duper session token das wir vlt mal brauchen"
})
await setStorageItemAsync(SESSION_KEY, "super duper session token das wir vlt mal brauchen")
await setStorageItemAsync(USER_KEY, email)
setIsLoading(false)
}
const logout = async () => {
setIsLoading(true)
await setStorageItemAsync(SESSION_KEY, null)
await setStorageItemAsync(USER_KEY, null)
@ -122,8 +110,9 @@ export const AuthProvider = ({children}: any) => {
email: null,
authenticated: false,
session: null,
isLoading: false
});
setIsLoading(false)
};
@ -131,7 +120,8 @@ export const AuthProvider = ({children}: any) => {
onRegister: register,
onLogin: login,
onLogout: logout,
authState
isLoading: isLoading,
authState: authState
}
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

97
app/contexts/ThemeContext.tsx Normal file
View file

@ -0,0 +1,97 @@
import {useContext, createContext, useState, useEffect} from "react"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { useColorScheme } from "react-native";
import themeColors from "../../constants/colors";
interface ThemeProps {
isSystemTheme?: boolean
theme: "light" | "dark";
colors: typeof themeColors.light & typeof themeColors.dark;
applySystemTheme?: () => void;
applyTheme?: (theme: "light" | "dark") => void;
}
const THEME_KEY = "THEME"
const SYSTEM_THEME_KEY = "SYSTEM_THEME"
const ThemeContext = createContext<ThemeProps>({theme: "light", colors: themeColors.light})
export const useTheme = () => {
return useContext(ThemeContext)
}
export const ThemeProvider = ({children} : any) => {
const currentSystemTheme = useColorScheme()
const [isSystemTheme, setIsSystemTheme] = useState<boolean>(true);
const [theme, setTheme] = useState<"light" | "dark">("light");
const [colors, setColors] = useState<typeof themeColors.light & typeof themeColors.dark>(themeColors.light)
useEffect(() => {
console.log("effect called")
const loadTheme = async () => {
try {
const is_system_theme = await AsyncStorage.getItem(SYSTEM_THEME_KEY)
const saved_theme = await AsyncStorage.getItem(THEME_KEY);
if(is_system_theme !== "false"){//We will use !== false bacause system theme should be used if unspecified
applySystemTheme();
return;
}
if(saved_theme === "light" || saved_theme === "dark"){
applyTheme(saved_theme);
}
} catch (error) {
console.error(error)
}
}
loadTheme();
}, [currentSystemTheme])
const applySystemTheme = () => {
const storeSystemTheme = async () => {
console.log("applySystemTheme")
await AsyncStorage.setItem(SYSTEM_THEME_KEY, "true")
}
storeSystemTheme();
setIsSystemTheme(true)
applyThemeInternal(currentSystemTheme ?? "light")
}
const applyThemeInternal = (theme: "light" | "dark") => {
const storeTheme = async (theme: "light" | "dark") => {
await AsyncStorage.setItem(THEME_KEY, theme)
}
setTheme(theme);
storeTheme(theme);
setColors(themeColors[theme])
}
const applyTheme = (theme: "light" | "dark") => {
const unsetSytemTheme = async () => {
AsyncStorage.setItem(SYSTEM_THEME_KEY, "false");
}
unsetSytemTheme()
setIsSystemTheme(false);
applyThemeInternal(theme);
}
const value = {
isSystemTheme: isSystemTheme,
applyTheme: applyTheme,
applySystemTheme: applySystemTheme,
theme: theme,
colors: colors,
}
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
)
}

3
app/index.tsx
View file

@ -6,9 +6,8 @@ import { useAuth } from './contexts/AuthContext'
export default function index() {
const {authState} = useAuth()
return (
<Redirect href={authState?.authenticated ? "/home/" : "/login"}></Redirect>
<Redirect href={authState?.authenticated ? "/home/" : "/login"}></Redirect>
)
}

66
components/home/userSettings/Setting.tsx Normal file
View file

@ -0,0 +1,66 @@
import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity, ViewProps } from 'react-native'
import React from 'react'
import { SIZES } from '../../../constants/theme'
import { useThemeColor } from '../../../hooks/useThemeColor';
import { CustomCard } from "../../"
import { useTheme } from '../../../app/contexts/ThemeContext';
interface ToggleSettingProps extends SwitchProps {
settingsTitle: string;
}
export function ToggleSetting(props: ToggleSettingProps) {
const {settingsTitle, ...rest} = props;
const { colors } = useTheme()
return (
<View style={[{ backgroundColor: colors.containerColor}, styles.settingsTile]}>
<Text style={[styles.settingTitle, {color: rest.disabled ? colors.secondaryText: colors.primaryText }]}>
{settingsTitle}
</Text>
<Switch
{...rest}
thumbColor={rest.thumbColor === undefined ? colors.accentColor: rest.thumbColor}
trackColor={rest.trackColor === undefined ? {true: "#E88C3F", false: colors.elementDefaultColor}: rest.trackColor}
></Switch>
</View>
)
}
interface ButtonSettingProps extends TouchableOpacityProps {
settingsTitle: string,
}
export function ButtonSetting(props: ButtonSettingProps){
const {settingsTitle, ...rest} = props;
const { colors } = useTheme();
return (
<TouchableOpacity {...rest}>
<View style={[styles.settingsTile, {backgroundColor: colors.containerColor}]}>
<Text style={[styles.settingTitle, {color: colors.primaryText}]}>{settingsTitle}</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
settingTitle: {
fontSize: SIZES.large
},
settingsTile: {
width: "100%",
minHeight: 60,
paddingVertical: 5,
paddingHorizontal: 20,
borderRadius: 80,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 10
}
})

6
components/index.tsx
View file

@ -1,11 +1,13 @@
//home
import ExpenseItem from "./home/expenseItem/expenseItem"
import Welcome from "./home/Welcome/Welcome"
import { ToggleSetting, ButtonSetting } from "./home/userSettings/Setting"
//common
import LoadingSymbol from "./common/loadingSymbol/loadingSymbol"
import Plus from "./common/plus/plus"
import SearchBar from "./common/searchBar/SearchBar"
import CustomCard from "./common/customCard/CustomCard"
//login
@ -14,6 +16,8 @@ import Input from "./login/input"
export {
ExpenseItem, Input,
LoadingSymbol, Plus,
SearchBar, Welcome
SearchBar, Welcome,
ToggleSetting, CustomCard,
ButtonSetting
}

2
constants/colors.ts
View file

@ -22,7 +22,7 @@ export default {
tabIconSelected: "#EF6C00",
backgroundColor: "#121212",
containerColor: "#181818",
containerColor: "#1c1c1c",
elementDefaultColor: "#535353",
elementSelectedColor: "#B3B3B3",
accentColor: "#EF6C00",

31
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-navigation/native": "^6.0.2",
"expo": "~49.0.15",
"expo-font": "~11.4.0",
@ -4277,6 +4278,17 @@
"react": "^16.8 || ^17.0 || ^18.0"
}
},
"node_modules/@react-native-async-storage/async-storage": {
"version": "1.18.2",
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.18.2.tgz",
"integrity": "sha512-dM8AfdoeIxlh+zqgr0o5+vCTPQ0Ru1mrPzONZMsr7ufp5h+6WgNxQNza7t0r5qQ6b04AJqTlBNixTWZxqP649Q==",
"dependencies": {
"merge-options": "^3.0.4"
},
"peerDependencies": {
"react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0"
}
},
"node_modules/@react-native-community/cli": {
"version": "11.3.7",
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.7.tgz",
@ -13452,6 +13464,25 @@
"resolved": "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz",
"integrity": "sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA=="
},
"node_modules/merge-options": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
"dependencies": {
"is-plain-obj": "^2.1.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/merge-options/node_modules/is-plain-obj": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
"engines": {
"node": ">=8"
}
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

1
package.json
View file

@ -19,6 +19,7 @@
},
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-navigation/native": "^6.0.2",
"expo": "~49.0.15",
"expo-font": "~11.4.0",