Update CDN url fetching

bombies · Nov 2, 2023 · 5f26319 · 5f26319
1 parent b34f85f
commit 5f26319
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 28 deletions.
diff --git a/src/app/(site)/components/UserProfile.tsx b/src/app/(site)/components/UserProfile.tsx
@@ -9,18 +9,15 @@ import Image from "@/app/(site)/components/Image";
 import HomeIcon from "@/app/(site)/components/icons/HomeIcon";
 import Dropdown from "@/app/(site)/components/Dropdown";
 import {useMemberData} from "@/app/(site)/components/providers/user-data/UserProvider";
-import useCloudFrontUrl from "@/app/(site)/hooks/s3/useCloudFrontUrl";
+import useCDNUrl from "@/app/(site)/hooks/s3/useCDNUrl";
 
 type Props = {
     placement?: OverlayPlacement
 }
 
 const UserProfile: FC<Props> = ({placement}) => {
     const {memberData: {data: member}} = useMemberData()
-    const {
-        data: memberImage,
-        isLoading: memberImageLoading
-    } = useCloudFrontUrl(member?.image && `avatars/${member?.image}`)
+    const memberImage = useCDNUrl(member?.image && `avatars/${member?.image}`)
 
     return (
         <Dropdown
@@ -35,7 +32,7 @@ const UserProfile: FC<Props> = ({placement}) => {
                     isBordered
                     as="button"
                     className="transition-transform"
-                    src={memberImage?.url ?? undefined}
+                    src={memberImage}
                     classNames={{
                         name: "capitalize font-semibold"
                     }}

diff --git a/src/app/(site)/components/inputs/editable/EditableAvatar.tsx b/src/app/(site)/components/inputs/editable/EditableAvatar.tsx
@@ -4,7 +4,7 @@ import {FC} from "react";
 import FileUpload, {FileUploadProps} from "@/app/(site)/components/FileUpload";
 import MediaType from "@/app/api/utils/MediaType";
 import {Member} from "@prisma/client";
-import useCloudFrontUrl from "@/app/(site)/hooks/s3/useCloudFrontUrl";
+import useCDNUrl from "@/app/(site)/hooks/s3/useCDNUrl";
 import {Avatar, AvatarProps, Skeleton} from "@nextui-org/react";
 import clsx from "clsx";
 import {AnimatePresence} from "framer-motion";
@@ -29,10 +29,7 @@ const EditableMemberAvatar: FC<Props> = ({
                                              srcOverride,
                                              ...avatarProps
                                          }) => {
-    const {
-        data: fetchedAvatarUrl,
-        isLoading: avatarIsLoading
-    } = useCloudFrontUrl(avatarUrl === undefined && member?.image ? `avatars/${member.image}` : null)
+    const fetchedAvatarUrl = useCDNUrl(avatarUrl === undefined && member?.image ? `avatars/${member.image}` : null)
 
 
     return (

diff --git a/src/app/(site)/components/providers/user-data/useUserDataState.tsx b/src/app/(site)/components/providers/user-data/useUserDataState.tsx
@@ -4,7 +4,7 @@ import {fetcher} from "@/utils/client/client-utils";
 import {Member} from "@prisma/client";
 import {DataContextState, OptimisticWorker} from "@/utils/client/client-data-utils";
 import {useCallback, useEffect} from "react";
-import useCloudFrontUrl from "@/app/(site)/hooks/s3/useCloudFrontUrl";
+import useCDNUrl from "@/app/(site)/hooks/s3/useCDNUrl";
 
 const useUserDataState = (): DataContextState<Member | undefined, Member> => {
     const {data: session} = useSession();
@@ -13,7 +13,7 @@ const useUserDataState = (): DataContextState<Member | undefined, Member> => {
         isLoading: userDataLoading,
         mutate: mutateUserData
     } = useSWR(session && "/api/me", fetcher<Member>)
-    const avatarUrl = useCloudFrontUrl(userData?.image && `avatars/${userData.image}`)
+    const avatarUrl = useCDNUrl(userData?.image && `avatars/${userData.image}`)
 
     const editOptimisticUser = useCallback<OptimisticWorker<Member>>(async (work, optimisticUser) => {
         if (!userData)

diff --git a/src/app/(site)/hooks/s3/useCDNUrl.tsx b/src/app/(site)/hooks/s3/useCDNUrl.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+const useCDNUrl = (key?: string | null): string | undefined => {
+    return key ? process.env.NEXT_PUBLIC_CDN_URL + `/${process.env.NODE_ENV === 'development' ? 'dev' : 'prod'}/${key}` : undefined
+}
+
+export default useCDNUrl
diff --git a/src/app/(site)/hooks/s3/useCloudFrontUrl.tsx b/src/app/(site)/hooks/s3/useCloudFrontUrl.tsx