From a4c1986d67f6a4ca77f7c78a831fa8551990642d Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <94026278+roger-in-kiva@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:32:52 -0600
Subject: [PATCH] feat: handle unknown lender on profile page (#5455)

---
 .../LenderProfile/LenderProfileWrapper.vue    | 86 +++++++++++++++++++
 src/components/NotFound/NotFoundWrapper.vue   | 33 +++++++
 src/pages/LenderProfile/LenderProfile.vue     | 65 +++-----------
 src/pages/NotFound.vue                        | 32 +------
 4 files changed, 136 insertions(+), 80 deletions(-)
 create mode 100644 src/components/LenderProfile/LenderProfileWrapper.vue
 create mode 100644 src/components/NotFound/NotFoundWrapper.vue

diff --git a/src/components/LenderProfile/LenderProfileWrapper.vue b/src/components/LenderProfile/LenderProfileWrapper.vue
new file mode 100644
index 0000000000..57092fe59b
--- /dev/null
+++ b/src/components/LenderProfile/LenderProfileWrapper.vue
@@ -0,0 +1,86 @@
+<template>
+	<div>
+		<lender-summary
+			:public-id="publicId"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-loans-list
+			:public-id="publicId"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-badges
+			:total-possible-badges="allAchievements.length"
+			:completed-achievements="completedAchievements"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-dedications-list
+			:public-id="publicId"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-teams-list
+			:public-id="publicId"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-invitees-list
+			:public-id="publicId"
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-stats
+			:lender-info="lenderInfo"
+		/>
+
+		<lender-map
+			:lender-info="lenderInfo"
+		/>
+	</div>
+</template>
+
+<script>
+import LenderSummary from '@/components/LenderProfile/LenderSummary';
+import LenderLoansList from '@/components/LenderProfile/LenderLoansList';
+import LenderStats from '@/components/LenderProfile/LenderStats';
+import LenderTeamsList from '@/components/LenderProfile/LenderTeamsList';
+import LenderBadges from '@/components/LenderProfile/LenderBadges';
+import LenderInviteesList from '@/components/LenderProfile/LenderInviteesList';
+import LenderDedicationsList from '@/components/LenderProfile/LenderDedicationsList';
+import LenderMap from '@/components/LenderProfile/LenderMap';
+
+export default {
+	name: 'LenderProfileWrapper',
+	props: {
+		publicId: {
+			type: String,
+			required: true,
+		},
+		lenderInfo: {
+			type: Object,
+			default: () => ({}),
+			required: true,
+		},
+		allAchievements: {
+			type: Array,
+			default: () => ([]),
+		},
+		completedAchievements: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+	components: {
+		LenderSummary,
+		LenderLoansList,
+		LenderStats,
+		LenderTeamsList,
+		LenderBadges,
+		LenderInviteesList,
+		LenderDedicationsList,
+		LenderMap,
+	},
+};
+</script>
diff --git a/src/components/NotFound/NotFoundWrapper.vue b/src/components/NotFound/NotFoundWrapper.vue
new file mode 100644
index 0000000000..9aee39d87b
--- /dev/null
+++ b/src/components/NotFound/NotFoundWrapper.vue
@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<h2 class="tw-text-center tw-mb-2">
+			The page you're looking for has gone missing!
+		</h2>
+		<p class="tw-text-center">
+			Please double check the spelling of the URL, or try one of these links:
+		</p>
+
+		<div class="tw-flex tw-flex-col tw-text-center tw-my-5 tw-gap-y-2 tw-text-subhead">
+			<router-link to="/">
+				Home
+			</router-link>
+			<router-link to="/lend">
+				Lend
+			</router-link>
+			<router-link to="/borrow">
+				Borrow
+			</router-link>
+			<router-link to="/blog">
+				Blog
+			</router-link>
+			<router-link to="/portfolio">
+				My portfolio
+			</router-link>
+		</div>
+
+		<p class="tw-text-center">
+			If you need us, we’re always available via email at
+			<a href="mailto:contactus@kiva.org">contactus@kiva.org</a>.
+		</p>
+	</div>
+</template>
diff --git a/src/pages/LenderProfile/LenderProfile.vue b/src/pages/LenderProfile/LenderProfile.vue
index 10b58a3b3d..8800420ea8 100644
--- a/src/pages/LenderProfile/LenderProfile.vue
+++ b/src/pages/LenderProfile/LenderProfile.vue
@@ -3,43 +3,15 @@
 		<kv-page-container
 			class="tw-pt-4 tw-pb-8"
 		>
-			<lender-summary
+			<lender-profile-wrapper
+				v-if="lenderIsPublic"
 				:public-id="publicId"
 				:lender-info="lenderInfo"
-			/>
-
-			<lender-loans-list
-				:public-id="publicId"
-				:lender-info="lenderInfo"
-			/>
-
-			<lender-badges
-				:total-possible-badges="allAchievements.length"
+				:all-achievements="allAchievements"
 				:completed-achievements="completedAchievements"
-				:lender-info="lenderInfo"
 			/>
-
-			<lender-dedications-list
-				:public-id="publicId"
-				:lender-info="lenderInfo"
-			/>
-
-			<lender-teams-list
-				:public-id="publicId"
-				:lender-info="lenderInfo"
-			/>
-
-			<lender-invitees-list
-				:public-id="publicId"
-				:lender-info="lenderInfo"
-			/>
-
-			<lender-stats
-				:lender-info="lenderInfo"
-			/>
-
-			<lender-map
-				:lender-info="lenderInfo"
+			<not-found-wrapper
+				v-else
 			/>
 		</kv-page-container>
 	</www-page>
@@ -48,15 +20,9 @@
 <script>
 import logReadQueryError from '@/util/logReadQueryError';
 import WwwPage from '@/components/WwwFrame/WwwPage';
-import LenderSummary from '@/components/LenderProfile/LenderSummary';
 import lenderPublicProfileQuery from '@/graphql/query/lenderPublicProfile.graphql';
-import LenderLoansList from '@/components/LenderProfile/LenderLoansList';
-import LenderStats from '@/components/LenderProfile/LenderStats';
-import LenderTeamsList from '@/components/LenderProfile/LenderTeamsList';
-import LenderBadges from '@/components/LenderProfile/LenderBadges';
-import LenderInviteesList from '@/components/LenderProfile/LenderInviteesList';
-import LenderDedicationsList from '@/components/LenderProfile/LenderDedicationsList';
-import LenderMap from '@/components/LenderProfile/LenderMap';
+import LenderProfileWrapper from '@/components/LenderProfile/LenderProfileWrapper';
+import NotFoundWrapper from '@/components/NotFound/NotFoundWrapper';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 
 export default {
@@ -65,14 +31,8 @@ export default {
 	components: {
 		WwwPage,
 		KvPageContainer,
-		LenderSummary,
-		LenderLoansList,
-		LenderStats,
-		LenderTeamsList,
-		LenderBadges,
-		LenderInviteesList,
-		LenderDedicationsList,
-		LenderMap,
+		LenderProfileWrapper,
+		NotFoundWrapper,
 	},
 	metaInfo() {
 		return {
@@ -140,6 +100,7 @@ export default {
 			lenderInfo: {},
 			publicId: '',
 			allAchievements: [],
+			lenderIsPublic: false,
 		};
 	},
 	apollo: {
@@ -191,8 +152,10 @@ export default {
 		} catch (e) {
 			logReadQueryError(e, 'LenderProfile lenderPublicProfileQuery');
 		}
-		this.lenderInfo = cachedLenderInfo.community?.lender ?? {};
-		this.allAchievements = cachedLenderInfo.userAchievementProgress?.achievementProgress ?? [];
+
+		this.lenderInfo = cachedLenderInfo?.community?.lender ?? {};
+		this.allAchievements = cachedLenderInfo?.userAchievementProgress?.achievementProgress ?? [];
+		this.lenderIsPublic = !!this.lenderInfo?.id;
 	}
 };
 </script>
diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue
index 220626104a..4a5c45fcbe 100644
--- a/src/pages/NotFound.vue
+++ b/src/pages/NotFound.vue
@@ -3,41 +3,14 @@
 		<kv-page-container
 			class="tw-pt-4 tw-pb-8"
 		>
-			<h2 class="tw-text-center tw-mb-2">
-				The page you're looking for has gone missing!
-			</h2>
-			<p class="tw-text-center">
-				Please double check the spelling of the URL, or try one of these links:
-			</p>
-
-			<div class="tw-flex tw-flex-col tw-text-center tw-my-5 tw-gap-y-2 tw-text-subhead">
-				<router-link to="/">
-					Home
-				</router-link>
-				<router-link to="/lend">
-					Lend
-				</router-link>
-				<router-link to="/borrow">
-					Borrow
-				</router-link>
-				<router-link to="/blog">
-					Blog
-				</router-link>
-				<router-link to="/portfolio">
-					My portfolio
-				</router-link>
-			</div>
-
-			<p class="tw-text-center">
-				If you need us, we’re always available via email at
-				<a href="mailto:contactus@kiva.org">contactus@kiva.org</a>.
-			</p>
+			<not-found-wrapper />
 		</kv-page-container>
 	</www-page>
 </template>
 
 <script>
 import WwwPage from '@/components/WwwFrame/WwwPage';
+import NotFoundWrapper from '@/components/NotFound/NotFoundWrapper';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 
 export default {
@@ -45,6 +18,7 @@ export default {
 	components: {
 		WwwPage,
 		KvPageContainer,
+		NotFoundWrapper,
 	},
 	beforeRouteEnter(to, from, next) {
 		if (typeof window !== 'undefined') {