Merge pull request #87 from FYP-2024-IQMA/SCRUM-156-Do-up-charts-in-T…

…ableau Scrum 156 do up charts in tableau
FYP-2024-IQMA · Oct 15, 2024 · 553b63d · 553b63d
2 parents 3940632 + 5b51d24
commit 553b63d
Show file tree

Hide file tree

Showing 16 changed files with 580 additions and 470 deletions.
diff --git a/analytics/FYP Data Pipeline.twbx b/analytics/FYP Data Pipeline.twbx
diff --git a/backend/src/models/clickstreamModel.ts b/backend/src/models/clickstreamModel.ts
@@ -1,6 +1,8 @@
 export interface Clickstream {
     userID: string;
+    age: string,
     eventType: "timeTaken" | "attemptsTaken";
+    section: string,
     event: string;
     timestamp: Date;
 }

diff --git a/frontend/iQMA-Skills-Builder/app/Assessment.tsx b/frontend/iQMA-Skills-Builder/app/Assessment.tsx
@@ -9,6 +9,7 @@ import {router, useLocalSearchParams} from 'expo-router';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {AuthContext} from '@/context/AuthContext';
+import { useTimer } from '@/helpers/useTimer';
 import {Colors} from '@/constants/Colors';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
 import {OverviewCard} from '@/components/OverviewCard';
@@ -42,13 +43,15 @@ export default function Assessment() {
     } = useLocalSearchParams();
     const [finalScenario, setFinalScenario] = useState<string>('');
     const [checkFinal, setCheckFinal] = useState<boolean>(false);
-
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Assessment`);
+
     // Hardcoded for now until routing confirmed
     // const isFinal: boolean = false;
     // const sectionID = 'SEC0001';
     // const unitID = 'UNIT0001';
 
     useEffect(() => {
+        startTimer();
         if (isFinal === 'true') {
             (async () => {
                 try {
@@ -155,6 +158,7 @@ export default function Assessment() {
                     },
                 });
             }
+            stopTimer();
         }
     };
 

diff --git a/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/AssessmentIntroduction.tsx
@@ -12,10 +12,10 @@ 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 { useTimer } from '@/helpers/useTimer';
 
 export default function AssessmentIntroduction() {
     const navigation = useNavigation();
@@ -42,22 +42,7 @@ export default function AssessmentIntroduction() {
     const [introDetails, setIntroDetails] = useState<string[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [checkFinal, setCheckFinal] = useState<boolean>(false);
-
-    const startTimer = () => {
-        if (timerRef.current) {
-            clearInterval(timerRef.current);
-        }
-        timerRef.current = setInterval(() => {
-            setSeconds((prevSeconds) => prevSeconds + 1);
-        }, 1000);
-    };
-
-    const stopTimer = () => {
-        if (timerRef.current) {
-            clearInterval(timerRef.current);
-            timerRef.current = null;
-        }
-    };
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Assessment Introduction`);
 
     useEffect(() => {
         startTimer();
@@ -138,22 +123,6 @@ export default function AssessmentIntroduction() {
             },
         });
         stopTimer();
-        const userID = await AsyncStorage.getItem('userID');
-        try {
-            const response = await axios.post(
-                `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/clickstream/sendMessage`,
-                {
-                    userID: userID,
-                    eventType: 'timeTaken',
-                    event: `unitID ${unitID}`,
-                    timestamp: new Date().toISOString(),
-                    time: `${seconds}`,
-                }
-            );
-        } catch (e) {
-            console.error(e);
-        }
-        setSeconds(0);
     };
 
     return (

diff --git a/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx b/frontend/iQMA-Skills-Builder/app/CheatSheet.tsx
@@ -7,6 +7,7 @@ import {router, useLocalSearchParams} from 'expo-router';
 import {Colors} from '@/constants/Colors';
 import {CustomButton} from '@/components/CustomButton';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
+import { useTimer } from '@/helpers/useTimer';
 import {OverviewCard} from '@/components/OverviewCard';
 import ProgressBar from '@/components/ProgressBar';
 import {formatUnit} from '@/helpers/formatUnitID';
@@ -60,6 +61,7 @@ export default function CheatSheet() {
     const [lessons, setLessons] = useState<any[]>([]);
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} Cheat Sheet`);
 
     useLayoutEffect(() => {
         const progress =
@@ -74,6 +76,7 @@ export default function CheatSheet() {
     }, [navigation]);
 
     useEffect(() => {
+        startTimer();
         if (sectionID && unitID) {
             (async () => {
                 try {
@@ -120,6 +123,7 @@ export default function CheatSheet() {
                 totalProgress,
             },
         });
+        stopTimer();
     };
 
     return (

diff --git a/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx b/frontend/iQMA-Skills-Builder/app/KeyTakeaway.tsx
@@ -14,6 +14,7 @@ import SectionCard from '@/components/SectionCard';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
+import { useTimer } from '@/helpers/useTimer';
 
 export default function KeyTakeaway() {
     const navigation = useNavigation();
@@ -62,6 +63,7 @@ export default function KeyTakeaway() {
                 totalProgress,
             },
         });
+        stopTimer();
     };
 
     // const sectionID = 'SEC0001';
@@ -88,8 +90,10 @@ export default function KeyTakeaway() {
     const [lessonName, setLessonName] = useState<string>('');
     const [keyTakeaway, setKeyTakeaway] = useState<string[]>([]);
     const [nextLessonID, setnextLessonID] = useState<string>('');
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} ${lessonID} Key Takeaway`);
 
     useEffect(() => {
+        startTimer();
         if (
             sectionID &&
             unitID &&

diff --git a/frontend/iQMA-Skills-Builder/app/Lesson.tsx b/frontend/iQMA-Skills-Builder/app/Lesson.tsx
@@ -15,6 +15,7 @@ import YoutubePlayer from 'react-native-youtube-iframe';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
+import { useTimer } from '@/helpers/useTimer';
 
 // where things show up
 export default function Lesson() {
@@ -38,6 +39,7 @@ export default function Lesson() {
     const [playing, setPlaying] = useState<boolean>(true);
     const [lessonDescription, setLessonDescription] = useState<string | []>();
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} ${lessonID} Lesson`);
 
     useLayoutEffect(() => {
         const progress =
@@ -69,9 +71,11 @@ export default function Lesson() {
                 totalProgress,
             },
         });
+        stopTimer();
     };
 
     useEffect(() => {
+        startTimer();
         if (sectionID && unitID && lessonID) {
             (async () => {
                 try {

diff --git a/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx b/frontend/iQMA-Skills-Builder/app/RealityCheck.tsx
@@ -13,6 +13,7 @@ import SectionCard from '@/components/SectionCard';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
+import { useTimer } from '@/helpers/useTimer';
 
 // where things show up
 export default function RealityCheck() {
@@ -35,8 +36,7 @@ export default function RealityCheck() {
         string[]
     >([]);
     const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    useEffect(() => {}, []);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Reality Check`);
 
     useLayoutEffect(() => {
         const progress =
@@ -51,6 +51,7 @@ export default function RealityCheck() {
     }, [navigation]);
 
     useEffect(() => {
+        startTimer();
         if (sectionID && unitID) {
             (async () => {
                 try {
@@ -90,6 +91,7 @@ export default function RealityCheck() {
                 totalProgress,
             },
         });
+        stopTimer();
     };
 
     return (

diff --git a/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/SectionIntroduction.tsx
@@ -7,6 +7,8 @@ import {router, useLocalSearchParams} from 'expo-router';
 import {Colors} from '@/constants/Colors';
 import {CustomButton} from '@/components/CustomButton';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
+import { useTimer } from '@/helpers/useTimer';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {OverviewCard} from '@/components/OverviewCard';
 import ProgressBar from '@/components/ProgressBar';
 import SectionCard from '@/components/SectionCard';
@@ -35,6 +37,7 @@ export default function SectionIntroduction() {
     const [videoId, setVideoId] = useState<string>('');
     const [playing, setPlaying] = useState<boolean>(true);
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} Introduction`);
 
     useLayoutEffect(() => {
         const progress =
@@ -49,6 +52,7 @@ export default function SectionIntroduction() {
     }, [navigation]);
 
     useEffect(() => {
+        startTimer();
         if (sectionID) {
             (async () => {
                 try {
@@ -61,6 +65,7 @@ export default function SectionIntroduction() {
                     setSectionName(sectionDetails.sectionName);
 
                     setSectionNumber(formatSection(sectionID as string));
+                    await AsyncStorage.setItem('section', sectionDetails.sectionName);
                 } catch (error) {
                     console.error('Error fetching Lesson details:', error);
                 } finally {
@@ -70,7 +75,7 @@ export default function SectionIntroduction() {
         }
     }, [sectionID]);
 
-    const handlePress = () => {
+    const handlePress = async () => {
         setPlaying(false);
         router.push({
             pathname: 'UnitIntroduction',
@@ -88,6 +93,7 @@ export default function SectionIntroduction() {
                 totalProgress,
             },
         });
+        stopTimer();
     };
 
     const onStateChange = (state: string) => {

diff --git a/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx b/frontend/iQMA-Skills-Builder/app/SelfReflection.tsx
@@ -15,6 +15,7 @@ import SectionCard from '@/components/SectionCard';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
+import { useTimer } from '@/helpers/useTimer';
 
 export default function SelfReflection() {
     const navigation = useNavigation();
@@ -37,6 +38,8 @@ export default function SelfReflection() {
         setChatHistoryLength(length);
     };
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Self Reflection`);
+
     useLayoutEffect(() => {
         const progress =
             parseInt(currentProgress as string) /
@@ -50,6 +53,7 @@ export default function SelfReflection() {
     }, [navigation]);
 
     useEffect(() => {
+        startTimer();
         if (sectionID && unitID) {
             (async () => {
                 try {
@@ -117,6 +121,7 @@ export default function SelfReflection() {
             // after self-reflection navigate back to home for next unit
             router.replace('Home');
         }
+        stopTimer();
     };
 
     return (

diff --git a/frontend/iQMA-Skills-Builder/app/UnitIntroduction.tsx b/frontend/iQMA-Skills-Builder/app/UnitIntroduction.tsx
@@ -15,6 +15,7 @@ import axios from 'axios';
 import {formatSection} from '@/helpers/formatSectionID';
 import {formatUnit} from '@/helpers/formatUnitID';
 import {useNavigation} from '@react-navigation/native';
+import { useTimer } from '@/helpers/useTimer';
 
 // where things show up
 export default function UnitIntroduction() {
@@ -35,35 +36,8 @@ export default function UnitIntroduction() {
     const [unitNumber, setUnitNumber] = useState<string>('');
     const [unitName, setUnitName] = useState<string>('');
     const [unitDescription, setUnitDescription] = useState<string[]>([]);
-
-    const [seconds, setSeconds] = useState<number>(0);
-    const timerRef = useRef<NodeJS.Timeout | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    const startTimer = () => {
-        if (timerRef.current) {
-            clearInterval(timerRef.current);
-        }
-        timerRef.current = setInterval(() => {
-            setSeconds((prevSeconds) => prevSeconds + 1);
-        }, 1000);
-    };
-
-    const stopTimer = () => {
-        if (timerRef.current) {
-            clearInterval(timerRef.current);
-            timerRef.current = null;
-        }
-    };
-
-    useEffect(() => {
-        startTimer();
-        return () => {
-            if (timerRef.current) {
-                clearInterval(timerRef.current);
-            }
-        };
-    }, []);
+    const { startTimer, stopTimer } = useTimer(`${sectionID} ${unitID} Introduction`);
 
     useLayoutEffect(() => {
         const progress =
@@ -78,6 +52,7 @@ export default function UnitIntroduction() {
     }, [navigation]);
 
     useEffect(() => {
+        startTimer();
         if (sectionID && unitID) {
             (async () => {
                 try {
@@ -119,23 +94,6 @@ export default function UnitIntroduction() {
             },
         });
         stopTimer();
-        const userID = await AsyncStorage.getItem('userID');
-        try {
-            const response = await axios.post(
-                `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/clickstream/sendMessage`,
-                {
-                    userID: userID,
-                    eventType: 'timeTaken',
-                    event: `unitID ${unitID}`,
-                    timestamp: new Date().toISOString(),
-                    time: `${seconds}`,
-                }
-            );
-            console.log(response.data);
-        } catch (e) {
-            console.error(e);
-        }
-        setSeconds(0);
     };
 
     return (