From fa86dc660213cb8fea645b1bd7d70dc439c1fd1c Mon Sep 17 00:00:00 2001 From: Mirlan Date: Mon, 1 Feb 2021 13:42:42 +0600 Subject: [PATCH] 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 | 2 +- .../HeaderFilters/store/hooks/index.tsx | 3 ++ src/features/HomePage/hooks.tsx | 7 +-- .../MatchCard/CardFrontside/index.tsx | 32 ++++++------- .../Matches/helpers/prepareMatches.tsx | 47 ++++++++++--------- src/hooks/useStorage/index.tsx | 7 +++ 6 files changed, 55 insertions(+), 43 deletions(-) diff --git a/src/features/Common/Image/index.tsx b/src/features/Common/Image/index.tsx index 21022153..3f5c1054 100644 --- a/src/features/Common/Image/index.tsx +++ b/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} /> ) diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index c73dd1c9..a376c423 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/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({ + clearOnUnmount: true, defaultValue: null, key: filterKeys.MATCH_STATUS, validator: isValidMatchStatus, @@ -58,6 +60,7 @@ export const useFilters = () => { selectedSportTypeId, setSelectedSportTypeId, ] = useQueryParamStore({ + clearOnUnmount: true, defaultValue: null, key: filterKeys.SPORT_TYPE, validator: isValidSportType, diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 9e258d58..751d4325 100644 --- a/src/features/HomePage/hooks.tsx +++ b/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, diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 443f579a..a9dbd0e8 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/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 ( } - {(accessibleBySubscription && !accessibleInUsersCountry) - ? - : ( - - {date} - {unixTimeOfMatch > getUnixTime(new Date()) && (!hasVideo || !storage) - ? ( - - ) - : null} - - )} + {(accessibleBySubscription && !accessibleInUsersCountry) && } + + {formattedDate} + {unixTimeOfMatch > getUnixTime(new Date()) && (!hasVideo || !storage) + ? ( + + ) + : null} + {showSportName && } diff --git a/src/features/Matches/helpers/prepareMatches.tsx b/src/features/Matches/helpers/prepareMatches.tsx index 5a6f088a..1d7355b7 100644 --- a/src/features/Matches/helpers/prepareMatches.tsx +++ b/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) => map( matches, diff --git a/src/hooks/useStorage/index.tsx b/src/hooks/useStorage/index.tsx index d8e901e7..cb6d090c 100644 --- a/src/hooks/useStorage/index.tsx +++ b/src/hooks/useStorage/index.tsx @@ -10,6 +10,7 @@ import { const defaultValidator = () => true type Args = { + clearOnUnmount?: boolean, defaultValue: T, key: string, @@ -30,6 +31,7 @@ type Args = { */ const createHook = (storage: Storage) => ( ({ + 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 } )