Ott 763 match time in users tz (#282)

* refactor(768): simplified match dates

* refactor(768): show match date on not available matches too

* fix(768): added cleanup arg to useQueryParamHook

src/features/Common/Image/index.tsx

@@ -38,7 +38,7 @@ export const Image = ({
       data-src={dataSrc}
       className={className}
       onError={onError}
-      onLoad={() => onLoad?.()}
+      onLoad={onLoad}
       title={title}
     />
   )

src/features/HeaderFilters/store/hooks/index.tsx

@@ -29,6 +29,7 @@ const dateFormat = 'dd/MM/yyyy HH:mm:ss'
 export const useFilters = () => {
   const { search } = useLocation()
   const [selectedDate, setSelectedDate] = useQueryParamStore({
+    clearOnUnmount: true,
     defaultValue: new Date(),
     key: filterKeys.DATE,
     validator: isValidDate,
@@ -38,6 +39,7 @@ export const useFilters = () => {
     selectedMatchStatus,
     setMatchStatus,
   ] = useQueryParamStore<MatchStatuses | null>({
+    clearOnUnmount: true,
     defaultValue: null,
     key: filterKeys.MATCH_STATUS,
     validator: isValidMatchStatus,
@@ -58,6 +60,7 @@ export const useFilters = () => {
     selectedSportTypeId,
     setSelectedSportTypeId,
   ] = useQueryParamStore<SportTypes | null>({
+    clearOnUnmount: true,
     defaultValue: null,
     key: filterKeys.SPORT_TYPE,
     validator: isValidSportType,

src/features/HomePage/hooks.tsx

@@ -16,9 +16,9 @@ import { useMatchSwitchesStore } from 'features/MatchSwitches'
 const matchesFilteredByStatus = (matches : Matches, status : MatchStatuses | null) => {
   if (!status) return matches
   const filteredMatches = filter(matches, (match) => {
-    const localDate = new Date(`${match.date}+03:00`)
-    const matchIsStarted = isPast(new Date(match.date))
-    const difTime = differenceInMinutes(new Date(), localDate)
+    const matchDate = new Date(match.date)
+    const matchIsStarted = isPast(matchDate)
+    const difTime = differenceInMinutes(new Date(), matchDate)
 
     switch (status) {
       case MatchStatuses.Soon:
@@ -32,6 +32,7 @@ const matchesFilteredByStatus = (matches : Matches, status : MatchStatuses | nul
   })
   return filteredMatches
 }
+
 const setMatches = (
   matches : MatchesBySection,
   status : MatchStatuses | null,

src/features/MatchCard/CardFrontside/index.tsx

@@ -1,5 +1,7 @@
 import type { KeyboardEvent } from 'react'
 
+import getUnixTime from 'date-fns/getUnixTime'
+
 import { ProfileTypes } from 'config'
 
 import type { Match } from 'features/Matches'
@@ -7,7 +9,6 @@ import { SportName } from 'features/Common'
 import { useMatchSwitchesStore } from 'features/MatchSwitches'
 import { useName } from 'features/Name'
 
-import { getUnixTime } from 'date-fns'
 import { NoAccessMessage } from '../NoAccessMessage'
 import {
   CardWrapper,
@@ -38,6 +39,7 @@ export const CardFrontside = ({
     accessibleBySubscription,
     accessibleInUsersCountry,
     date,
+    formattedDate,
     hasVideo,
     preview,
     sportType,
@@ -46,7 +48,6 @@ export const CardFrontside = ({
     team2,
     time,
     tournament,
-    unformattedDate,
   },
   onClick,
   onKeyPress,
@@ -54,7 +55,7 @@ export const CardFrontside = ({
 }: Props) => {
   const tournamentName = useName(tournament)
   const { isScoreHidden } = useMatchSwitchesStore()
-  const unixTimeOfMatch = getUnixTime(new Date(unformattedDate))
+  const unixTimeOfMatch = getUnixTime(date)
 
   return (
     <CardWrapper
@@ -91,20 +92,17 @@ export const CardFrontside = ({
             )
         }
         {!accessibleBySubscription && <BuyMatchButton />}
-        {(accessibleBySubscription && !accessibleInUsersCountry)
-          ? <NoAccessMessage />
-          : (
-            <MatchDate>
-              {date}
-              {unixTimeOfMatch > getUnixTime(new Date()) && (!hasVideo || !storage)
-                ? (
-                  <Time>
-                    {time}
-                  </Time>
-                )
-                : null}
-            </MatchDate>
-          )}
+        {(accessibleBySubscription && !accessibleInUsersCountry) && <NoAccessMessage />}
+        <MatchDate>
+          {formattedDate}
+          {unixTimeOfMatch > getUnixTime(new Date()) && (!hasVideo || !storage)
+            ? (
+              <Time>
+                {time}
+              </Time>
+            )
+            : null}
+        </MatchDate>
       </PreviewWrapper>
       <Info>
         {showSportName && <SportName sport={sportType} />}

src/features/Matches/helpers/prepareMatches.tsx

@@ -7,7 +7,7 @@ import { getSportLexic } from 'helpers'
 
 const prepareMatch = ({
   access,
-  date,
+  date: matchDate,
   has_video,
   id,
   live,
@@ -18,27 +18,30 @@ const prepareMatch = ({
   team1,
   team2,
   tournament,
-}: Match) => ({
-  accessibleBySubscription: sub,
-  accessibleInUsersCountry: access,
-  date: format(new Date(date), 'dd.MM.yy'),
-  hasVideo: has_video,
-  id,
-  isClickable: (sub && access && (
-    has_video
-    || storage
-  )),
-  live,
-  preview,
-  sportName: getSportLexic(sport),
-  sportType: sport,
-  storage,
-  team1,
-  team2,
-  time: format(new Date(date), 'HH:mm'),
-  tournament,
-  unformattedDate: date,
-})
+}: Match) => {
+  const date = new Date(matchDate)
+  return {
+    accessibleBySubscription: sub,
+    accessibleInUsersCountry: access,
+    date,
+    formattedDate: format(date, 'dd.MM.yy'),
+    hasVideo: has_video,
+    id,
+    isClickable: (sub && access && (
+      has_video
+      || storage
+    )),
+    live,
+    preview,
+    sportName: getSportLexic(sport),
+    sportType: sport,
+    storage,
+    team1,
+    team2,
+    time: format(date, 'HH:mm'),
+    tournament,
+  }
+}
 
 export const prepareMatches = (matches: Array<Match>) => map(
   matches,

src/hooks/useStorage/index.tsx

@@ -10,6 +10,7 @@ import {
 const defaultValidator = () => true
 
 type Args<T> = {
+  clearOnUnmount?: boolean,
   defaultValue: T,
   key: string,
 
@@ -30,6 +31,7 @@ type Args<T> = {
  */
 const createHook = (storage: Storage) => (
   <T extends any>({
+    clearOnUnmount,
     defaultValue,
     key,
     validator = defaultValidator,
@@ -54,6 +56,11 @@ const createHook = (storage: Storage) => (
       storage.setItem(key, JSON.stringify(state, dateReplacer))
     }, [key, state])
 
+    useEffect(() => {
+      if (clearOnUnmount) return () => storage.removeItem(key)
+      return undefined
+    }, [key, clearOnUnmount])
+
     return [state, setState] as const
   }
 )