fix(#3080): aws server for web logos

src/config/profileTypes.tsx

@@ -3,6 +3,7 @@ export enum ProfileTypes {
   TEAMS = 2,
   PLAYERS = 3,
   MATCHES = 4,
+  SUPERTOURNAMENTS = 5
 }
 
 export const PROFILE_NAMES = {
@@ -10,4 +11,5 @@ export const PROFILE_NAMES = {
   [ProfileTypes.TEAMS]: 'teams',
   [ProfileTypes.PLAYERS]: 'players',
   [ProfileTypes.MATCHES]: 'matches',
+  [ProfileTypes.SUPERTOURNAMENTS]: 'supertournaments',
 } as const

src/features/Common/Image/index.tsx

@@ -8,7 +8,6 @@ const ImageStyled = styled.img``
 type Props = {
   alt?: string,
   className?: string,
-  dataSrc?: string,
   fallbackSrc?: string,
   onLoad?: () => void,
   src: string,
@@ -18,7 +17,6 @@ type Props = {
 export const Image = ({
   alt,
   className,
-  dataSrc,
   fallbackSrc = '',
   onLoad,
   src,
@@ -35,7 +33,6 @@ export const Image = ({
     <ImageStyled
       alt={alt}
       src={src}
-      data-src={dataSrc}
       className={className}
       onError={onError}
       onLoad={onLoad}

src/features/HomePage/components/HeaderFilters/index.tsx

@@ -55,6 +55,8 @@ export const HeaderFilters = () => {
             onClick={() => handleClickBack()}
           />
           <ProfileLink
+            // страницы супертурнира не существует, возможно появится
+            disabled={selectTournament.is_super_tournament}
             id={selectTournament.id}
             sportType={selectTournament.sportType}
             profileType={ProfileTypes.TOURNAMENTS}

src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx

@@ -112,6 +112,7 @@ export const CardFrontsideMobile = ({
             <TeamLogos>
               <TeamLogo
                 id={team1.id}
+                logoUrl={team1.media?.logo_url}
                 nameAsTitle
                 altNameObj={team1}
                 sportType={sportType}
@@ -119,6 +120,7 @@ export const CardFrontsideMobile = ({
               />
               <TeamLogo
                 id={team2.id}
+                logoUrl={team2.media?.logo_url}
                 nameAsTitle
                 altNameObj={team2}
                 sportType={sportType}

src/features/MatchCard/CardFrontside/index.tsx

@@ -128,6 +128,7 @@ export const CardFrontside = ({
               <TeamLogos isMatchPage={isMatchPage}>
                 <TeamLogo
                   id={team1.id}
+                  logoUrl={team1.media?.logo_url}
                   nameAsTitle
                   altNameObj={team1}
                   sportType={sportType}
@@ -135,6 +136,7 @@ export const CardFrontside = ({
                 />
                 <TeamLogo
                   id={team2.id}
+                  logoUrl={team2.media?.logo_url}
                   nameAsTitle
                   altNameObj={team2}
                   sportType={sportType}

src/features/ProfileLink/index.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode, MouseEvent } from 'react'
 import { Link } from 'react-router-dom'
 
+import styled, { css } from 'styled-components'
+
 import { ProfileTypes, SportTypes } from 'config'
 
 import { getProfileUrl } from './helpers'
@@ -8,6 +10,7 @@ import { getProfileUrl } from './helpers'
 type Props = {
   children: ReactNode,
   className?: string,
+  disabled?: boolean,
   id: number,
   onClick?: (e: MouseEvent<HTMLAnchorElement>) => void,
   profileType: ProfileTypes,
@@ -15,9 +18,16 @@ type Props = {
   target?: string,
 }
 
+const ScLink = styled(Link)<{disabled?: boolean}>`
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+  `}
+`
+
 export const ProfileLink = ({
   children,
   className,
+  disabled,
   id,
   onClick,
   profileType,
@@ -30,13 +40,14 @@ export const ProfileLink = ({
     sportType,
   })
   return (
-    <Link
+    <ScLink
+      disabled={disabled}
       to={url}
       className={className}
       target={target}
       onClick={onClick}
     >
       {children}
-    </Link>
+    </ScLink>
   )
 }

src/features/ProfileLogo/index.tsx

@@ -1,5 +1,16 @@
+import {
+  Fragment,
+  useEffect,
+  useState,
+} from 'react'
+
 import { ProfileTypes, SportTypes } from 'config'
-import { getProfileFallbackLogo, getProfileLogo } from 'helpers'
+
+import {
+  getProfileFallbackLogo,
+  getProfileLogo,
+  readToken,
+} from 'helpers'
 
 import { Image } from 'features/Common'
 import type { ObjectWithName } from 'features/Name'
@@ -10,8 +21,7 @@ type ProfileImageProps = {
   altNameObj?: ObjectWithName,
   className?: string,
   id: number,
-  isTournamentSuper?: boolean,
+  logoUrl?: string | null,
-  lazy?: boolean,
   nameAsTitle?: boolean,
   onLoad?: () => void,
   prefix?: string,
@@ -21,13 +31,19 @@ type ProfileImageProps = {
   title?: string,
 }
 
+type AwsMediaFlags = {
+  cover_url: 'string' | null,
+  landing_mobile_url: 'string' | null,
+  landing_url: 'string' | null,
+  logo_url: 'string' | null,
+}
+
 export const ProfileLogo = ({
   alt,
   altNameObj,
   className,
   id,
-  isTournamentSuper,
+  logoUrl,
-  lazy = false,
   nameAsTitle,
   onLoad,
   prefix,
@@ -36,26 +52,66 @@ export const ProfileLogo = ({
   sportType,
   title,
 }: ProfileImageProps) => {
+  const [imageSource, setImageSource] = useState('')
+
   const altName = useName(altNameObj || {}, prefix)
   const titleText = nameAsTitle ? altName : title
-  const src = getProfileLogo({
+  const awsSrc = getProfileLogo({
+    awsInError: false,
+    id,
+    profileType,
+    size,
+    sportType,
+  })
+  const scoutSrc = getProfileLogo({
+    awsInError: true,
     id,
-    isTournamentSuper,
     profileType,
     size,
     sportType,
   })
   const fallbackSrc = getProfileFallbackLogo(profileType)
 
+  useEffect(() => {
+    (async () => {
+      if (!logoUrl) {
+        setImageSource(scoutSrc)
+        return
+      }
+
+      if (logoUrl) {
+        setImageSource(logoUrl)
+        return
+      }
+
+      try {
+        const { logo_url }: AwsMediaFlags = await (await fetch(awsSrc, {
+          headers: { Authorization: `Bearer ${readToken()}` },
+        })).json()
+
+        if (logo_url) {
+          setImageSource(logo_url)
+          return
+        }
+        setImageSource(scoutSrc)
+      } catch (error) {
+        setImageSource(scoutSrc)
+      }
+    })()
+  }, [awsSrc, logoUrl, scoutSrc])
+
   return (
-    <Image
+    <Fragment>
-      alt={alt || altName}
+      {Boolean(imageSource) && (
-      src={lazy ? '' : src}
+        <Image
-      dataSrc={lazy ? src : ''}
+          alt={alt || altName}
-      fallbackSrc={fallbackSrc}
+          src={imageSource}
-      className={className}
+          fallbackSrc={fallbackSrc}
-      onLoad={onLoad}
+          className={className}
-      title={titleText}
+          onLoad={onLoad}
-    />
+          title={titleText}
+        />
+      )}
+    </Fragment>
   )
 }

src/features/TournamentList/components/CollapseTournament/index.tsx

@@ -59,11 +59,15 @@ export const CollapseTournament = ({
         <PreviewWrapper>
           <TournamentLogo
             id={tournament.id}
-            isTournamentSuper={tournament.is_super_tournament}
+            logoUrl={tournament.media?.logo_url}
             nameAsTitle
             altNameObj={tournament}
             sportType={sportType}
-            profileType={ProfileTypes.TOURNAMENTS}
+            profileType={
+              tournament.is_super_tournament
+                ? ProfileTypes.SUPERTOURNAMENTS
+                : ProfileTypes.TOURNAMENTS
+            }
           />
           <MatchTimeInfo>
             {live && (

src/features/UserFavorites/hooks/index.tsx

@@ -63,7 +63,7 @@ export const useUserFavorites = () => {
           acc.push({
             ...item.info.super_tournament,
             sport: item.sport,
-            type: item.type,
+            type: ProfileTypes.SUPERTOURNAMENTS,
           })
         }
         return acc

src/features/UserFavorites/index.tsx

@@ -73,7 +73,6 @@ export const UserFavorites = ({ marginTop }: Props) => {
                 />
               </UserSportFavXWrapper>
               <UserSportFavImgWrapper
-                isTournamentSuper
                 id={item.id}
                 altNameObj={item}
                 sportType={item.sport}

src/helpers/getProfileFallbackLogo/index.tsx

@@ -4,6 +4,7 @@ const FALLBACK_LOGOS = {
   [ProfileTypes.PLAYERS]: '/images/player-fallback.png',
   [ProfileTypes.TEAMS]: '/images/team-fallback.png',
   [ProfileTypes.TOURNAMENTS]: '/images/tournament-fallback.png',
+  [ProfileTypes.SUPERTOURNAMENTS]: '/images/tournament-fallback.png',
 }
 
 export const getProfileFallbackLogo = (profileType: ProfileTypes) => {

src/helpers/getProfileLogo/__tests__/index.tsx

@@ -8,18 +8,18 @@ describe('getLogo helper', () => {
       id: 1,
       profileType: ProfileTypes.PLAYERS,
       sportType: SportTypes.FOOTBALL,
-    })).toBe('https://instatscout.com/images/players/180/1.png')
+    })).toBe('https://api.test.insports.tv/v1/players/1/1/media')
 
     expect(getProfileLogo({
       id: 1,
       profileType: ProfileTypes.TEAMS,
       sportType: SportTypes.BASKETBALL,
-    })).toBe('https://basketball.instatscout.com/images/teams/180/1.png')
+    })).toBe('https://api.test.insports.tv/v1/teams/3/1/media')
 
     expect(getProfileLogo({
       id: 1,
       profileType: ProfileTypes.TOURNAMENTS,
       sportType: SportTypes.HOCKEY,
-    })).toBe('https://hockey.instatscout.com/images/tournaments/180/1.png')
+    })).toBe('https://api.test.insports.tv/v1/tournaments/2/1/media')
   })
 })

src/helpers/getProfileLogo/index.tsx

@@ -2,13 +2,12 @@ import {
   SportTypes,
   ProfileTypes,
   PROFILE_NAMES,
+  API_ROOT,
 } from 'config'
 
-import { readToken, readSelectedApi } from 'helpers'
-
 const IMAGES_URLS = {
   [SportTypes.BASKETBALL]: 'https://basketball.instatscout.com/images',
-  [SportTypes.BOXING]: '',
+  [SportTypes.BOXING]: 'https://boxing.instatscout.com/images',
   [SportTypes.FOOTBALL]: 'https://instatscout.com/images',
   [SportTypes.HOCKEY]: 'https://hockey.instatscout.com/images',
   [SportTypes.HANDBALL]: 'https://handball.instatscout.com/images',
@@ -16,34 +15,23 @@ const IMAGES_URLS = {
   [SportTypes.VOLLEYBALL]: 'https://volleyball.instatscout.com/images',
 }
 
-enum MediaType {
-  cover = 'cover',
-  landing = 'landing',
-  landing_mobile = 'landing_mobile',
-  logo = 'logo'
-}
-
 type GetLogoArgs = {
+  awsInError?: boolean,
   id: number,
-  isTournamentSuper?: boolean,
   profileType: ProfileTypes,
   size?: number,
   sportType: SportTypes,
 }
 
 export const getProfileLogo = ({
+  awsInError,
   id,
-  isTournamentSuper,
   profileType,
   size = 180,
   sportType,
 }: GetLogoArgs) => {
-  switch (true) {
+  if (awsInError) {
-    case isTournamentSuper:
+    return `${IMAGES_URLS[sportType]}/${PROFILE_NAMES[profileType]}/${size}/${id}.png`
-      return `https://cf-aws${readSelectedApi() === 'staging' ? '-staging' : ''}.insports.tv/media/supertournaments/${sportType}/${id}/${MediaType.logo}.jpg?access_token=${readToken()}`
-    case sportType === SportTypes.BOXING:
-      return `https://images.insports.tv/${sportType}/${PROFILE_NAMES[profileType]}/${id}.png`
-    default:
-      return `${IMAGES_URLS[sportType]}/${PROFILE_NAMES[profileType]}/${size}/${id}.png`
   }
+  return `${API_ROOT}/v1/${PROFILE_NAMES[profileType]}/${sportType}/${id}/media`
 }

src/requests/getMatches/getPlayerMatches.tsx

@@ -1,4 +1,8 @@
-import { PROCEDURES, SportTypes } from 'config'
+import {
+  API_ROOT,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 
 import { client } from 'config/clients'
 
@@ -27,22 +31,21 @@ export const getPlayerMatches = async ({
   sportType,
   sub_only,
 }: Args): Promise<MatchesBySection> => {
+  const url = `${API_ROOT}/v1/data/get-player-matches`
+
   const config = {
     body: {
-      params: {
+      limit,
-        _p_limit: limit,
+      match_completed: p_match_completed,
-        _p_match_completed: p_match_completed,
+      offset,
-        _p_offset: offset,
+      player_id: playerId,
-        _p_player_id: playerId,
+      sport: sportType,
-        _p_sport: sportType,
+      sub_only,
-        _p_sub_only: sub_only,
+      ...client.requests?.[proc],
-        ...client.requests?.[proc],
-      },
-      proc,
     },
   }
 
-  return requestMatches(config)
+  return requestMatches(config, url)
     .then((matches) => addSportType(matches, sportType))
     .then(getMatchesPreviews)
 }

src/requests/getMatches/getTeamMatches.tsx

@@ -1,4 +1,8 @@
-import { PROCEDURES, SportTypes } from 'config'
+import {
+  API_ROOT,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 
 import { client } from 'config/clients'
 
@@ -23,20 +27,19 @@ export const getTeamMatches = async ({
   sportType,
   teamId,
 }: Args): Promise<MatchesBySection> => {
+  const url = `${API_ROOT}/v1/data/get-team-matches`
+
   const config = {
     body: {
-      params: {
+      limit,
-        _p_limit: limit,
+      offset,
-        _p_offset: offset,
+      sport: sportType,
-        _p_sport: sportType,
+      team_id: teamId,
-        _p_team_id: teamId,
+      ...client.requests?.[proc],
-        ...client.requests?.[proc],
-      },
-      proc,
     },
   }
 
-  return requestMatches(config)
+  return requestMatches(config, url)
     .then((matches) => addSportType(matches, sportType))
     .then(getMatchesPreviews)
 }

src/requests/getMatches/getTournamentMatches.tsx

@@ -1,4 +1,8 @@
-import { PROCEDURES, SportTypes } from 'config'
+import {
+  API_ROOT,
+  PROCEDURES,
+  SportTypes,
+} from 'config'
 
 import { client } from 'config/clients'
 
@@ -23,20 +27,19 @@ export const getTournamentMatches = async ({
   sportType,
   tournamentId,
 }: Args): Promise<MatchesBySection> => {
+  const url = `${API_ROOT}/v1/data/get-tournament-matches`
+
   const config = {
     body: {
-      params: {
+      limit,
-        _p_limit: limit,
+      offset,
-        _p_offset: offset,
+      sport: sportType,
-        _p_sport: sportType,
+      tournament_id: tournamentId,
-        _p_tournament_id: tournamentId,
+      ...client.requests?.[proc],
-        ...client.requests?.[proc],
-      },
-      proc,
     },
   }
 
-  return requestMatches(config)
+  return requestMatches(config, url)
     .then((matches) => addSportType(matches, sportType))
     .then(getMatchesPreviews)
 }

src/requests/getMatches/types.tsx

@@ -1,8 +1,19 @@
 import { SportTypes } from 'config'
 
+type AwsTeamMedia = {
+  cover_url: string | null,
+  logo_url: string | null,
+}
+
+type AwsTournamentMedia = AwsTeamMedia & {
+  landing_mobile_url: string | null,
+  landing_url: string | null,
+}
+
 export type TournamentType = {
   id: number,
   is_super_tournament?: boolean,
+  media?: AwsTournamentMedia,
   name_eng: string,
   name_rus: string,
   sportType: SportTypes,
@@ -10,6 +21,7 @@ export type TournamentType = {
 
 type Team = {
   id: number,
+  media?: AwsTeamMedia,
   name_eng: string,
   name_rus: string,
   score?: number | null,

src/requests/getProfileColor.tsx

@@ -10,6 +10,7 @@ const profiles = {
   [ProfileTypes.TOURNAMENTS]: 'tournament',
   [ProfileTypes.PLAYERS]: 'team',
   [ProfileTypes.MATCHES]: '',
+  [ProfileTypes.SUPERTOURNAMENTS]: '',
 }
 
 type Response = {

src/requests/search.tsx

@@ -46,6 +46,7 @@ const filterResults = ({
 
   const filteredResults = {
     players: filter(results.players, filterFunc),
+    supertournaments: '',
     teams: filter(results.teams, filterFunc),
     tournaments: filter(results.tournaments, filterFunc),
   }