From 29514d08e0e71c7a4dadf7d65939402c98cc0733 Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <rogelio.gutierrez@contractors.kiva.org>
Date: Thu, 21 Nov 2024 13:45:35 -0600
Subject: [PATCH] feat: more journal updates work

---
 .../MyKiva/JournalUpdatesCarousel.vue         | 80 ++++++++++---------
 src/pages/Portfolio/MyKiva/MyKivaPage.vue     |  3 +-
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/src/components/MyKiva/JournalUpdatesCarousel.vue b/src/components/MyKiva/JournalUpdatesCarousel.vue
index d3d3f19f05..33fea03a8c 100644
--- a/src/components/MyKiva/JournalUpdatesCarousel.vue
+++ b/src/components/MyKiva/JournalUpdatesCarousel.vue
@@ -1,39 +1,40 @@
 <template>
-	<div v-if="updates.length > 0" class="tw-my-3 tw-flex tw-items-center tw-gap-3">
-		<div>
-			<h3 class="tw-my-2">
-				Updates
-			</h3>
-			<KvCarousel
-				class="tw-w-full updates-carousel md:tw-overflow-visible"
-				:multiple-slides-visible="true"
-				slides-to-scroll="visible"
-				:embla-options="{ loop: false }"
-				@interact-carousel="interactCarousel"
-			>
-				<template v-for="(update, index) in updates" #[`slide${index}`] :key="update.id">
-					<JournalUpdateCard
-						:loan="loan"
-						:update="update"
-						:update-number="`${totalUpdates - index}`"
-						@read-more-clicked="openLightbox"
-						@share-loan-clicked="shareLoanClicked"
-					/>
-				</template>
-			</KvCarousel>
-		</div>
-		<div
-			v-if="showLoadMore"
-			class="tw-pr-3"
+	<div v-if="updates.length > 0" class="tw-my-3">
+		<h3 class="tw-my-2">
+			Updates
+		</h3>
+		<KvCarousel
+			class="tw-w-full updates-carousel md:tw-overflow-visible"
+			:key="updates.length"
+			:multiple-slides-visible="true"
+			slides-to-scroll="visible"
+			:embla-options="{ loop: false, startIndex: carouselIndex }"
+			@interact-carousel="interactCarousel"
 		>
-			<kv-button
-				class="tw-mt-2"
-				variant="secondary"
-				@click="loadMoreUpdates"
-			>
-				Load more<br>updates
-			</kv-button>
-		</div>
+			<template v-for="(update, index) in updates" #[`slide${index}`] :key="update.id">
+				<JournalUpdateCard
+					:loan="loan"
+					:update="update"
+					:update-number="`${totalUpdates - index}`"
+					@read-more-clicked="openLightbox"
+					@share-loan-clicked="shareLoanClicked"
+				/>
+			</template>
+			<template v-if="showLoadMore" #view-more>
+				<div
+					:key="`view-more-card`"
+					class="tw-flex tw-items-center tw-h-full tw-pr-3"
+				>
+					<kv-button
+						class="tw-mt-2"
+						variant="secondary"
+						@click="loadMoreUpdates"
+					>
+						Load more<br>updates
+					</kv-button>
+				</div>
+			</template>
+		</KvCarousel>
 		<KvLightbox
 			:visible="isLightboxVisible"
 			title=""
@@ -102,6 +103,7 @@ const clickedUpdate = ref(0);
 const updateSubject = ref('');
 const updateBody = ref('');
 const shareLoan = ref(false);
+const carouselIndex = ref(0);
 
 const inPfp = computed(() => loan.value?.inPfp ?? false);
 
@@ -143,10 +145,16 @@ const loadMoreUpdates = () => {
 };
 
 watch(() => updates, () => {
-	if (updates.value.length > 0) {
+	if (updates.value.length > 0 && updates.value.length < 3) {
 		$kvTrackEvent('portfolio', 'view', 'At least one journal update viewed');
+		carouselIndex.value = 0;
 	}
-});
+	if (updates.value.length > 3) {
+		carouselIndex.value = updates.value.length - 2;
+	}
+},
+{ deep: true },
+);
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index 5e9e394711..76a4f94249 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -259,8 +259,9 @@ const handleBackToJourney = () => {
 const fetchLoanUpdates = loanId => {
 	apollo.query({ query: updatesQuery, variables: { loanId, limit: 3, offset: updatesOffset.value } })
 		.then(result => {
-			loanUpdates.value = result.data?.lend?.loan?.updates?.values ?? [];
 			totalUpdates.value = result.data?.lend?.loan?.updates?.totalCount ?? 0;
+			const updates = result.data?.lend?.loan?.updates?.values ?? [];
+			loanUpdates.value = loanUpdates.value.concat(updates);
 		}).catch(e => {
 			logReadQueryError(e, 'MyKivaPage updatesQuery');
 		});