iRating gain/loss only appears in official races (#23)

Author: tariknz

src/frontend/components/Standings/DriverInfoRow/DriverInfoRow.tsx

@@ -1,5 +1,10 @@
 import { useMemo } from 'react';
-import { SpeakerHighIcon, CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react';
+import {
+  SpeakerHighIcon,
+  CaretUpIcon,
+  CaretDownIcon,
+  MinusIcon,
+} from '@phosphor-icons/react';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 import { formatTime } from '@irdashies/utils/time';
 
@@ -47,7 +52,7 @@ export const DriverInfoRow = ({
   const fastestTimeString = formatTime(fastestTime);
 
   const iratingChangeDisplay = useMemo(() => {
-    if (iratingChange === undefined || iratingChange === null) {
+    if (iratingChange === undefined || isNaN(iratingChange)) {
       return { text: '-', color: 'text-gray-400' };
     }
     const roundedChange = Math.round(iratingChange);
@@ -58,14 +63,14 @@ export const DriverInfoRow = ({
     if (roundedChange > 0) {
       text = `${roundedChange}`;
       color = 'text-green-400';
-        icon = <CaretUpIcon size={10} />;
-      } else if (roundedChange < 0) {
-        text = `${Math.abs(roundedChange)}`;
-        color = 'text-red-400';
-        icon = <CaretDownIcon size={10} />;
+      icon = <CaretUpIcon size={10} />;
+    } else if (roundedChange < 0) {
+      text = `${Math.abs(roundedChange)}`;
+      color = 'text-red-400';
+      icon = <CaretDownIcon size={10} />;
     } else {
       text = `${roundedChange}`;
-      icon = null;
+      icon = <MinusIcon size={10} />;
     }
     return { text, color, icon };
   }, [iratingChange]);
@@ -109,12 +114,14 @@ export const DriverInfoRow = ({
         </div>
       </td>
       <td>{badge}</td>
-      {iratingChange !== undefined && <td className={`px-2 text-left ${iratingChangeDisplay.color}`}>
-        <span className="flex items-center gap-0.5">
-          {iratingChangeDisplay.icon}
-          {iratingChangeDisplay.text}
-        </span>
-      </td>}
+      {iratingChange !== undefined && (
+        <td className={`px-2 text-left ${iratingChangeDisplay.color}`}>
+          <span className="flex items-center gap-0.5">
+            {iratingChangeDisplay.icon}
+            {iratingChangeDisplay.text}
+          </span>
+        </td>
+      )}
       <td className={`px-2`}>{delta?.toFixed(1)}</td>
       <td className={`px-2 ${hasFastestTime ? 'text-purple-400' : ''}`}>
         {fastestTimeString}

src/frontend/components/Standings/hooks/useDriverStandings.tsx

@@ -3,6 +3,7 @@ import {
   useDriverCarIdx,
   useSessionDrivers,
   useSessionFastestLaps,
+  useSessionIsOfficial,
   useSessionPositions,
   useSessionQualifyingResults,
   useSessionType,
@@ -28,6 +29,7 @@ export const useDriverStandings = ({ buffer }: { buffer: number }) => {
   const carIdxOnPitRoad = useTelemetry<boolean[]>('CarIdxOnPitRoad');
   const carIdxTrackSurface = useTelemetry('CarIdxTrackSurface');
   const radioTransmitCarIdx = useTelemetry('RadioTransmitCarIdx');
+  const isOfficial = useSessionIsOfficial();
 
   const standingsWithGain = useMemo(() => {
     const initialStandings = createDriverStandings(
@@ -49,11 +51,12 @@ export const useDriverStandings = ({ buffer }: { buffer: number }) => {
       }
     );
     const groupedByClass = groupStandingsByClass(initialStandings);
-    
+
     // Calculate iRating changes for race sessions
-    const augmentedGroupedByClass = sessionType === 'Race' 
-      ? augmentStandingsWithIRating(groupedByClass)
-      : groupedByClass;
+    const augmentedGroupedByClass =
+      sessionType === 'Race' && isOfficial
+        ? augmentStandingsWithIRating(groupedByClass)
+        : groupedByClass;
 
     return sliceRelevantDrivers(augmentedGroupedByClass, { buffer });
   }, [
@@ -67,6 +70,7 @@ export const useDriverStandings = ({ buffer }: { buffer: number }) => {
     positions,
     fastestLaps,
     sessionType,
+    isOfficial,
     buffer,
   ]);
 

src/frontend/context/SessionStore/SessionStore.spec.tsx

@@ -0,0 +1,56 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useSessionIsOfficial, useSessionStore } from './SessionStore';
+import type { Session } from '@irdashies/types';
+
+describe('SessionStore', () => {
+  describe('useSessionIsOfficial', () => {
+    it('should return true when session is official', () => {
+      const mockSession = {
+        WeekendInfo: {
+          Official: 1,
+        },
+      } as unknown as Session;
+
+      useSessionStore.getState().setSession(mockSession);
+
+      const { result } = renderHook(() => useSessionIsOfficial());
+      expect(result.current).toBe(true);
+    });
+
+    it('should return false when session is not official', () => {
+      const mockSession = {
+        WeekendInfo: {
+          Official: 0,
+        },
+      } as unknown as Session;
+
+      useSessionStore.getState().setSession(mockSession);
+
+      const { result } = renderHook(() => useSessionIsOfficial());
+      expect(result.current).toBe(false);
+    });
+
+    it('should return false when session is null', () => {
+      useSessionStore.getState().setSession(null as unknown as Session);
+
+      const { result } = renderHook(() => useSessionIsOfficial());
+      expect(result.current).toBe(false);
+    });
+
+    it('should return false when WeekendInfo is undefined', () => {
+      const mockSession = {
+        SessionInfo: {},
+        CameraInfo: {},
+        RadioInfo: {},
+        DriverInfo: {},
+        SplitTimeInfo: {},
+        QualifyResultsInfo: {},
+      } as unknown as Session;
+      useSessionStore.getState().setSession(mockSession);
+
+      const { result } = renderHook(() => useSessionIsOfficial());
+      expect(result.current).toBe(false);
+    });
+  });
+});

src/frontend/context/SessionStore/SessionStore.tsx

@@ -58,6 +58,13 @@ export const useSessionLaps = (sessionNum: number | undefined) =>
       )?.SessionLaps
   );
 
+export const useSessionIsOfficial = () =>
+  useStore(
+    useSessionStore,
+    (state) =>
+      !!state.session?.WeekendInfo?.Official
+  );
+
 export const useDriverCarIdx = () =>
   useStore(useSessionStore, (state) => state.session?.DriverInfo?.DriverCarIdx);