Ott 445 add date (#145)

* fix(ott-423): found small bug

* fix(ott-445): deleted status added date

* fix(ott-445): changed day with month

* fix(ott-445): some minor changes

* fix(ott-445): moved time and date to helper

Co-authored-by: Armen <armen9339@gmail.com>

src/features/MatchCard/CardFinished/index.tsx

@@ -1,38 +1,32 @@
 import React from 'react'
 
-import styled from 'styled-components/macro'
-
 import type { Match } from 'features/Matches'
 import { getSportColor } from 'helpers'
 import { SportName } from 'features/Common'
-import { T9n } from 'features/T9n'
 
 import { useCard } from '../hooks'
 import { CardFinishedHover } from '../CardFinishedHover'
 import {
   CardWrapper,
   Info,
-  MatchStatus as CommonMatchStatus,
+  MatchDate,
   Preview,
   PreviewWrapper,
   Score,
   Team,
   TeamName,
   Teams,
+  Time,
   TournamentName,
 } from '../styled'
 
-const MatchStatus = styled(CommonMatchStatus)`
-  color: #313131;
-  background-color: #EACB6F;
-`
-
 type CardFinishedProps = {
   match: Match,
 }
 
 export const CardFinished = ({
   match: {
+    date,
     id,
     preview,
     sportName,
@@ -41,6 +35,7 @@ export const CardFinished = ({
     team1Score,
     team2Name,
     team2Score,
+    time,
     tournamentName,
   },
 }: CardFinishedProps) => {
@@ -67,7 +62,12 @@ export const CardFinished = ({
       onClick={open}
       onKeyPress={onKeyPress}
     >
-      <MatchStatus><T9n t='game_finished' /></MatchStatus>
+      <MatchDate>
+        {date}
+        <Time>
+          {time}
+        </Time>
+      </MatchDate>
       <PreviewWrapper>
         <Preview
           alt={tournamentName}

src/features/MatchCard/CardLive/index.tsx

@@ -1,38 +1,32 @@
 import React from 'react'
 
-import styled from 'styled-components/macro'
-
 import type { Match } from 'features/Matches'
 import { getSportColor } from 'helpers'
 import { SportName } from 'features/Common'
-import { T9n } from 'features/T9n'
 
 import { useCard } from '../hooks'
 import {
   CardWrapper,
   Info,
-  MatchStatus as CommonMatchStatus,
+  MatchDate,
   Preview,
   PreviewWrapper,
   Score,
   Team,
   TeamName,
   Teams,
+  Time,
   TournamentName,
 } from '../styled'
 import { CardLiveHover } from '../CardLiveHover'
 
-const MatchStatus = styled(CommonMatchStatus)`
-  color: #fff;
-  background-color: #cc0000;
-`
-
 type CardLiveProps = {
   match: Match,
 }
 
 export const CardLive = ({
   match: {
+    date,
     id,
     preview,
     sportName,
@@ -41,6 +35,7 @@ export const CardLive = ({
     team1Score,
     team2Name,
     team2Score,
+    time,
     tournamentName,
   },
 }: CardLiveProps) => {
@@ -67,7 +62,12 @@ export const CardLive = ({
       onClick={open}
       onKeyPress={onKeyPress}
     >
-      <MatchStatus><T9n t='live' /></MatchStatus>
+      <MatchDate>
+        {date}
+        <Time>
+          {time}
+        </Time>
+      </MatchDate>
       <PreviewWrapper>
         <Preview
           alt={tournamentName}

src/features/MatchCard/CardSoon/index.tsx

@@ -2,17 +2,16 @@ import type { BaseSyntheticEvent } from 'react'
 import React, { useCallback } from 'react'
 
 import styled from 'styled-components/macro'
-import format from 'date-fns/format'
 import { devices } from 'config/devices'
 
 import type { Match } from 'features/Matches'
 import { getSportColor, handleImageError } from 'helpers'
 import { SportName } from 'features/Common'
-import { T9n } from 'features/T9n'
 
 import {
-  MatchStatus as CommonMatchStatus,
+  MatchDate,
   CardWrapper as CommonCardWrapper,
+  Time,
   Info,
   PreviewWrapper,
   Team,
@@ -21,12 +20,6 @@ import {
   TournamentName,
 } from '../styled'
 
-const MatchStatus = styled(CommonMatchStatus)`
-  top: 20px;
-  color: rgba(255, 255, 255, 0.3);
-  border: 1px solid currentColor;
-`
-
 const CardWrapper = styled(CommonCardWrapper)`
   cursor: pointer;
 `
@@ -71,11 +64,10 @@ export const CardSoon = ({
     team1Name,
     team2Logo,
     team2Name,
+    time,
     tournamentName,
   },
 }: CardSoonProps) => {
-  const startTime = format(new Date(date), 'HH:mm')
-
   const onError = useCallback((e: BaseSyntheticEvent) => handleImageError({
     e,
     sport: sportType,
@@ -84,7 +76,12 @@ export const CardSoon = ({
 
   return (
     <CardWrapper>
-      <MatchStatus><T9n t='kickoff_in' /> {startTime}</MatchStatus>
+      <MatchDate>
+        {date}
+        <Time>
+          {time}
+        </Time>
+      </MatchDate>
       <PreviewWrapper>
         <TeamLogos>
           <TeamLogo

src/features/MatchCard/styled.tsx

@@ -20,7 +20,6 @@ export const CardWrapper = styled.li.attrs({
   transition: border 0.5s ease-out;
   margin-right: 16px;
 
-
   @media${devices.laptop} {
     width: 279px;
     height: 279px;
@@ -55,20 +54,22 @@ export const Preview = styled.img`
 
 `
 
-export const MatchStatus = styled.div`
+export const MatchDate = styled.div`
   position: absolute;
-  top: 24px;
+  top: 25px;
   left: 24px;
-  width: 125px;
+  width: 135px;
   height: 24px;
   border-radius: 2px;
-  padding: 5px 5px;
+  padding: 8px;
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-align: center;
   white-space: nowrap;
+  color: white;
+  background: #6D6D6D;
 
   @media${devices.tablet} {
     top: 10px;
@@ -77,6 +78,9 @@ export const MatchStatus = styled.div`
     padding: 6px 8px;
   }
 `
+export const Time = styled.span`
+  margin-left: 10px;
+`
 
 export const Info = styled.div`
   padding: 33px 24px 0;

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -18,6 +18,7 @@ import {
   Teams,
   Score,
   Tournament,
+  Dash,
   StyledLink,
 } from './styled'
 
@@ -53,11 +54,13 @@ export const MatchProfileCard = () => {
                 {team1.name}
               </StyledLink>
             )}
-            {!isHidden && (
-              <Score>
-                {team1?.score} : {team2?.score}
-              </Score>
-            )}
+            {!isHidden
+              ? (
+                <Score>
+                  {team1?.score} : {team2?.score}
+                </Score>
+              )
+              : <Dash />}
             {team2 && (
               <StyledLink to={getProfileUrl({
                 id: team2.id,
@@ -69,6 +72,7 @@ export const MatchProfileCard = () => {
               </StyledLink>
             )}
           </Teams>
+
           <Tournament>
             <SportName
               color={color}

src/features/MatchPage/MatchProfileCard/styled.tsx

@@ -33,6 +33,21 @@ export const StyledLink = styled(Link)`
   }
 `
 
+export const Dash = styled.span`
+  position: relative;
+  width: 40px;
+  border-bottom: 3px solid white;
+  margin: 0 15px;
+  height: fit-content;
+  align-self: center;
+
+  @media${devices.tablet} {
+    width: 16px;
+    border-bottom: 1px solid white;
+    margin: 0 4px;
+  }
+`
+
 export const Score = styled.div`
   display: flex;
   margin: 0 20px;

src/features/Matches/helpers.tsx

@@ -3,6 +3,8 @@ import flatten from 'lodash/flatten'
 import pipe from 'lodash/fp/pipe'
 import fpMap from 'lodash/fp/map'
 
+import format from 'date-fns/format'
+
 import type { Content } from 'requests'
 import { ProfileTypes } from 'config'
 import { getProfileLogo, getSportLexic } from 'helpers'
@@ -20,7 +22,7 @@ const prepareMatch = ({
   team1,
   team2,
 }) => ({
-  date,
+  date: format(new Date(date), 'dd:MM:yy'),
   id,
   preview: '/images/preview.png',
   sportName: getSportLexic(sport),
@@ -40,6 +42,7 @@ const prepareMatch = ({
   }),
   team2Name: team2[`name_${suffix}` as Name],
   team2Score: team2.score,
+  time: format(new Date(date), 'HH:mm'),
   tournamentName: rest[`name_${suffix}` as Name],
 }))