Merge pull request #2 from hackbg/feat/display-all-current-leagues

Feat/display all current leagues

app/src/app/page.tsx

@@ -1,30 +1,30 @@
 import {
-  fetchLeagueDetails,
   fetchCurrentGames,
   fetchTestGames,
+  fetchCurrentLeagues,
 } from '@/lib/fetch-data'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import LeagueSection from '@/components/league-section'
 import GameCard from '@/components/game-card'
-import { leaguesData, leagueIds, currentSeason } from '@/config/api'
+import { leaguesData, currentSeason } from '@/config/api'
 import { Sport, Game } from '@/types'
+import { setLeaguesIds } from '@/lib/server-context'
 
 export default async function Home({
   searchParams,
 }: {
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
+  const currentLeagues = await fetchCurrentLeagues(Sport.Rugby)
+  setLeaguesIds(currentLeagues.map((l) => l.id))
   const data = await Promise.all(
-    leagueIds[Sport.Rugby].map(async (leagueId) => {
-      const league = leaguesData[leagueId]
-        ? leaguesData[leagueId]
-        : await fetchLeagueDetails(Sport.Rugby, leagueId)
-      let allGames: Game[] = await fetchCurrentGames(Sport.Rugby, leagueId)
+    currentLeagues.map(async (league) => {
+      let allGames: Game[] = await fetchCurrentGames(Sport.Rugby, league.id)
       // todo: remove after implementing dummy games
       if (searchParams.mode === 'test') {
         const testGames = await fetchTestGames(
           Sport.Rugby,
-          leagueId,
+          league.id,
           currentSeason,
         )
         allGames = [...testGames, ...allGames]
@@ -40,7 +40,7 @@ export default async function Home({
                 .includes((searchParams.search as string).toLowerCase()),
           )
         : allGames
-      return { league, games }
+      return { league: leaguesData[league.id] || league, games }
     }),
   )
 
@@ -54,9 +54,7 @@ export default async function Home({
                 <GameCard key={game.id} game={game} />
               ))}
             </LeagueSection>
-          ) : (
-            <div className="m-2 text-center">No games found</div>
-          )}
+          ) : null}
         </>
       ))}
     </ScrollArea>

app/src/components/bet-card.tsx

@@ -71,7 +71,7 @@ export default function BetCard({
                 <div className="mb-2 flex items-center justify-between font-[450] leading-4">
                   <div className="mb-2 flex items-center space-x-[4px]">
                     <Image
-                      src={game.teams[predictedWinner].logo}
+                      src={game.teams[predictedWinner].logo ?? '/na.webp'}
                       width={16}
                       height={16}
                       className="max-h-[16px] max-w-[16px] object-contain"

app/src/components/bet-slip-card.tsx

@@ -92,7 +92,10 @@ export default function BetslipCard({
       <div>
         <div className="mb-2 flex items-center space-x-[4px]">
           <Image
-            src={prediction.game.teams[prediction.predictedWinner].logo}
+            src={
+              prediction.game.teams[prediction.predictedWinner].logo ??
+              '/na.webp'
+            }
             width={16}
             height={16}
             className="max-h-[16px] max-w-[16px] object-contain"

app/src/components/bet-slip.tsx

@@ -1,12 +1,14 @@
 import { fetchGames } from '@/lib/fetch-data'
 import BetSlipList from '@/components/bet-slip-list'
-import { currentSeason, leagueIds } from '@/config/api'
+import { currentSeason } from '@/config/api'
 import { Sport } from '@/types'
+import { getLeaguesIds } from '@/lib/server-context'
 
 const BetSlip = async () => {
+  const leagueIds = getLeaguesIds()
   const games = (
     await Promise.all(
-      leagueIds[Sport.Rugby].map(async (leagueId) => {
+      leagueIds.map(async (leagueId) => {
         const games = await fetchGames(Sport.Rugby, leagueId, currentSeason)
         return games
       }),

app/src/components/game-card.tsx

@@ -10,7 +10,7 @@ export default function GameCard({ game }: { game: Game }) {
     <div className="mx-4 mb-2 rounded-[8px] bg-card p-4">
       <div className="flex items-center justify-between">
         <Image
-          src={game.teams.home.logo}
+          src={game.teams.home.logo ?? '/na.webp'}
           width={24}
           height={24}
           className="max-h-[24px] max-w-[24px] object-contain"
@@ -32,7 +32,7 @@ export default function GameCard({ game }: { game: Game }) {
       </div>
       <div className="flex items-center justify-between">
         <Image
-          src={game.teams.away.logo}
+          src={game.teams.away.logo ?? '/na.webp'}
           width={24}
           height={24}
           className="max-h-[24px] max-w-[24px] object-contain"

app/src/components/league-section.tsx

@@ -12,10 +12,10 @@ export default function LeagueSection({
     <div className="max-w-[100vw]">
       <div className="mx-4 mb-4 mt-6 flex h-[152px] flex-col items-center justify-center rounded-[8px] bg-[url('/bg-field.png')] bg-center bg-no-repeat">
         <Image
-          src={league.logo}
+          src={league.logo ?? '/na.webp'}
           width={116}
           height={116}
-          className="h-[116px] w-auto"
+          className="max-h-[116px] max-w-[116px] object-contain"
           alt={league.name ?? 'league-logo'}
         />
       </div>

app/src/config/api.ts

@@ -1,20 +1,18 @@
-import { Sport, League, Winner } from '@/types'
+import { League, Winner } from '@/types'
 
 export const liveGameStatuses = ['1H', '2H', 'HT', 'ET', 'BT', 'PT']
 
 export const currentGameStatuses = ['NS', ...liveGameStatuses]
 
 export const currentSeason = new Date().getFullYear()
 
+export const leaguesCountLimit = 5
+
 export const winnerToResult = {
   [Winner.Home]: 1,
   [Winner.Away]: 2,
 }
 
-export const leagueIds = {
-  [Sport.Rugby]: [69],
-}
-
 export const leaguesData: {
   [key: number]: League
 } = {

app/src/lib/fetch-data.ts

@@ -2,8 +2,12 @@ import 'server-only'
 
 import { cache } from 'react'
 import { add, getUnixTime } from 'date-fns'
-import { currentGameStatuses, currentSeason } from '@/config/api'
-import { Sport, Game, League } from '@/types'
+import {
+  currentGameStatuses,
+  currentSeason,
+  leaguesCountLimit,
+} from '@/config/api'
+import { Sport, Game, League, LeagueResponse } from '@/types'
 
 export const fetchCurrentGames = async (sport: Sport, leagueId: number) => {
   const games = await fetchGames(sport, leagueId, currentSeason)
@@ -107,11 +111,25 @@ const transformScore = (scores: any, sport: Sport) => {
   }
 }
 
+export const fetchCurrentLeagues = async (sport: Sport) => {
+  const res = await fetchSportData(
+    sport,
+    '/leagues',
+    new URLSearchParams(),
+    3600 * 24,
+  )
+  const allLeagues: LeagueResponse[] = res.response
+  const currentLeagues = allLeagues.filter((league: LeagueResponse) =>
+    league.seasons.some((season) => season.current === true),
+  )
+  return currentLeagues.reverse().slice(0, leaguesCountLimit)
+}
+
 export const fetchLeagueDetails = async (sport: Sport, leagueId: number) => {
   const params = new URLSearchParams({
     id: leagueId.toString(),
   })
-  const res = await fetchSportData(sport, '/leagues', params)
+  const res = await fetchSportData(sport, '/leagues', params, 3600 * 24)
   const league = res.response[0]
 
   if (sport === Sport.Soccer) {
@@ -157,15 +175,20 @@ const baseUrls = {
 const apiKey = process.env.API_KEY || ''
 
 const fetchSportData = cache(
-  async (sport: Sport, path: string, params: URLSearchParams) => {
+  async (
+    sport: Sport,
+    path: string,
+    params: URLSearchParams,
+    revalidate = 3600,
+  ) => {
     const response = await fetch(
       `${baseUrls[sport]}${path}?${params.toString()}`,
       {
         headers: {
           'x-apisports-key': apiKey,
         },
         next: {
-          revalidate: 3600,
+          revalidate,
         },
       },
     )

app/src/lib/server-context.ts

@@ -0,0 +1,17 @@
+import 'server-only'
+// @ts-ignore
+import { cache } from 'react'
+
+const serverContext = <T>(defaultValue: T): [() => T, (v: T) => void] => {
+  const getRef = cache(() => ({ current: defaultValue }))
+
+  const getValue = (): T => getRef().current
+
+  const setValue = (value: T) => {
+    getRef().current = value
+  }
+
+  return [getValue, setValue]
+}
+
+export const [getLeaguesIds, setLeaguesIds] = serverContext<number[]>([])

app/src/types.ts

@@ -14,6 +14,10 @@ export type League = {
   season?: string
 }
 
+export type LeagueResponse = League & {
+  seasons: { current: boolean }[]
+}
+
 export type Game = {
   id: number
   date: Date