Add pagination for past events (#134)

Fixes #129

---------

Co-authored-by: Anton Lilleby <antonlilleby@Anton-sin-MacBook-Pro.local>

README.md

@@ -1,4 +1,4 @@
-# Skjer 
+# Skjer
 
 En løsning for administrasjon og visning av både interne og eksterne arrangementer hos Capra, Fryde og Liflig.
 Dette inkluderer fagsirkler, konferanser, frokostseminarer og sosiale begivenheter.
@@ -17,7 +17,7 @@ Innhold og bilder i [Sanity](https://www.sanity.io)
 
 **Verktøy**
 
-- [Node.js](https://nodejs.org) (v18.19 eller senere)
+- [Node.js](https://nodejs.org) (se .node-version)
 - [PNPM](https://pnpm.io/installation) (9.0.6 eller senere)
 - [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (anbefalt)
 - [Supabase CLI](https://supabase.com/docs/guides/cli/getting-started) (anbefalt)
@@ -27,7 +27,7 @@ Innhold og bilder i [Sanity](https://www.sanity.io)
 
 For å kjøre koden lokalt:
 
-1. Be om environment variabler for lokal testing i kanalen [#tmp_arrangementsoversikt]().
+1. Be om environment variabler for lokal testing i kanalen [#skjer]().
    Du må selv opprette en `.env.local` fil i både /studio og /app.
 
 Hvis du trenger tilgang til Sanity Studio, eventuelt Google Console, Vercel og Supabase, må dette også spesifikt forespørres.
@@ -106,8 +106,6 @@ SvelteKit blir foreløpig deployet til [https://capra-web.vercel.app](https://ca
 vercel deploy
 ```
 
-👷 Vi er på en Vercel-plan som ikke tillater bygg og deploy i en organisasjon. Må undersøke CI/CD-løsninger på et tidspunkt for å automatisere vår deploy prosess.
-
 ### Lint
 
 SvelteKit templaten [sanity-template-sveltekit-clean](https://github.com/sanity-io/sanity-template-sveltekit-clean) har en eslint konfigurasjon som ikke funker. Har prøvd å oppgradere til eslint 9 med flatconfig fra denne [issuen](https://github.com/sveltejs/eslint-plugin-svelte/issues/732). 👷 Det er en del lint-errors som må undersøkes.

app/src/app.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <link rel="stylesheet" href="%sveltekit.assets%/global.css" />
     <meta name="viewport" content="width=device-width" />
-    <meta name="description" content="Arrangementer | Capra Liflig Fryde" />
+    <meta name="description" content="Skjer | Capra Liflig Fryde" />
 
     %sveltekit.head%
   </head>

app/src/lib/e2e/frontpage.spec.ts

@@ -4,5 +4,5 @@ test("has title", async ({ page }) => {
   await page.goto("/");
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle("Arrangementer | Capra Liflig Fryde");
+  await expect(page).toHaveTitle("Skjer | Capra Liflig Fryde");
 });

app/src/lib/server/sanity/queries.ts

@@ -14,7 +14,7 @@ export const eventQuery = groq`*[_type == "event" && _id == $id][0]{
 export const futureEventsQuery = groq`*[_type == "event" && start > now()] | order(start asc)`;
 export const pastEventsQuery = groq`*[_type == "event" && start <= now()] | order(start desc)`;
 
-export const externalFutureEventsQuery = groq`*[_type == "event" && start > now() && visibleForExternals] | order(start asc) `;
+export const externalFutureEventsQuery = groq`*[_type == "event" && start > now() && visibleForExternals] | order(start asc)`;
 export const externalPastEventsQuery = groq`*[_type == "event" && start <= now() && visibleForExternals] | order(start desc)`;
 
 export const getEventContent = async ({ document_id }: { document_id: string }) => {

app/src/routes/+page.svelte

@@ -10,12 +10,13 @@
 
   let { futureEvents, pastEvents, selectedCategory } = data;
 
+  let amountOfVisibleFutureEvents = 6;
+  let amountOfVisiblePastEvents = 6;
+
   $: futureEventsFiltered = futureEvents.filter(({ category }) => {
     if (!selectedCategory) return true;
     return category.toLowerCase() === selectedCategory;
   });
-
-  let amountOfVisibleEvents = 6;
 </script>
 
 <svelte:head>
@@ -36,17 +37,17 @@
 
   <div class="flex flex-col gap-4 py-5">
     {#if futureEventsFiltered.length}
-      {#each futureEventsFiltered.slice(0, amountOfVisibleEvents) as event}
+      {#each futureEventsFiltered.slice(0, amountOfVisibleFutureEvents) as event}
         <EventListItem {event} />
       {/each}
-      {#if futureEventsFiltered.length >= amountOfVisibleEvents}
-        <div class="flex flex-wrap self-center mt-6">
+      {#if futureEventsFiltered.length > amountOfVisibleFutureEvents}
+        <div class="mt-6 flex flex-wrap self-center">
           <Button
             class="hover:bg-zinc-800 hover:text-white dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"
             pill
             color="light"
-            on:click={() => amountOfVisibleEvents += 6}
             padding={3}
+            on:click={() => (amountOfVisibleFutureEvents += 6)}
           >
             <span>Se flere arrangementer</span>
             <span class="ml-2 w-[12px]"><ArrowDownIcon /></span>
@@ -61,14 +62,27 @@
 
 <section class="pb-8">
   <h1 class="pb-12 pt-10 text-4xl font-semibold md:w-[30%] md:text-5xl">Tidligere arrangementer</h1>
-
-  <div class="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-    {#if pastEvents.length}
-      {#each pastEvents as event}
+  {#if pastEvents.length}
+    <div class="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+      {#each pastEvents.slice(0, amountOfVisiblePastEvents) as event}
         <EventCard {event} />
       {/each}
-    {:else}
-      <div class="text-xl font-light">Fant ingen tidligere arrangementer 😭</div>
+    </div>
+    {#if pastEvents.length > amountOfVisiblePastEvents}
+      <div class="mt-6 flex flex-wrap self-center">
+        <Button
+          class="hover:bg-zinc-800 hover:text-white dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"
+          pill
+          color="light"
+          padding={3}
+          on:click={() => (amountOfVisiblePastEvents += 6)}
+        >
+          <span>Se flere arrangementer</span>
+          <span class="ml-2 w-[12px]"><ArrowDownIcon /></span>
+        </Button>
+      </div>
     {/if}
-  </div>
+  {:else}
+    <div class="text-xl font-light">Fant ingen tidligere arrangementer 😭</div>
+  {/if}
 </section>

studio/package.json

@@ -45,6 +45,6 @@
   },
   "packageManager": "pnpm@9.0.6",
   "engines": {
-    "node": ">= 14.18"
+    "node": "= 22"
   }
 }