Bugfix/guests page (#153)

* add pagination to guests page * animate load more button * remove unused code from guest page
Refuge-Worldwide · Nov 22, 2024 · 1de3fb7 · 1de3fb7
1 parent 3ddc9b0
commit 1de3fb7
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 72 deletions.
diff --git a/components/guestRow.tsx b/components/guestRow.tsx
@@ -10,7 +10,7 @@ type ArtistRowProps = {
 export default function GuestRow({ alphabet, artists }: ArtistRowProps) {
   return (
     <section id={alphabet} className="border-t-2 border-black">
-      <div className="p-4 sm:p-8">
+      <div className="p-4 sm:p-8 relative">
         <Pill>
           <h2>{alphabet}</h2>
         </Pill>

diff --git a/components/loadMore.tsx b/components/loadMore.tsx
@@ -0,0 +1,78 @@
+export default function LoadMore({ loading }: { loading: boolean }) {
+  return (
+    <svg
+      width="117"
+      height="118"
+      viewBox="0 0 117 118"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#clip0_0_10539)"
+        style={{ transformBox: "fill-box" }}
+        className={loading ? "animate-spin origin-center" : ""}
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M48.9131 48.7924C55.4551 48.7924 61.2581 51.9364 64.9071 56.7924H56.9131C56.3611 56.7924 55.9131 57.2404 55.9131 57.7924C55.9131 58.3454 56.3611 58.7924 56.9131 58.7924H66.9131C67.4651 58.7924 67.9131 58.3454 67.9131 57.7924V47.7924C67.9131 47.2404 67.4651 46.7924 66.9131 46.7924C66.3611 46.7924 65.9131 47.2404 65.9131 47.7924V54.8624C61.8811 49.9414 55.7711 46.7924 48.9131 46.7924C36.7631 46.7924 26.9131 56.6424 26.9131 68.7924C26.9131 69.3454 27.3611 69.7924 27.9131 69.7924C28.4651 69.7924 28.9131 69.3454 28.9131 68.7924C28.9131 57.7474 37.8671 48.7924 48.9131 48.7924ZM69.9131 67.7924C69.3611 67.7924 68.9131 68.2404 68.9131 68.7924C68.9131 79.8384 59.9591 88.7924 48.9131 88.7924C42.3711 88.7924 36.5681 85.6484 32.9191 80.7924H40.9131C41.4651 80.7924 41.9131 80.3454 41.9131 79.7924C41.9131 79.2404 41.4651 78.7924 40.9131 78.7924H30.9131C30.3611 78.7924 29.9131 79.2404 29.9131 79.7924V89.7924C29.9131 90.3454 30.3611 90.7924 30.9131 90.7924C31.4651 90.7924 31.9131 90.3454 31.9131 89.7924V82.7234C35.9451 87.6444 42.0551 90.7924 48.9131 90.7924C61.0631 90.7924 70.9131 80.9424 70.9131 68.7924C70.9131 68.2404 70.4651 67.7924 69.9131 67.7924Z"
+          fill="black"
+        />
+      </g>
+      <path
+        d="M20.5974 30.4488L28.5718 25.5478L27.4198 23.6735L21.5754 27.2654L15.3968 17.2123L13.2669 18.5213L20.5974 30.4488Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M33.7507 24.5139C36.7089 23.5221 38.0512 20.7306 37.1039 17.9052C36.1566 15.0798 33.403 13.6615 30.4448 14.6533C27.4677 15.6514 26.1254 18.4429 27.0727 21.2683C28.0199 24.0938 30.7736 25.512 33.7507 24.5139ZM33.1086 22.5986C31.4968 23.139 29.8829 22.4778 29.2344 20.5436C28.5859 18.6094 29.4751 17.1089 31.0869 16.5685C32.6988 16.0281 34.2937 16.6958 34.9422 18.63C35.5906 20.5642 34.7204 22.0583 33.1086 22.5986Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M42.8851 22.8798C44.2545 22.7093 45.2596 21.8788 45.9299 20.9488L45.9894 20.9414C46.5024 21.986 47.4003 22.237 48.2735 22.1283C48.6506 22.0814 49.0228 21.9947 49.4992 21.7742L49.2965 20.1467L49.2321 20.1145C49.0584 20.1764 48.9418 20.2111 48.8028 20.2284C48.267 20.2951 47.9645 19.97 47.8854 19.3349L47.3789 15.2663C47.1145 13.1427 45.2917 12.0999 42.9299 12.3939C40.9849 12.6361 39.4041 13.8608 39.289 16.0115L39.3981 16.0785L41.3753 15.9331C41.4303 14.9185 42.0632 14.3359 43.0754 14.2099C44.2067 14.069 45.0449 14.4887 45.1784 15.5604L45.2451 16.0963L42.4044 16.7523C40.4444 17.1978 39.1265 18.4301 39.3613 20.3155C39.5886 22.1414 41.1187 23.0997 42.8851 22.8798ZM43.0721 20.9822C42.2782 21.081 41.6111 20.7408 41.5098 19.9271C41.4208 19.2126 41.8652 18.5728 42.8997 18.3029L45.4428 17.684L45.6231 19.1328C44.9429 20.1446 44.1835 20.8438 43.0721 20.9822Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M53.5342 21.8569C55.0274 22 56.0801 21.4982 56.782 20.8823L56.679 21.9574L58.9486 22.1749L60.3414 7.64147L58.0718 7.42397L57.5433 12.9387C56.8535 12.1694 55.8403 11.6303 54.5861 11.5101C52.0377 11.2659 49.6722 12.8876 49.3517 16.2323C49.0312 19.577 51.2049 21.6337 53.5342 21.8569ZM54.1791 19.9498C52.6063 19.799 51.4314 18.6417 51.6412 16.4517C51.8511 14.2617 53.2245 13.3486 54.7774 13.4974C56.2506 13.6386 57.362 14.83 57.2246 16.2635L57.0854 17.7168C56.948 19.1503 55.6324 20.089 54.1791 19.9498Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M63.4 23.7624L65.4488 24.7628L68.3971 18.7241C69.2422 18.2241 70.2326 17.9732 71.0414 18.3681C71.94 18.8068 72.0454 19.5482 71.6242 20.4109L68.7198 26.3598L70.7686 27.3601L73.7784 21.1956C74.6589 20.6684 75.5165 20.553 76.3253 20.9479C77.2239 21.3866 77.374 22.1276 76.9616 22.9723L74.0396 28.9571L76.0885 29.9574L79.2649 23.4514C80.0371 21.8698 79.647 20.344 77.7958 19.4402C76.6815 18.8962 75.4917 18.8716 74.2433 19.286C74.2248 18.2754 73.77 17.4747 72.6198 16.9131C71.5235 16.3778 70.3967 16.4064 69.3185 16.837L69.8362 15.7766L67.7873 14.7763L63.4 23.7624Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M80.3243 33.7074C82.6691 35.7657 85.757 35.5222 87.7229 33.2826C89.6887 31.043 89.5299 27.9497 87.1851 25.8914C84.8253 23.82 81.7375 24.0635 79.7716 26.3031C77.8057 28.5426 77.9645 31.636 80.3243 33.7074ZM81.6569 32.1893C80.3793 31.0678 80.1393 29.3403 81.4851 27.8072C82.8309 26.274 84.5749 26.2881 85.8526 27.4095C87.1302 28.531 87.3551 30.2454 86.0093 31.7785C84.6636 33.3116 82.9345 33.3108 81.6569 32.1893Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M84.9483 38.2379L86.3314 40.0505L91.3716 36.2044C92.7176 35.9573 93.8209 36.3481 94.4882 37.2226C94.6823 37.477 94.7756 37.6322 94.8409 37.7837L94.9371 37.8109L96.5819 36.9332C96.54 36.7135 96.4057 36.4386 96.1874 36.1524C95.4351 35.1666 94.3281 34.8038 93.2955 34.7364L94.2813 33.9842L92.8982 32.1716L84.9483 38.2379Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M90.8066 47.331C91.9774 49.4717 93.8523 50.3155 96.1247 49.8022L96.1836 49.7015L95.3292 47.8893C94.2264 48.0821 93.2092 47.681 92.5278 46.4352C91.76 45.0314 92.1 43.5689 93.4908 42.6942L97.1665 49.4147L97.7807 49.0788C100.606 47.5337 101.294 44.8321 99.931 42.3405C98.6546 40.0067 95.7068 38.9518 92.9695 40.449C90.2322 41.9461 89.367 44.6989 90.8066 47.331ZM94.9664 41.9327C96.3817 41.4778 97.6465 42.0398 98.2991 43.233C98.9901 44.4964 98.8177 45.89 97.5864 46.7231L94.9664 41.9327Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M93.4535 53.3053C93.7405 54.0947 94.6632 54.5254 95.4714 54.2316C96.2609 53.9446 96.6916 53.0219 96.4046 52.2324C96.1107 51.4242 95.188 50.9935 94.3986 51.2805C93.5904 51.5744 93.1597 52.497 93.4535 53.3053Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M94.4793 57.4025C94.6856 58.2168 95.5604 58.7379 96.394 58.5266C97.2083 58.3203 97.7294 57.4455 97.5231 56.6312C97.3118 55.7976 96.437 55.2765 95.6228 55.4828C94.7891 55.694 94.268 56.5688 94.4793 57.4025Z"
+        fill="#2B2E34"
+      />
+      <path
+        d="M95.492 61.4763C95.6369 62.3037 96.4703 62.8887 97.3174 62.7404C98.1448 62.5954 98.7298 61.762 98.5849 60.9346C98.4366 60.0875 97.6032 59.5025 96.7758 59.6474C95.9287 59.7958 95.3437 60.6292 95.492 61.4763Z"
+        fill="#2B2E34"
+      />
+      <defs>
+        <clipPath id="clip0_0_10539">
+          <rect
+            width="44"
+            height="44"
+            fill="white"
+            transform="translate(26.9131 46.7924)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/hooks/useArtistsGuests.ts b/hooks/useArtistsGuests.ts
@@ -6,17 +6,22 @@ import {
 import { AllArtistEntry } from "../types/shared";
 
 export default function useArtistsGuests(fallbackData: AllArtistEntry[]) {
-  const { data, setSize } = useSWRInfinite(
-    (pageIndex) => ["ArtistsGuests", pageIndex * ARTISTS_GUESTS_PAGE_SIZE],
-    async (_, skip) =>
-      getArtistsPage(false, ARTISTS_GUESTS_PAGE_SIZE, skip as number),
+  const { data, setSize, error, isValidating, isLoading } = useSWRInfinite(
+    (pageIndex) => [pageIndex * ARTISTS_GUESTS_PAGE_SIZE],
+    async (skip) => {
+      const r = await fetch(
+        `/api/artists?limit=${ARTISTS_GUESTS_PAGE_SIZE}&skip=${skip}&role=false`
+      );
+
+      return await r.json();
+    },
     {
       fallbackData: [fallbackData],
       revalidateFirstPage: false,
     }
   );
 
-  const guests = data.flat();
+  const guests = data ? data.flat() : [];
 
   const loadMore = () => setSize((size) => size + 1);
 
@@ -28,5 +33,8 @@ export default function useArtistsGuests(fallbackData: AllArtistEntry[]) {
     guests,
     loadMore,
     isReachingEnd,
+    isValidating,
+    isLoading,
+    isError: error,
   };
 }
diff --git a/hooks/useRadioShows.ts b/hooks/useRadioShows.ts
@@ -6,7 +6,7 @@ export default function useRadioShows(
   fallbackData: PastShowSchema[],
   filter: string[]
 ) {
-  const { data, isValidating, setSize } = useSWRInfinite(
+  const { data, setSize, error, isValidating, isLoading } = useSWRInfinite(
     (pageIndex) => [pageIndex * RADIO_SHOWS_PAGE_SIZE, filter],
     async (skip) => {
       const r = await fetch(
@@ -31,12 +31,12 @@ export default function useRadioShows(
     data?.[0]?.length === 0 ||
     data[data.length - 1]?.length < RADIO_SHOWS_PAGE_SIZE;
 
-  const isRefreshing = isValidating && data;
-
   return {
     shows,
     loadMore,
-    isRefreshing,
     isReachingEnd,
+    isValidating,
+    isLoading,
+    isError: error,
   };
 }
diff --git a/lib/contentful/pages/artists.ts b/lib/contentful/pages/artists.ts
@@ -8,13 +8,16 @@ import {
 import { extractCollection, extractCollectionItem, sort } from "../../../util";
 import { AllArtistFragment } from "../fragments";
 
-export const ARTISTS_GUESTS_PAGE_SIZE = 50;
+export const ARTISTS_GUESTS_PAGE_SIZE = 500;
 
 export async function getArtistsPage(
   role: boolean,
   limit: number,
   skip: number
 ) {
+  console.log("role", role);
+  console.log("limit", limit);
+  console.log("skip", skip);
   const ArtistsPageQuery = /* GraphQL */ `
     query ArtistsPageQuery($limit: Int, $skip: Int, $role: Boolean) {
       artistCollection(

diff --git a/pages/api/artists.ts b/pages/api/artists.ts
@@ -0,0 +1,32 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getArtistsPage } from "../../lib/contentful/pages/artists";
+import { AllArtistEntry } from "../../types/shared";
+import { assertError } from "ts-extras";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<AllArtistEntry[] | { message: string }>
+) {
+  try {
+    const { role, limit, skip } = req.query as typeof req.query & {
+      role: string;
+      limit: string;
+      skip: string;
+    };
+
+    const roleBoolean = role.toLowerCase() === "true";
+
+    const artists = await getArtistsPage(
+      roleBoolean,
+      Number(limit),
+      Number(skip)
+    );
+    res.status(200).json(artists);
+  } catch (error) {
+    assertError(error);
+
+    console.log(error);
+
+    res.status(400).json({ message: error.message });
+  }
+}
diff --git a/pages/artists/guests.tsx b/pages/artists/guests.tsx
@@ -6,34 +6,30 @@ import Layout from "../../components/layout";
 import Pill from "../../components/pill";
 import PageMeta from "../../components/seo/page";
 import { getArtistsPage } from "../../lib/contentful/pages/artists";
-import { ALPHABET } from "../../constants";
 import { sortAndGroup } from "../../util";
+import useArtistsGuests from "../../hooks/useArtistsGuests";
+import { ARTISTS_GUESTS_PAGE_SIZE } from "../../lib/contentful/pages/artists";
+import LoadMore from "../../components/loadMore";
 
 export async function getStaticProps({ preview = false }) {
   return {
     props: {
       preview,
-      guests: await getArtistsPage(false, 1000, 0),
-      guestsTwo: await getArtistsPage(false, 1000, 1000),
-      guestsThree: await getArtistsPage(false, 1000, 2000),
+      guests: await getArtistsPage(false, ARTISTS_GUESTS_PAGE_SIZE, 0),
     },
   };
 }
 
 export default function GuestsPage({
   preview,
-  guests,
-  guestsTwo,
-  guestsThree,
+  guests: fallbackData,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const allGuests = guests.concat(guestsTwo, guestsThree);
-  const sections = sortAndGroup(allGuests);
+  const { guests, loadMore, isReachingEnd, isValidating, isLoading, isError } =
+    useArtistsGuests(fallbackData);
+  const sections = sortAndGroup(guests);
 
   return (
-    <Layout
-      preview={preview}
-      className="bg-purple flex flex-col-reverse sm:flex-row-reverse"
-    >
+    <Layout preview={preview} className="bg-purple">
       <PageMeta title="Guests | Refuge Worldwide" path="guests/" />
 
       <div>
@@ -61,37 +57,30 @@ export default function GuestsPage({
           </ul>
         </section>
 
-        {sections.map((section, i) => (
-          <GuestRow key={i} {...section} />
-        ))}
-      </div>
-
-      <aside className="border-b-2 sm:border-b-0 sm:border-r-2">
-        <ul className="sm:sticky sm:top-16 p-4 overflow-scroll hide-scrollbar flex sm:block space-x-4 sm:space-x-0 text-small text-center whitespace-nowrap">
-          {ALPHABET.map((letter, i) => {
-            const letterHasArtists =
-              sections.filter((section) => section.alphabet === letter).length >
-              0;
-
-            if (letterHasArtists)
-              return (
-                <li key={i}>
-                  <a className="text-black font-medium" href={`#${letter}`}>
-                    <span>{letter}</span>
-                  </a>
-                </li>
-              );
+        {sections.map(
+          (section, i) =>
+            (section.alphabet !== "#" || isReachingEnd) && (
+              <GuestRow key={i} {...section} />
+            )
+        )}
 
-            return (
-              <li key={i}>
-                <span className="text-black/25">{letter}</span>
-              </li>
-            );
-          })}
+        {!isReachingEnd && (
+          <div className="flex justify-center mt-10 sm:mt-8">
+            <button
+              onClick={loadMore}
+              className="inline-flex focus:outline-none rounded-full items-center justify-center group"
+              aria-label="Load more guests"
+            >
+              <LoadMore loading={isValidating} />
 
-          <li>&nbsp;</li>
-        </ul>
-      </aside>
+              <span
+                className="absolute rounded-full h-20 w-20 group-focus-visible:ring-4"
+                aria-hidden
+              />
+            </button>
+          </div>
+        )}
+      </div>
     </Layout>
   );
 }
diff --git a/pages/artists/index.tsx b/pages/artists/index.tsx
@@ -58,7 +58,7 @@ export default function ArtistsPage({
         ))}
       </div>
 
-      <aside className="border-b-2 sm:border-b-0 sm:border-r-2">
+      <aside className="border-b-2 sm:border-b-0 sm:border-r-2 sticky top-12 md:static bg-purple">
         <ul className="sm:sticky sm:top-16 p-4 overflow-scroll hide-scrollbar flex sm:block space-x-4 sm:space-x-0 text-small text-center whitespace-nowrap">
           {ALPHABET.map((letter, i) => {
             const letterHasArtists =

diff --git a/views/radio/allShows.tsx b/views/radio/allShows.tsx
@@ -6,7 +6,7 @@ import useRadioShows from "../../hooks/useRadioShows";
 import { PastShowSchema } from "../../types/shared";
 import Image from "next/image";
 import { useState } from "react";
-
+import LoadMore from "../../components/loadMore";
 export default function AllShows({
   genres,
   pastShows: fallbackData,
@@ -16,10 +16,8 @@ export default function AllShows({
 }) {
   const { filter, filterSet } = useGenreFilter();
 
-  const { shows, loadMore, isRefreshing, isReachingEnd } = useRadioShows(
-    fallbackData,
-    filter
-  );
+  const { shows, loadMore, isReachingEnd, isValidating, isLoading, isError } =
+    useRadioShows(fallbackData, filter);
 
   return (
     <section>
@@ -36,7 +34,7 @@ export default function AllShows({
 
         <div className="h-5 sm:h-8" />
 
-        {isRefreshing && (
+        {isLoading && (
           <span className="block mx-auto h-96 mt-24 text-center animate-pulse font-medium text-base">
             Loading...
           </span>
@@ -50,25 +48,17 @@ export default function AllShows({
           ))}
         </ul>
 
-        {!isReachingEnd && !isRefreshing && (
+        {!isReachingEnd && (
           <div className="flex justify-center mt-10 sm:mt-8">
             <button
               onClick={loadMore}
+              disabled={isValidating}
               className="inline-flex focus:outline-none rounded-full items-center justify-center group"
               aria-label="Load more shows"
             >
-              <Image
-                src="/images/load-more-button.svg"
-                unoptimized
-                aria-hidden
-                width={128}
-                height={128}
-                priority
-                alt=""
-              />
-
+              <LoadMore loading={isValidating} />
               <span
-                className="absolute rounded-full h-20 w-20 group-focus:ring-4"
+                className="absolute rounded-full h-20 w-20 group-focus-visible:ring-4"
                 aria-hidden
               />
             </button>