Merge branch 'lebihae/fix-infinitescroll-bookings' into 'main'

fix(ticketing): fix borked infinite scroll on event bookings management page See merge request churros/churros!296
inp-net · Nov 19, 2024 · 13f22da · 13f22da
2 parents a4f312b + b616da1
commit 13f22da
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 80 deletions.
diff --git a/.changeset/chilled-spoons-guess.md b/.changeset/chilled-spoons-guess.md
@@ -0,0 +1,5 @@
+---
+'@churros/app': patch
+---
+
+fix borked infinite scroll on /events/:id/bookings
diff --git a/packages/app/src/lib/components/LoadingScreen.svelte b/packages/app/src/lib/components/LoadingScreen.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { LoadingChurros } from '$lib/loading';
+
+  export let title = 'Chargement…';
+</script>
+
+<div class="loading">
+  <LoadingChurros />
+  <p class="gradiented">{title}</p>
+  <section class="regular-content">
+    <slot></slot>
+  </section>
+</div>
+
+<style>
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+    font-size: 7em;
+  }
+
+  .regular-content {
+    font-size: calc(1em / 7);
+  }
+
+  .loading p.gradiented {
+    margin-top: 1.5em;
+    font-size: calc(1.5em * 1 / 7);
+    font-weight: bold;
+    background: linear-gradient(90deg, var(--fg), var(--primary), var(--fg));
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    /* stylelint-disable-next-line */
+    text-fill-color: transparent;
+    background-size: 200% auto;
+    animation: textgradient 1s linear infinite reverse;
+  }
+
+  @keyframes textgradient {
+    to {
+      background-position: 200% center;
+    }
+  }
+</style>
diff --git a/packages/app/src/lib/scroll.ts b/packages/app/src/lib/scroll.ts
@@ -1,6 +1,7 @@
 import { browser } from '$app/environment';
 import { afterNavigate, beforeNavigate } from '$app/navigation';
 import { page } from '$app/stores';
+import { debugging } from '$lib/debugging';
 import { onMount } from 'svelte';
 import { syncToLocalStorage } from 'svelte-store2storage';
 import { get, writable, type Writable } from 'svelte/store';
@@ -19,11 +20,13 @@ export function onReachingEndSoon(
   threshold = 3,
 ) {
   if (!browser) return () => {};
+  const log = taggedLogger('infinitescroll');
 
   async function restartIntersectionObserver() {
     // Get the element that's at threshold elements from the bottom
     const elements = [...scrollableArea.querySelectorAll(scrollableElementSelector)];
     const lastElement = elements.at(elements.length - threshold);
+    log(`watching for scroll into view of element`, lastElement);
     // If there is no such element, we're at the bottom (or at least over the theshold)
     if (!lastElement) {
       await callback();
@@ -35,6 +38,7 @@ export function onReachingEndSoon(
       async (entries) => {
         // If the last element is in view, we're at the bottom
         if (entries.some((entry) => entry.isIntersecting)) {
+          log(`reached last element, calling callback`);
           await callback();
           intersectionObserver.disconnect();
         }
@@ -61,9 +65,7 @@ export function onReachingEndSoon(
     // Also watch for intersection with the "infinitescroll bottom" element(data-infinitescroll-bottom)
     infinitescrollBottomIntersectionObserver = new IntersectionObserver(async (entries) => {
       if (entries.some((entry) => entry.isIntersecting)) {
-        console.warn(
-          `[infinitescroll] Reached data-infinitescroll-bottom, calling callback ${callback.name}`,
-        );
+        log(`reached data-infinitescroll-bottom, calling callback`);
         await callback();
       }
     });
@@ -97,9 +99,10 @@ export function setupScrollPositionRestorer(
   scrollableArea: HTMLElement | null | (() => HTMLElement | null),
   onScroll: (scrolled: boolean) => void,
 ) {
+  const log = taggedLogger('scrollrestorer');
   const scrollableElement = () => {
     const element = scrollableArea instanceof Function ? scrollableArea() : scrollableArea;
-    console.info(`[scrollrestorer] Using scrollable element`, element);
+    log(`Using scrollable element`, element);
     return element ?? document.documentElement;
   };
   /**
@@ -112,7 +115,7 @@ export function setupScrollPositionRestorer(
     const scrollpos = {
       [get(page).url.pathname]: scrollableElement().scrollTop,
     };
-    console.info(`[scrollrestorer] Saving scroll position`, scrollpos);
+    log(`Saving scroll position`, scrollpos);
     scrollPositions.set({
       ...get(scrollPositions),
       ...scrollpos,
@@ -121,9 +124,7 @@ export function setupScrollPositionRestorer(
 
   afterNavigate(async () => {
     const scrollpos = get(scrollPositions)[get(page).url.pathname];
-    console.info(
-      `[scrollrestorer] Restoring scroll position for ${get(page).url.pathname}: ${scrollpos}`,
-    );
+    log(`Restoring scroll position for ${get(page).url.pathname}: ${scrollpos}`);
     scrollableElement().scrollTo(0, scrollpos ?? 0);
   });
 
@@ -143,3 +144,9 @@ export function scrollableContainer(mobile: boolean) {
     ? (document.querySelector('#scrollable-area') as HTMLElement)
     : (document.documentElement as HTMLElement);
 }
+
+function taggedLogger(tag: string) {
+  return (...msg: unknown[]) => {
+    if (get(debugging)) console.info(`[${tag}]`, ...msg);
+  };
+}
diff --git a/packages/app/src/routes/(app)/events/[id]/bookings/+page.gql b/packages/app/src/routes/(app)/events/[id]/bookings/+page.gql
@@ -23,36 +23,38 @@ query PageEventAllBookings($id: LocalID!, $filter: BookingState!) @loading {
         hasNextPage
         endCursor
       }
-      nodes @loading(count: 30) {
-        id
-        code
-        ...BookingBeneficiary
-        ...BookingAuthor
-        ticket {
-          name
-        }
-        verifiedAt
-        verifiedBy {
-          ...AvatarUser
-          fullName
-        }
-        cancelledAt
-        cancelledBy {
-          ...AvatarUser
-          fullName
-        }
-        opposedAt
-        opposedBy {
-          ...AvatarUser
-          fullName
-        }
-        updatedAt
-        ...BookingPaymentMethod
-        ...BookingStatus
-        authorIsBeneficiary
-        author {
-          ...AvatarUser
-          fullName
+      edges @loading(count: 30) {
+        node {
+          id
+          code
+          ...BookingBeneficiary
+          ...BookingAuthor
+          ticket {
+            name
+          }
+          verifiedAt
+          verifiedBy {
+            ...AvatarUser
+            fullName
+          }
+          cancelledAt
+          cancelledBy {
+            ...AvatarUser
+            fullName
+          }
+          opposedAt
+          opposedBy {
+            ...AvatarUser
+            fullName
+          }
+          updatedAt
+          ...BookingPaymentMethod
+          ...BookingStatus
+          authorIsBeneficiary
+          author {
+            ...AvatarUser
+            fullName
+          }
         }
       }
     }

diff --git a/packages/app/src/routes/(app)/events/[id]/bookings/+page.svelte b/packages/app/src/routes/(app)/events/[id]/bookings/+page.svelte
@@ -4,22 +4,22 @@
   import { graphql, type PageEventAllBookings$result } from '$houdini';
   import Alert from '$lib/components/Alert.svelte';
   import AvatarUser from '$lib/components/AvatarUser.svelte';
+  import BookingAuthor from '$lib/components/BookingAuthor.svelte';
   import BookingBeneficiary from '$lib/components/BookingBeneficiary.svelte';
   import BookingPaymentMethod from '$lib/components/BookingPaymentMethod.svelte';
   import BookingStatus from '$lib/components/BookingStatus.svelte';
-  import BookingAuthor from '$lib/components/BookingAuthor.svelte';
   import ButtonCopyToClipboard from '$lib/components/ButtonCopyToClipboard.svelte';
   import ButtonSecondary from '$lib/components/ButtonSecondary.svelte';
+  import LoadingScreen from '$lib/components/LoadingScreen.svelte';
   import MaybeError from '$lib/components/MaybeError.svelte';
-  import NavigationTabs from '$lib/components/NavigationTabs.svelte';
   import ModalOrDrawer from '$lib/components/ModalOrDrawer.svelte';
+  import NavigationTabs from '$lib/components/NavigationTabs.svelte';
   import { formatDateTimeSmart } from '$lib/dates';
   import { allLoaded, loaded, loading, LoadingText, mapLoading } from '$lib/loading';
   import { refroute } from '$lib/navigation';
   import { isPWA } from '$lib/pwa';
   import { route } from '$lib/ROUTES';
   import { infinitescroll } from '$lib/scroll';
-  import { notNull } from '$lib/typing';
   import IconOpenTicketPage from '~icons/msl/open-in-new';
   import type { PageData } from './$houdini';
   import { tabToFilter } from './filters';
@@ -31,7 +31,7 @@
   $: activeTab = ($page.url.searchParams.get('tab') ?? 'unpaid') as (typeof FILTERS)[number];
 
   let openBookingDetailModal: () => void;
-  let selectedBooking: PageEventAllBookings$result['event']['bookings']['nodes'][number];
+  let selectedBooking: PageEventAllBookings$result['event']['bookings']['edges'][number]['node'];
 
   const updates = graphql(`
     subscription BookingsListUpdates($id: LocalID!, $filter: BookingState!) {
@@ -54,8 +54,8 @@
   $: newBookingsCount =
     $updates.data?.event.bookings.nodes.filter(
       (fresh) =>
-        !$PageEventAllBookings.data?.event.bookings.nodes.some(
-          (existing) => existing.id === fresh.id,
+        !$PageEventAllBookings.data?.event.bookings.edges.some(
+          ({ node: existing }) => existing.id === fresh.id,
         ),
     ).length ?? 0;
 
@@ -203,7 +203,7 @@
       </NavigationTabs>
     </header>
     <ul class="bookings" use:infinitescroll={() => PageEventAllBookings.loadNextPage()}>
-      {#each event.bookings.nodes.filter(notNull) as booking}
+      {#each event.bookings.edges as { node: booking }}
         <li>
           <button
             class="booking"
@@ -251,6 +251,12 @@
         <li class="booking empty muted">Aucune résevation pour le moment</li>
       {/each}
     </ul>
+    {#if loading(event.bookings.pageInfo.hasNextPage, false)}
+      <!-- TODO: Move to ./ItemBooking.svelte and add a loading placeholder one here  -->
+      <div class="loading-more">
+        <LoadingScreen />
+      </div>
+    {/if}
   </div>
 </MaybeError>
 
@@ -353,4 +359,11 @@
     gap: 0.5ch;
     align-items: center;
   }
+
+  .loading-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7em;
+  }
 </style>
diff --git a/packages/app/src/routes/(app)/login/done/+page.svelte b/packages/app/src/routes/(app)/login/done/+page.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { cache } from '$houdini';
-  import { LoadingChurros } from '$lib/loading';
+  import LoadingScreen from '$lib/components/LoadingScreen.svelte';
   import { route } from '$lib/ROUTES';
   import { onMount } from 'svelte';
 
@@ -12,37 +12,4 @@
   });
 </script>
 
-<div class="loading">
-  <LoadingChurros />
-  <p>Connexion…</p>
-</div>
-
-<style>
-  .loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100%;
-    font-size: 7rem;
-  }
-
-  .loading p {
-    margin-top: 2rem;
-    font-size: 1.5rem;
-    font-weight: bold;
-    background: linear-gradient(90deg, var(--fg), var(--primary), var(--fg));
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    /* stylelint-disable-next-line */
-    text-fill-color: transparent;
-    background-size: 200% auto;
-    animation: textgradient 1s linear infinite reverse;
-  }
-
-  @keyframes textgradient {
-    to {
-      background-position: 200% center;
-    }
-  }
-</style>
+<LoadingScreen title="Connexion…" />