feat: refactor and image for tournaments

apps/admin/app/(dashboard)/dashboard/tournaments/matches/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Tournament } from '@/app/(dashboard)/dashboard/tournaments/page';
+import type { Match, Round, Team, Tournament } from '@/app/lib/type/Tournaments';
 import AddRound from '@/app/ui/dashboard/tournaments/matches/AddRound';
 import CancelTeam from '@/app/ui/dashboard/tournaments/matches/CancelTeam';
 import MatchesList from '@/app/ui/dashboard/tournaments/matches/MatchesList';
@@ -12,41 +12,15 @@ import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { Suspense, useEffect, useRef, useState } from 'react';
 
-type Round = {
-  id: number;
-  name: string;
-  id_tournament: number;
-  order: number;
-};
-
-export type Team = {
-  id: number;
-  name: string;
-  validate: boolean;
-  users: {
-    id: number;
-    username: string;
-  }[];
-};
-
-type Match = {
-  id: number;
-  start_time: string | null;
-  end_time: string | null;
-  id_round: number;
-  winner: number[];
-  teams: Team[];
-};
-
-type RoundsData = {
+interface RoundsData {
   data: Round[];
   count: number;
-};
+}
 
-type MatchesData = {
+interface MatchesData {
   data: Match[];
   count: number;
-};
+}
 
 function ShowContent() {
   const searchParams = useSearchParams();

apps/admin/app/(dashboard)/dashboard/tournaments/page.tsx

@@ -1,43 +1,19 @@
 'use client';
 
+import type { Address, Sport, Tournament } from '@/app/lib/type/Tournaments';
+import { getTournament } from '@/app/lib/utils/tournaments';
 import AddTournaments from '@/app/ui/dashboard/tournaments/AddTournaments';
 import TournamentsList from '@/app/ui/dashboard/tournaments/TournamentsList';
 import PaginationComponent from '@repo/ui/components/ui/PaginationComponent';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@repo/ui/components/ui/card';
 import { Input } from '@repo/ui/components/ui/input';
 import { Table, TableBody, TableHead, TableHeader, TableRow } from '@repo/ui/components/ui/table';
 import { Tabs, TabsContent } from '@repo/ui/components/ui/tabs';
+import { toast } from '@ui/components/ui/sonner';
 import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { Suspense, useEffect, useState } from 'react';
 
-export type Tournament = {
-  id: number;
-  created_at: string;
-  default_match_length: number | null;
-  name: string;
-  max_participants: number;
-  team_capacity: number;
-  rules: string | null;
-  prize: string | null;
-  id_address: number | null;
-  id_sport: number | null;
-  description: string | null;
-};
-
-export type Sport = {
-  id: number;
-  name: string;
-};
-
-export type Address = {
-  id: number;
-  road: string;
-  number: number;
-  complement: string | null;
-  name: string | null;
-};
-
 function ShowContent({ addresses, sports }: { addresses: Address[]; sports: Sport[] }): JSX.Element {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -50,35 +26,18 @@ function ShowContent({ addresses, sports }: { addresses: Address[]; sports: Spor
   const [searchTerm, setSearchTerm] = useState<string>('');
 
   useEffect(() => {
-    const urlApi = process.env.NEXT_PUBLIC_API_URL;
-
-    const timer = setTimeout(() => {
-      const queryParams = new URLSearchParams({
-        skip: `${page - 1}`,
-        take: '10',
-        search: searchTerm,
-      });
-
-      fetch(`${urlApi}/tournaments?${queryParams}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${localStorage.getItem('access_token')}`,
-        },
-      })
-        .then((response) => {
-          if (response.status === 403) {
-            router.push('/');
-          }
-          return response.json();
-        })
-        .then((data) => {
-          setTournaments(data.data);
-          setMaxPage(Math.ceil(data.count / 10));
-        })
-        .catch((error: Error) => {
-          console.error(error);
-        });
+    const timer = setTimeout(async () => {
+      const { data, status } = await getTournament(page, searchTerm);
+
+      if (status === 403) {
+        router.push('/');
+        return;
+      }
+      if (status !== 200) {
+        toast.error('Erreur', { duration: 2000, description: 'Une erreur est survenue' });
+      }
+      setTournaments(data.data);
+      setMaxPage(Math.ceil(data.count / 10));
     }, 500);
 
     return () => clearTimeout(timer);
@@ -93,7 +52,12 @@ function ShowContent({ addresses, sports }: { addresses: Address[]; sports: Spor
       <Card x-chunk="dashboard-06-chunk-0">
         <CardHeader className="flex flex-row items-center justify-between">
           <CardTitle>Tournois</CardTitle>
-          <AddTournaments tournaments={tournaments} setTournaments={setTournaments} addresses={addresses} />
+          <AddTournaments
+            tournaments={tournaments}
+            setTournaments={setTournaments}
+            addresses={addresses}
+            sports={sports}
+          />
         </CardHeader>
         <CardContent>
           <div className="ml-auto flex items-center gap-2">

apps/admin/app/lib/type/Tournaments.ts

@@ -0,0 +1,52 @@
+export type Tournament = {
+  id: number;
+  created_at: string;
+  default_match_length: number | null;
+  name: string;
+  max_participants: number;
+  team_capacity: number;
+  rules: string | null;
+  prize: string | null;
+  id_address: number | null;
+  id_sport: number | null;
+  description: string | null;
+};
+
+export type Sport = {
+  id: number;
+  name: string;
+};
+
+export type Address = {
+  id: number;
+  road: string;
+  number: number;
+  complement: string | null;
+  name: string | null;
+};
+
+export type Round = {
+  id: number;
+  name: string;
+  id_tournament: number;
+  order: number;
+};
+
+export type Team = {
+  id: number;
+  name: string;
+  validate: boolean;
+  users: {
+    id: number;
+    username: string;
+  }[];
+};
+
+export type Match = {
+  id: number;
+  start_time: string | null;
+  end_time: string | null;
+  id_round: number;
+  winner: number[];
+  teams: Team[];
+};

apps/admin/app/lib/utils/tournaments.ts

@@ -0,0 +1,39 @@
+'use server';
+
+import type { Tournament } from '@/app/lib/type/Tournaments';
+import { cookies } from 'next/headers';
+
+const urlApi = process.env.ATHLONIX_API_URL;
+
+export async function getTournament(
+  page: number,
+  searchTerm: string,
+): Promise<{ data: { data: Tournament[]; count: number }; status: number }> {
+  const queryParams = new URLSearchParams({
+    skip: `${page - 1}`,
+    take: '10',
+    search: searchTerm,
+  });
+
+  const res = await fetch(`${urlApi}/tournaments?${queryParams}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${cookies().get('access_token')?.value}`,
+    },
+  });
+
+  return { data: await res.json(), status: res.status };
+}
+
+export async function createTournament(formData: FormData): Promise<{ data: Tournament; status: number }> {
+  const res = await fetch(`${urlApi}/tournaments`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${cookies().get('access_token')?.value}`,
+    },
+    body: formData,
+  });
+
+  return { data: await res.json(), status: res.status };
+}