Merge pull request #32 from filipimiparebine/feature/server_components

Server components
filipimiparebine · Oct 8, 2024 · f9ee8a0 · f9ee8a0
2 parents 3654736 + 0737647
commit f9ee8a0
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 43 deletions.
diff --git a/config/cors.php b/config/cors.php
@@ -19,7 +19,7 @@
 
     'allowed_methods' => ['*'],
 
-    'allowed_origins' => ['*'],
+    'allowed_origins' => ['http://localhost:3000'],
 
     'allowed_origins_patterns' => [],
 

diff --git a/frontend/.env.example b/frontend/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:8000/api
diff --git a/frontend/app/league-table/[seasonId]/page.tsx b/frontend/app/league-table/[seasonId]/page.tsx
@@ -6,18 +6,18 @@ import { LeagueTable } from "@/components/LeagueTable";
 import { FixtureList } from "@/components/FixtureList";
 import { WeekPrediction } from "@/components/WeekPrediction";
 import { Button } from "@/components/ui/button";
-import axios from "axios";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Season } from "@/types/league";
+import { SeasonLeaderboard } from "@/types/league";
 import { FixtureResponse } from "@/types/fixture";
 import { TeamPrediction } from "@/types/prediction";
 import { Progress } from "@/components/ui/progress";
 import { Home } from "lucide-react";
+import ApiService from "@/services/apiService";
 
 export default function Leaderboard() {
     const params = useParams();
-    const { seasonId } = params;
-    const [seasonData, setSeasonData] = useState<Season>();
+    const seasonId: number = parseInt(params.seasonId as string);
+    const [seasonData, setSeasonData] = useState<SeasonLeaderboard>();
     const [fixturesData, setFixturesData] = useState<FixtureResponse>();
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [predictionsData, setPredictionsData] = useState<TeamPrediction[]>(
@@ -38,15 +38,9 @@ export default function Leaderboard() {
         try {
             const [leagueTableResponse, fixturesResponse, predictionsResponse] =
                 await Promise.all([
-                    axios.get<Season>(
-                        `http://localhost:8000/api/league-table/${seasonId}`
-                    ),
-                    axios.get<FixtureResponse>(
-                        `http://localhost:8000/api/fixtures/${seasonId}/${weekNumber}`
-                    ),
-                    axios.get<TeamPrediction[]>(
-                        `http://localhost:8000/api/week/predict/${seasonId}/${weekNumber}`
-                    ),
+                    ApiService.leagueTable(seasonId),
+                    ApiService.fixtures(seasonId, weekNumber),
+                    ApiService.predict(seasonId, weekNumber),
                 ]);
             setSeasonData(leagueTableResponse.data);
             setFixturesData(fixturesResponse.data);
@@ -76,9 +70,7 @@ export default function Leaderboard() {
 
     const handlePlayWeek = async (weekNo: number) => {
         try {
-            await axios.get<Season>(
-                `http://localhost:8000/api/week/simulate/${seasonId}/${weekNo}`
-            );
+            await ApiService.simulate(seasonId, weekNo);
             setNextOrPlay(false);
             setProgress((weekNo / totalWeeks) * 100);
             fetchData();

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import axios from "axios";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -16,17 +15,8 @@ import {
 } from "@/components/ui/select";
 import Image from "next/image";
 import { Skeleton } from "@/components/ui/skeleton";
-
-interface Team {
-    id: number;
-    name: string;
-    logo: string;
-}
-
-interface Season {
-    id: number;
-    name: string;
-}
+import ApiService from "@/services/apiService";
+import { Team, Season } from "@/types/league";
 
 export default function SelectTeams() {
     const [teams, setTeams] = useState<Team[]>([]);
@@ -40,8 +30,8 @@ export default function SelectTeams() {
         const fetchData = async () => {
             try {
                 const [teamsResponse, seasonsResponse] = await Promise.all([
-                    axios.get<Team[]>("http://localhost:8000/api/teams"),
-                    axios.get<Season[]>("http://localhost:8000/api/seasons"),
+                    ApiService.getTeams(),
+                    ApiService.getSeasons(),
                 ]);
                 setTeams(teamsResponse.data);
                 setSeasons(seasonsResponse.data);
@@ -72,10 +62,7 @@ export default function SelectTeams() {
             return;
         }
         try {
-            await axios.post("http://localhost:8000/api/start-season", {
-                team_ids: selectedTeams,
-                season_id: selectedSeason,
-            });
+            await ApiService.startSeason(selectedTeams, selectedSeason);
             router.push(`/league-table/${selectedSeason}`);
         } catch (error) {
             console.error("Error starting season:", error);

diff --git a/frontend/components/FixtureList.tsx b/frontend/components/FixtureList.tsx
@@ -10,7 +10,6 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import { useState } from "react";
-import axios from "axios";
 import {
     Dialog,
     DialogContent,
@@ -28,6 +27,7 @@ import {
     TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Info } from "lucide-react";
+import ApiService from "@/services/apiService";
 
 export function FixtureList({
     fixtures,
@@ -48,12 +48,24 @@ export function FixtureList({
     };
     const handleScoreUpdate = async () => {
         try {
-            await axios.put(
-                `http://localhost:8000/api/match/${selectedFixture?.id}`,
-                {
-                    home_score: parseInt(homeScore),
-                    away_score: parseInt(awayScore),
-                }
+            const matchId = selectedFixture?.id;
+
+            if (!matchId) {
+                alert("Match ID is not defined");
+                return;
+            }
+
+            const parsedHomeScore = parseInt(homeScore);
+            const parsedAwayScore = parseInt(awayScore);
+
+            if (isNaN(parsedHomeScore) || isNaN(parsedAwayScore)) {
+                alert("Invalid score values");
+                return;
+            }
+            await ApiService.updateMatchScore(
+                matchId,
+                parsedHomeScore,
+                parsedAwayScore
             );
 
             setSelectedFixture(null);

diff --git a/frontend/services/apiService.ts b/frontend/services/apiService.ts
@@ -0,0 +1,38 @@
+import axios from "axios";
+import { Team, Season, SeasonLeaderboard } from "@/types/league";
+import { FixtureResponse } from "@/types/fixture";
+import { TeamPrediction } from "@/types/prediction";
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
+const apiClient = axios.create({
+    baseURL: API_BASE_URL,
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+
+export const ApiService = {
+    getTeams: () => apiClient.get<Team[]>("/teams"),
+    getSeasons: () => apiClient.get<Season[]>("/seasons"),
+    startSeason: (teamIds: number[], seasonId: number) =>
+        apiClient.post("/start-season", {
+            team_ids: teamIds,
+            season_id: seasonId,
+        }),
+    leagueTable: (seasonId: number) =>
+        apiClient.get<SeasonLeaderboard>(`/league-table/${seasonId}`),
+    fixtures: (seasonId: number, weekNumber: number) =>
+        apiClient.get<FixtureResponse>(`/fixtures/${seasonId}/${weekNumber}`),
+    predict: (seasonId: number, weekNumber: number) =>
+        apiClient.get<TeamPrediction[]>(`/week/predict/${seasonId}/${weekNumber}`),
+    simulate: (seasonId: number, weekNumber: number) =>
+        apiClient.get<SeasonLeaderboard>(`/week/simulate/${seasonId}/${weekNumber}`),
+    updateMatchScore: (matchId: number, homeScore: number, awayScore: number) =>
+        apiClient.put(`/match/${matchId}`, {
+            home_score: homeScore,
+            away_score: awayScore,
+        }),
+};
+
+export default ApiService;
diff --git a/frontend/types/league.ts b/frontend/types/league.ts
@@ -21,8 +21,13 @@ export interface LeagueTableProps {
     stats: Leaderboard[];
 }
 
-export interface Season {
+export interface SeasonLeaderboard {
     id: number;
     name: string;
     leaderboard: Leaderboard[];
 }
+
+export interface Season {
+    id: number;
+    name: string;
+}
diff --git a/run.sh b/run.sh
@@ -3,4 +3,5 @@
 composer i
 npm i --prefix frontend
 cp .env.example .env
+cp ./frontend/.env.example ./frontend/.env
 docker compose up --build