From 51e98a47165760f662e1a61204ad79a33ba1315b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D1=82=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B5=D0=B2=20=D0=9C=D0=B8=D1=80=D0=BB=D0=B0=D0=BD?=
 <mirlan.maksitaliev@instatsport.com>
Date: Fri, 3 Dec 2021 12:05:50 +0300
Subject: [PATCH] Ott 2034 join match date parsing

---
 src/features/JoinMatchPage/hooks.tsx          | 27 +++++++------------
 src/features/JoinMatchPage/index.tsx          | 18 ++++++-------
 .../Matches/helpers/prepareMatches.tsx        |  8 ++----
 src/helpers/parseDate/index.tsx               |  9 +++++++
 4 files changed, 28 insertions(+), 34 deletions(-)
 create mode 100644 src/helpers/parseDate/index.tsx

diff --git a/src/features/JoinMatchPage/hooks.tsx b/src/features/JoinMatchPage/hooks.tsx
index 94e33bad..1fdbded8 100644
--- a/src/features/JoinMatchPage/hooks.tsx
+++ b/src/features/JoinMatchPage/hooks.tsx
@@ -1,4 +1,3 @@
-import type { FormEvent } from 'react'
 import {
   useEffect,
   useState,
@@ -9,41 +8,33 @@ import format from 'date-fns/format'
 import type { UnauthenticatedMatch } from 'requests'
 import { getUnauthenticatedMatch } from 'requests'
 
+import { parseDate } from 'helpers/parseDate'
+
 import { usePageParams } from 'hooks/usePageParams'
 
-import { useLexicsStore } from 'features/LexicsStore'
-import { getName } from 'features/Name'
 import { useAuthStore } from 'features/AuthStore'
 
 export const useUnauthenticatedMatch = () => {
+  const { login } = useAuthStore()
+
   const [
     matchInfo, setMatchInfo,
   ] = useState<UnauthenticatedMatch>(null)
 
-  const { suffix } = useLexicsStore()
   const { profileId: matchId, sportType } = usePageParams()
 
-  const teamName1 = getName({ nameObj: matchInfo?.team1 || {}, suffix })
-  const teamName2 = getName({ nameObj: matchInfo?.team2 || {}, suffix })
-
-  const date = matchInfo?.date
-  const matchDate = (date && format(new Date(date), 'd MMM HH:mm')) || ''
-
-  const { login } = useAuthStore()
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault()
-    login()
-  }
+  const matchDate = matchInfo?.date
+    ? format(parseDate(matchInfo.date), 'd MMM HH:mm')
+    : ''
 
   useEffect(() => {
     getUnauthenticatedMatch(sportType, matchId).then(setMatchInfo)
   }, [sportType, matchId])
 
   return {
-    handleSubmit,
     live: matchInfo?.live,
     matchDate,
-    teamName1,
-    teamName2,
+    matchInfo,
+    onJoinClick: login,
   }
 }
diff --git a/src/features/JoinMatchPage/index.tsx b/src/features/JoinMatchPage/index.tsx
index f0eee3b1..d2dfbac2 100644
--- a/src/features/JoinMatchPage/index.tsx
+++ b/src/features/JoinMatchPage/index.tsx
@@ -5,6 +5,7 @@ import { joinMatchLexics } from 'config/lexics/joinMatch'
 import { usePageParams } from 'hooks/usePageParams'
 
 import { T9n } from 'features/T9n'
+import { Name } from 'features/Name'
 import { useLexicsConfig } from 'features/LexicsStore'
 
 import { useUnauthenticatedMatch } from './hooks'
@@ -37,11 +38,10 @@ export const JoinMatchPage = () => {
 
   const { sportType } = usePageParams()
   const {
-    handleSubmit,
     live,
     matchDate,
-    teamName1,
-    teamName2,
+    matchInfo,
+    onJoinClick,
   } = useUnauthenticatedMatch()
 
   const currentYear = format(new Date(), 'Y')
@@ -66,9 +66,9 @@ export const JoinMatchPage = () => {
             )}
           </DateInfoWrapper>
           <TeamsNameWrapper>
-            <EmptySpan>{teamName1}</EmptySpan>
+            <Name nameObj={matchInfo?.team1 || {}} />
             <EmptySpan> — </EmptySpan>
-            <EmptySpan>{teamName2}</EmptySpan>
+            <Name nameObj={matchInfo?.team2 || {}} />
           </TeamsNameWrapper>
           <MainInfoTitle>
             <T9n t='join_instat_tv' />
@@ -77,11 +77,9 @@ export const JoinMatchPage = () => {
           <MainInfoText>
             <T9n t='promo_text' />
           </MainInfoText>
-          <form onSubmit={handleSubmit}>
-            <MainInfoButton type='submit'>
-              <T9n t='join_now' />
-            </MainInfoButton>
-          </form>
+          <MainInfoButton onClick={onJoinClick}>
+            <T9n t='join_now' />
+          </MainInfoButton>
         </MatchInfo>
       </BlockWrapper>
       <Footer>
diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx
index d2e5961c..1a431d62 100644
--- a/src/features/Matches/helpers/prepareMatches.tsx
+++ b/src/features/Matches/helpers/prepareMatches.tsx
@@ -1,11 +1,11 @@
 import map from 'lodash/map'
 
-import parse from 'date-fns/parse'
 import format from 'date-fns/format'
 
 import type { Match } from 'requests'
 
 import { getSportLexic } from 'helpers'
+import { parseDate } from 'helpers/parseDate'
 
 import { getMatchAccess } from './getMatchClickAction'
 
@@ -24,11 +24,7 @@ const prepareMatch = (match: Match) => {
     team2,
     tournament,
   } = match
-  const date = parse(
-    matchDate,
-    'yyyy-MM-dd HH:mm:ssx',
-    new Date(),
-  )
+  const date = parseDate(matchDate)
   return {
     access: getMatchAccess(match),
     calc,
diff --git a/src/helpers/parseDate/index.tsx b/src/helpers/parseDate/index.tsx
new file mode 100644
index 00000000..94e381b4
--- /dev/null
+++ b/src/helpers/parseDate/index.tsx
@@ -0,0 +1,9 @@
+import parse from 'date-fns/parse'
+
+export const parseDate = (dateString: string, format = 'yyyy-MM-dd HH:mm:ssx') => (
+  parse(
+    dateString,
+    format,
+    new Date(),
+  )
+)