Merge pull request #15 from FGA0138-MDS-Ajax/server

Novas apis e integração client server

projeto/client/app/home/page.tsx

@@ -1,73 +1,126 @@
 "use client";
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { Match } from '@/app/models/match';
 import { Bebas_Neue } from 'next/font/google';
-import { GridTimes } from '@/components/auth/home/grid';
-import { CardTimes } from '@/components/auth/home/card-times';
-
+import { GridTimes } from '@/components/home/grid';
+import { CardTimes } from '@/components/home/card-times';
 
 const font = Bebas_Neue({
-  subsets: ['latin'],
-  weight: ['400'],
+    subsets: ['latin'],
+    weight: ['400'],
 });
 
 const h1ClassName = "text-4xl font-semibold text-black drop-shadow-md text-center mt-8 mb-8";
 const h2ClassName = "text-3xl font-semibold text-black drop-shadow-md";
 const divCardsClassName = "w-full pt-4 pb-4";
 
 // Partidas exemplos
-const lib = new Match("Libertadores", "24/06/2024 13:30", "Time A", "Time B", ["Globo", "SporTV"]);
-const br = new Match("Brasileirão", "24/06/2024 13:30", "Time A", "Time B", ["Globo", "SporTV"]);
+const lib = new Match("Libertadores", "Sem Jogos", "", "", [""]);
+const br = new Match("Brasileirão", "Sem Jogos", "", "", [""]);
 
 export default function HomePage() {
-  return (
-    <div className="min-h-full w-full">
-      <div className="h-full grid grid-cols-2 divide-x-2 divide-black">
-
-        <div className="pt-2 pl-4 pr-4">
-          <h1 className={cn(h1ClassName,font.className
-          )}>Rodada X</h1>
-          <GridTimes />
-        </div>
+    const [favorito, setFavorito] = useState();
+    useEffect(() => {
+        fetch("http://localhost:8000/auth/v1/favorito")
+            .then(response => response.json())
+            .then(data => {
+                setFavorito(data.favorito);
+            })
+            .catch(error => {
+                console.error('Erro ao buscar os dados:', error);
+            });
+    }, []);
 
-        <div className="pt-2 pl-4 pr-4">
-          <h1 className={cn(h1ClassName,font.className)}
-          >Time Usuário</h1>
-
-          <div className="grid grid-rows-3 divide-y-2 divide-black content-between">
-            <div className="w-full pb-4">
-              <h2 className={cn(
-                h2ClassName,font.className)}
-                >Brasileirão</h2>
+    const [rodada, setRodada] = useState(0);
+    useEffect(() => {
+        fetch("http://localhost:8000/api/v1/rodada")
+            .then(response => response.json())
+            .then(data => {
+                setRodada(data);
+            })
+            .catch(error => {
+                console.error('Erro ao buscar os dados:', error);
+            });
+    }, []);
 
-              <div className='w-432px mx-auto'>
-                <CardTimes  match={br}/>
-              </div>  
+    const [jogoBr, setJogoBr] = useState<Match>(br);
+    useEffect(() => {
+        fetch(`http://localhost:8000/api/v1/games/brasileirao/${favorito}`)
+            .then(response => response.json())
+            .then(data => {
+                const jogoBrData = data[0];
+                if (jogoBrData.campeonato && jogoBrData.data_hora && jogoBrData.time_1 && jogoBrData.time_2 && jogoBrData.channels) {
+                    const JogoBR = new Match(jogoBrData.campeonato, jogoBrData.data_hora, jogoBrData.time_1, jogoBrData.time_2, jogoBrData.channels);
+                    console.log(JogoBR);
+                    setJogoBr(JogoBR);
+                } else {
+                    console.error('Dados inválidos recebidos da API', jogoBrData);
+                }
+            })
+            .catch(error => {
+                console.error('Erro ao buscar o jogo do Brasileirão:', error);
+            });
+    }, [favorito]);
 
-            </div>
-
-            <div className={divCardsClassName}>
-              <h2 className={cn(h2ClassName,font.className)}
-                >Libertadores</h2>
+    const [jogoLib, setJogoLib] = useState<Match>(lib);
+    useEffect(() => {
+        fetch(`http://localhost:8000/api/v1/games/liberta/${favorito}`)
+            .then(response => response.json())
+            .then(data => {
+                const jogoLibData = data[0];
+                if (jogoLibData.campeonato && jogoLibData.data_hora && jogoLibData.time_1 && jogoLibData.time_2 && jogoLibData.channels) {
+                    const JogoLib = new Match(jogoLibData.campeonato, jogoLibData.data_hora, jogoLibData.time_1, jogoLibData.time_2, jogoLibData.channels);
+                    console.log(JogoLib);
+                    setJogoLib(JogoLib);
+                } else {
+                    console.error('Dados inválidos recebidos da API', data);
+                }
+            })
+            .catch(error => {
+                console.error('Erro ao buscar o jogo da Libertadores:', error);
+            });
+    }, [favorito]);
+
+    return (
+        <div className="min-h-full w-full">
+            <div className="h-full grid grid-cols-2 divide-x-2 divide-black">
 
-                <div className='w-432px mx-auto'>
-                  <CardTimes match={lib}/>
+                <div className="pt-2 pl-4 pr-4">
+                    <h1 className={cn(h1ClassName, font.className)}>Rodada {rodada}</h1>
+                    <GridTimes />
                 </div>
-            </div>
-
-            <div className={divCardsClassName}>
-            <h2 className={cn(h2ClassName,font.className)}
-                >Canais de Transmissão</h2>
-            </div>
 
-          </div>
+                <div className="pt-2 pl-4 pr-4">
+                    <h1 className={cn(h1ClassName, font.className)}>{favorito}</h1>
 
-        </div>
+                    <div className="grid grid-rows-3 divide-y-2 divide-black content-between">
+                        <div className="w-full pb-4">
+                            <h2 className={cn(h2ClassName, font.className)}>Brasileirão</h2>
+
+                            <div className='w-432px mx-auto'>
+                                <CardTimes match={jogoBr} />
+                            </div>
+                        </div>
 
-      </div>
-    </div>
+                        <div className={divCardsClassName}>
+                            <h2 className={cn(h2ClassName, font.className)}>Libertadores</h2>
 
-  );
-};
+                            <div className='w-432px mx-auto'>
+                                <CardTimes match={jogoLib} />
+                            </div>
+                        </div>
+
+                        <div className={divCardsClassName}>
+                            <h2 className={cn(h2ClassName, font.className)}>Canais de Transmissão</h2>
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+        </div>
+    );
+}

projeto/client/app/models/match.tsx

@@ -1,16 +1,16 @@
 export class Match {
   campeonato: string;
-  data_hora: Date;
+  data_hora: Date | null;
   time1: string;
   time2: string;
   channels: string[];
 
   constructor(
-    campeonato: string,
-    data_hora: string,
-    time1: string,
-    time2: string,
-    channels: string[]
+      campeonato: string,
+      data_hora: string,
+      time1: string,
+      time2: string,
+      channels: string[]
   ) {
     this.campeonato = campeonato;
     this.data_hora = this.parseDate(data_hora);
@@ -19,14 +19,21 @@ export class Match {
     this.channels = channels;
   }
 
-  private parseDate(dateString: string): Date {
+  private parseDate(dateString: string): Date | null {
+    if (!dateString || dateString.toLowerCase() === "sem jogos") {
+      console.warn('Date string is undefined, empty or "Sem Jogos"');
+      return null;
+    }
     const [datePart, timePart] = dateString.split(' ');
     const [day, month, year] = datePart.split('/').map(Number);
     const [hours, minutes] = timePart.split(':').map(Number);
     return new Date(year, month - 1, day, hours, minutes);
   }
 
   public formatDate(): string {
+    if (this.data_hora === null) {
+      return "Sem Jogos";
+    }
     const day = String(this.data_hora.getDate()).padStart(2, '0');
     const month = String(this.data_hora.getMonth() + 1).padStart(2, '0');
     const year = this.data_hora.getFullYear();
@@ -35,4 +42,3 @@ export class Match {
     return `${day}/${month}/${year} - ${hours}:${minutes}`;
   }
 }
-

projeto/client/components/home/card-times.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+
+import { Match } from "@/app/models/match";
+
+interface CardTimesProps {
+    match: Match;
+};
+
+export const CardTimes = ({ match }: CardTimesProps) => {
+    if (match.data_hora === null) {
+        return (
+            <Card>
+                <CardContent className="flex justify-center items-center h-32">
+                    <p>Não há jogos</p>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{match.formatDate()}</CardTitle>
+            </CardHeader>
+
+            <CardContent className="flex justify-center content-center">
+                <p>{match.time1} X {match.time2} </p>
+            </CardContent>
+
+            <CardFooter className="flex space-x-2 justify-center">
+                {match.channels.map((channel, index) => (
+                    <span key={index} className="channel-item">
+            {channel} 
+          </span>
+                ))}
+            </CardFooter>
+        </Card>
+    );
+};

projeto/client/components/home/grid.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Match } from "@/app/models/match";
+import { CardTimes } from "@/components/home/card-times";
+import {useEffect, useState} from "react";
+
+export const GridTimes = () => {
+  const [matches, setMatches] = useState<Match[]>([]);
+
+  useEffect(() => {
+    const fetchMatches = async () => {
+      try {
+        const response = await fetch("http://localhost:8000/api/v4/games/8");
+        const data = await response.json();
+        const fetchedMatches = data.map((item: any) => new Match(item.campeonato, item.data_hora, item.time_1, item.time_2, item.channels));
+        setMatches(fetchedMatches);
+      } catch (error) {
+        console.error('Erro ao buscar os dados:', error);
+      }
+    };
+
+    fetchMatches();
+  }, []);
+
+  return (
+      <div className="grid grid-cols-2 gap-2">
+        {matches.map((match, index) => (
+            <CardTimes key={index} match={match} />
+        ))}
+      </div>
+  );
+};