fix(2841): fix match title & subtitle

.drone.yml

@@ -290,7 +290,7 @@ steps:
       - apk add --no-cache aws-cli bash git openssh-client make rsync
       - npm install --legacy-peer-deps
       - make build-e
-      - aws s3 sync build s3://instat-frontend-test-d --delete
+      - aws s3 sync build s3://instat-frontend-test-e --delete
       - aws cloudfront create-invalidation --distribution-id E1S8ZOPGSJZ7Q3 --paths "/*"
 
 

src/features/MatchCard/CardFrontside/hooks.tsx

@@ -24,18 +24,25 @@ export const useCardPreview = ({
     (async () => {
       if (!currentPreviewURL) return
 
-      const image = await fetch(String(currentPreviewURL), {
-        headers: { Authorization: `Bearer ${readToken()}` },
-      }).then(async (result) => ({
-        blob: await result.blob(),
-        status: result.status,
-      }))
-
-      if (image.status === 200) {
-        setPreviewImage(URL.createObjectURL(image.blob))
+      try {
+        const image = await fetch(String(currentPreviewURL), {
+          headers: { Authorization: `Bearer ${readToken()}` },
+        }).then(async (result) => ({
+          blob: await result.blob(),
+          status: result.status,
+        }))
+
+        if (image.status === 200) {
+          setPreviewImage(URL.createObjectURL(image.blob))
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e)
       }
     })()
-  }, [currentPreviewURL])
+
+    return () => URL.revokeObjectURL(previewImage)
+  }, [currentPreviewURL, previewImage])
 
   return { previewImage }
 }

src/features/MatchPage/components/MatchDescription/index.tsx

@@ -25,11 +25,11 @@ import {
   Description,
   DescriptionInnerBlock,
   MatchDate,
-  StyledLink,
   Score,
+  StyledLink,
+  Time,
   Title,
   Views,
-  Time,
 } from './styled'
 
 export const MatchDescription = () => {
@@ -39,17 +39,11 @@ export const MatchDescription = () => {
   const { suffix } = useLexicsStore()
   const { profile, profileCardShown } = useMatchPageStore()
 
-  const getTeamName = useCallback((team: Team) => {
-    if (isMobileDevice) {
-      const teamNameLimit = 14
-      let name = getName({ nameObj: team, suffix })
-      if (name.length > teamNameLimit) {
-        name = `${name.substring(0, teamNameLimit)}...`
-      }
-      return name
-    }
-    return <Name nameObj={team} />
-  }, [suffix])
+  const getTeamName = useCallback((team: Team) => (
+    isMobileDevice
+      ? getName({ nameObj: team, suffix })
+      : <Name nameObj={team} />
+  ), [suffix])
 
   if (!profile) return <Description />
 
@@ -95,12 +89,18 @@ export const MatchDescription = () => {
         <TournamentSubtitle
           countryId={country_id}
           tournament={tournament}
+          time={isMobileDevice ? changedTimeFormat : null}
+          date={isMobileDevice ? localDate : null}
         />
       </DescriptionInnerBlock>
-      <Views>
-        <Time>{changedTimeFormat}</Time>
-        <MatchDate>{localDate}</MatchDate>
-      </Views>
+      {
+        !isMobileDevice && (
+          <Views>
+            <Time>{changedTimeFormat}</Time>
+            <MatchDate>{localDate}</MatchDate>
+          </Views>
+        )
+      }
     </Description>
   )
 }

src/features/MatchPage/components/MatchDescription/styled.tsx

@@ -25,6 +25,10 @@ export const Description = styled.div<{isHidden?: boolean}>`
 
 export const DescriptionInnerBlock = styled.div`
   margin-right: 10px;
+  
+  ${isMobileDevice ? css`
+    width: 100%;
+  ` : ''}
 `
 
 export const Score = styled.span`
@@ -44,7 +48,6 @@ export const StyledLink = styled(ProfileLink)`
   display: flex;
   align-items: center;
   color: #fff;
-  white-space: nowrap;
 
   &:hover {
     text-decoration: underline;
@@ -53,6 +56,7 @@ export const StyledLink = styled(ProfileLink)`
 
 export const Title = styled.div`
   display: flex;
+  flex-wrap: wrap;
   font-weight: 500;
   font-size: 20px;
 
@@ -77,6 +81,7 @@ export const Views = styled.div`
   color: #fff;
   opacity: 0.7;
   font-size: 20px;
+  min-width: 90px;
 
   ${isMobileDevice
     ? css`

src/features/TournamentSubtitle/index.tsx

@@ -20,17 +20,27 @@ import {
   FavoriteSign,
   Wrapper,
   StyledLink,
+  SubtitleMain,
 } from './styled'
+import {
+  Time,
+  MatchDate,
+  Views,
+} from '../MatchPage/components/MatchDescription/styled'
 
 type Props = {
   countryId: number,
+  date?: string | null,
   sportType?: SportTypes,
+  time?: string | null,
   tournament: TournamentType,
 }
 
 export const TournamentSubtitle = ({
   countryId,
+  date,
   sportType,
+  time,
   tournament,
 }: Props) => {
   const { isInFavorites } = useUserFavoritesStore()
@@ -39,25 +49,33 @@ export const TournamentSubtitle = ({
 
   return (
     <Wrapper>
-      {!isLffClient && (
-        <Fragment>
-          <SportIcon
-            size={isMobileDevice ? 10 : '0.65rem'}
-            sport={sportType ?? sportTypeFromUrl}
-          />
-          <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
-        </Fragment>
+      <SubtitleMain>
+        {!isLffClient && (
+          <Fragment>
+            <SportIcon
+              size={isMobileDevice ? 10 : '0.65rem'}
+              sport={sportType ?? sportTypeFromUrl}
+            />
+            <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+          </Fragment>
+        )}
+        <StyledLink
+          id={tournament.id}
+          isLeftSide={isLffClient}
+          isMatchPage={isMatchPage()}
+          profileType={ProfileTypes.TOURNAMENTS}
+          sportType={sportType ?? sportTypeFromUrl}
+        >
+          <Name nameObj={tournament} />
+        </StyledLink>
+        {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
+      </SubtitleMain>
+      {time && date && (
+        <Views>
+          <Time>{time}</Time>
+          <MatchDate>{date}</MatchDate>
+        </Views>
       )}
-      <StyledLink
-        id={tournament.id}
-        isLeftSide={isLffClient}
-        isMatchPage={isMatchPage()}
-        profileType={ProfileTypes.TOURNAMENTS}
-        sportType={sportType ?? sportTypeFromUrl}
-      >
-        <Name nameObj={tournament} />
-      </StyledLink>
-      {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
     </Wrapper>
   )
 }

src/features/TournamentSubtitle/styled.tsx

@@ -5,6 +5,14 @@ import { isMobileDevice } from 'config/userAgent'
 import { ProfileLink } from 'features/ProfileLink'
 
 export const Wrapper = styled.div`
+  ${isMobileDevice ? css`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  ` : ''}
+`
+
+export const SubtitleMain = styled.div`
   display: flex;
   align-items: center;
 `