feat: add tiered badges to BadgesList component

src/components/LenderProfile/LenderBadges.vue

@@ -1,6 +1,6 @@
 <template>
 	<async-lender-section @visible="fetchUserAchievements">
-		<section v-if="completedAchievements.length > 0">
+		<section v-if="completedBadges.length > 0">
 			<h2
 				v-if="!isLoading"
 				class="data-hj-suppress"
@@ -13,92 +13,46 @@
 			/>
 			<badges-list
 				class="tw-my-4"
-				:completed-achievements="completedAchievements"
-				:total-possible-badges="totalPossibleBadges"
+				:completed-achievements="completedBadges"
 				:is-loading="isLoading"
 			/>
 		</section>
 	</async-lender-section>
 </template>
 
-<script>
-import { gql } from 'graphql-tag';
-import logReadQueryError from '#src/util/logReadQueryError';
+<script setup>
 import BadgesList from '#src/pages/Portfolio/LendingStats/BadgesList';
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import { computed, ref, inject } from 'vue';
+import useBadgeData from '#src/composables/useBadgeData';
 import AsyncLenderSection from './AsyncLenderSection';
 
-const userAchievementProgressQuery = gql`query userAchievementProgress( $publicId: String!) {
-	userAchievementProgress(publicId: $publicId) {
-		id
-		lendingAchievements {
-			id
-			milestoneProgress {
-				id
-				milestoneStatus
-			}
-		}
-	}
-}`;
-
-export default {
-	name: 'LenderBadges',
-	inject: ['apollo', 'cookieStore'],
-	components: {
-		BadgesList,
-		KvLoadingPlaceholder,
-		AsyncLenderSection,
-	},
-	props: {
-		lenderInfo: {
-			type: Object,
-			default: () => ({})
-		},
-		publicId: {
-			type: String,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			isLoading: true,
-			allAchievements: [],
-		};
+const props = defineProps({
+	lenderInfo: {
+		type: Object,
+		default: () => ({})
 	},
-	computed: {
-		lenderName() {
-			return this.lenderInfo?.name ?? '';
-		},
-		badgesTitle() {
-			return this.lenderInfo?.name
-				? `${this.lenderInfo.name}'s badges`
-				: 'Badges';
-		},
-		completedAchievements() {
-			return this.allAchievements.filter(
-				achievement => achievement.milestoneProgress?.[0]?.milestoneStatus === 'COMPLETE'
-			);
-		},
-		totalPossibleBadges() {
-			return this.allAchievements?.length ?? 0;
-		},
+	publicId: {
+		type: String,
+		required: true,
 	},
-	methods: {
-		async fetchUserAchievements() {
-			try {
-				const { data } = await this.apollo.query({
-					query: userAchievementProgressQuery,
-					variables: {
-						publicId: this.publicId,
-					},
-				});
+});
 
-				this.allAchievements = data?.userAchievementProgress?.lendingAchievements ?? [];
-				this.isLoading = false;
-			} catch (e) {
-				logReadQueryError(e, 'LenderBadges userAchievementsProgress');
-			}
-		},
-	},
+const apollo = inject('apollo');
+
+const {
+	fetchAchievementData,
+	fetchContentfulData,
+	completedBadges,
+} = useBadgeData(apollo);
+const isLoading = ref(true);
+const badgesTitle = computed(() => (props.lenderInfo?.name ? `${props.lenderInfo.name}'s badges` : 'Badges'));
+
+const fetchUserAchievements = async () => {
+	await Promise.all([
+		fetchAchievementData(apollo, props.publicId),
+		fetchContentfulData(apollo),
+	]);
+	isLoading.value = false;
 };
 </script>

src/composables/useBadgeData.js

@@ -50,9 +50,10 @@ export default function useBadgeData() {
 	 * Calls Apollo to get the badge achievement service data
 	 *
 	 * @param apollo The current instance of Apollo
+	 * @param publicId Whether to get achievement data for a specific user
 	 */
-	const fetchAchievementData = apollo => {
-		apollo.query({ query: userAchievementProgressQuery })
+	const fetchAchievementData = (apollo, publicId = null) => {
+		apollo.query({ query: userAchievementProgressQuery, variables: { publicId } })
 			.then(result => {
 				badgeAchievementData.value = [
 					...(result.data?.userAchievementProgress?.lendingAchievements ?? []),
@@ -343,7 +344,7 @@ export default function useBadgeData() {
 					levelName: contentfulData.challengeName,
 				};
 			}
-		} else if (badge.achievementData?.tiers?.length) {
+		} else if (badge?.achievementData?.tiers?.length) {
 			const tiers = JSON.parse(JSON.stringify(badge.achievementData.tiers));
 			tiers.sort((a, b) => new Date(a.completedDate) - new Date(b.completedDate));
 			const levelIndex = tiers[0].level - 1;
@@ -388,6 +389,58 @@ export default function useBadgeData() {
 		return displayedBadge ?? {};
 	};
 
+	/**
+	 * Get completed badges of a user
+	 *
+	 * @param badges The badges to get the completed badges from
+	 * @returns Completed badges
+	 */
+	const getCompletedBadges = badges => {
+		const completedBadgesArr = [];
+
+		badges?.forEach(badge => {
+			if (badge?.achievementData?.tiers?.length) {
+				const { tiers } = badge.achievementData;
+				tiers.forEach(tier => {
+					if (tier.completedDate) {
+						completedBadgesArr.push({
+							...badge,
+							earnedAtDate: tier.completedDate,
+							level: tier.level,
+						});
+					}
+				});
+			}
+			if (badge?.achievementData?.milestoneProgress?.length) {
+				const earnedAtDate = badge.achievementData?.milestoneProgress?.[0]?.earnedAtDate;
+				if (earnedAtDate) {
+					completedBadgesArr.push({
+						...badge,
+						earnedAtDate,
+						level: 0,
+					});
+				}
+			}
+		});
+
+		return completedBadgesArr;
+	};
+
+	/**
+	 * Get completed badges sorted by earned date
+	 *
+	 * @returns Completed badges sorted by earned date
+	 */
+	const completedBadges = computed(() => {
+		const completedBadgesArr = getCompletedBadges(badgeData.value);
+
+		completedBadgesArr.sort((a, b) => {
+			return new Date(a.earnedAtDate) - new Date(b.earnedAtDate);
+		});
+
+		return completedBadgesArr;
+	});
+
 	return {
 		fetchAchievementData,
 		fetchContentfulData,
@@ -400,9 +453,11 @@ export default function useBadgeData() {
 		getBadgeWithVisibleTiers,
 		getLastCompletedBadgeLevelData,
 		getHighestPriorityDisplayBadge,
+		getCompletedBadges,
 		badgeAchievementData,
 		badgeData,
 		badgeLoanIdData,
 		isBadgeKeyValid,
+		completedBadges,
 	};
 }

src/graphql/query/userAchievementProgress.graphql

@@ -1,5 +1,5 @@
-query UserAchievementProgress {
-  userAchievementProgress {
+query UserAchievementProgress($publicId: String) {
+  userAchievementProgress(publicId: $publicId) {
     id
     lendingAchievements {
       id

src/pages/Portfolio/LendingStats/BadgesList.vue

@@ -22,26 +22,30 @@
 		</p>
 		<div
 			v-else
-			v-for="(challenge, index) in challengeDataContentful"
-			:key="index"
+			v-for="badge in completedAchievements"
+			:key="badge.id"
 			class="tw-flex tw-w-full tw-gap-1"
 			:class="{'tw-items-center': !inPortfolio }"
 		>
-			<img :src="challenge.badgeSvg" class="tw-h-10 tw-flex-none tw-mx-auto">
+			<img
+				:src="getBadgeImgUrl(badge)"
+				class="tw-h-10 tw-flex-none tw-mx-auto"
+			>
 			<div class="tw-w-full">
-				<span class="tw-font-medium">{{ challenge.challengeName }}</span>
-				<p v-if="shouldShowBadgeDate(challenge)" class="tw-text-secondary tw-text-small">
-					{{ challenge.dateTagline }}
+				<span class="tw-font-medium">
+					{{ getBadgeTitle(badge) }}
+				</span>
+				<p class="tw-text-secondary tw-text-small">
+					{{ getBadgeDate(badge) }}
 				</p>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import { formatMediaAssetArray } from '#src/util/contentfulUtils';
-import { gql } from 'graphql-tag';
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import { format } from 'date-fns';
 
 export default {
 	name: 'BadgesList',
@@ -54,72 +58,34 @@ export default {
 			type: Array,
 			default: () => ([])
 		},
-		totalPossibleBadges: {
-			type: Number,
-			default: 0
-		},
 		isLoading: {
 			type: Boolean,
 			default: false
 		},
 	},
-	data() {
-		return {
-			challengeDataContentful: [],
-		};
-	},
 	computed: {
-		/* Challenge keys for completed challenges */
-		completedChallengeKeys() {
-			return this.completedAchievements.map(achievement => achievement.id).join(',');
-		},
 		inPortfolio() {
 			return this.$route?.name?.includes('portfolio');
 		},
 	},
-	watch: {
-		// When this prop has loaded we can load the badges content from contentful
-		totalPossibleBadges: {
-			handler(next) {
-				if (next !== 0) {
-					this.loadBadgesContent();
-				}
-			},
-			immediate: true
-		}
-	},
 	methods: {
-		loadBadgesContent() {
-			if (this.completedChallengeKeys !== '') {
-				const filterFields = `fields.key[in]=${this.completedChallengeKeys}`;
-				this.apollo.query({
-					query: gql`query contentfulDefinitions($customFields: String) {
-					contentful {
-						entries(contentType: "challenge", customFields: $customFields)
-					}
-				}`,
-					variables: {
-						customFields: filterFields
-					},
-				}).then(result => {
-					const contentfulData = result.data?.contentful?.entries?.items ?? null;
-					if (contentfulData) {
-						this.challengeDataContentful = contentfulData.map(item => {
-							return {
-								...item.fields,
-								badgeSvg: formatMediaAssetArray([item.fields.badgeImage])?.[0]?.file?.url,
-							};
-						});
-					}
-				}).catch(err => {
-					console.error(err);
-					this.$showTipMsg('There was a problem loading badges', 'error');
-				});
+		getBadgeTitle(badge) {
+			if (badge.level === 0) {
+				return badge?.contentfulData?.[0]?.challengeName ?? '';
+			}
+			const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
+			return `${badgeData?.challengeName} ${badgeData?.levelName}` ?? '';
+		},
+		getBadgeImgUrl(badge) {
+			if (badge.level === 0) {
+				return badge?.contentfulData?.[0]?.imageUrl ?? '';
 			}
+			const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
+			return badgeData?.imageUrl ?? '';
 		},
-		shouldShowBadgeDate(challenge) {
-			// Lifetime badges currently have an "n/a" date tagline
-			return challenge?.dateTagline?.toLowerCase() !== 'n/a';
+		getBadgeDate(badge) {
+			const earnedAtDate = badge.earnedAtDate ? Date.parse(badge.earnedAtDate) : new Date();
+			return format(earnedAtDate, 'MMM yyyy');
 		},
 	},
 };

src/pages/Portfolio/LendingStats/BadgesSection.vue

@@ -6,7 +6,7 @@
 				v-if="!isLoading"
 				class="tw-text-base tw-bg-brand tw-text-white tw-py-0.5 tw-px-1 tw-self-center"
 			>
-				{{ badgesObtained }}/{{ totalPossibleBadges }}
+				{{ badgesObtained }}
 			</span>
 			<kv-loading-placeholder
 				v-else
@@ -16,7 +16,6 @@
 		</h2>
 		<badges-list
 			:completed-achievements="completedAchievements"
-			:total-possible-badges="totalPossibleBadges"
 			:is-loading="isLoading"
 		/>
 	</section>
@@ -39,10 +38,9 @@ export default {
 			type: Array,
 			default: () => []
 		},
-		/* total number of possible badges */
-		totalPossibleBadges: {
-			type: Number,
-			default: 0
+		isLoading: {
+			type: Boolean,
+			default: false
 		},
 	},
 	components: {
@@ -53,9 +51,6 @@ export default {
 		badgesObtained() {
 			return this.completedAchievements.length ?? 0;
 		},
-		isLoading() {
-			return this.totalPossibleBadges === 0;
-		},
 	},
 };
 </script>