feat(in-652): pr fixes

3 years ago · 46b80b8e6c
parent 66a53765dc
commit 46b80b8e6c
6 changed files with 83 additions and 79 deletions
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx
@ -35,7 +35,6 @@ import {
  MatchTimeInfo,
  Preview,
  PreviewWrapper,
-  Score,
  Team,
  TeamName,
  Teams,
@ -48,10 +47,9 @@ import {
  NameSignWrapper,
  HoverFrame,
  MobTime,
-  ScoreWrapper,
-  PenaltyScore,
 } from './styled'
 import { useCardPreview } from '../hooks'
+import { Score } from '../../Score'

 type Props = {
  isNeedFormatTimeChanged: boolean,
@ -161,32 +159,22 @@ export const CardFrontsideMobile = ({
                <TeamName nameObj={team1} />
                {team1InFavorites && <FavoriteSign />}
              </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team1.score ?? team1.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team1.penalty_score ?? team1.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
            </Team>
            <Team>
              <NameSignWrapper>
                <TeamName nameObj={team2} />
                {team2InFavorites && <FavoriteSign />}
              </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team2.score ?? team2.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team2.penalty_score ?? team2.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
            </Team>
          </Teams>
          <SecondaryInfo>
--- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
+++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx
@ -304,26 +304,6 @@ export const TeamName = styled(Name)`
  ${nameStyles}
 `

-export const Score = styled.div`
-
-${isMobileDevice
-    ? css`
-        display: flex;
-        justify-content: center;
-      `
-    : ''};
-`
-
-export const ScoreWrapper = styled.div`
-  display: flex;
-  line-height: 1;
-`
-
-export const PenaltyScore = styled.div`
-  font-weight: 400;
-  font-size: 10px;
-`
-
 export const TeamLogos = styled.div`
  display: flex;
  align-items: center;
--- a/src/features/MatchCard/CardFrontside/index.tsx
+++ b/src/features/MatchCard/CardFrontside/index.tsx
@ -19,6 +19,7 @@ import { useUserFavoritesStore } from 'features/UserFavorites/store'
 import { TournamentSubtitle } from 'features/TournamentSubtitle'

 import { NoAccessMessage } from '../NoAccessMessage'
+import { Score } from '../Score'
 import {
  CardWrapperOuter,
  CardWrapper,
@ -28,7 +29,6 @@ import {
  MatchTimeInfo,
  Preview,
  PreviewWrapper,
-  Score,
  Team,
  TeamName,
  Teams,
@ -40,8 +40,6 @@ import {
  FavoriteSign,
  NameSignWrapper,
  HoverFrame,
-  PenaltyScore,
-  ScoreWrapper,
 } from '../styled'
 import { useCardPreview } from './hooks'
 import { getPrepareTimeFormat } from '../helpers'
@ -208,16 +206,11 @@ export const CardFrontside = ({
                <TeamName nameObj={team1} />
                {team1InFavorites && <FavoriteSign />}
              </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team1.score ?? team1.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team1.penalty_score ?? team1.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
            </Team>
            <Team isMatchPage={isMatchPage}>
              <NameSignWrapper>
@ -235,16 +228,11 @@ export const CardFrontside = ({
                <TeamName nameObj={team2} />
                {team2InFavorites && <FavoriteSign />}
              </NameSignWrapper>
-              {showScore && (
-                <ScoreWrapper>
-                  <Score>
-                    {score?.team2.score ?? team2.score}
-                  </Score>
-                  <PenaltyScore>
-                    {score?.team2.penalty_score ?? team2.penalty_score}
-                  </PenaltyScore>
-                </ScoreWrapper>
-              )}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
            </Team>
          </Teams>
          {!isMatchPage && (
--- a/src/features/MatchCard/Score/index.tsx
+++ b/src/features/MatchCard/Score/index.tsx
@ -0,0 +1,30 @@
+import {
+  MainScore,
+  ScoreWrapper,
+  PenaltyScore,
+} from './styled'
+
+type Props = {
+  penaltyScore?: number | null,
+  score?: number | null,
+  showScore: boolean,
+}
+
+export const Score = ({
+  penaltyScore,
+  score,
+  showScore,
+}: Props) => {
+  if (!showScore) return null
+
+  return (
+    <ScoreWrapper>
+      <MainScore>
+        {score}
+      </MainScore>
+      <PenaltyScore>
+        {penaltyScore}
+      </PenaltyScore>
+    </ScoreWrapper>
+  )
+}
--- a/src/features/MatchCard/Score/styled.tsx
+++ b/src/features/MatchCard/Score/styled.tsx
@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const MainScore = styled.div`
+
+${isMobileDevice
+    ? css`
+        display: flex;
+        justify-content: center;
+      `
+    : ''};
+`
+
+export const ScoreWrapper = styled.div`
+  display: flex;
+  line-height: 1;
+`
+
+export const PenaltyScore = styled.div`
+  font-weight: 400;
+  font-size: .55rem;
+  margin-left: 1px;
+  
+  ${isMobileDevice
+    ? css`
+      font-size: 10px;
+    `
+    : ''};
+`
+
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@ -274,19 +274,6 @@ export const TeamName = styled(Name)`
  ${nameStyles}
 `

-export const ScoreWrapper = styled.div`
-  display: flex;
-  line-height: 1;
-`
-
-export const Score = styled.div``
-
-export const PenaltyScore = styled.div`
-  font-weight: 400;
-  font-size: .55rem;
-  margin-left: 1px;
-`
-
 export const TeamLogos = styled.div<CardProps>`
  display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
  align-items: center;