From d6356b5888627f0338a0eec02d102b6b9f68b6d1 Mon Sep 17 00:00:00 2001 From: Fadhli Date: Mon, 21 Oct 2024 02:09:01 +0800 Subject: [PATCH] SCRUM-170 Create frontend for all badges --- .../iQMA-Skills-Builder/app/Achievements.tsx | 202 ++++++++++++++++++ frontend/iQMA-Skills-Builder/app/_layout.tsx | 10 + .../components/Achievement.tsx | 43 +++- .../context/AuthContext.tsx | 2 +- 4 files changed, 247 insertions(+), 10 deletions(-) create mode 100644 frontend/iQMA-Skills-Builder/app/Achievements.tsx diff --git a/frontend/iQMA-Skills-Builder/app/Achievements.tsx b/frontend/iQMA-Skills-Builder/app/Achievements.tsx new file mode 100644 index 0000000..d29408d --- /dev/null +++ b/frontend/iQMA-Skills-Builder/app/Achievements.tsx @@ -0,0 +1,202 @@ +import { + Text, + View, + TextInput, + TouchableOpacity, + StyleSheet, + ScrollView, + Image, +} from 'react-native'; +import {useState, useContext, useEffect} from 'react'; +import {AuthContext} from '@/context/AuthContext'; +import {LoadingIndicator} from '@/components/LoadingIndicator'; +import * as gamificationEndpoints from '@/helpers/gamificationEndpoints'; +import {Colors} from '@/constants/Colors'; +import { formatSection } from '@/helpers/formatSectionID'; + +export default function Achievements() { + const {currentUser} = useContext(AuthContext); + const [badges, setBadges] = useState([]); + const [loading, setLoading] = useState(true); + + const mock = [ + { + sectionID: 'SEC0001', + badges: [ + { + unitName: 'Foundations of Communication', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/placeholder.png', + }, + { + unitName: 'Written Communication Proficiency', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/placeholder.png', + }, + { + unitName: 'Visual Communication Strategies', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/placeholder.png', + }, + { + unitName: 'Stakeholder Analysis and Audience Engagement', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/placeholder.png', + }, + { + unitName: 'Interpersonal Communication Excellence', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/SEC0001/unit3.png', + }, + { + unitName: 'Mastering Two-Way Communication', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/SEC0001/unit2.png', + }, + { + unitName: 'The Art of Persuasion', + badgeUrl: + "https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/locked.png", + }, + ], + }, + { + sectionID: 'SEC0002', + badges: [ + { + unitName: 'Foundations of Communication', + badgeUrl: + 'https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/placeholder.png', + }, + { + unitName: 'Written Communication Proficiency', + badgeUrl: + "https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/locked.png", + }, + { + unitName: 'Visual Communication Strategies', + badgeUrl: + "https://lugppkebziopzwushqcg.supabase.co/storage/v1/object/public/badges/locked.png", + }, + ], + }, + ]; + + const fetchAchievements = async () => { + try { + const badges = await gamificationEndpoints.getBadges( + currentUser.sub + ); + + setBadges(badges); + + console.log(badges); + } catch (error) { + console.error('Error fetching achievements', error); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchAchievements(); + }, []); + + if (loading) { + return ; + } + + return ( + + + {badges.map((section) => ( + <> + + + {/* {section.sectionID} */} + Section {formatSection(section.sectionID)} + + + {section.badges.map( + (badge: { + badgeUrl: string; + unitName: string; + }) => ( + + + {/* */} + + {badge.unitName} + + + ) + )} + + + + ))} + + + ); +} + +const styles = StyleSheet.create({ + container: { + // flex: 1, + // padding: 20, + paddingHorizontal: 20, + }, + sectionContainer: { + marginTop: 20, + }, + sectionHeading: { + color: Colors.light.color, + fontWeight: 'bold', + fontSize: 16, + textAlign: "center" + }, + badgeOuterContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + marginTop: 10, + // backgroundColor: 'red', + }, + badgeImage: { + width: '100%', + aspectRatio: 1, + resizeMode: 'contain', + }, + badgeContainer: { + width: '30%', + marginBottom: 20, + alignItems: 'center', + }, + unlockedBadgeText: { + marginTop: 10, + textAlign: 'center', + // color: Colors.light.text, + color: Colors.default.purple500, + fontWeight: 'bold', + }, + lockedBadgeText: { + marginTop: 10, + textAlign: 'center', + color: Colors.light.text, + fontWeight: 'bold', + }, +}); diff --git a/frontend/iQMA-Skills-Builder/app/_layout.tsx b/frontend/iQMA-Skills-Builder/app/_layout.tsx index e88f568..78fc63c 100644 --- a/frontend/iQMA-Skills-Builder/app/_layout.tsx +++ b/frontend/iQMA-Skills-Builder/app/_layout.tsx @@ -190,6 +190,16 @@ export default function RootLayout() { headerTintColor: Colors.light.background }} /> + diff --git a/frontend/iQMA-Skills-Builder/components/Achievement.tsx b/frontend/iQMA-Skills-Builder/components/Achievement.tsx index ca1e40a..e4f5774 100644 --- a/frontend/iQMA-Skills-Builder/components/Achievement.tsx +++ b/frontend/iQMA-Skills-Builder/components/Achievement.tsx @@ -8,13 +8,14 @@ import { FlatList, } from 'react-native'; import {OverviewCard} from '@/components/OverviewCard'; +import {router} from 'expo-router'; interface AchievementsProps { achievements: any[]; } export const Achievements: React.FC = ({achievements}) => { - // console.log('achievements:', achievements); + console.log('achievements:', achievements); let topThreeAchievements: any[] = []; @@ -26,18 +27,37 @@ export const Achievements: React.FC = ({achievements}) => { ); } + const handlePress = () => { + router.push("Achievements"); + }; + // console.log('topThreeAchievements:', topThreeAchievements); return ( - - Achievements - + + Achievements + + + + View all + + + {topThreeAchievements.length === 0 && ( { } else { // await AsyncStorage.removeItem('userID'); await AsyncStorage.clear(); - setIsLoading(false); + // setIsLoading(false); } setIsLoading(false); };