Fix/homepage images on private repos

src/templates/homepage/HeroSection.jsx

@@ -4,14 +4,15 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import PropTypes from "prop-types"
-import { forwardRef } from "react"
-import { useQuery } from "react-query"
+import { forwardRef, useState, useEffect } from "react"
+
+import { useGetMediaHook } from "hooks/mediaHooks"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
+import { getImageDetails } from "utils/images"
 
 /* eslint
   react/no-array-index-key: 0
@@ -178,14 +179,19 @@ const TemplateHeroSection = (
   { hero, siteName, dropdownIsActive, toggleDropdown },
   ref
 ) => {
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${hero.background}`,
-    () => fetchImageURL(siteName, decodeURI(hero.background)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
+  const [loadedImageURL, setLoadedImageURL] = useState("")
+  const { fileName, imageDirectory } = getImageDetails(hero.background)
+  const { data: mediaData } = useGetMediaHook({
+    siteName,
+    mediaDirectoryName: imageDirectory || "images",
+    fileName,
+  })
+
+  useEffect(() => {
+    if (mediaData) {
+      setLoadedImageURL(mediaData.mediaUrl)
     }
-  )
+  }, [mediaData])
 
   const heroStyle = {
     // See j08691's answer at https://stackoverflow.com/questions/21388712/background-size-doesnt-work

src/templates/homepage/InfopicLeftSection.jsx

@@ -1,12 +1,14 @@
 import PropTypes from "prop-types"
-import { forwardRef } from "react"
-import { useQuery } from "react-query"
+import { forwardRef, useState, useEffect } from "react"
+
+import { useGetMediaHook } from "hooks/mediaHooks"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
+import { getImageDetails } from "utils/images"
+
 /* eslint
   react/no-array-index-key: 0
  */
@@ -28,14 +30,19 @@ const TemplateInfopicLeftSection = (
     e.target.src = "/placeholder_no_image.png"
   }
 
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${imageUrl}`,
-    () => fetchImageURL(siteName, decodeURI(imageUrl)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
+  const [loadedImageURL, setLoadedImageURL] = useState("")
+  const { fileName, imageDirectory } = getImageDetails(imageUrl)
+  const { data: mediaData } = useGetMediaHook({
+    siteName,
+    mediaDirectoryName: imageDirectory || "images",
+    fileName,
+  })
+
+  useEffect(() => {
+    if (mediaData) {
+      setLoadedImageURL(mediaData.mediaUrl)
     }
-  )
+  }, [mediaData])
 
   return (
     <div ref={ref}>

src/templates/homepage/InfopicRightSection.jsx

@@ -1,12 +1,13 @@
 import PropTypes from "prop-types"
-import { forwardRef } from "react"
-import { useQuery } from "react-query"
+import { forwardRef, useState, useEffect } from "react"
+
+import { useGetMediaHook } from "hooks/mediaHooks"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { fetchImageURL } from "utils"
+import { getImageDetails } from "utils/images"
 
 /* eslint
   react/no-array-index-key: 0
@@ -29,14 +30,19 @@ const TemplateInfopicRightSection = (
     e.target.src = "/placeholder_no_image.png"
   }
 
-  const { data: loadedImageURL } = useQuery(
-    `${siteName}/${imageUrl}`,
-    () => fetchImageURL(siteName, decodeURI(imageUrl)),
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity, // Never automatically refetch image unless query is invalidated
+  const [loadedImageURL, setLoadedImageURL] = useState("")
+  const { fileName, imageDirectory } = getImageDetails(imageUrl)
+  const { data: mediaData } = useGetMediaHook({
+    siteName,
+    mediaDirectoryName: imageDirectory || "images",
+    fileName,
+  })
+
+  useEffect(() => {
+    if (mediaData) {
+      setLoadedImageURL(mediaData.mediaUrl)
     }
-  )
+  }, [mediaData])
 
   return (
     <div ref={ref}>

src/utils/images.ts

@@ -0,0 +1,18 @@
+/**
+ * Util method to retrieve image details from /images folder from the relative file path,
+ * e.g. "/images/album%/picture$.jpg" -> { imageDirectory: "images%2Falbum%24", fileName: "picture%24.jpg" }
+ */
+export const getImageDetails = (imageLink: string) => {
+  const cleanImagePath = decodeURI(imageLink).replace(/^\//, "")
+  const filePathArr = cleanImagePath
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+  const fileName = filePathArr[filePathArr.length - 1]
+  const imageDirectory = filePathArr
+    .slice(0, filePathArr.length - 1)
+    .join("%2F")
+  return {
+    fileName,
+    imageDirectory,
+  }
+}