Skip to content
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

feat: scroll to on page load on sections with async data #5680

Merged
merged 3 commits into from
Nov 13, 2024
Merged

feat: scroll to on page load on sections with async data #5680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c15b66
feat: scroll MyKiva section into view after async data is loaded
dyersituations Nov 12, 2024
4fb5b2c
feat: scroll to section when clicking continue as logged in user
dyersituations Nov 13, 2024
5b26c67
fix: add optional chaining just in case
dyersituations Nov 13, 2024
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
6 changes: 4 additions & 2 deletions src/components/Thanks/MyKiva/ThanksBadges.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ import CheckoutReceipt from '#src/components/Checkout/CheckoutReceipt';
import GuestAccountCreation from '#src/components/Forms/GuestAccountCreation';
import BadgeContainer from '#src/components/MyKiva/BadgeContainer';
import KvButton from '@kiva/kv-components/vue/KvButton';
import useBadgeData from '#src/composables/useBadgeData';
import useBadgeData, { MY_IMPACT_JOURNEYS_ID, MY_ACHIEVEMENTS_ID } from '#src/composables/useBadgeData';
import OptInModule from './OptInModule';

const props = defineProps({
Expand Down Expand Up @@ -234,8 +234,10 @@ const handleContinue = () => {
if (props.isGuest) {
showGuestAccountModal.value = true;
} else {
const hasBadges = numberOfBadges.value > 0;
const sectionToScrollTo = numberOfBadges.value === 1 ? MY_IMPACT_JOURNEYS_ID : MY_ACHIEVEMENTS_ID;
// eslint-disable-next-line vue/no-mutating-props
props.router?.push('/portfolio');
props.router?.push(`/portfolio${hasBadges ? `#${sectionToScrollTo}` : ''}`);
}
};

Expand Down
2 changes: 2 additions & 0 deletions src/composables/useBadgeData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export const CLIMATE_ACTION_FILTER = 'tag=9';
export const REFUGEE_EQUALITY_FILTER = 'attribute=28';
export const WOMENS_EQUALITY_FILTER = 'gender=female';
export const BASIC_NEEDS_FILTER = 'sector=6,10';
export const MY_IMPACT_JOURNEYS_ID = 'my-impact-journeys';
export const MY_ACHIEVEMENTS_ID = 'my-achievements';

/**
* Utilities for loading and combining tiered badge data
Expand Down
25 changes: 20 additions & 5 deletions src/pages/Portfolio/MyKiva/MyKivaPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</div>
</section>
</MyKivaContainer>
<template v-if="badgeAchievementData">
<template v-if="isAchievementDataLoaded">
<section class="tw-my-2">
<MyKivaStats :user-achievements="badgeAchievementData" />
<MyKivaContainer>
Expand Down Expand Up @@ -94,7 +94,7 @@
BADGES AND ACHIEVEMENTS
</span>
</div>
<div class="tw-mt-3">
<div :id="MY_IMPACT_JOURNEYS_ID" class="tw-mt-3">
<h3
class="tw-text-center tw-mb-2"
>
Expand All @@ -121,6 +121,7 @@
</section>
</MyKivaContainer>
<EarnedBadgesSection
:id="MY_ACHIEVEMENTS_ID"
:badges-data="badgeData"
@badge-clicked="handleEarnedBadgeClicked"
/>
Expand Down Expand Up @@ -151,17 +152,18 @@ import BadgeModal from '#src/components/MyKiva/BadgeModal';
import BadgesSection from '#src/components/MyKiva/BadgesSection';
import MyKivaStats from '#src/components/MyKiva/MyKivaStats';
import BadgeTile from '#src/components/MyKiva/BadgeTile';
import useBadgeData from '#src/composables/useBadgeData';
import useBadgeData, { MY_IMPACT_JOURNEYS_ID, MY_ACHIEVEMENTS_ID } from '#src/composables/useBadgeData';
import EarnedBadgesSection from '#src/components/MyKiva/EarnedBadgesSection';
import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
import useUserPreferences from '#src/composables/useUserPreferences';
import { hasLoanFunFactFootnote } from '#src/util/myKivaUtils';

import {
ref,
computed,
inject,
onMounted,
watch,
nextTick,
} from 'vue';

const MY_KIVA_EXP_KEY = 'my_kiva_page';
Expand Down Expand Up @@ -193,7 +195,7 @@ const showLoanFootnote = ref(false);
const totalLoans = ref(0);

const isLoading = computed(() => !lender.value);

const isAchievementDataLoaded = computed(() => !!badgeAchievementData.value);
const userBalance = computed(() => userInfo.value?.userAccount?.balance ?? '');

const handleShowNavigation = () => {
Expand Down Expand Up @@ -315,4 +317,17 @@ onMounted(async () => {
fetchContentfulData(apollo);
saveMyKivaToUserPreferences();
});

watch(isAchievementDataLoaded, () => {
if (isAchievementDataLoaded.value) {
nextTick(() => {
// Scroll to section once async data is loaded
const targetId = window?.location?.hash?.replace('#', '');
const targetElement = document?.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
});
}
});
</script>
Loading