AI Review Center

Project

Showing AI reviews for website

Project AI Score ?

71%

Quality Avg ?

72%

Security Avg ?

74%

Reviews ?

123

Review Result ?

solutionbowl/website · dae0b0a7

This commit introduces conditional rendering for a jersey image border based on market type and fancy type in racing components, enhancing UI consistency for the fancy market. The implementation uses string normalization and logical checks to determine when to display jersey-related elements across different UI grids. No major vulnerabilities or risky behavior appear, but some code duplication and naming inconsistencies could be improved.

Quality ?

80%

Security ?

80%

Business Value ?

75%

Maintainability ?

80%

Issues & Suggested Fixes ?

1AI detects the issue

2Shows file, line, or evidence

3Suggests the fix to apply

Variable Declaration In Multiple Lines Bre...

Where src/components/racing/HorseRow.tsx:93

Issue / Evidence variable declaration in multiple lines breaks cohesion

Suggested Fix combine 'const isJerseyFallbackMarket = ...' into one statement for clarity and consistency

Different Casing Used Between Fancy Type A...

Where src/components/racing/MarketCard.tsx:241

Issue / Evidence different casing used between fancy_type and fancyType

Suggested Fix unify use of market.fancy_type and market.fancyType to avoid confusion and potential bugs

Duplicate Logic

Where src/components/racing/HorseRow.tsx:619

Issue / Evidence inline conditional expressions used repeatedly for styling

Suggested Fix consider extracting grid template logic into a helper function to improve readability and reduce duplication

Duplicate Logic

Where src/components/racing/MarketCard.tsx:355

Issue / Evidence repeated conditional ternary expressions for grid templates

Suggested Fix refactor for maintainability

Vague Description

Where commit message

Issue / Evidence vague description

Suggested Fix improve commit message with more detail about what was fixed and why to increase traceability and business value

Code Change Preview · src/components/racing/HorseRow.tsx ?

Removed / Before Commit

- diff --git a/src/components/racing/HorseRow.tsx b/src/components/racing/HorseRow.tsx
- index 9ebc805..53e13b4 100644
- 
- const marketNameLower = marketName?.toLowerCase() || ''
- const isWinnerMarket = marketNameLower.includes('winner') || marketNameLower.includes('win')
-   const normalizedMarketType = marketType?.trim().toUpperCase()
- const normalizedFancyType = fancyType?.trim().toLowerCase()
- const isPhotoFancyMarket = normalizedMarketType === 'FANCY' && normalizedFancyType === 'photo'
- const isPhotoMarket = normalizedFancyType === 'photo' || normalizedMarketType === 'PHOTO'
- const isObjectionMarket = normalizedFancyType === 'objection' || normalizedMarketType === 'OBJECTION'
- const jerseyImageUrl = runner.jersey || runner.runner?.jersey
- const [jerseyImageFailed, setJerseyImageFailed] = useState(false)
- const shouldShowJerseyImage = Boolean(jerseyImageUrl && !jerseyImageFailed)
- 
- useEffect(() => {
- setJerseyImageFailed(false)
- <div
- className="grid min-h-[68px] px-[10px] py-[10px] items-center gap-[6px]"

Added / After Commit

+ diff --git a/src/components/racing/HorseRow.tsx b/src/components/racing/HorseRow.tsx
+ index 9ebc805..53e13b4 100644
+ 
+ const marketNameLower = marketName?.toLowerCase() || ''
+ const isWinnerMarket = marketNameLower.includes('winner') || marketNameLower.includes('win')
+   const normalizedMarketType = marketType?.trim().toUpperCase() || ''
+ const normalizedFancyType = fancyType?.trim().toLowerCase()
+   const isJerseyFallbackMarket =
+     normalizedFancyType === 'photo' ||
+     normalizedMarketType === 'WIN' ||
+     normalizedMarketType.includes('PLACE')
+ const isPhotoFancyMarket = normalizedMarketType === 'FANCY' && normalizedFancyType === 'photo'
+ const isPhotoMarket = normalizedFancyType === 'photo' || normalizedMarketType === 'PHOTO'
+ const isObjectionMarket = normalizedFancyType === 'objection' || normalizedMarketType === 'OBJECTION'
+ const jerseyImageUrl = runner.jersey || runner.runner?.jersey
+ const [jerseyImageFailed, setJerseyImageFailed] = useState(false)
+ const shouldShowJerseyImage = Boolean(jerseyImageUrl && !jerseyImageFailed)
+   const shouldRenderJerseySlot = shouldShowJerseyImage || isJerseyFallbackMarket

Removed / Before Commit

- diff --git a/src/components/racing/MarketCard.tsx b/src/components/racing/MarketCard.tsx
- index cde5adf..c21d97b 100644
- const showBlockBetting = isWinnerBlockMarket(market)
- const isMobile = typeof window !== "undefined" && window.innerWidth < 768
- 
-   const showJerseySlot = true
- 
- const mobileBlockBetGridColumns = isToteMarket
- ? "minmax(0, 1fr) 60px"
- className="grid px-[14px] py-[8px]"
- style={{
- gridTemplateColumns: showBlockBetting
-                     ? `auto ${blockBetGridColumns}`
- : window.innerWidth >= 768
- ? isToteMarket 
-                         ? "auto 1fr 130px"
-                         : "auto 1fr 130px 130px"
- : isToteMarket

Added / After Commit

+ diff --git a/src/components/racing/MarketCard.tsx b/src/components/racing/MarketCard.tsx
+ index cde5adf..c21d97b 100644
+ const showBlockBetting = isWinnerBlockMarket(market)
+ const isMobile = typeof window !== "undefined" && window.innerWidth < 768
+ 
+   const hasAnyJerseyImage = market.odds.some(runner => 
+     runner.jersey || runner.runner?.jersey
+   )
+   const normalizedJerseyMarketType = market.marketType?.trim().toUpperCase() || ''
+   const showJerseySlot =
+     hasAnyJerseyImage ||
+     (market.fancy_type || market.fancyType)?.trim().toLowerCase() === 'photo' ||
+     normalizedJerseyMarketType === 'WIN' ||
+     normalizedJerseyMarketType.includes('PLACE')
+ 
+ const mobileBlockBetGridColumns = isToteMarket
+ ? "minmax(0, 1fr) 60px"
+ className="grid px-[14px] py-[8px]"