SCRUM-158 create sectionProfile component and integrate BE endpoints

frontend/iQMA-Skills-Builder/app/screens/ProfilePage.tsx

@@ -21,6 +21,7 @@ import React, {useEffect, useRef, useState} from 'react';
 import {AuthContext} from '@/context/AuthContext';
 import {LoadingIndicator} from '@/components/LoadingIndicator';
 import SectionCard from '@/components/SectionCard';
+import SectionProfile from '@/components/SectionProfile';
 import {router} from 'expo-router';
 import {useContext} from 'react';
 
@@ -62,6 +63,19 @@ const ProfilePage: React.FC = () => {
         <ScrollView contentContainerStyle={{flexGrow: 1}}>
             <View style={styles.container}>
                 <Text>Profile Screen</Text>
+                {allSectionDetails.length > 0 ? (
+                    allSectionDetails.map((sectionDetail, index) => (
+                        <View key={index}>
+                            <SectionProfile
+                                sectionID={sectionDetail.sectionID}
+                                sectionName={sectionDetail.sectionName}
+                                sectionDuration={sectionDetail.sectionDuration}
+                            />
+                        </View>
+                    ))
+                ) : (
+                    <Text>No sections available</Text>
+                )}
             </View>
         </ScrollView>
     );

frontend/iQMA-Skills-Builder/components/SectionProfile.tsx

@@ -0,0 +1,127 @@
+// components/SectionCard.tsx
+
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+
+import {Colors} from '@/constants/Colors';
+import React, { useEffect, useRef, useState, useContext } from 'react';
+import * as resultEndpoints from '@/helpers/resultEndpoints';
+import * as unitEndpoints from '@/helpers/unitEndpoints';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { formatSection } from '@/helpers/formatSectionID';
+import ProgressBar from '@/components/ProgressBar';
+import { AuthContext } from '@/context/AuthContext';
+import { router, useLocalSearchParams } from 'expo-router';
+
+
+interface SectionProfileProps {
+    sectionID: string;
+    sectionName: string;
+    sectionDuration: string;
+}
+
+const SectionProfile: React.FC<SectionProfileProps> = ({ sectionID, sectionName, sectionDuration }) => {
+
+    const {currentUser, isLoading} = useContext(AuthContext);
+    const [sectionNumber, setSectionNumber] = useState<string>('');
+    const [sectionCircularProgress, setSectionCircularProgress] = useState<number>(0);
+    const [status, setStatus] = useState<string>('in-progress');
+
+    useEffect(() => {
+        (async () => {
+            // check if final assessment is completed!
+            // if yes status = "completed"
+
+            // KIV: if no check sectionProgress and noOfUnits to see if user is in the middle of the section
+
+            // if sectionParam > currentSection, status = "not-started"
+
+            let sectionProgress =
+                await resultEndpoints.numberOfCompletedUnitsPerSection(
+                    currentUser.sub,
+                    sectionID
+                );
+
+            const noOfUnits = await unitEndpoints.numberOfUnitsPerSection(
+                sectionID
+            );
+
+            const currentSection = await AsyncStorage.getItem('currentSection');
+
+            const sectionParam = formatSection(sectionID as string);
+            setSectionNumber(sectionParam);
+
+            console.log('Current Section:', currentSection);
+            console.log('sectionParam:', sectionParam);
+
+            // need to + 1 to sectionProgress when user complete final assessment
+            if (parseInt(sectionParam) < parseInt(currentSection as string))
+                sectionProgress += 1;
+
+            console.log('Section Progress:', sectionProgress);
+            console.log('No of units:', noOfUnits);
+
+            setSectionCircularProgress(() => sectionProgress / (noOfUnits + 1));
+        })();
+    }, [sectionCircularProgress]);
+
+
+    const handlePress = () => {
+        console.log('Section ID:', sectionID);
+        router.push('Home')
+
+        // check if final assessment is completed
+        // if yes route to Section Introduction
+
+
+
+    }
+
+
+    return (
+        <TouchableOpacity style={styles.sectionCard} onPress={handlePress}>
+            <View style={styles.textContainer}>
+                <Text style={styles.sectionCardTitle}>SECTION {sectionNumber}</Text>
+                <Text style={styles.sectionCardTitle}>{sectionName}</Text>
+                <Text style={styles.sectionCardSubtitle}>
+                    {sectionDuration}
+                </Text>
+                <ProgressBar progress={sectionCircularProgress} isQuestionnaire={false} />
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionCard: {
+        backgroundColor: Colors.default.purple100,
+        padding: 25,
+        borderRadius: 15,
+        marginBottom: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    sectionCardTitle: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    sectionCardSubtitle: {
+        color: 'white',
+        fontSize: 14,
+    },
+    sectionButton: {
+        backgroundColor: Colors.default.purple500,
+        padding: 10,
+        borderRadius: 10,
+        borderColor: '#5E43C2',
+        borderWidth: 2,
+    },
+    textContainer: {
+        maxWidth: '80%',
+    },
+});
+
+export default SectionProfile;
+
+

frontend/iQMA-Skills-Builder/helpers/sectionEndpoints.tsx

@@ -17,10 +17,11 @@ export const getAllSectionDetails = async () => {
         const response = await fetch(url);
         const sectionDetails = await response.json();
         // Testing
-        // sectionDetails.push({
-        //     sectionID: 'SEC0002',
-        //     sectionName: 'Decision Making',
-        // });
+        sectionDetails.push({
+            sectionID: 'SEC0002',
+            sectionName: 'Decision Making',
+            sectionDuration: '160',
+        });
         // console.log(sectionDetails);
         return sectionDetails;
     } catch (error) {