fix(ott-2251): fix card preview

src/features/MatchCard/CardFrontside/hooks.tsx

@@ -0,0 +1,38 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+import { readToken } from 'helpers'
+
+export type TUseCardFrontside = {
+  preview?: string,
+  previewURL?: string,
+}
+
+export const useCardPreview = ({
+  preview,
+  previewURL,
+}: TUseCardFrontside) => {
+  const [previewImage, setPreviewImage] = useState('')
+  const currentPreviewURL = useMemo(() => (
+    previewURL
+      ? `${previewURL}?access_token=${readToken()}`
+      : preview
+  ), [preview, previewURL])
+
+  useEffect(() => {
+    (async () => {
+      const image = await fetch(String(currentPreviewURL), {
+        headers: {
+          Authorization: `Bearer ${readToken()}`,
+        },
+      }).then((result) => result.blob())
+
+      setPreviewImage(URL.createObjectURL(image))
+    })()
+  }, [currentPreviewURL])
+
+  return { previewImage }
+}

src/features/MatchCard/CardFrontside/index.tsx

@@ -11,10 +11,8 @@ import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
 import { T9n } from 'features/T9n'
 import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
-
-import { readToken } from 'helpers/token'
-
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
 import { NoAccessMessage } from '../NoAccessMessage'
 import {
   CardWrapperOuter,
@@ -40,6 +38,7 @@ import {
   NameSignWrapper,
   HoverFrame,
 } from '../styled'
+import { useCardPreview } from './hooks'
 
 type Props = {
   match: Match,
@@ -78,7 +77,10 @@ export const CardFrontside = ({
   const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id)
   const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id)
 
-  const currentPreviewURL = previewURL ? `${previewURL}?access_token=${readToken()}` : preview
+  const { previewImage } = useCardPreview({
+    preview,
+    previewURL,
+  })
 
   return (
     <CardWrapperOuter
@@ -88,15 +90,12 @@ export const CardFrontside = ({
       <CardWrapper>
         <HoverFrame />
         <PreviewWrapper>
-          {
-            (currentPreviewURL) && (
-              <Preview
-                alt={tournamentName}
-                title={tournamentName}
-                src={currentPreviewURL}
-              />
-            )
-          }
+          {previewImage && (
+            <Preview
+              title={tournamentName}
+              src={previewImage}
+            />
+          )}
           {access === MatchAccess.NoCountryAccess
             ? <NoAccessMessage />
             : (