feat(#483): display match date in match profile (#196)

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -2,6 +2,8 @@ import React, { Fragment } from 'react'
 
 import isNull from 'lodash/isNull'
 
+import format from 'date-fns/format'
+
 import { getProfileUrl } from 'helpers'
 
 import { ProfileTypes } from 'config'
@@ -19,8 +21,11 @@ import {
   Tournament,
   Dash,
   StyledLink,
+  DateStyled,
 } from './styled'
 
+const dateFormat = 'dd.MM.yyyy'
+
 type Props = {
   profile: MatchProfile,
 }
@@ -82,6 +87,7 @@ export const MatchProfileCard = ({ profile }: Props) => {
               {tournament?.name}
             </StyledLink>
           </Tournament>
+          <DateStyled>{format(new Date(profile.date), dateFormat)}</DateStyled>
         </Fragment>
       )}
     </Wrapper>

src/features/MatchPage/MatchProfileCard/styled.tsx

@@ -11,6 +11,7 @@ export const Wrapper = styled.div`
   line-height: 24px;
   color: white;
   min-height: 28px;
+  max-width: 1504px;
 
   @media ${devices.tablet} {
     order: 2;
@@ -22,7 +23,6 @@ export const Wrapper = styled.div`
 
 export const Teams = styled.div`
   display: flex;
-
 `
 
 export const StyledLink = styled(Link)`
@@ -74,3 +74,12 @@ export const Tournament = styled.div`
     font-size: 11px;
   }
 `
+
+export const DateStyled = styled.span`
+  margin-left: auto;
+
+  @media ${devices.tablet} {
+    margin-top: 4px;
+    margin-left: 0;
+  }
+`

src/requests/getMatchInfo.tsx

@@ -17,7 +17,7 @@ type Team = {
 }
 
 export type MatchInfo = {
-  date: Date,
+  date: string,
   stream_status: MatchStatuses,
   team1: Team,
   team2: Team,