Skip to content

Commit

Permalink
SCRUM-143 Created skeleton for Settings
Browse files Browse the repository at this point in the history
  • Loading branch information
mohammadfadhli committed Oct 10, 2024
1 parent c297c20 commit 094f7b2
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 40 deletions.
99 changes: 60 additions & 39 deletions frontend/iQMA-Skills-Builder/app/screens/Settings.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,68 @@
import {Button, StyleSheet, Text, View} from 'react-native';

import React from 'react';
import {LogoutButton} from '@/components/LogoutButton';
import {Button, StyleSheet, Text, View, Switch} from 'react-native';
import React, {useContext, useState} from 'react';
import {router} from 'expo-router';
import CustomSwitch from '@/components/CustomSwitch';
import {CustomButton} from '@/components/CustomButton';
import {AuthContext} from '@/context/AuthContext';

export default function Settings() {
const {logOut, currentUser} = useContext(AuthContext);

const [isSoundEffectsEnabled, setIsSoundEffectsEnabled] = useState(false);
const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false);

const toggleSoundEffects = (value: boolean) => {
setIsSoundEffectsEnabled(value);
};

const toggleNotifications = (value: boolean) => {
setIsNotificationsEnabled(value);
};

const testLesson = () => {
router.push('SectionIntroduction');
};

const testQuiz = () => {
router.push('VideoQuiz');
};

const testAsssessment = () => {
router.push('Assessment');
};

const assessmentIntro = () => {
router.push('AssessmentIntroduction');
};

const SettingPage: React.FC = () => (
<View style={styles.container}>
<Text>Settings Screen</Text>
<View style={{marginBottom: 10}}></View>
<Button title="Test Lesson" onPress={testLesson}></Button>
<View style={{marginBottom: 10}}></View>
<Button title="Test Quiz" onPress={testQuiz}></Button>
<View style={{marginBottom: 10}}></View>
<Button title="Test Assessment" onPress={testAsssessment}></Button>
<View style={{marginBottom: 10}}></View>
<Button title="Test Assessment Intro" onPress={assessmentIntro}></Button>
<View style={{marginBottom: 10}}></View>
<LogoutButton></LogoutButton>
</View>
);
return (
<View style={styles.container}>
<Text style={styles.textHeading}>GENERAL</Text>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}
>
<Text style={{alignSelf: 'center'}}>Sound Effects</Text>
<CustomSwitch
isEnabled={isSoundEffectsEnabled}
onToggle={toggleSoundEffects}
/>
</View>
<Text style={styles.textHeading}>NOTIFICATIONS</Text>
<View
style={{flexDirection: 'row', justifyContent: 'space-between'}}
>
<Text style={{alignSelf: 'center'}}>All Notifications</Text>
<CustomSwitch
isEnabled={isNotificationsEnabled}
onToggle={toggleNotifications}
/>
</View>
<CustomButton label="Save" backgroundColor="white" />

<CustomButton label="Help Center" backgroundColor="white" />

<CustomButton label="Feedback" backgroundColor="white" />

<CustomButton
label="Log out"
backgroundColor="white"
onPressHandler={logOut}
/>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
textHeading: {
color: '#7654F2',
fontWeight: 'bold',
},
});

export default SettingPage;
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/iQMA-Skills-Builder/components/CustomButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const styles = StyleSheet.create({
// paddingBottom: 20,
},
button: {
width: screenWidth * 0.8,
width: screenWidth * 0.9,
marginVertical: 10,
padding: 15,
borderRadius: 10,
Expand Down
74 changes: 74 additions & 0 deletions frontend/iQMA-Skills-Builder/components/CustomSwitch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React, { useState, useEffect, useRef } from 'react';
import { View, TouchableOpacity, Animated, StyleSheet } from 'react-native';

interface CustomSwitchProps {
isEnabled: boolean;
onToggle: (value: boolean) => void;
}

const CustomSwitch: React.FC<CustomSwitchProps> = ({ isEnabled, onToggle }) => {

const animationValue = useRef(new Animated.Value(isEnabled ? 1 : 0)).current;

// Update the animation when isEnabled changes
useEffect(() => {
Animated.timing(animationValue, {
toValue: isEnabled ? 1 : 0,
duration: 300,
useNativeDriver: false,
}).start();
}, [isEnabled]);

const interpolateBackgroundColor = animationValue.interpolate({
inputRange: [0, 1],
outputRange: ['#ddd', '#7654F2'], // Off state to On state colors
});

const knobPosition = animationValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 21], // Left position for 'Off' and 'On'
});

return (
<TouchableOpacity
onPress={() => onToggle(!isEnabled)}
style={styles.container}
activeOpacity={0.8} // Prevent quick double-taps causing issues
>
<Animated.View
style={[
styles.switchBackground,
{ backgroundColor: interpolateBackgroundColor },
]}
>
<Animated.View
style={[
styles.switchKnob,
{ transform: [{ translateX: knobPosition }] },
]}
/>
</Animated.View>
</TouchableOpacity>
);
};

const styles = StyleSheet.create({
container: {
padding: 10,
},
switchBackground: {
width: 50,
height: 30,
borderRadius: 15,
justifyContent: 'center',
padding: 2,
},
switchKnob: {
width: 26,
height: 26,
borderRadius: 13,
backgroundColor: '#fff',
},
});

export default CustomSwitch;
7 changes: 7 additions & 0 deletions frontend/iQMA-Skills-Builder/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/iQMA-Skills-Builder/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"react-native-safe-area-context": "^4.10.1",
"react-native-screens": "^3.31.1",
"react-native-svg": "^15.6.0",
"react-native-toggle-input": "^1.0.12",
"react-native-vector-icons": "^10.1.0",
"react-native-web": "~0.19.10",
"react-native-webview": "^13.12.0",
Expand Down

0 comments on commit 094f7b2

Please sign in to comment.