Cache GameBanana API Results

[otobot1]

Closes #764.

[otobot1]

I haven't been able to test this yet, and I'm not sure when I'll have time. Theoretically the code is done and should work, but my code never works first try lol

[otobot1]

I still haven't had a chance to sit down and try this code. It'll probably be another week or two before I can.

[otobot1]

Finally had a chance to quickly test out this code. It isn't currently working - the requests to GameBanana to retrieve the download link and image URLs are still happening every time.

[ShouvikGhosh2048]

diff --git a/src/components/mods/modCarousel.tsx b/src/components/mods/modCarousel.tsx
index 15a458e..cae7afc 100644
--- a/src/components/mods/modCarousel.tsx
+++ b/src/components/mods/modCarousel.tsx
@@ -1,7 +1,7 @@
 import { Carousel } from "@mantine/carousel";
-import { useGamebananaModImageUrls } from "~/hooks/gamebananaApi/useModImageUrls";
 import { createStyles } from "@mantine/core";
 import { Image } from "@mantine/core";      //TODO!: replace with nextjs Image component once next.config.mjs is fixed
+import { useModImageUrls } from "~/hooks/globalContexts/modImageUrls";
 // import Image from "next/image";
 import type { DifficultyColor } from "~/styles/difficultyColors";
 
@@ -68,36 +68,32 @@ type modCarouselProps = {
 
 
 export const ModCarousel = ({ gamebananaModId, numberOfMaps, colors }: modCarouselProps) => {
-    const { imageUrls } = useGamebananaModImageUrls({ gamebananaModId });
+    const imageUrls = useModImageUrls({ gamebananaModId });
 
 
     const { cx, classes } = useStyles({ colors });
 
 
     return (
-        !imageUrls ? (
-            null
-        ) : (
-            <Carousel classNames={{
-                root: classes.carousel,
-                viewport: classes.viewport,
-                slide: cx(classes.slide, numberOfMaps >= 4 ? classes.imgMaxHeight400 : classes.imgMaxHeight250),
-                controls: classes.controls,
-                control: classes.control,
-            }}>
-                {imageUrls.map((imageUrl) => (
-                    <Carousel.Slide
-                        key={imageUrl}
-                        gap={"md"}
-                        size={"400px"}
-                    >
-                        <Image
-                            src={imageUrl}
-                            alt="Mod image"
-                        />
-                    </Carousel.Slide>
-                ))}
-            </Carousel>
-        )
+        <Carousel classNames={{
+            root: classes.carousel,
+            viewport: classes.viewport,
+            slide: cx(classes.slide, numberOfMaps >= 4 ? classes.imgMaxHeight400 : classes.imgMaxHeight250),
+            controls: classes.controls,
+            control: classes.control,
+        }}>
+            {imageUrls.map((imageUrl) => (
+                <Carousel.Slide
+                    key={imageUrl}
+                    gap={"md"}
+                    size={"400px"}
+                >
+                    <Image
+                        src={imageUrl}
+                        alt="Mod image"
+                    />
+                </Carousel.Slide>
+            ))}
+        </Carousel>
     );
 };
\ No newline at end of file
diff --git a/src/components/mods/modDownloadButton.tsx b/src/components/mods/modDownloadButton.tsx
index cdad42c..bbd0114 100644
--- a/src/components/mods/modDownloadButton.tsx
+++ b/src/components/mods/modDownloadButton.tsx
@@ -3,10 +3,10 @@ import Image from "next/image";
 import { Group, Popover, Text, createStyles } from "@mantine/core";
 import { useDebouncedValue, useDisclosure } from "@mantine/hooks";
 import { LinkButton } from "~/components/linkButton";
-import { useModDownloadUrl } from "~/hooks/gamebananaApi/useModDownloadUrl";
 import { FAQ_PAGE_PATHNAME } from "~/consts/pathnames";
 import { OLYMPUS_INSTALLATION_URL } from "~/consts/olympusInstallationUrl";
 import everestLogo from "../../../public/images/everest-logo/everest-logo.png";
+import { useModDownloadUrl } from "~/hooks/globalContexts/modDownloadUrl";
 
 
 
@@ -46,7 +46,7 @@ const useStyles = createStyles(
 
 
 export const ModDownloadButton = ({ gamebananaModId }: ModDownloadButtonProps) => {
-    const { downloadUrl } = useModDownloadUrl({ gamebananaModId });
+    const downloadUrl = useModDownloadUrl({ gamebananaModId });
 
     const [isOpened, { close, open }] = useDisclosure(false);
 
@@ -68,7 +68,7 @@ export const ModDownloadButton = ({ gamebananaModId }: ModDownloadButtonProps) =
         >
             <Popover.Target>
                 <LinkButton
-                    href={downloadUrl ?? ""}
+                    href={downloadUrl}
                     onMouseEnter={open}
                     onMouseLeave={close}
                     linkWrapper={false}

This seems to make it work? I think you used the wrong functions from other files.

Also after this fix src\hooks\gamebananaApi\useModImageUrls.ts's line 148 throws an error - I think due to React's rerendering during development, a request is cancelled, and so we get undefined/null for dataJSON? Not sure.

[otobot1]

I'm going to merge this and create a follow-up issue to better handle errors from this stuff. It doesn't crash anything, so it's fine for now imo.