Skip to content

Commit

Permalink
Finish Profile page styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohammadfadhli
mohammadfadhli committed Oct 17, 2024
1 parent b7e2829 commit 83480cd
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 72 deletions.
128 changes: 98 additions & 30 deletions frontend/iQMA-Skills-Builder/app/screens/ProfilePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,42 +23,65 @@ import SectionProfile from '@/components/SectionProfile';
import ProfileCard from '@/components/ProfileCard';
import {router, useFocusEffect} from 'expo-router';
import {useContext} from 'react';
import { Achievements } from '@/components/Achievement';
import {Achievements} from '@/components/Achievement';
import CertificationsList from '@/components/Certification';

const ProfilePage: React.FC = () => {

const {currentUser, isLoading} = useContext(AuthContext);
const [allSectionDetails, setAllSectionDetails] = useState<any[]>([]);
const [userDetails, setUserDetails] = useState<any>();
const [badges, setBadges] = useState<any[]>([]);
const [loading, setLoading] = useState(true);

const fetchProfileData = async () => {

try {
const sectionDetails = await sectionEndpoints.getAllSectionDetails();
const userDetails = await accountEndpoints.getUserDetails(currentUser.sub);
const badges = await gamificationEndpoints.getBadges(currentUser.sub);
const sectionDetails =
await sectionEndpoints.getAllSectionDetails();
const userDetails = await accountEndpoints.getUserDetails(
currentUser.sub
);
const badges = await gamificationEndpoints.getBadges(
currentUser.sub
);

console.log('sectionDetails:', sectionDetails);
console.log('userDetails:', userDetails);
console.log('badges:', badges);

setAllSectionDetails(sectionDetails);
// Testing
// setAllSectionDetails([
// {
// sectionDuration: 136,
// sectionID: 'SEC0001',
// sectionName: 'Communication',
// },
// {
// sectionDuration: 136,
// sectionID: 'SEC0001',
// sectionName: 'Communication',
// },
// {
// sectionDuration: 136,
// sectionID: 'SEC0001',
// sectionName: 'Communication',
// },
// ]);
setUserDetails(userDetails);
setBadges(badges);
} catch (error) {
console.error('Error fetching Section details:', error);
} finally {
setLoading(false);
}
}
};

console.log(allSectionDetails);

useEffect(() => {
setLoading(true);
fetchProfileData();
}, [])
}, []);

// Fetch data when navigating back
useFocusEffect(
Expand All @@ -67,37 +90,83 @@ const ProfilePage: React.FC = () => {
}, [])
);


if (isLoading || !userDetails) {
return <LoadingIndicator />;
}

return (
<ScrollView contentContainerStyle={styles.scrollView}>
<View style={styles.container}>
<ProfileCard userDetails={userDetails}/>

<Achievements achievements={badges}/>
<CertificationsList/>

{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>
)}

<ProfileCard userDetails={userDetails} />

<Achievements achievements={badges} />
<CertificationsList />

<View style={{paddingHorizontal: 20, marginVertical: 20}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text
style={{
fontSize: 16,
fontWeight: 'bold',
color: '#18113C',
}}
>
Courses
</Text>
<Text
style={{
textDecorationLine: 'underline',
textDecorationColor: '#5C5776',
fontWeight: 'bold',
}}
>
View all
</Text>
</View>
<View
style={{
flexDirection: 'row',
justifyContent:
allSectionDetails.length === 1
? 'center'
: 'space-between',
gap: 15
}}
>
{allSectionDetails.length > 0 ? (
allSectionDetails
.slice(0, 2)
.map((sectionDetail, index) => (
<View
key={index}
style={{
flex: 1,
}}
>
<SectionProfile
sectionID={sectionDetail.sectionID}
sectionName={
sectionDetail.sectionName
}
sectionDuration={
sectionDetail.sectionDuration
}
/>
</View>
))
) : (
<Text>No sections available</Text>
)}
</View>
</View>
</View>
</ScrollView>
);

};

const styles = StyleSheet.create({
Expand All @@ -106,7 +175,6 @@ const styles = StyleSheet.create({
backgroundColor: '#fff', // Ensure background color is white
},
container: {

backgroundColor: '#fff', // Container also white
},
});
Expand Down
4 changes: 2 additions & 2 deletions frontend/iQMA-Skills-Builder/components/Certification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const CertificationsList = () => {
style={{
textDecorationLine: 'underline',
textDecorationColor: '#5C5776',
fontWeight: "bold"
}}
>
View all
Expand Down Expand Up @@ -120,9 +121,8 @@ const styles = StyleSheet.create({
borderRadius: 10,
borderWidth: 1,
borderColor: '#D1D5DB',
elevation: 3,
elevation: 2,
padding: 15,
marginBottom: 10,
gap: 5,
},
titleContainer: {
Expand Down
83 changes: 43 additions & 40 deletions frontend/iQMA-Skills-Builder/components/SectionProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {AuthContext} from '@/context/AuthContext';
import {router, useLocalSearchParams} from 'expo-router';
import * as accountEndpoints from '@/helpers/accountEndpoints';
import * as lessonEndpoints from '@/helpers/lessonEndpoints';
import {SectionProfileProgressBar} from './SectionProfileProgressBar';

interface SectionProfileProps {
sectionID: string;
Expand Down Expand Up @@ -347,15 +348,21 @@ const SectionProfile: React.FC<SectionProfileProps> = ({
<Text style={styles.sectionTitle}>
SECTION {sectionNumber}
</Text>
<Text style={styles.sectionCardTitle}>{sectionName}</Text>

<ProgressBar
progress={sectionCircularProgress}
isQuestionnaire={true}
/>
<Text style={styles.sectionCardSubtitle}>
{sectionDuration + 'm'}
</Text>
<Text style={styles.sectionName}>{sectionName}</Text>
<View style={styles.progressBarContainer}>
{/* <ProgressBar
progress={sectionCircularProgress}
isQuestionnaire={true}
/> */}
<SectionProfileProgressBar
progress={sectionCircularProgress}
></SectionProfileProgressBar>
</View>
<View style={styles.durationContainer}>
<Text style={styles.duration}>
{sectionDuration + 'm'}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
Expand All @@ -364,60 +371,56 @@ const SectionProfile: React.FC<SectionProfileProps> = ({

const styles = StyleSheet.create({
main: {
padding: 20,
flex: 1,

},
image: {
width: '100%',
height: 150, // Adjust the height to whatever size you'd like the image to be
resizeMode: 'cover',
justifyContent: 'flex-start',
},
sectionCard: {
backgroundColor: '#fff',
borderRadius: 15,
marginBottom: 20,
borderColor: '#D1D5DB',
alignItems: 'center',
borderWidth: 1,
overflow: 'hidden', // Makes sure image edges are rounded with the sectionCard
marginTop: 10,
elevation: 2

},
disabledSectionCard: {
backgroundColor: 'gray', // or any color to indicate disabled state
},
sectionTitle: {
color: '#18113C',
fontSize: 16,
marginTop: '2%',
textContainer: {
flexDirection: 'column',
padding: 20,
gap: 3,
},
sectionCardTitle: {
color: '#18113C',
fontSize: 16,
sectionTitle: {
fontWeight: 'bold',
marginBottom: '2%',
fontSize: 12,
},
sectionCardSubtitle: {
color: '#5C5776',
fontSize: 14,
marginLeft: '83%',
marginTop: '5%',
sectionName: {
fontWeight: 'bold',
},
sectionButton: {
backgroundColor: Colors.default.purple500,
padding: 10,
borderRadius: 10,
borderColor: '#5E43C2',
borderWidth: 2,
progressBarContainer: {
paddingVertical: 10,
},
textContainer: {
width: '100%', // Ensures the text container takes up the full width of the card
padding: 10, // Adds spacing for text inside the card
backgroundColor: '#fff',
paddingLeft: 40,
flex: 1,
durationContainer: {
flexDirection: 'row-reverse',
},
progressBar: {
paddingLeft: 20,
duration: {
fontSize: 12,
color: Colors.default.optionText,
},
// sectionButton: {
// backgroundColor: Colors.default.purple500,
// padding: 10,
// borderRadius: 10,
// borderColor: '#5E43C2',
// borderWidth: 2,
// },
});

export default SectionProfile;
23 changes: 23 additions & 0 deletions frontend/iQMA-Skills-Builder/components/SectionProfileProgressBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {Colors} from '@/constants/Colors';
import {Text, View} from 'react-native';
import * as Progress from 'react-native-progress';

interface ProgressBarProps {
progress: number;
}

export const SectionProfileProgressBar: React.FC<ProgressBarProps> = ({
progress,
}) => {
return (
<View>
<Progress.Bar
progress={progress}
width={null}
color={Colors.default.purple500}
unfilledColor={Colors.light.unFilled}
borderWidth={0}
/>
</View>
);
};
1 change: 1 addition & 0 deletions frontend/iQMA-Skills-Builder/constants/Colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const Colors = {
color: '#4143A3',
tint: tintColorLight,
tabIconSelected: tintColorLight,
unFilled: "#D8D8D8"
},
overviewCard: {
background: '#EAF1FF',
Expand Down

0 comments on commit 83480cd

Please sign in to comment.