bugfix same key for fetch with guests and news page

hooks/useArtistsGuests.ts

@@ -5,16 +5,21 @@ import {
 } from "../lib/contentful/pages/artists";
 import { AllArtistEntry } from "../types/shared";
 
+const fetcher = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("An error occurred while fetching the data.");
+  }
+  return await response.json();
+};
+
 export default function useArtistsGuests(fallbackData: AllArtistEntry[]) {
   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();
-    },
+    (pageIndex) =>
+      `/api/artists?limit=${ARTISTS_GUESTS_PAGE_SIZE}&skip=${
+        pageIndex * ARTISTS_GUESTS_PAGE_SIZE
+      }&role=false`,
+    fetcher,
     {
       fallbackData: [fallbackData],
       revalidateFirstPage: false,

hooks/useNewsArticles.ts

@@ -6,7 +6,7 @@ import {
 } from "../lib/contentful/pages/news";
 
 export default function useNewsArticles(fallbackData: ArticleInterface[]) {
-  const { data, setSize } = useSWRInfinite(
+  const { data, setSize, isValidating } = useSWRInfinite(
     (pageIndex) => [pageIndex * NEWS_ARTICLES_PAGE_SIZE],
     async (skip) =>
       getNewsPageArticles(false, NEWS_ARTICLES_PAGE_SIZE, skip[0]),
@@ -30,5 +30,6 @@ export default function useNewsArticles(fallbackData: ArticleInterface[]) {
     articles,
     loadMore,
     isReachingEnd,
+    isValidating,
   };
 }

hooks/useRadioShows.ts

@@ -2,21 +2,24 @@ import useSWRInfinite from "swr/infinite";
 import { PastShowSchema } from "../types/shared";
 import { RADIO_SHOWS_PAGE_SIZE } from "../lib/contentful/pages/radio";
 
+const fetcher = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("An error occurred while fetching the data.");
+  }
+  return await response.json();
+};
+
 export default function useRadioShows(
   fallbackData: PastShowSchema[],
   filter: string[]
 ) {
   const { data, setSize, error, isValidating, isLoading } = useSWRInfinite(
-    (pageIndex) => [pageIndex * RADIO_SHOWS_PAGE_SIZE, filter],
-    async (skip) => {
-      const r = await fetch(
-        `/api/shows?take=${RADIO_SHOWS_PAGE_SIZE}&skip=${skip}&filter=${encodeURIComponent(
-          filter.join(",")
-        )}`
-      );
-
-      return await r.json();
-    },
+    (pageIndex) =>
+      `/api/shows?take=${RADIO_SHOWS_PAGE_SIZE}&skip=${
+        pageIndex * RADIO_SHOWS_PAGE_SIZE
+      }&filter=${encodeURIComponent(filter.join(","))}`,
+    fetcher,
     {
       fallbackData: filter.length == 0 ? [fallbackData] : [],
       revalidateFirstPage: false,

lib/contentful/pages/artists.ts

@@ -8,16 +8,13 @@ import {
 import { extractCollection, extractCollectionItem, sort } from "../../../util";
 import { AllArtistFragment } from "../fragments";
 
-export const ARTISTS_GUESTS_PAGE_SIZE = 500;
+export const ARTISTS_GUESTS_PAGE_SIZE = 250;
 
 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(

views/news/allArticles.tsx

@@ -3,13 +3,15 @@ import useNewsArticles from "../../hooks/useNewsArticles";
 import { ArticleInterface } from "../../types/shared";
 import Image from "next/image";
 import { useState, useEffect } from "react";
+import LoadMore from "../../components/loadMore";
 
 export default function AllArticles({
   articles: fallbackData,
 }: {
   articles: ArticleInterface[];
 }) {
-  const { articles, loadMore, isReachingEnd } = useNewsArticles(fallbackData);
+  const { articles, loadMore, isReachingEnd, isValidating } =
+    useNewsArticles(fallbackData);
 
   return (
     <section>
@@ -26,21 +28,13 @@ export default function AllArticles({
           <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>

views/radio/allShows.tsx

@@ -48,7 +48,7 @@ export default function AllShows({
           ))}
         </ul>
 
-        {!isReachingEnd && (
+        {!isReachingEnd && !isLoading && (
           <div className="flex justify-center mt-10 sm:mt-8">
             <button
               onClick={loadMore}