Merge branch 'develop' of https://github.com/FYP-2024-IQMA/fyp2024 in…

…to SCRUM-140-Refactor-video-function-to-a-component
FYP-2024-IQMA · Oct 14, 2024 · 1456718 · 1456718
2 parents e5e73f9 + 3940632
commit 1456718
Show file tree

Hide file tree

Showing 42 changed files with 852 additions and 409 deletions.
diff --git a/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx b/frontend/iQMA-Skills-Builder/app/(tabs)/_layout.tsx
@@ -5,6 +5,7 @@ import {useEffect, useState} from 'react';
 
 import {AuthProvider} from '@/context/AuthContext';
 import ChatbotDrawer from '@/components/ChatbotDrawer';
+import {Colors} from '@/constants/Colors';
 import HomeScreen from '../screens/Home';
 import {Ionicons} from '@expo/vector-icons';
 import {MaterialIcons} from '@expo/vector-icons';
@@ -22,11 +23,11 @@ export default function AppTabs() {
         <Tab.Navigator
             screenOptions={({route}) => ({
                 headerTitleAlign: 'center',
-                headerStyle: {backgroundColor: '#B199FF'},
-                tabBarActiveTintColor: '#FFFFFF',
+                headerStyle: {backgroundColor: Colors.default.purple100},
+                tabBarActiveTintColor: Colors.light.background,
                 tabBarInactiveTintColor: '#BBBBBB',
                 tabBarStyle: {
-                    backgroundColor: '#7654F2',
+                    backgroundColor: Colors.default.purple500,
                     justifyContent: 'center',
                     alignItems: 'center',
                     paddingHorizontal: 80,
@@ -69,7 +70,7 @@ export default function AppTabs() {
                     tabBarIcon: ({color, size}) => (
                         <Ionicons name="person" size={size} color={color} />
                     ),
-                    headerTintColor: '#fff'
+                    headerTintColor: '#fff',
                 }}
             />
             <Tab.Screen
@@ -79,7 +80,7 @@ export default function AppTabs() {
                     tabBarIcon: ({color, size}) => (
                         <Ionicons name="settings" size={size} color={color} />
                     ),
-                    headerTintColor: '#fff'
+                    headerTintColor: '#fff',
                 }}
             />
         </Tab.Navigator>

diff --git a/frontend/iQMA-Skills-Builder/app/Assessment.tsx b/frontend/iQMA-Skills-Builder/app/Assessment.tsx
@@ -1,21 +1,24 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import {ScrollView, StyleSheet, Text, Image, View} from 'react-native';
-import SectionCard from '@/components/SectionCard';
+import * as quizEndpoints from '@/helpers/quizEndpoints';
+import * as resultEndpoints from '@/helpers/resultEndpoints';
+import * as sectionEndpoints from '@/helpers/sectionEndpoints';
+import * as unitEndpoints from '@/helpers/unitEndpoints';
+
+import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
 import React, {useContext, useEffect, useLayoutEffect, useState} from 'react';
-import {useNavigation} from '@react-navigation/native';
-import ProgressBar from '@/components/ProgressBar';
-import {QuizCard} from '@/components/QuizCard';
 import {router, useLocalSearchParams} from 'expo-router';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {AuthContext} from '@/context/AuthContext';
+import {Colors} from '@/constants/Colors';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
+import {OverviewCard} from '@/components/OverviewCard';
+import ProgressBar from '@/components/ProgressBar';
 import {Question} from '@/constants/Quiz';
-import * as unitEndpoints from '@/helpers/unitEndpoints';
-import * as sectionEndpoints from '@/helpers/sectionEndpoints';
-import * as quizEndpoints from '@/helpers/quizEndpoints';
-import {formatUnit} from '@/helpers/formatUnitID';
+import {QuizCard} from '@/components/QuizCard';
+import SectionCard from '@/components/SectionCard';
 import {formatSection} from '@/helpers/formatSectionID';
-import {OverviewCard} from '@/components/OverviewCard';
-import { LoadingIndicator } from '@/components/LoadingIndicator';
-import * as resultEndpoints from '@/helpers/resultEndpoints';
-import {AuthContext} from '@/context/AuthContext';
+import {formatUnit} from '@/helpers/formatUnitID';
+import {useNavigation} from '@react-navigation/native';
 
 export default function Assessment() {
     const navigation = useNavigation();
@@ -28,10 +31,18 @@ export default function Assessment() {
     const [sectionName, setSectionName] = useState<string>('');
     const [unitScenario, setUnitScenario] = useState<string>('');
     const [loading, setIsLoading] = useState<boolean>(true);
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [finalScenario, setFinalScenario] = useState<string>('');
     const [checkFinal, setCheckFinal] = useState<boolean>(false);
- 
+
     // Hardcoded for now until routing confirmed
     // const isFinal: boolean = false;
     // const sectionID = 'SEC0001';
@@ -91,8 +102,10 @@ export default function Assessment() {
     }, [sectionID, unitID, checkFinal]);
 
     useLayoutEffect(() => {
-
-        let progress = checkFinal ? 1 : parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        let progress = checkFinal
+            ? 1
+            : parseInt(currentProgress as string) /
+              parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -107,7 +120,6 @@ export default function Assessment() {
             await AsyncStorage.setItem('currentQnsIdx', newIdx.toString());
             setCurrentQnsIdx(newIdx);
         } else {
-
             if (checkFinal) {
                 // final assessment don't have self-reflection
                 try {
@@ -140,7 +152,7 @@ export default function Assessment() {
                         isFinal,
                         currentProgress,
                         totalProgress,
-                    }
+                    },
                 });
             }
         }
@@ -167,7 +179,7 @@ export default function Assessment() {
                         <Text
                             style={{
                                 fontSize: 14,
-                                color: '#4143A3',
+                                color: Colors.header.color,
                                 marginBottom: 10,
                             }}
                         >
@@ -210,7 +222,7 @@ export default function Assessment() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
         flex: 1,
     },

diff --git a/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx
@@ -6,15 +6,16 @@ import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {router, useLocalSearchParams, useRouter} from 'expo-router';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import {Colors} from '@/constants/Colors';
 import {CustomButton} from '@/components/CustomButton';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
 import {OverviewCard} from '@/components/OverviewCard';
 import ProgressBar from '@/components/ProgressBar';
 import SectionCard from '@/components/SectionCard';
 import axios from 'axios';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
-import {LoadingIndicator} from '@/components/LoadingIndicator';
 
 export default function AssessmentIntroduction() {
     const navigation = useNavigation();
@@ -24,7 +25,15 @@ export default function AssessmentIntroduction() {
     // const unitID = 'UNIT0001';
     // const currentUnit = "1";
     // const totalUnits = "1"
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [sectionNumber, setSectionNumber] = useState<string>('');
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [seconds, setSeconds] = useState<number>(0);
@@ -60,8 +69,9 @@ export default function AssessmentIntroduction() {
     }, []);
 
     useLayoutEffect(() => {
-
-        const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        const progress =
+            parseInt(currentProgress as string) /
+            parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -121,8 +131,10 @@ export default function AssessmentIntroduction() {
                 currentUnit,
                 totalUnits,
                 isFinal,
-                currentProgress: (parseInt(currentProgress as string) + 1).toString(),
-                totalProgress
+                currentProgress: (
+                    parseInt(currentProgress as string) + 1
+                ).toString(),
+                totalProgress,
             },
         });
         stopTimer();
@@ -165,7 +177,7 @@ export default function AssessmentIntroduction() {
                             style={{
                                 fontSize: 14,
                                 fontWeight: 'bold',
-                                color: '#4143A3',
+                                color: Colors.header.color,
                                 marginBottom: 20,
                                 marginHorizontal: 10,
                             }}
@@ -227,7 +239,7 @@ export default function AssessmentIntroduction() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
         flex: 1,
     },

diff --git a/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx b/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx
@@ -1,13 +1,16 @@
-import {ScrollView, StyleSheet, Text, View, SafeAreaView} from 'react-native';
-import React, {useState, useLayoutEffect, useEffect} from 'react';
-import {CustomButton} from '@/components/CustomButton';
+import * as lessonEndpoints from '@/helpers/lessonEndpoints';
+
+import React, {useEffect, useLayoutEffect, useState} from 'react';
+import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
 import {router, useLocalSearchParams} from 'expo-router';
-import {useNavigation} from '@react-navigation/native';
-import ProgressBar from '@/components/ProgressBar';
+
+import {Colors} from '@/constants/Colors';
+import {CustomButton} from '@/components/CustomButton';
+import {LoadingIndicator} from '@/components/LoadingIndicator';
 import {OverviewCard} from '@/components/OverviewCard';
-import * as lessonEndpoints from '@/helpers/lessonEndpoints';
+import ProgressBar from '@/components/ProgressBar';
 import {formatUnit} from '@/helpers/formatUnitID';
-import {LoadingIndicator} from '@/components/LoadingIndicator';
+import {useNavigation} from '@react-navigation/native';
 
 const formatCheatSheet = (cheatsheet: any) => {
     if (Array.isArray(cheatsheet)) {
@@ -45,14 +48,23 @@ const formatCheatSheet = (cheatsheet: any) => {
 // where things show up
 export default function CheatSheet() {
     const navigation = useNavigation();
-    const {sectionID, unitID, currentUnit, totalUnits, isFinal, currentProgress, totalProgress} = useLocalSearchParams();
+    const {
+        sectionID,
+        unitID,
+        currentUnit,
+        totalUnits,
+        isFinal,
+        currentProgress,
+        totalProgress,
+    } = useLocalSearchParams();
     const [lessons, setLessons] = useState<any[]>([]);
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
 
     useLayoutEffect(() => {
-
-        const progress = parseInt(currentProgress as string) / parseInt(totalProgress as string);
+        const progress =
+            parseInt(currentProgress as string) /
+            parseInt(totalProgress as string);
 
         navigation.setOptions({
             headerTitle: () => (
@@ -102,8 +114,10 @@ export default function CheatSheet() {
                 currentUnit,
                 totalUnits,
                 isFinal,
-                currentProgress: (parseInt(currentProgress as string) + 1).toString(),
-                totalProgress
+                currentProgress: (
+                    parseInt(currentProgress as string) + 1
+                ).toString(),
+                totalProgress,
             },
         });
     };
@@ -152,13 +166,13 @@ export default function CheatSheet() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         padding: 20,
     },
     title: {
         fontSize: 14,
         fontWeight: 'bold',
-        color: '#4143A3',
+        color: Colors.header.color,
         marginBottom: 20,
     },
     buttonContainer: {
@@ -172,7 +186,7 @@ const styles = StyleSheet.create({
         borderWidth: 2,
         padding: 10,
         marginBottom: 20,
-        backgroundColor: '#FFFFFF',
+        backgroundColor: Colors.light.background,
         // shadow properties
         shadowColor: '#000',
         shadowOffset: {width: 0, height: 4},