Update footy-report extension

- Merge pull request raycast#26 from thuoe/next
- Merge pull request raycast#25 from thuoe/bugfix/squad-details
- fix: map fixture id to item key
- fix: increase limit of squad players rendered in grid
- chore: remove console log
- fix: display age && render if dob provided
- fix: show seasons based on relevant team
- fix: filter season stats if no details found
- fix: render players without shirt no
- Merge pull request raycast#23 from thuoe/main

extensions/footy-report/src/components/Fixtures.tsx

@@ -49,7 +49,7 @@ const Fixtures = ({
           <List.Item
             icon={resultIcon}
             title={`${resultPrefix} ${fixture.name}`}
-            key={fixture.name}
+            key={fixture.id}
             subtitle={`${fixture.venue}`}
             actions={
               resultIcon === Icon.Calendar && (

extensions/footy-report/src/components/PlayerDetails.tsx

@@ -2,6 +2,7 @@ import { Detail } from "@raycast/api";
 import { useFetchPlayerStats } from "@src/hooks";
 import { Player } from "@src/types";
 import { createMarkdownTable } from "@src/utils";
+import { differenceInCalendarYears, parse } from "date-fns";
 
 const PlayerDetails = ({
   player,
@@ -26,6 +27,11 @@ const PlayerDetails = ({
       : "Loading...."
   }
   `;
+  const date = parse(player.date_of_birth, "yyyy-dd-mm", new Date());
+  const age = differenceInCalendarYears(new Date(), date);
+  const dobLabel = player.date_of_birth
+    ? `${player.date_of_birth} (${age} years)`
+    : "N/A";
   return (
     <Detail
       isLoading={isLoading}
@@ -39,10 +45,7 @@ const PlayerDetails = ({
             text={`${player.country.name}`}
             icon={`${player.country.image_path}`}
           />
-          <Detail.Metadata.Label
-            title="Date of Birth"
-            text={`${player.date_of_birth}`}
-          />
+          <Detail.Metadata.Label title="Date of Birth" text={dobLabel} />
           <Detail.Metadata.Separator />
           <Detail.Metadata.Label
             title="Club Team"

extensions/footy-report/src/components/Squad.tsx

@@ -61,7 +61,7 @@ const Squad = ({
                   <Grid.Item
                     {...sharedProps(player)}
                     content={{ source: player.image_path }}
-                    subtitle={player.jersey_number.toString()}
+                    subtitle={player.jersey_number?.toString() || "N/A"}
                     accessory={{ icon: { source: player.country.image_path } }}
                   />
                 );

extensions/footy-report/src/components/TeamDetails.tsx

@@ -5,6 +5,9 @@ import { Category, Team } from "@src/types";
 import { useState, ComponentProps } from "react";
 import { useFetchFixtures } from "@src/hooks";
 
+const MAX_LIST_SIZE = 6;
+const MAX_GRID_SIZE = 50;
+
 const TeamDetails = ({ team }: { team: Team }) => {
   const [category, setCategory] = useState<Category>(Category.All);
   const { data, isLoading } = useFetchFixtures(team.id, {
@@ -58,16 +61,16 @@ const TeamDetails = ({ team }: { team: Team }) => {
         <>
           {category === Category.All && (
             <>
-              <Fixtures {...upcomingProps} limit={6} />
-              <Fixtures {...prevProps} limit={6} />
-              <Squad type="list" team={team} limit={6} />
+              <Fixtures {...upcomingProps} limit={MAX_LIST_SIZE} />
+              <Fixtures {...prevProps} limit={MAX_LIST_SIZE} />
+              <Squad type="list" team={team} limit={MAX_LIST_SIZE} />
             </>
           )}
           {category === Category.UpcomingMatches && (
-            <Fixtures {...upcomingProps} limit={6} />
+            <Fixtures {...upcomingProps} limit={MAX_LIST_SIZE} />
           )}
           {category === Category.PrevFixtures && (
-            <Fixtures {...prevProps} limit={6} />
+            <Fixtures {...prevProps} limit={MAX_LIST_SIZE} />
           )}
         </>
       </List>
@@ -96,7 +99,7 @@ const TeamDetails = ({ team }: { team: Team }) => {
         </Grid.Dropdown>
       }
     >
-      <Squad type="grid" team={team} limit={20} />
+      <Squad type="grid" team={team} limit={MAX_GRID_SIZE} />
     </Grid>
   );
 };

extensions/footy-report/src/hooks/useFetchFixtures.ts

@@ -43,6 +43,7 @@ type SportMonksVenueField = {
 };
 
 type SportMonksFixturesByRange = {
+  id: string;
   name: string;
   result_info: string;
   starting_at: string;
@@ -75,6 +76,7 @@ const useFetchFixtures = (teamId: string, selectFields: SelectFields) => {
     ?.map(({ league, participants, scores, tvstations, ...fixtureData }) => {
       const [host, away] = participants;
       return {
+        id: fixtureData.id,
         name: fixtureData.name,
         starting_at: new Date(fixtureData.starting_at),
         league: {

extensions/footy-report/src/hooks/useFetchPlayerStats.ts

@@ -9,10 +9,20 @@ enum EventType {
 }
 
 type SportMonksPlayerStatsDetail = {
+  team_id: string;
   season: {
     name: string;
     pending: boolean;
     is_current: boolean;
+    league: {
+      sub_type:
+        | "domestic"
+        | "domestic_cup"
+        | "international"
+        | "cup_international"
+        | "play-offs"
+        | "friendly";
+    };
   };
   details: {
     id: string;
@@ -48,13 +58,19 @@ const useFetchPlayerStats = ({
 }) => {
   const { data, isLoading, revalidate } = useSportMonksClient({
     method: "get",
-    path: `/players/${id}?include=statistics.season;statistics.details&filters=playerStatisticDetailTypes:${formatEvents()};team=${teamId}`,
+    path: `/players/${id}?include=statistics.season.league;statistics.details&filters=playerStatisticDetailTypes:${formatEvents()};team=${teamId}`,
   });
 
   const response: SportMonksPlayerStatsDetail[] = data?.data?.statistics;
 
-  const stats = response?.map(
-    ({ season, details }: SportMonksPlayerStatsDetail) => {
+  const stats = response
+    ?.filter(
+      ({ team_id, details, season: { league } }) =>
+        team_id === teamId &&
+        details.length > 0 &&
+        league.sub_type === "domestic",
+    )
+    ?.map(({ season, details }: SportMonksPlayerStatsDetail) => {
       const { name } = season;
       const goals = details.find(isEvent(EventType.GOALS))?.value.total ?? 0;
       const assists =
@@ -66,8 +82,7 @@ const useFetchPlayerStats = ({
       const redCards =
         details.find(isEvent(EventType.RED_CARDS))?.value.total ?? 0;
       return [name, goals, assists, appearances, yellowCards, redCards];
-    },
-  );
+    });
 
   return { data: stats, isLoading, revalidate };
 };

extensions/footy-report/src/hooks/useFetchTeams.ts

@@ -9,7 +9,7 @@ type SelectFields = {
 };
 
 type SportMonksPlayerField = {
-  jersey_number: number;
+  jersey_number: number | null;
   player: {
     id: string;
     date_of_birth: string;

extensions/footy-report/src/types.ts

@@ -15,7 +15,7 @@ export type Player = {
   name: string;
   date_of_birth: string;
   image_path: string;
-  jersey_number: number;
+  jersey_number: number | null;
   position?: string;
   country: Country;
 };
@@ -49,6 +49,7 @@ export enum Result {
 }
 
 export type Fixture = {
+  id: string;
   name: string;
   starting_at: Date;
   league: League;