AI Review Center

Commit Review Workspace ?

Select a commit on the left to inspect quality, security, business value, findings, and suggested code changes.
Showing AI reviews for website
Project AI Score ?
71%
Quality Avg ?
72%
Security Avg ?
74%
Reviews ?
123

Review Result ?

solutionbowl/website · 9a232093
The commit includes a large UI refactor and fixes related to the betting components and layout. It introduces memoization and use of hooks for state management, improving performance moderately. However, the commit message is vague, lacking specificity about which UI issues were fixed. The diff shows improved readability and UI consistency but without explicit tests or comments. There is moderate risk of bugs due to manual UI state handling and cut-off in the diff without clear error handling. No major security issues were observed.
Quality ?
70%
Security ?
70%
Business Value ?
60%
Maintainability ?
65%
Issues & Suggested Fixes ?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Vague Description
Where commit message
Issue / Evidence vague description
Suggested Fix provide detailed description of which UI issues were fixed and why to improve business value and quality scores
Non Obvious Conditional
Where src/components/bets/BetItem.tsx:18
Issue / Evidence non-obvious conditional
Suggested Fix add comments explaining purpose of amount comparison to improve maintainability and reduce bug risk
Input Handler Lambda
Where src/components/bets/BetItem.tsx:117
Issue / Evidence input handler lambda
Suggested Fix consider memoizing the handler or extracting to named function to improve performance and readability
Incomplete Null Check
Where src/components/bets/DesktopBetSidebar.tsx:40
Issue / Evidence incomplete null check
Suggested Fix add more explicit null and error handling to improve bug risk score
Magic Numbers
Where src/components/layout/Layout.tsx:110
Issue / Evidence magic numbers
Suggested Fix explain rationale for topOffset values or use named constants to improve code clarity
Missing Test Coverage
Where commit message
Issue / Evidence no mention of testing
Suggested Fix add unit or integration tests for these UI changes to reduce bug risk and increase confidence
Code Change Preview · src/components/bets/BetItem.tsx ?
Removed / Before Commit
- diff --git a/src/components/bets/BetItem.tsx b/src/components/bets/BetItem.tsx
- index 163276f..dbedc4f 100644
- import { memo, useCallback, useState, useEffect } from 'react';
- import { useThemeColors } from '../../hooks/useThemeColors';
- import { useBetStore } from '../../store/useBetStore';
- import type { RacingBet } from '../../store/useBetStore';
- const BetItem = memo(({ betKey, bet }: BetItemProps) => {
- const colors = useThemeColors();
- const { removeBet, updateBetAmount, toggleOddsType } = useBetStore();
-   
- const [localAmount, setLocalAmount] = useState(bet.amount.toString());
- const [debounceTimer, setDebounceTimer] = useState<number | null>(null);
- 
- useEffect(() => {
-     if (bet.amount.toString() !== localAmount && bet.amount > 0) {
- setLocalAmount(bet.amount.toString());
- }
-   }, [bet.amount]);
Added / After Commit
+ diff --git a/src/components/bets/BetItem.tsx b/src/components/bets/BetItem.tsx
+ index 163276f..dbedc4f 100644
+ import { memo, useCallback, useEffect, useState } from 'react';
+ import { useThemeColors } from '../../hooks/useThemeColors';
+ import { useBetStore } from '../../store/useBetStore';
+ import type { RacingBet } from '../../store/useBetStore';
+ const BetItem = memo(({ betKey, bet }: BetItemProps) => {
+ const colors = useThemeColors();
+ const { removeBet, updateBetAmount, toggleOddsType } = useBetStore();
+ const [localAmount, setLocalAmount] = useState(bet.amount.toString());
+ const [debounceTimer, setDebounceTimer] = useState<number | null>(null);
+ 
+ useEffect(() => {
+     if (bet.amount > 0 && bet.amount.toString() !== localAmount) {
+ setLocalAmount(bet.amount.toString());
+ }
+   }, [bet.amount, localAmount]);
+
Removed / Before Commit
- diff --git a/src/components/bets/DesktopBetSidebar.tsx b/src/components/bets/DesktopBetSidebar.tsx
- index 75bc9c7..b579d86 100644
- import { memo, useState, useCallback } from 'react';
- import { useThemeColors } from '../../hooks/useThemeColors';
- import { useBetStore, useBetCount, useTotalStake, usePotentialWinnings } from '../../store/useBetStore';
- import { betService } from '../../services/betService';
- import BetItem from './BetItem';
- import { emitBetPlaced } from '../../utils/betEvents';
- 
- type BetMode = 'single' | 'multiple';
- type MultipleMode = 'double' | 'triple' | 'straight';
- 
- const DesktopBetSidebar = memo(() => {
- const colors = useThemeColors();
- const { bets, clearAllBets, setPlacingBet, isPlacingBet } = useBetStore();
- const betCount = useBetCount();
- const totalStake = useTotalStake();
- const potentialWinnings = usePotentialWinnings();
Added / After Commit
+ diff --git a/src/components/bets/DesktopBetSidebar.tsx b/src/components/bets/DesktopBetSidebar.tsx
+ index 75bc9c7..b579d86 100644
+ import { memo, useCallback, useState } from 'react';
+ import { useThemeColors } from '../../hooks/useThemeColors';
+ import { useBetStore, useBetCount, useTotalStake, usePotentialWinnings } from '../../store/useBetStore';
+ import { betService } from '../../services/betService';
+ import BetItem from './BetItem';
+ import { emitBetPlaced } from '../../utils/betEvents';
+ 
+ interface DesktopBetSidebarProps {
+   topOffset?: number;
+   heightOffset?: number;
+ }
+ 
+ const DesktopBetSidebar = memo(({
+   topOffset = 66,
+   heightOffset = 66,
+ }: DesktopBetSidebarProps) => {
Removed / Before Commit
- diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
- index 3650f5e..41a96af 100644
- const hiddenRoutes = ["/horse-racing", "/transactions"];
- 
- const hideDesktopSidebar = hiddenRoutes.includes(location.pathname);
- 
- return (
- <div
- </main>
- 
- {/* Desktop Bet Sidebar */}
-             {!hideDesktopSidebar && <DesktopBetSidebar />}
- </div>
- </div>
- 
- <Toaster />
- </div>
- );
Added / After Commit
+ diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
+ index 3650f5e..41a96af 100644
+ const hiddenRoutes = ["/horse-racing", "/transactions"];
+ 
+ const hideDesktopSidebar = hiddenRoutes.includes(location.pathname);
+   const desktopBetSidebarTopOffset = /^\/horse-racing\/[^/]+/.test(location.pathname)
+     ? 1
+     : 66;
+ 
+ return (
+ <div
+ </main>
+ 
+ {/* Desktop Bet Sidebar */}
+             {!hideDesktopSidebar && (
+               <DesktopBetSidebar topOffset={desktopBetSidebarTopOffset} />
+             )}
+ </div>
Removed / Before Commit
- diff --git a/src/components/layout/RacingNavMenu.tsx b/src/components/layout/RacingNavMenu.tsx
- index 94691c1..3850113 100644
- racingCountryName: country.country_name,
- }}
- style={{
-                         backgroundColor: isMultiRaceActiveForCountry
- ? colors.primary
- : withOpacity(colors.primary, 0.1),
-                         borderColor: isMultiRaceActiveForCountry
- ? colors.primary
- : withOpacity(colors.primary, 0.28),
-                         color: isMultiRaceActiveForCountry ? "#000000" : colors.textPrimary,
- }}
- className={
- isSidebar
- <i
- className="fa-solid fa-layer-group text-[12px]"
- style={{
Added / After Commit
+ diff --git a/src/components/layout/RacingNavMenu.tsx b/src/components/layout/RacingNavMenu.tsx
+ index 94691c1..3850113 100644
+ racingCountryName: country.country_name,
+ }}
+ style={{
+                         backgroundColor: isSidebar || isMultiRaceActiveForCountry
+ ? colors.primary
+ : withOpacity(colors.primary, 0.1),
+                         borderColor: isSidebar || isMultiRaceActiveForCountry
+ ? colors.primary
+ : withOpacity(colors.primary, 0.28),
+                         color: isSidebar || isMultiRaceActiveForCountry ? "#000000" : colors.textPrimary,
+ }}
+ className={
+ isSidebar
+ <i
+ className="fa-solid fa-layer-group text-[12px]"
+ style={{
Removed / Before Commit
- diff --git a/src/components/layout/SelectedMultiRaceSidebarMenu.tsx b/src/components/layout/SelectedMultiRaceSidebarMenu.tsx
- index 644e8af..1c217fe 100644
- const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState<string | null>(null);
- 
- const races = useMemo(
- () => raceEvents.flatMap((event) => event.races ?? []),
- );
- 
- useEffect(() => {
- if (!countryId) {
- setLoading(false);
- setError("No country selected");
- 
- return (
- <div className="space-y-[10px] pt-[8px]">
-       <div
Added / After Commit
+ diff --git a/src/components/layout/SelectedMultiRaceSidebarMenu.tsx b/src/components/layout/SelectedMultiRaceSidebarMenu.tsx
+ index 644e8af..1c217fe 100644
+ const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState<string | null>(null);
+   const [isCountryMenuOpen, setIsCountryMenuOpen] = useState(true);
+ 
+ const races = useMemo(
+ () => raceEvents.flatMap((event) => event.races ?? []),
+ );
+ 
+ useEffect(() => {
+     setIsCountryMenuOpen(true);
+ 
+ if (!countryId) {
+ setLoading(false);
+ setError("No country selected");
+
Removed / Before Commit
- diff --git a/src/components/layout/SelectedRaceSidebarMenu.tsx b/src/components/layout/SelectedRaceSidebarMenu.tsx
- index 69367c8..2d0d38c 100644
- const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState<string | null>(null);
- 
- const races = useMemo(
- () => raceEvents.flatMap((event) => event.races ?? []),
- );
- 
- useEffect(() => {
- if (
- country &&
- hasRace(raceEvents, raceId) &&
- 
- return (
- <div className="space-y-[10px] pt-[8px]">
-       <div
Added / After Commit
+ diff --git a/src/components/layout/SelectedRaceSidebarMenu.tsx b/src/components/layout/SelectedRaceSidebarMenu.tsx
+ index 69367c8..2d0d38c 100644
+ const [raceEvents, setRaceEvents] = useState<RaceEvent[]>([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState<string | null>(null);
+   const [isCountryMenuOpen, setIsCountryMenuOpen] = useState(true);
+ 
+ const races = useMemo(
+ () => raceEvents.flatMap((event) => event.races ?? []),
+ );
+ 
+ useEffect(() => {
+     setIsCountryMenuOpen(true);
+ 
+ if (
+ country &&
+ hasRace(raceEvents, raceId) &&
+
Removed / Before Commit
- diff --git a/src/pages/HorseRacingDetails.tsx b/src/pages/HorseRacingDetails.tsx
- index 2502968..d71ce26 100644
- import { addExtraToOdd } from "../utils/oddsHelper"
- import { onAuthChange } from "../utils/authEvents"
- import { onBetPlaced } from "../utils/betEvents"
- 
- 
- 
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState<string | null>(null)
- const [currentTime, setCurrentTime] = useState(() => Date.now())
- 
- const { error: socketError } = useRaceOddsSocket({
- raceId: raceId || null,
- loadRaceData()
- }, [raceId, navigate])
- 
- useEffect(() => {
Added / After Commit
+ diff --git a/src/pages/HorseRacingDetails.tsx b/src/pages/HorseRacingDetails.tsx
+ index 2502968..d71ce26 100644
+ import { addExtraToOdd } from "../utils/oddsHelper"
+ import { onAuthChange } from "../utils/authEvents"
+ import { onBetPlaced } from "../utils/betEvents"
+ import { useBetStore } from "../store/useBetStore"
+ 
+ 
+ 
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState<string | null>(null)
+ const [currentTime, setCurrentTime] = useState(() => Date.now())
+   const clearAllBets = useBetStore((state) => state.clearAllBets)
+ 
+ const { error: socketError } = useRaceOddsSocket({
+ raceId: raceId || null,
+ loadRaceData()
+ }, [raceId, navigate])
Removed / Before Commit
- diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
- index ddb5978..ef34745 100644
- const progressTitle = selections.length === 0
- ? "Build your Straight"
- : selections.length === 1
-       ? `Straight in progress: ${selections[0].runner.name} (${formatDisplayedRunnerOdds(selections[0].runner.backOdd)})`
- : selections.length === 2
- ? "Double ready"
- : selections.length === 3
- >
- <div>
- <label
-                 className="mb-[7px] block text-[12px] font-semibold"
- style={{ color: colors.textSecondary }}
- >
-                 Stake -
- <span
-                   className="ml-[5px] text-[14px] font-bold"
Added / After Commit
+ diff --git a/src/pages/MultiRaceDetail.tsx b/src/pages/MultiRaceDetail.tsx
+ index ddb5978..ef34745 100644
+ const progressTitle = selections.length === 0
+ ? "Build your Straight"
+ : selections.length === 1
+       ? `Double in progress: ${selections[0].runner.name} (${formatDisplayedRunnerOdds(selections[0].runner.backOdd)})`
+ : selections.length === 2
+ ? "Double ready"
+ : selections.length === 3
+ >
+ <div>
+ <label
+                 className="mb-[7px] flex items-center justify-between gap-[12px] text-[12px] font-semibold"
+ style={{ color: colors.textSecondary }}
+ >
+                 <span>Stake</span>
+ <span
+                   className="shrink-0 text-right text-[14px] font-bold"
Removed / Before Commit
- diff --git a/src/store/useBetStore.ts b/src/store/useBetStore.ts
- index 12a6562..1fcf353 100644
- return;
- }
- 
-         set((state) => ({
- bets: {
-             ...state.bets,
- [key]: {
- ...bet,
- amount: 0,
Added / After Commit
+ diff --git a/src/store/useBetStore.ts b/src/store/useBetStore.ts
+ index 12a6562..1fcf353 100644
+ return;
+ }
+ 
+         set(() => ({
+ bets: {
+ [key]: {
+ ...bet,
+ amount: 0,