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,6 +24,7 @@ export const useCardPreview = ({
     (async () => {
       if (!currentPreviewURL) return
 
+      try {
         const image = await fetch(String(currentPreviewURL), {
           headers: { Authorization: `Bearer ${readToken()}` },
         }).then(async (result) => ({
@@ -34,8 +35,14 @@ export const useCardPreview = ({
         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>
+      {
+        !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,6 +49,7 @@ export const TournamentSubtitle = ({
 
   return (
     <Wrapper>
+      <SubtitleMain>
         {!isLffClient && (
           <Fragment>
             <SportIcon
@@ -58,6 +69,13 @@ export const TournamentSubtitle = ({
           <Name nameObj={tournament} />
         </StyledLink>
         {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
+      </SubtitleMain>
+      {time && date && (
+        <Views>
+          <Time>{time}</Time>
+          <MatchDate>{date}</MatchDate>
+        </Views>
+      )}
     </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;
 `