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 · 9401158a
The commit improves UI by adding components and handlers for better bet slip interaction and display, enhancing user experience. The added memoization and careful dependency tracking enhance performance. However, the commit message is vague. Some UI elements may benefit from more explicit accessibility considerations. The code lacks comprehensive error handling and input sanitization in amounts, posing moderate bug risk and security concerns. The changes appear genuine and business relevant.
Quality ?
80%
Security ?
75%
Business Value ?
85%
Maintainability ?
80%
Issues & Suggested Fixes ?
1AI detects the issue
2Shows file, line, or evidence
3Suggests the fix to apply
Issue
Where commit message
Issue / Evidence issue
Suggested Fix provide a more descriptive and detailed commit message explaining the UI issues fixed and the purpose of the changes to improve clarity and maintainability
Potential Bug Risk
Where src/components/bets/BetItem.tsx:18
Issue / Evidence potential bug risk
Suggested Fix add validation and sanitization for bet.amount input to prevent injection or incorrect data issues
Security Issue
Where src/components/bets/BetItem.tsx:117
Issue / Evidence quality and security
Suggested Fix enhance input handling with proper onBlur validation and format enforcement for amounts
Accessibility
Where src/components/bets/BetItem.tsx:62
Issue / Evidence accessibility
Suggested Fix add keyboard and screenreader accessibility attributes (e.g., aria-pressed) for interactive buttons
Quality
Where src/components/bets/DesktopBetSidebar.tsx:145
Issue / Evidence quality
Suggested Fix add feedback on checkbox toggle state changes for improved UX
Maintainability
Where src/components/layout/Layout.tsx:110
Issue / Evidence maintainability
Suggested Fix define constants for magic numbers (e.g., topOffset values) for better readability and maintainability
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 893868f..ca32328 100644
- const hiddenRoutes = ["/horse-racing", "/transactions", "/account-statement"];
- 
- const hideDesktopSidebar = hiddenRoutes.includes(location.pathname);
- 
- return (
- <div
- </main>
- 
- {/* Desktop Bet Sidebar */}
-             {!hideDesktopSidebar && <DesktopBetSidebar />}
- </div>
- </div>
Added / After Commit
+ diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
+ index 893868f..ca32328 100644
+ const hiddenRoutes = ["/horse-racing", "/transactions", "/account-statement"];
+ 
+ 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,