From a137a9036e10e99bbb6e6615afd3472066a19a5f Mon Sep 17 00:00:00 2001 From: Zoia R Date: Mon, 29 Aug 2022 15:06:43 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20ott-2697-mobileMatches?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CardFrontside/MatchCardMobile/index.tsx | 33 +++++++++++++------ .../CardFrontside/MatchCardMobile/styled.tsx | 27 ++++++++++++--- .../MatchCard/CardFrontside/index.tsx | 9 +++-- .../helpers/getPrepareDateFormat.tsx | 15 +++++++++ src/features/MatchCard/hooks.tsx | 10 +++++- src/features/MatchCard/index.tsx | 2 ++ src/features/MatchSidePlaylists/index.tsx | 4 +-- 7 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 src/features/MatchCard/helpers/getPrepareDateFormat.tsx diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx index 45a4c0eb..7d4841e5 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx @@ -16,6 +16,8 @@ import { getCardColor } from 'helpers/getCardColor' import { NoAccessMessage } from '../../NoAccessMessage' import { getPrepareTimeFormat } from '../../helpers' +import { getPrepareDateFormat } from '../../helpers/getPrepareDateFormat' + import { CardWrapperOuter, CardWrapper, @@ -38,11 +40,13 @@ import { NameSignWrapper, HoverFrame, ScDollar, + MobTime, } from './styled' import { useCardPreview } from '../hooks' type Props = { isNeedFormatTimeChanged: boolean, + isOwnedMatches: boolean, match: Match, onClick: () => void, onKeyPress: (e: KeyboardEvent) => void, @@ -50,6 +54,7 @@ type Props = { export const CardFrontsideMobile = ({ isNeedFormatTimeChanged, + isOwnedMatches, match, onClick, onKeyPress, @@ -58,7 +63,6 @@ export const CardFrontsideMobile = ({ const { access, date, - formattedDate, live, preview, previewURL, @@ -89,6 +93,11 @@ export const CardFrontsideMobile = ({ time, }) + const prepareDate = getPrepareDateFormat({ + date, + isNeedFormatTimeChanged, + }) + return ( @@ -117,15 +126,19 @@ export const CardFrontsideMobile = ({ /> )} - - - {isHomePage || isMatchPage ? null : formattedDate} - {live && ( - - - - )} + + + {isHomePage || isMatchPage ? null : prepareDate} + {isOwnedMatches && {prepareTime} } + {live && ( + + + + )} @@ -146,7 +159,7 @@ export const CardFrontsideMobile = ({ - + {isHomePage || isMatchPage ? : null} {access === MatchAccess.CanBuyMatch && ( diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index d2f34a7c..01c670b7 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -99,17 +99,21 @@ export const Preview = styled.img` : ''}; ` -export const MatchTimeInfo = styled.div` +type MatchTimeInfoProps = { + isOwnedMatches?: boolean, +} + +export const MatchTimeInfo = styled.div` width: 100%; position: absolute; - top: 0.519rem; - padding: 0 0.519rem; + padding: ${({ isOwnedMatches }) => (isOwnedMatches ? '0.9rem' : '0.519rem')}; display: flex; flex-direction: row; ` type MatchDateProps = { isHomePage?: boolean, + isOwnedMatches?: boolean, } export const MatchDate = styled.div` @@ -117,7 +121,7 @@ export const MatchDate = styled.div` height: 0.9rem; border-radius: 2px; padding: ${({ isHomePage }) => (!isHomePage ? '0 0.27rem' : '')}; - font-weight: bold; + font-weight: ${({ isOwnedMatches }) => (isOwnedMatches ? '500' : 'bold')}; font-size: 0.472rem; line-height: 0.567rem; letter-spacing: 0.05em; @@ -141,13 +145,22 @@ export const MatchDate = styled.div` font-size: 7px; ` : ''}; + + ${({ isOwnedMatches }) => (isOwnedMatches + ? css` + background-color: #6D6D6D; + width: fit-content; + margin-left: 0; + ` + : '')} + ` type LiveType = { color?: string, } -export const LiveSign = styled(MatchDate) ` +export const LiveSign = styled(MatchDate)` background-color: ${({ color }) => color ?? '#CC0000'}; margin-left: auto; @@ -167,6 +180,10 @@ export const Time = styled.span` ` : ''}; ` +export const MobTime = styled.span` + margin-left: 0.8rem; + font-weight: bold; +` export const Info = styled.div` display: flex; diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index b1d8dd4a..9a49493a 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -39,6 +39,7 @@ import { } from '../styled' import { useCardPreview } from './hooks' import { getPrepareTimeFormat } from '../helpers' +import { getPrepareDateFormat } from '../helpers/getPrepareDateFormat' type Props = { isNeedFormatTimeChanged: boolean, @@ -58,7 +59,6 @@ export const CardFrontside = ({ access, countryId, date, - formattedDate, live, preview, previewURL, @@ -92,6 +92,11 @@ export const CardFrontside = ({ time, }) + const prepareDate = getPrepareDateFormat({ + date, + isNeedFormatTimeChanged, + }) + return ( } - {isHomePage || isMatchPage ? null : formattedDate} + {isHomePage || isMatchPage ? null : prepareDate} {live && ( diff --git a/src/features/MatchCard/helpers/getPrepareDateFormat.tsx b/src/features/MatchCard/helpers/getPrepareDateFormat.tsx new file mode 100644 index 00000000..3d93631a --- /dev/null +++ b/src/features/MatchCard/helpers/getPrepareDateFormat.tsx @@ -0,0 +1,15 @@ +import format from 'date-fns/format' + +type prepareTimeFormat = { + date: Date, + isNeedFormatTimeChanged: boolean, +} + +export const getPrepareDateFormat = ({ + date, + isNeedFormatTimeChanged, +}: prepareTimeFormat) => ( + isNeedFormatTimeChanged + ? format(date, 'MM.dd.yy') + : format(date, 'dd.MM.yy') +) diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx index fc28a522..4187cdfa 100644 --- a/src/features/MatchCard/hooks.tsx +++ b/src/features/MatchCard/hooks.tsx @@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom' import includes from 'lodash/includes' -import { ProfileTypes } from 'config' +import { PAGES, ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { useMatchPopupStore } from 'features/MatchPopup' @@ -12,6 +12,7 @@ import { useBuyMatchPopupStore } from 'features/BuyMatchPopup' import { useAuthStore } from 'features/AuthStore' import { getProfileUrl } from 'features/ProfileLink/helpers' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' +import { checkPage } from 'helpers/checkPage' export const useCard = (match: Match) => { const { openMatchPopup } = useMatchPopupStore() @@ -62,8 +63,15 @@ export const useCard = (match: Match) => { const isNeedFormatTimeChanged = includes(['US', 'CA'], user?.profile.country_code) + const isPlayerPage = checkPage(PAGES.player) + const isTeamPage = checkPage(PAGES.team) + const isTournamentPage = checkPage(PAGES.tournament) + + const isOwnedMatches = isPlayerPage || isTeamPage || isTournamentPage + return { isNeedFormatTimeChanged, + isOwnedMatches, onKeyPress, onMatchClick, } diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx index 707660e5..567285d6 100644 --- a/src/features/MatchCard/index.tsx +++ b/src/features/MatchCard/index.tsx @@ -13,6 +13,7 @@ type Props = { export const MatchCard = ({ match }: Props) => { const { isNeedFormatTimeChanged, + isOwnedMatches, onKeyPress, onMatchClick, } = useCard(match) @@ -25,6 +26,7 @@ export const MatchCard = ({ match }: Props) => { onClick={onMatchClick} onKeyPress={onKeyPress} isNeedFormatTimeChanged={isNeedFormatTimeChanged} + isOwnedMatches={isOwnedMatches} /> ) } diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 0722f795..4b243884 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -64,8 +64,8 @@ export const MatchSidePlaylists = ({ ? (screenLandscape === 90 || screenLandscape === -90) : (screenLandscape === 'landscape-primary' || screenLandscape === 'landscape-secondary') - if (yOffset && yOffset > 10 && !isScreenLandscape) hideProfileCard() - if (yOffset && yOffset < 10) showProfileCard() + if (Number(yOffset) < 10) showProfileCard() + if (Number(yOffset) > 10 && !isScreenLandscape) hideProfileCard() }, event: 'scroll', target: containerRef,