Ott 2034 join match date parsing

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 matchDate = matchInfo?.date
-  const teamName2 = getName({ nameObj: matchInfo?.team2 || {}, suffix })
+    ? format(parseDate(matchInfo.date), 'd MMM HH:mm')
-
+    : ''
-  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()
-  }
 
   useEffect(() => {
     getUnauthenticatedMatch(sportType, matchId).then(setMatchInfo)
   }, [sportType, matchId])
 
   return {
-    handleSubmit,
     live: matchInfo?.live,
     matchDate,
-    teamName1,
+    matchInfo,
-    teamName2,
+    onJoinClick: login,
   }
 }

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,
+    matchInfo,
-    teamName2,
+    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 onClick={onJoinClick}>
-            <MainInfoButton type='submit'>
             <T9n t='join_now' />
           </MainInfoButton>
-          </form>
         </MatchInfo>
       </BlockWrapper>
       <Footer>

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(
+  const date = parseDate(matchDate)
-    matchDate,
-    'yyyy-MM-dd HH:mm:ssx',
-    new Date(),
-  )
   return {
     access: getMatchAccess(match),
     calc,

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(),
+  )
+)