Skip to content

refactor: use categories for the loan spotlight #7257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eddieferrer merged 3 commits into from
Sep 16, 2026
+71 −59
Merged

refactor: use categories for the loan spotlight #7257

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2e4a65
refactor: use categories for the loan spotlight
eddieferrer Sep 15, 2026
f39b9a1
fix: shrink the loan spotlight loading placeholder
eddieferrer Sep 15, 2026
6a179b6
fix: fall back when the targeted category has no loans
eddieferrer Sep 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 71 additions & 59 deletions src/components/Categories/LoanSpotlight.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@
<h3 class="tw-text-title tw-pt-2 tw-mb-1">
{{ getSpotlightLoanLocation }}
</h3>
<kv-loading-paragraph
<kv-loading-text
v-if="isLoading"
class="tw-mb-1.5 tw-flex-grow" :style="{width: '100%', height: '5.5rem'}"
class="tw-mb-1.5"
:lines="5"
/>
<p v-if="!isLoading" class="tw-line-clamp-5">
{{ getSpotlightText }}
Expand All @@ -51,19 +52,21 @@
import { toParagraphs } from '#src/util/loanUtils';
import { gql } from 'graphql-tag';
import KvResponsiveImage from '#src/components/Kv/KvResponsiveImage';
import KvLoadingParagraph from '#src/components/Kv/KvLoadingParagraph';
import { KvLoadingPlaceholder, KvButton } from '@kiva/kv-components';
import { KvLoadingPlaceholder, KvLoadingText, KvButton } from '@kiva/kv-components';

const allChannelsQuery = gql`
query allChannelsQuery {
lend {
loanChannels(offset:0, limit:1000) {
values {
id
url
name
loans {
totalCount
const allCategoriesQuery = gql`
query allCategoriesQuery {
browsingCategories(limit: 1000) {
values {
id
url
name
... on LoanCategorySearchOutput {
savedSearch {
id
loans {
totalCount
}
}
}
}
Expand All @@ -73,69 +76,72 @@ const allChannelsQuery = gql`

const spotlightLoanQuery = gql`
query spotlightLoanQuery (
$ids: [Int],
$ids: [String!]!,
$limit: Int = 5,
$offset: Int = 0,
$pageNumber: Int = 0,
$imgDefaultSize: String = "w520h390",
$imgRetinaSize: String = "w1040h780",
) {
lend {
loanChannelsById (ids: $ids) {
id
loans (
categoriesByIds (ids: $ids) {
id
... on LoanCategorySearchOutput {
savedSearch (
limit: $limit
offset: $offset
pageNumber: $pageNumber
) {
values {
id
description
lenderRepaymentTerm
anonymizationLevel
geocode {
city
country {
id
loans {
values {
id
description
lenderRepaymentTerm
anonymizationLevel
geocode {
city
country {
id
name
}
}
image {
id
name
default: url(customSize: $imgDefaultSize)
retina: url(customSize: $imgRetinaSize)
}
}
image {
id
default: url(customSize: $imgDefaultSize)
retina: url(customSize: $imgRetinaSize)
}
}
}
}
}
}
`;

function filterChannelsForRoute(routePath, loanChannels) {
const filteredChannels = loanChannels.filter(
loanChannel => loanChannel.url.split('/').pop() === routePath
function filterCategoriesForRoute(routePath, categories) {
const filteredCategories = categories.filter(
category => category.url.split('/').pop() === routePath

@mcstover mcstover Sep 15, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eddieferrer @meganmcmillan Wondering if the forthcoming query to get category by slug will help use skip the "getAllCategories" query in this component. This seems quite inefficient at present to have to call for all categories when it's loaded...

@meganmcmillan meganmcmillan Sep 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it looks like that will help here - we will provide a way to look up by the routePath/slug so you can get the one category you want.

@meganmcmillan meganmcmillan Sep 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://kiva.atlassian.net/browse/CIT-5189

);
return filteredChannels;
return filteredCategories;
}

function getTargetedChannel(targetedRoutePath, fallbackRoutePath, allChannels) {
const targetedLoanChannel = filterChannelsForRoute(targetedRoutePath, allChannels);
const fallbackLoanChannel = filterChannelsForRoute(fallbackRoutePath, allChannels);
function getTargetedCategory(targetedRoutePath, fallbackRoutePath, allCategories) {
const targetedCategory = filterCategoriesForRoute(targetedRoutePath, allCategories);
const fallbackCategory = filterCategoriesForRoute(fallbackRoutePath, allCategories);

// no channel that matches the targeted name
if (targetedLoanChannel.length === 0) {
// return id for fallback channel
return fallbackLoanChannel[0]?.id || null;
// no category that matches the targeted name
if (targetedCategory.length === 0) {
// return id for fallback category
return fallbackCategory[0]?.id || null;
}
// targeted channel exists but no loans exist within it
if (targetedLoanChannel.length !== 0 && targetedLoanChannel[0].loans.totalCount === 0) {
return fallbackLoanChannel[0]?.id || null;
// targeted category exists but no loans exist within it
if (!targetedCategory[0].savedSearch?.loans?.totalCount) {
return fallbackCategory[0]?.id || null;
}
// isolate targeted channel id
return targetedLoanChannel[0]?.id || null;
// isolate targeted category id
return targetedCategory[0]?.id || null;
}

function filterByAnonymizationLevelAndImages(spotlightData) {
const firstFiveRecommendedLoans = spotlightData.lend?.loanChannelsById[0]?.loans?.values ?? [];
const firstFiveRecommendedLoans = spotlightData.categoriesByIds?.[0]?.savedSearch?.loans?.values ?? [];
const nonAnonymousLoansWithImages = firstFiveRecommendedLoans.filter(
loan => loan.anonymizationLevel !== 'full' && loan.image?.default !== ''
);
Expand All @@ -158,16 +164,16 @@ export default {
KvButton,
KvResponsiveImage,
KvLoadingPlaceholder,
KvLoadingParagraph
KvLoadingText
},
inject: ['apollo', 'cookieStore'],
data() {
return {
spotlightPlaceholderImageCTF: '',
spotlightLoan: {},
allChannelsData: [],
allCategoriesData: [],
isLoading: true,
targetedLoanChannelID: null
targetedCategoryId: null
};
},
computed: {
Expand Down Expand Up @@ -202,20 +208,26 @@ export default {
}
},
apollo: {
query: allChannelsQuery,
query: allCategoriesQuery,
preFetch: true,
result(result) {
this.allChannelsData = result.data?.lend?.loanChannels?.values ?? [];
this.allCategoriesData = result.data?.browsingCategories?.values ?? [];
},
},
created() {
// eslint-disable-next-line max-len
this.targetedLoanChannelID = getTargetedChannel(this.categorySlug, this.fallbackCategorySlug, this.allChannelsData);
this.targetedCategoryId = getTargetedCategory(this.categorySlug, this.fallbackCategorySlug, this.allCategoriesData);

// ids is a non-null list, so an unresolved category has to skip the query rather than send [null]
if (!this.targetedCategoryId) {
this.isLoading = false;
return;
}

this.apollo.query({
query: spotlightLoanQuery,
variables: {
ids: [this.targetedLoanChannelID],
ids: [this.targetedCategoryId],
},
}).then(result => {
// filter out loans with anonymizationLevel of full, then take first in list
Expand Down
Loading