From 4c4b594b3c9a1b4dc3715ad8c6c64dbf87af7ffd Mon Sep 17 00:00:00 2001 From: Rita Date: Wed, 22 Mar 2023 11:37:27 +0400 Subject: [PATCH] feat(in-422): facr calendar --- Makefile | 2 +- src/config/clients/facr.tsx | 8 +- src/config/lexics/indexLexics.tsx | 2 + .../components/DateFilter/helpers.tsx | 30 +++ .../components/DateFilter/hooks/index.tsx | 28 ++- .../components/DateFilter/styled.tsx | 210 +++++++++++++++++- .../components/FacrDateFilter/index.tsx | 191 ++++++++++++++++ src/features/HeaderFilters/index.tsx | 1 + src/features/HeaderFilters/store/config.tsx | 5 + .../HeaderFilters/store/hooks/index.tsx | 38 +++- src/features/HeaderMobile/index.tsx | 10 +- .../HomePage/components/Header/index.tsx | 10 +- src/features/HomePage/hooks.tsx | 24 +- .../CardFrontside/MatchCardMobile/index.tsx | 5 +- .../CardFrontside/MatchCardMobile/styled.tsx | 7 +- .../MatchCard/CardFrontside/index.tsx | 10 +- src/features/MatchCard/styled.tsx | 5 +- src/features/Theme/config.tsx | 1 + src/requests/getMatches/getHomeMatches.tsx | 3 + 19 files changed, 561 insertions(+), 29 deletions(-) create mode 100644 src/features/HeaderFilters/components/FacrDateFilter/index.tsx diff --git a/Makefile b/Makefile index cf453ee8..22c0ada7 100644 --- a/Makefile +++ b/Makefile @@ -46,7 +46,7 @@ build-c: clean build-d: clean REACT_APP_TYPE=ott \ REACT_APP_ENV=staging \ - REACT_APP_CLIENT=insports \ + REACT_APP_CLIENT=facr \ REACT_APP_STAGE=test-d \ npm run build diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index 6b4f0ed9..a05987e8 100644 --- a/src/config/clients/facr.tsx +++ b/src/config/clients/facr.tsx @@ -1,5 +1,7 @@ import { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' + import { PROCEDURES } from '../procedures' import { @@ -41,8 +43,10 @@ export const facr: ClientConfig = { styles: { background: '', homePageHeader: css` - background: linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000; - `, + background: ${(isMobileDevice + ? 'linear-gradient(180deg, #00257A 0%, rgba(0, 37, 122, 0) 100%), #000000' + : 'linear-gradient(83.42deg, #00257A 53.04%, rgba(0, 0, 0, 0) 94.83%), #000000' + )};`, logo: 'facr-logo.svg', logoHeight: 6.3, logoLeft: 1.1, diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 5d498ce0..a4c9227f 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -187,6 +187,7 @@ export const indexLexics = { match_status_live: 12984, match_status_soon: 12986, match_video: 13025, + month_title: 2202, no_match_access_body: 13419, no_match_access_title: 13418, player: 14975, @@ -208,6 +209,7 @@ export const indexLexics = { watch_from_beginning: 13021, watch_from_last_pause: 13022, watch_now: 13020, + week_title: 6584, ...filterPopup, ...confirmPopup, diff --git a/src/features/HeaderFilters/components/DateFilter/helpers.tsx b/src/features/HeaderFilters/components/DateFilter/helpers.tsx index 1177b901..20e53193 100644 --- a/src/features/HeaderFilters/components/DateFilter/helpers.tsx +++ b/src/features/HeaderFilters/components/DateFilter/helpers.tsx @@ -1,5 +1,7 @@ import startOfWeek from 'date-fns/startOfWeek' import addDays from 'date-fns/addDays' +import addMonths from 'date-fns/addMonths' +import startOfYear from 'date-fns/startOfYear' type Args = { date: Date, @@ -60,3 +62,31 @@ export const getWeeks = (date: Date, locale: string) => { ] return week } + +const createMonthGetter = (yearStart: Date, locale: string) => (month: number) => { + const dayDate = addMonths(yearStart, month) + return { + date: dayDate, + name: new Intl.DateTimeFormat(locale || 'en', { month: 'short' }).format(dayDate), + } +} + +export const getMonths = (locale: string, date: Date) => { + const yearStart = startOfYear(date) + const getMonth = createMonthGetter(yearStart, locale) + const months: Array = [ + getMonth(0), + getMonth(1), + getMonth(2), + getMonth(3), + getMonth(4), + getMonth(5), + getMonth(6), + getMonth(7), + getMonth(8), + getMonth(9), + getMonth(10), + getMonth(11), + ] + return months +} diff --git a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx index e462d1a2..7225e678 100644 --- a/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx +++ b/src/features/HeaderFilters/components/DateFilter/hooks/index.tsx @@ -4,7 +4,11 @@ import { useMemo, } from 'react' -import addDays from 'date-fns/addDays' +import { + add, + sub, + addDays, +} from 'date-fns' import { useToggle } from 'hooks' @@ -13,17 +17,23 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters' import { getDisplayDate, + getMonths, getWeekName, getWeeks, } from '../helpers' export const useDateFilter = () => { const { + isMonthMode, selectedDate, + selectedMode, + selectedMonthModeDate, setIsShowTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, + setSelectedMode, + setSelectedMonthModeDate, setSelectTournament, } = useHeaderFiltersStore() @@ -38,6 +48,11 @@ export const useDateFilter = () => { [selectedDate, lang], ) + const months = useMemo( + () => getMonths(lang, selectedMonthModeDate), + [lang, selectedMonthModeDate], + ) + const date = getDisplayDate({ date: selectedDate, lang, @@ -71,6 +86,9 @@ export const useDateFilter = () => { setSelectedDate(addDays(selectedDate, numberAddDays)) } + const onPrevYearClick = () => setSelectedMonthModeDate(sub(selectedMonthModeDate, { years: 1 })) + const onNextYearClick = () => setSelectedMonthModeDate(add(selectedMonthModeDate, { years: 1 })) + const onDateChange = (newDate: Date | null) => { if (newDate) { setSelectedDate(newDate) @@ -86,13 +104,21 @@ export const useDateFilter = () => { return { close, date, + isMonthMode, isOpen, + months, onDateChange, onNextClick, + onNextYearClick, + onPrevYearClick, onPreviousClick, onWeekDayClick: setSelectedDate, openDatePicker, selectedDate, + selectedMode, + selectedMonthModeDate, + setSelectedMode, + setSelectedMonthModeDate, week, } } diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx index 3857d476..528ef42d 100644 --- a/src/features/HeaderFilters/components/DateFilter/styled.tsx +++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx @@ -1,7 +1,11 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { devices } from 'config' +import { devices } from 'config/devices' + +type Props = { + isMonthMode: boolean, +} export const BaseButton = styled.button` border: none; @@ -28,7 +32,7 @@ export const Wrapper = styled.div` /* padding-top: 4px; */ /* min-height: 84px; */ justify-content: space-between; - + @media (max-width: 450px){ justify-content: flex-end; } @@ -58,6 +62,7 @@ export const MonthYear = styled.span` font-size: 1.04rem; line-height: 1.8rem; text-transform: uppercase; + ${isMobileDevice ? css` font-size: 10px; @@ -104,10 +109,11 @@ export const WeekDaysWrapper = styled.div` justify-content: center; align-items: center; margin-top: 0.567rem; + ${isMobileDevice ? css` - padding: 0 5px; - margin-top: 0; + padding: 0 5px; + margin-top: 0; ` : ''}; ` @@ -218,3 +224,199 @@ export const Arrow = styled.span` ` : ''}; ` + +export const MonthModeWrapper = styled(WeekDaysWrapper)` + display: flex; + justify-content: center; + align-items: center; + margin-top: ${({ isMonthMode }) => (isMonthMode ? '0' : '0.2rem')};; + + ::-webkit-scrollbar { + display: none; + } + + ${isMobileDevice + ? css` + padding: 0 5px; + margin-top: 0; + overflow-y: auto; + height: 100%; + ` + : ''}; +` + +export const FacrWrapper = styled(Wrapper)` + justify-content: space-between; + height: ${(isMobileDevice ? '100%' : 'fit-content')}; + width: ${({ isMonthMode }) => (isMonthMode ? '49.5%' : '26.3rem')}; + + @media (max-width: 450px){ + width: 100%; + justify-content: flex-start; + }; +` + +export const FacrDateButton = styled(DateButton)` + left: 24rem; + top: 0; +` + +export const FacrMonthWrapper = styled(MonthWrapper)` + position: static; + width: auto; + align-self: auto; + + ${isMobileDevice + ? css` + position: absolute; + left: 50%; + transform: translateX(-50%); + ` + : ''}; +` + +export const DateWrapper = styled.div` + position: relative; + display: flex; + align-items: flex-end; + justify-content: space-between; + width: ${({ isMonthMode }) => (isMonthMode ? '25rem' : '16.9rem')}; + margin: ${({ isMonthMode }) => (isMonthMode ? '3.7rem 0 0.7rem' : '3rem 0 0')}; + + ${isMobileDevice + ? css` + width: 100%; + margin: 0.7rem 0; + padding-left: 5px; + ` + : ''}; +` + +export const MonthsMode = styled.div` + height: 5.7rem; +` + +export const MonthArrow = styled(ArrowButton)` + height: auto; +` + +export const Months = styled(Week)` + height: 100%; + width: 100%; + margin: 0; + justify-content: space-between; +` + +export const FacrWeek = styled(Week)` + margin: 0 1.8rem; +` + +export const Month = styled(WeekDay)` + width: auto; + + ${isMobileDevice + ? css` + margin-top: 10px; + margin-right: 25px; + min-width: fit-content; + ` + : ''}; +` + +export const MonthModeYear = styled(MonthYear)` + margin-top: 0.22rem; + line-height: normal; + font-size: 0.85rem; + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; +` + +export const TabsList = styled.div` + display: flex; + justify-content: space-between; + height: fit-content; + + ${isMobileDevice + ? css` + top: 3px; + padding: 0; + ` + : ''}; +` + +export const YearWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 110px; + + ${isMobileDevice + ? css` + width: auto; + position: absolute; + left: 50%; + transform: translateX(-50%); + ` + : ''}; +` + +export const MonthName = styled(WeekName)` + font-weight: 600; + + ${isMobileDevice + ? css` + font-size: 14px; + ` + : ''}; +` + +type TabTitleProps = { + teamColor?: string | null, +} + +export const TabTitle = styled.span` + color: ${({ theme }) => theme.colors.dateFilter}; +` + +export const Tab = styled.button` + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + font-size: .75rem; + font-weight: 600; + cursor: pointer; + border: none; + background: none; + padding: 0; + + :first-child { + margin-right: 2rem; + } + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; + + &[aria-pressed="true"] { + ::after { + content: ''; + position: absolute; + bottom: ${(isMobileDevice ? '-4px' : '-2px')};; + left: 50%; + transform: translate(-50%); + width: ${(isMobileDevice ? '39px' : '4.2rem')}; + border-bottom: ${({ theme }) => `2px solid ${theme.colors.white}`}; + } + + ${TabTitle} { + color: ${({ theme }) => theme.colors.white}; + } + } +` diff --git a/src/features/HeaderFilters/components/FacrDateFilter/index.tsx b/src/features/HeaderFilters/components/FacrDateFilter/index.tsx new file mode 100644 index 00000000..19f186da --- /dev/null +++ b/src/features/HeaderFilters/components/FacrDateFilter/index.tsx @@ -0,0 +1,191 @@ +import map from 'lodash/map' + +import { T9n } from 'features/T9n' +import { Icon } from 'features/Icon' +import { OutsideClick } from 'features/OutsideClick' +import { BodyBackdrop } from 'features/PageLayout' +import { useHeaderFiltersStore } from 'features/HeaderFilters' + +import { Fragment } from 'react' +import { useDateFilter } from '../DateFilter/hooks' +import { DatePicker } from '../DatePicker' +import { Tabs } from '../../store/config' + +import { + TabsList, + Tab, + TabTitle, + MonthsMode, + YearWrapper, + ArrowButton, + Arrow, + MonthModeYear, + MonthModeWrapper, + Months, + Month, + MonthName, + FacrWrapper, + DateWrapper, + MonthArrow, + WeekDaysWrapper, + FacrMonthWrapper, + WeekDay, + WeekName, + WeekNumber, + FacrDateButton, + FacrWeek, +} from '../DateFilter/styled' + +export const FacrDateFilter = () => { + const { + close, + date, + isMonthMode, + isOpen, + months, + onDateChange, + onNextClick, + onNextYearClick, + onPreviousClick, + onPrevYearClick, + onWeekDayClick, + openDatePicker, + selectedDate, + selectedMode, + selectedMonthModeDate, + setSelectedMode, + setSelectedMonthModeDate, + week, + } = useDateFilter() + + const { + resetFilters, + } = useHeaderFiltersStore() + + return ( + + + + setSelectedMode(Tabs.MONTH)} + > + + + + + setSelectedMode(Tabs.WEEK)} + > + + + + + + {isMonthMode + ? ( + + + + + + {selectedMonthModeDate.getFullYear()} + + + + + + ) + : ( + + + {date.month} {' '} {date.year} + + + + + + )} + + + {isMonthMode + ? ( + + + + { + map(months, (day) => ( + setSelectedMonthModeDate(day.date)} + > + {day.name} + + )) + } + + + + ) + : ( + + + + + + { + map(week, (day) => ( + { + if (day.date.getDate() !== selectedDate.getDate()) { + onWeekDayClick(day.date) + } else { + resetFilters() + } + }} + > + {day.name.slice(0, 3)} + {day.date.getDate()} + + )) + } + + + + + + + )} + { + isOpen && ( + + + + + + + ) + } + + ) +} diff --git a/src/features/HeaderFilters/index.tsx b/src/features/HeaderFilters/index.tsx index 08cf91a0..80de6b06 100644 --- a/src/features/HeaderFilters/index.tsx +++ b/src/features/HeaderFilters/index.tsx @@ -1,2 +1,3 @@ export * from './components/DateFilter' +export * from './components/FacrDateFilter' export * from './store' diff --git a/src/features/HeaderFilters/store/config.tsx b/src/features/HeaderFilters/store/config.tsx index d2aea213..1ba0f9c6 100644 --- a/src/features/HeaderFilters/store/config.tsx +++ b/src/features/HeaderFilters/store/config.tsx @@ -4,3 +4,8 @@ export const filterKeys = { SPORT_TYPE: 'sport', TOURNAMENT_ID: 'tournament', } + +export enum Tabs { + WEEK, + MONTH, +} diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 714a1603..ede4f7f3 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -6,7 +6,7 @@ import { } from 'react' import { useLocation } from 'react-router-dom' -import { isToday } from 'date-fns' +import { isToday, startOfMonth } from 'date-fns' import type { TournamentType } from 'requests/getMatches/types' @@ -14,10 +14,11 @@ import { useQueryParamStore } from 'hooks' import { getSportLexic } from 'helpers' +import { isFacrClient } from 'config/clients' import { querieKeys } from 'config' import { getLocalStorageItem } from 'helpers/getLocalStorage' -import { filterKeys } from '../config' +import { filterKeys, Tabs } from '../config' import { isValidDate } from '../helpers/isValidDate' import type { Match } from '../../../Matches' @@ -31,6 +32,10 @@ export const useFilters = () => { }) const sportList = getLocalStorageItem(querieKeys.sportsList) + const [selectedMode, setSelectedMode] = useState(0) + const [selectedMonthModeDate, setSelectedMonthModeDate] = useState(startOfMonth(new Date())) + const isMonthMode = selectedMode === Tabs.MONTH + const [selectedSport, setSelectedSport] = useState(['all_sports']) const [selectedLeague, setSelectedLeague] = useState>(['all_competitions']) const [selectedFilters, setSelectedFilters] = useState>([]) @@ -39,6 +44,25 @@ export const useFilters = () => { const [sportIds, setSportIds] = useState>([]) const isTodaySelected = isToday(selectedDate) + useEffect(() => { + if (!isFacrClient) return + const dateMode = localStorage.getItem('dateMode') + const parseDateMode = dateMode && JSON.parse(dateMode) + setSelectedMode(parseDateMode.selectedMode) + setSelectedMonthModeDate(new Date(parseDateMode.selectedMonthModeDate)) + }, []) + + useEffect(() => { + if (!isFacrClient) return + localStorage.setItem( + 'dateMode', + JSON.stringify({ + selectedMode, + selectedMonthModeDate, + }), + ) + }, [selectedMode, selectedMonthModeDate]) + const compareSport = useCallback((match: Match, sportNames: Array) => { if (sportNames[0] === 'all_sports') { return true @@ -93,6 +117,7 @@ export const useFilters = () => { const store = useMemo(() => ({ compareSport, + isMonthMode, isShowTournament, isTodaySelected, resetFilters, @@ -100,12 +125,16 @@ export const useFilters = () => { selectedDate, selectedFilters, selectedLeague, + selectedMode, + selectedMonthModeDate, selectedSport, setIsShowTournament, setSelectTournament, setSelectedDate, setSelectedFilters, setSelectedLeague, + setSelectedMode, + setSelectedMonthModeDate, setSelectedSport, setSportIds, sportIds, @@ -131,6 +160,11 @@ export const useFilters = () => { sportIds, updateDate, updateSportIds, + selectedMode, + setSelectedMode, + setSelectedMonthModeDate, + selectedMonthModeDate, + isMonthMode, ]) return store diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index 2435e6f8..daf1e87b 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -1,10 +1,14 @@ import { useRecoilValue } from 'recoil' import { isAndroid, isIOS } from 'config/userAgent' -import { client, isLffClient } from 'config/clients' +import { + client, + isFacrClient, + isLffClient, +} from 'config/clients' import { HeaderMenu } from 'features/HeaderMenu' -import { DateFilter } from 'features/HeaderFilters' +import { DateFilter, FacrDateFilter } from 'features/HeaderFilters' import { ScoreSwitch } from 'features/MatchSwitches' import { SportsFilter } from 'features/SportsFilter' import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms' @@ -41,7 +45,7 @@ export const HeaderMobile = ({ } - + {isFacrClient ? : } {!isLffClient && isSportFilterShown ? : null} diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index 575cc899..99034363 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -1,12 +1,16 @@ import { Link } from 'react-router-dom' import { PAGES } from 'config/pages' -import { client } from 'config/clients' +import { client, isFacrClient } from 'config/clients' import { Menu } from 'features/Menu' import { ScoreSwitch } from 'features/MatchSwitches' import { Search } from 'features/Search' -import { DateFilter, useHeaderFiltersStore } from 'features/HeaderFilters' +import { + DateFilter, + useHeaderFiltersStore, + FacrDateFilter, +} from 'features/HeaderFilters' import { HeaderStyled, @@ -41,7 +45,7 @@ export const Header = () => { - + {isFacrClient ? : } diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 3bbf437d..3cfc48f9 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -4,7 +4,7 @@ import { useState, } from 'react' -import { format } from 'date-fns' +import { endOfMonth, format } from 'date-fns' import { useSetRecoilState } from 'recoil' @@ -35,10 +35,19 @@ const getDate = (date: Date) => format(date, 'yyyy-MM-dd') export const useHomePage = () => { const { user, userInfo } = useAuthStore() - const { selectedDate } = useHeaderFiltersStore() + const { + isMonthMode, + selectedDate, + selectedMonthModeDate, + } = useHeaderFiltersStore() + const [isOpenDownload, setIsOpenDownload] = useState(false) const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false) const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom) + const date = isMonthMode ? selectedMonthModeDate : selectedDate + const dateTo = isMonthMode + ? `${getDate(endOfMonth(selectedMonthModeDate))} 00:00:00` + : undefined const handleCloseConfirmPopup = useCallback(async () => { await setAgreements(`${userInfo?.email}` || '') @@ -66,16 +75,21 @@ export const useHomePage = () => { setIsOpenDownload(true) } }, []) - const fetchMatches = useCallback( (limit: number, offset: number) => getHomeMatches({ - date: getDate(selectedDate), + date: getDate(date), + date_to: dateTo, limit, offset, timezoneOffset: getTimezoneOffset(selectedDate), }), // eslint-disable-next-line react-hooks/exhaustive-deps - [selectedDate, user], + [ + selectedDate, + user, + dateTo, + date, + ], ) useEffect(() => { diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx index d8984d52..5b30d040 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx @@ -16,6 +16,7 @@ import { useName } from 'features/Name' import { T9n } from 'features/T9n' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' import { useUserFavoritesStore } from 'features/UserFavorites/store' +import { useHeaderFiltersStore } from 'features/HeaderFilters' import { Icon } from 'features/Icon' import { getCardColor } from 'helpers/getCardColor' @@ -86,6 +87,7 @@ export const CardFrontsideMobile = ({ const tournamentName = useName(tournament) const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() + const { isMonthMode } = useHeaderFiltersStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) const showScore = !(isInFuture || isScoreHidden) || (live && !isScoreHidden) const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) @@ -141,8 +143,9 @@ export const CardFrontsideMobile = ({ - {isHomePage || isMatchPage ? null : prepareDate} + {(isHomePage && !isMonthMode) || isMatchPage ? null : prepareDate} {isOwnedMatches && {prepareTime} } {live && ( diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index 99c5527b..773b761e 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -112,6 +112,7 @@ export const MatchTimeInfo = styled.div` type MatchDateProps = { isHomePage?: boolean, + isMonthMode?: boolean, isOwnedMatches?: boolean, } @@ -119,7 +120,7 @@ export const MatchDate = styled.div` width: fit-content; height: 0.9rem; border-radius: 2px; - padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0 0.27rem')}; font-weight: ${({ isOwnedMatches }) => (isOwnedMatches ? '500' : 'bold')}; font-size: 0.472rem; line-height: 0.567rem; @@ -133,7 +134,7 @@ export const MatchDate = styled.div` background-color: #6D6D6D; @media ${devices.tablet} { - padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0.27rem 0.36rem')}; } ${isMobileDevice ? css` @@ -145,7 +146,7 @@ export const MatchDate = styled.div` ` : ''}; - ${({ isOwnedMatches }) => (isOwnedMatches + ${({ isMonthMode, isOwnedMatches }) => (isOwnedMatches || isMonthMode ? css` background-color: #6D6D6D; width: fit-content; diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index e5af3755..4b1c5d2b 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -17,6 +17,7 @@ import { T9n } from 'features/T9n' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' import { useUserFavoritesStore } from 'features/UserFavorites/store' import { TournamentSubtitle } from 'features/TournamentSubtitle' +import { useHeaderFiltersStore } from 'features/HeaderFilters' import { NoAccessMessage } from '../NoAccessMessage' import { Score } from '../Score' @@ -84,6 +85,7 @@ export const CardFrontside = ({ const tournamentName = useName(tournament) const { isInFavorites } = useUserFavoritesStore() const { isScoreHidden } = useMatchSwitchesStore() + const { isMonthMode } = useHeaderFiltersStore() const isInFuture = getUnixTime(date) > getUnixTime(new Date()) const showScore = !( isInFuture @@ -177,8 +179,12 @@ export const CardFrontside = ({ /> )} - - {isHomePage || isMatchPage ? null : prepareDate} + + {(isHomePage && !isMonthMode) || isMatchPage ? null : prepareDate} {live && ( diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index a862e5e2..adc35f51 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -134,13 +134,14 @@ export const MatchTimeInfo = styled.div` type MatchDateProps = { isHomePage?: boolean, isMatchPage?: boolean, + isMonthMode?: boolean, } export const MatchDate = styled.div` width: fit-content; height: 0.9rem; border-radius: 2px; - padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0 0.27rem')}; font-weight: bold; font-size: 0.472rem; line-height: 0.567rem; @@ -154,7 +155,7 @@ export const MatchDate = styled.div` background-color: #6D6D6D; @media ${devices.tablet} { - padding: ${({ isHomePage }) => (!isHomePage ? '0.27rem 0.36rem' : '')}; + padding: ${({ isHomePage, isMonthMode }) => (isHomePage && !isMonthMode ? '' : '0.27rem 0.36rem')}; } ${isMobileDevice ? css` diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx index ed2d8015..bc2eff03 100644 --- a/src/features/Theme/config.tsx +++ b/src/features/Theme/config.tsx @@ -72,6 +72,7 @@ export const facrTheme: CustomTheme = { colors: { ...defaultTheme.colors, button: '#00257A', + dateFilter: 'rgba(255, 255, 255, 0.5)', inputs: 'transparent', loaderAuth: '#00257A', }, diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index 37d382bd..35c41bd6 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -9,6 +9,7 @@ const proc = PROCEDURES.get_matches type Args = { date: string, + date_to?: string, limit: number, offset: number, timezoneOffset: number, @@ -16,6 +17,7 @@ type Args = { export const getHomeMatches = async ({ date, + date_to, limit, offset, timezoneOffset, @@ -25,6 +27,7 @@ export const getHomeMatches = async ({ const config = { body: { date: `${date} 00:00:00`, + date_to, gmt: timezoneOffset, limit, offset,