refactor: refactor report proff section

src/hooks/useProtectedMedia.ts

@@ -1,38 +1,41 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { protectedMediaService } from '@/services/api';
 
 export function useProtectedMediaObjectUrl(url: string | null | undefined) {
   const query = useQuery({
-    queryKey: ['protected-media', url],
+    queryKey: ['protected-media', 'v2', url],
     queryFn: () => protectedMediaService.getBlob(url as string),
     enabled: Boolean(url),
     staleTime: Infinity,
     gcTime: 1000 * 60 * 30,
   });
 
-  const [objectUrl, setObjectUrl] = useState<string | null>(null);
-
-  useEffect(() => {
+  const objectUrl = useMemo(() => {
     if (!query.data) {
-      setObjectUrl(null);
-      return;
+      return null;
     }
 
-    const nextUrl = URL.createObjectURL(query.data);
-    setObjectUrl(nextUrl);
-
-    return () => {
-      URL.revokeObjectURL(nextUrl);
-    };
+    return URL.createObjectURL(query.data);
   }, [query.data]);
 
+  useEffect(() => {
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [objectUrl]);
+
+  const isLoading = query.isLoading || (Boolean(query.data) && !objectUrl);
+
   return {
     objectUrl,
-    isLoading: query.isLoading,
+    mediaType: query.data?.type ?? null,
+    isLoading,
     isError: query.isError,
     error: query.error,
   };