10 13 fetch results

src/_components/Results/__tests__/RaceTable.test.tsx

@@ -11,7 +11,7 @@ import RaceTabs from '../client/ResultsTableTabs';
 import { getRaceYears, sortRacingDataByYear } from '../utils';
 
 const getSortedHistory = (racingHistory: IRacerHistory) => {
-  const history = sortRacingDataByYear(racingHistory.history);
+  const history = sortRacingDataByYear(racingHistory.results);
   const years = getRaceYears(history);
   return { years, history };
 };

src/_components/Results/server/ResultsTableServer.tsx

@@ -1,28 +1,20 @@
-import { IconInfoCircle } from '@tabler/icons-react';
-import { Alert } from '@mantine/core';
-import { buildMockRacingHistory } from '@/src/_db/mock-data/generators/results/build-results-history';
+import { fetchRacerHistory } from '@/src/_server-utilities/fetchers';
 import { IRaceYear } from '@/src/_types';
 import ResultsTableTabs from '../client/ResultsTableTabs';
-import { getData, getRaceYears } from '../utils';
+import { getRaceYears } from '../utils';
 import classes from '../styles/results.module.css';
 
-export default async function ResultsTableServer() {
-  const icon = <IconInfoCircle />;
+interface ResultsTableServerProps {
+  id: number;
+}
 
-  try {
-    const history: IRaceYear[] = await getData(buildMockRacingHistory());
-    const years = getRaceYears(history);
+export default async function ResultsTableServer({ id }: ResultsTableServerProps) {
+  const history: IRaceYear[] = await fetchRacerHistory(id);
+  const years: number[] = history?.length > 0 ? getRaceYears(history) : [];
 
-    return (
-      <div className={classes.raceTableContainer}>
-        <ResultsTableTabs years={years} history={history} />
-      </div>
-    );
-  } catch (error) {
-    return (
-      <Alert variant="light" color="red" title="Alert title" icon={icon}>
-        {`Failed to Load Race History: ${error}`}
-      </Alert>
-    );
-  }
+  return (
+    <div className={classes.raceTableContainer}>
+      <ResultsTableTabs years={years} history={history} />
+    </div>
+  );
 }

src/_components/Rider/server/RiderInfoServer.tsx

@@ -1,30 +1,43 @@
 import React from 'react';
-import { BASE_URL, RACERS_PATH } from '@/src/_db/mock-api/constants';
-import { IRacerInfo } from '../../../_types';
+import { fetchRacer } from '@/src/_server-utilities/fetchers';
+import { IRacerInfo } from '@/src/_types';
 import InfoGrid from '../client/InfoGrid';
 import { getCurrentTeam } from '../utils';
 import { NameHeadingServer } from './NameHeadingServer';
 
-interface IRiderInfoServerProps {
+const DEFAULT_RIDER_NOT_FOUND: IRacerInfo = {
+  id: 0,
+  name: {
+    first: 'Rider',
+    last: 'Not Found',
+  },
+  teams: [{ year: 2024, name: 'No Team Available' }],
+  socials: {},
+  categories: [],
+  hometown: { country: 'NO', city: 'Nowhere' },
+  dob: '1854-01-01T00:00:00.000-05:00',
+  photo:
+    'https://dgtzuqphqg23d.cloudfront.net/xpqTav-4hWRXpvJoODOMmpeI_jUOONmJZ6KnCrG7ncc-2048x1536.jpg',
+};
+
+interface RiderInfoServerProps {
   id: number;
 }
 
-export default async function RiderInfoServer({ id }: IRiderInfoServerProps) {
-  try {
-    const response = await fetch(`${BASE_URL}${RACERS_PATH}?id=${id}`);
-    const parsedResponse: IRacerInfo[] = await response.json();
-    const racerInfo = parsedResponse[0];
-
-    const { name } = racerInfo;
-    const currentTeam = getCurrentTeam(racerInfo.teams);
+export default async function RiderInfoServer({ id }: RiderInfoServerProps) {
+  const racerInfo: IRacerInfo = (await fetchRacer(id)) || DEFAULT_RIDER_NOT_FOUND;
 
-    return (
-      <>
-        <NameHeadingServer name={name} team={currentTeam} />
-        <InfoGrid racerInfo={racerInfo} />
-      </>
-    );
-  } catch {
+  if (!racerInfo) {
     return <div>Did not work</div>;
   }
+
+  const { name } = racerInfo;
+  const currentTeam = getCurrentTeam(racerInfo.teams);
+
+  return (
+    <>
+      <NameHeadingServer name={name} team={currentTeam} />
+      <InfoGrid racerInfo={racerInfo} />
+    </>
+  );
 }

src/_db/mock-api/README.md

@@ -8,7 +8,7 @@ JSON-server documentation can be found here: https://www.npmjs.com/package/json-
 
 ## To start the server:
 
-`json-server --watch app/mockAPI/endpoints.json --port 8000`
+`json-server --watch src/_db/mock-api/endpoints.json --port 8000`
 
 ## Existing Endpoints
 

src/_db/mock-api/endpoints.json

@@ -333,8 +333,8 @@
             ]
         },
         {
-            "racerId": 2,
-            "history": [
+            "racerId": 3,
+            "results": [
                 {
                     "year": 2019,
                     "races": [

src/_db/mock-data/mock-race-history.ts

@@ -3,12 +3,12 @@ import { buildMockRacesForSingleYear } from './generators/results/build-results-
 
 export const mockRacingHistoryEmpty: IRacerHistory = {
   racerId: 2,
-  history: [],
+  results: [],
 };
 
 export const mockRacingHistoryEmptyYear: IRacerHistory = {
   racerId: 2,
-  history: [
+  results: [
     {
       year: 2024,
       races: buildMockRacesForSingleYear(),
@@ -26,7 +26,7 @@ export const mockRacingHistoryEmptyYear: IRacerHistory = {
 
 export const mockRacingHistoryMissingYear: IRacerHistory = {
   racerId: 2,
-  history: [
+  results: [
     {
       year: 2024,
       races: buildMockRacesForSingleYear(),
@@ -44,7 +44,7 @@ export const mockRacingHistoryMissingYear: IRacerHistory = {
 
 export const mockRacingHistory: IRacerHistory = {
   racerId: 1,
-  history: [
+  results: [
     {
       year: 2024,
       races: [

src/_server-utilities/fetchers.ts

@@ -0,0 +1,22 @@
+import { BASE_URL, HISTORY_PATH, RACERS_PATH } from '../_db/mock-api/constants';
+import { IRacerHistory, IRacerInfo } from '../_types';
+
+export const fetchRacerHistory = async (id: number) => {
+  try {
+    const response = await fetch(`${BASE_URL}${HISTORY_PATH}?racerId=${id}`);
+    const parsedResponse: IRacerHistory[] = await response.json();
+    return parsedResponse[0].results;
+  } catch {
+    return [];
+  }
+};
+
+export const fetchRacer = async (id: number): Promise<IRacerInfo | null> => {
+  try {
+    const response = await fetch(`${BASE_URL}${RACERS_PATH}?id=${id}`);
+    const parsedResponse: IRacerInfo[] = await response.json();
+    return parsedResponse[0];
+  } catch (error) {
+    return null;
+  }
+};

src/_types/index.ts

@@ -32,7 +32,7 @@ export interface IRaceYear {
 
 export interface IRacerHistory {
   racerId: number;
-  history: IRaceYear[];
+  results: IRaceYear[];
 }
 
 export interface IRiderName {
@@ -46,8 +46,8 @@ export interface ITeams {
 }
 
 export interface ISocials {
-  strava: string;
-  insta: string;
+  strava?: string;
+  insta?: string;
 }
 
 export interface ICategory {
@@ -57,7 +57,7 @@ export interface ICategory {
 
 export interface IHometown {
   country: string | null;
-  state: string | null;
+  state?: string | null;
   city: string | null;
 }
 

src/app/page.tsx

@@ -1,26 +1,5 @@
-import { Suspense } from 'react';
-import { Group } from '@mantine/core';
-import { ColorSchemeToggle } from '../_components/ColorSchemeToggle/ColorSchemeToggle';
-import RaceTableContainer from '../_components/Results/server/ResultsTableServer';
-import RacerInfoContainer from '../_components/Rider/server/RiderInfoServer';
-import TopNav from '../_components/TopNav/TopNav';
-import Loader from './loading';
 import classes from './_styles/page.module.css';
 
 export default function HomePage() {
-  const racerIds = [1, 2, 3];
-  const randomRacerId = racerIds[Math.floor(Math.random() * racerIds.length)];
-
-  return (
-    <div className={classes.page}>
-      <TopNav />
-      <Suspense fallback={<Loader />}>
-        <RacerInfoContainer id={randomRacerId} />
-      </Suspense>
-      <Group pb="50px">
-        <RaceTableContainer />
-      </Group>
-      <ColorSchemeToggle />
-    </div>
-  );
+  return <div className={classes.page}>This is the home page</div>;
 }

src/app/rider/[id]/page.tsx

@@ -24,7 +24,7 @@ export default function RiderPage({ params }: RiderPageProps) {
         <RiderInfoServer id={id} />
       </Suspense>
       <Group pb="50px">
-        <ResultsTableServer />
+        <ResultsTableServer id={id} />
       </Group>
       <ColorSchemeToggle />
     </div>