diff --git a/src/features/MatchCard/CardFrontside/hooks.tsx b/src/features/MatchCard/CardFrontside/hooks.tsx new file mode 100644 index 00000000..24431de6 --- /dev/null +++ b/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 } +} diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 63fef60e..e41ffd26 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/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 ( - { - (currentPreviewURL) && ( - - ) - } + {previewImage && ( + + )} {access === MatchAccess.NoCountryAccess ? : (