Show api error on possible ratelimit responses requests for beatmap requests

lib/hooks/api/beatmap/useBeatmap.ts

@@ -4,8 +4,17 @@ import useSWR from "swr";
 
 import type { BeatmapResponse } from "@/lib/types/api";
 
+import { useToastApiRequestFailed } from "../../useToastApiRequestFailed";
+
 export function useBeatmap(beatmapId: number | null) {
-  return useSWR<BeatmapResponse>(beatmapId ? `beatmap/${beatmapId}` : null, {
-    dedupingInterval: 1000 * 60 * 10,
-  });
+  const swrResult = useSWR<BeatmapResponse>(
+    beatmapId ? `beatmap/${beatmapId}` : null,
+    {
+      dedupingInterval: 1000 * 60 * 10,
+    },
+  );
+
+  useToastApiRequestFailed(swrResult);
+
+  return swrResult;
 }

lib/hooks/api/beatmap/useBeatmapSet.ts

@@ -4,11 +4,17 @@ import useSWR from "swr";
 
 import type { BeatmapSetResponse } from "@/lib/types/api";
 
+import { useToastApiRequestFailed } from "../../useToastApiRequestFailed";
+
 export function useBeatmapSet(beatmapSetId: number | null) {
-  return useSWR<BeatmapSetResponse>(
+  const swrResult = useSWR<BeatmapSetResponse>(
     beatmapSetId ? `beatmapset/${beatmapSetId}` : null,
     {
       dedupingInterval: 1000 * 60 * 10,
     },
   );
+
+  useToastApiRequestFailed(swrResult);
+
+  return swrResult;
 }

lib/hooks/useToastApiRequestFailed.ts

@@ -0,0 +1,49 @@
+"use client";
+
+import type { HTTPError } from "ky";
+import { useEffect, useRef } from "react";
+import type { SWRResponse } from "swr";
+
+import { useToast } from "@/hooks/use-toast";
+
+import type { ProblemDetailsResponseType } from "../types/api";
+
+export function useToastApiRequestFailed<T>(swrResult: SWRResponse<T>) {
+  const { toast } = useToast();
+  const lastErrorRef = useRef<Error | null>(null);
+
+  useEffect(() => {
+    const { error } = swrResult;
+
+    if (error && error !== lastErrorRef.current) {
+      lastErrorRef.current = error;
+
+      if (error instanceof Error && "response" in error) {
+        const httpError = error as HTTPError;
+
+        if (httpError.response?.status && httpError.response.status >= 404) {
+          try {
+            const problemDetails = JSON.parse(httpError.message) as ProblemDetailsResponseType;
+
+            if (!problemDetails.detail)
+              throw new Error("No detail in problem details response");
+
+            toast({
+              title: "Error",
+              description: problemDetails.detail,
+              variant: "destructive",
+            });
+          }
+          catch {
+            // Ignore the error if it's not a ProblemDetailsResponseType
+          }
+        }
+      }
+    }
+
+    if (!error && lastErrorRef.current) {
+      lastErrorRef.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only need to react to error changes
+  }, [swrResult.error, toast]);
+}