Connected to db

app/hooks/useTournament.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { Tournament } from '@/app/api/tournament';
 import {
   PongMatch,

app/tournament/[id]/page.tsx → app/tournament/[pin]/page.tsx

@@ -1,20 +1,24 @@
-import { useTournament } from '../../hooks/useTournament';
+'use client';
+
+import { useTournament, useTournamentByPin } from '../../hooks/useTournament';
 import Before from './before';
 import ResultsPage from './results';
 
 interface TournamentPageProps {
   params: {
-    id: string;
+    pin: string;
   };
 }
 
 export default function TournamentPage(props: TournamentPageProps) {
-  const { data: tournament, isLoading } = useTournament(props.params.id);
+  const { data: tournaments, isLoading } = useTournamentByPin(props.params.pin);
 
-  if (isLoading || !tournament) {
+  if (isLoading || !tournaments.length) {
     return <div>Loading...</div>;
   }
 
+  const tournament = tournaments[0];
+
   if (tournament.status === 'PENDING') {
     return <Before tournament={tournament} />;
   } else if (tournament.status === 'ACTIVE') {