Migrated to use hooks for data

app/tournament/[id]/before.tsx

@@ -10,28 +10,11 @@ import {
   CardHeader,
   CardTitle,
 } from '../../../components/ui/card';
-
-export interface Team {
-  name: string;
-  players: string[];
-  wins?: number;
-}
-
-const teams: Team[] = [
-  {
-    name: 'Embret sitt lag',
-    players: ['Embret', 'Mori', 'Henrik', 'Eirik'],
-    wins: 3,
-  },
-  {
-    name: 'Henrik sitt lag',
-    players: ['Henrik', 'Mori', 'Eirik', 'Embret'],
-    wins: 7,
-  },
-];
+import { useGetPongTeamList, useTournament } from '@/app/hooks/useTournament';
+import { PongTeam, PongTournament } from '../../types/tournament';
 
 interface TeamCardProps {
-  team: Team;
+  team: PongTeam;
 }
 
 function TeamCard({ team }: TeamCardProps) {
@@ -40,9 +23,9 @@ function TeamCard({ team }: TeamCardProps) {
       <Card>
         <CardHeader className="flex flex-row justify-between items-center">
           <div className="flex flex-col gap-1 items-start">
-            <CardTitle>{team.name}</CardTitle>
+            <CardTitle>{team.team_name}</CardTitle>
             <CardDescription>
-              Antall spillere: {team.players.length}
+              Antall spillere: {team.members.length}
             </CardDescription>
           </div>
           <Button className="mt-[0px!important] z-50" variant={'outline'}>
@@ -54,21 +37,27 @@ function TeamCard({ team }: TeamCardProps) {
   );
 }
 
-export default function Before() {
-  const { id } = useParams();
+export interface BeforeProps {
+  tournament: PongTournament;
+}
+
+export default function Before({ tournament }: BeforeProps) {
+  const { data: teams } = useGetPongTeamList(tournament.id);
 
   return (
     <div>
       <main className="flex flex-col justify-between items-center w-full gap-4 h-[calc(100svh-70px)] px-4">
         <div className="w-full flex flex-col justify-center">
-          <div className="mb-1 mt-4">My tournament title</div>
+          <div className="mb-1 mt-4">{tournament.name}</div>
           <div className="flex flex-row items-center justify-between mb-4">
-            <div className="text-3xl font-bold">Kode: {id}</div>
+            <div className="text-3xl font-bold">
+              Kode: {tournament.pin_code}
+            </div>
             <CreateTeamDialog />
           </div>
           <div className="flex flex-col gap-2">
-            {teams.map((t) => (
-              <TeamCard team={t} key={t.name} />
+            {(teams ?? []).map((t) => (
+              <TeamCard team={t} key={t.id} />
             ))}
           </div>
         </div>

app/tournament/[id]/page.tsx

@@ -1,4 +1,6 @@
+import { useTournament } from '../../hooks/useTournament';
 import Before from './before';
+import ResultsPage from './results';
 
 interface TournamentPageProps {
   params: {
@@ -7,5 +9,18 @@ interface TournamentPageProps {
 }
 
 export default function TournamentPage(props: TournamentPageProps) {
-  return <Before />;
+  const { data: tournament, isLoading } = useTournament(props.params.id);
+
+  if (isLoading || !tournament) {
+    return <div>Loading...</div>;
+  }
+
+  if (tournament.status === 'PENDING') {
+    return <Before tournament={tournament} />;
+  } else if (tournament.status === 'ACTIVE') {
+    return <div></div>;
+    // return <OnGoing tournament={tournament} />;
+  } else {
+    return <ResultsPage tournament={tournament} />;
+  }
 }

app/tournament/[id]/results.tsx

@@ -1,16 +1,7 @@
 'use client';
 
-import { useParams } from 'next/navigation';
-import { Button } from '../../../components/ui/button';
-import Link from 'next/link';
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '../../../components/ui/card';
-import { CreateTeamDialog } from '../../../components/tournament/create_team_dialog';
-import { TeamDetailsDialog } from '@/components/tournament/teamDetailsDialog';
+import { Card, CardHeader, CardTitle } from '../../../components/ui/card';
+import { PongTeam, PongTournament } from '../../types/tournament';
 
 export interface Team {
   name: string;
@@ -45,14 +36,17 @@ const teams: Team[] = [
   },
 ];
 
-export default function ResultsPage() {
-  const { id } = useParams();
+export interface ResultsPageProps {
+  tournament: PongTournament;
+}
+
+export default function ResultsPage({ tournament }: ResultsPageProps) {
   const sortedTeams = teams.sort((a, b) => (a.wins || 0) - (b.wins || 0));
 
   return (
     <main className="flex flex-col justify-center items-center max-w-xl mx-auto w-full [calc(100svh-70px)] px-4">
       <div className="w-full flex flex-col justify-center items-center">
-        <div className="mb-1 mt-4">My tournament title</div>
+        <div className="mb-1 mt-4">{tournament.name}</div>
         <div className="text-3xl font-bold">Resultater</div>
         <Podium teams={sortedTeams} />
         <Losers teams={sortedTeams} />
@@ -61,21 +55,21 @@ export default function ResultsPage() {
   );
 }
 
-function TeamCard({ team, place }: { team: Team; place: number }) {
+function TeamCard({ team, place }: { team: PongTeam; place: number }) {
   return (
     <Card>
       <CardHeader className="flex flex-row justify-between items-center">
         <div className="flex flex-col gap-2 items-start">
           <CardTitle className={'font-medium'}>
-            #{place.toString()} {team.name}
+            #{place.toString()} {team.tournament}
           </CardTitle>
         </div>
       </CardHeader>
     </Card>
   );
 }
 
-function Losers({ teams }: { teams: Team[] }) {
+function Losers({ teams }: { teams: PongTeam[] }) {
   return (
     <div className="flex flex-col gap-4 w-full mt-4">
       {teams.slice(3).map((team, index) => (
@@ -85,26 +79,27 @@ function Losers({ teams }: { teams: Team[] }) {
   );
 }
 
-function Podium({ teams }: { teams: Team[] }) {
+function Podium({ teams }: { teams: PongTeam[] }) {
   return (
     <div
-      className={'flex mt-12 flex-row justify-between gap-2 h-96 items-end w-full'}
+      className={
+        'flex mt-12 flex-row justify-between gap-2 h-96 items-end w-full'
+      }
     >
       <div className="flex flex-col gap-2 h-[70%] justify-end items-center flex-1">
-        <div className={'font-bold'}>{teams[1].name}</div>
+        <div className={'font-bold'}>{teams[1].team_name}</div>
         <div>Icon</div>
         <Card
           className={
             'bg-primary flex flex-col justify-end h-[70%] items-center pb-2 text-3xl flex-1' +
-            ' w-full' +
-            ' font-extrabold'
+            ' w-full font-extrabold'
           }
         >
           #2
         </Card>
       </div>
       <div className="flex flex-col gap-2 h-full items-center justify-end flex-1">
-        <div className={'text-center font-bold'}>{teams[0].name}</div>
+        <div className={'text-center font-bold'}>{teams[0].team_name}</div>
         <div>Icon</div>
         <Card
           className={
@@ -116,7 +111,7 @@ function Podium({ teams }: { teams: Team[] }) {
         </Card>
       </div>
       <div className="flex flex-col gap-2 h-[50%] flex-1 items-center justify-end">
-        <div className={'font-bold'}>{teams[2].name}</div>
+        <div className={'font-bold'}>{teams[2].team_name}</div>
         <div>Icon</div>
         <Card
           className={

app/types/tournament.ts

@@ -1,50 +1,50 @@
 export interface RequestResponse {
-    detail?: string;
+  detail?: string;
 }
 
 export interface AnonymousUser {
-    id?: number;
-    name?: string;
+  id?: number;
+  name?: string;
 }
 
 export interface User {
-    user_id?: string;
+  user_id?: string;
 }
 
 export interface PongTeam {
-    id?: number;
-    team_name?: string;
-    members?: User[];
-    anonymous_members?: AnonymousUser[] | number[];
-    tournament?: number;
+  id?: number;
+  team_name?: string;
+  members?: User[];
+  anonymous_members?: AnonymousUser[] | number[];
+  tournament?: number;
 }
 
 export interface PongResult {
-    id?: number;
-    match?: number;
-    winner?: PongTeam | number;
-    result?: string;
+  id?: number;
+  match?: number;
+  winner?: PongTeam | number;
+  result?: string;
 }
 
 export interface PongMatch {
-    id?: number;
-    team1?: PongTeam | number;
-    team2?: PongTeam | number;
-    result?: PongResult;
-    future_match?: number;
-    tournament?: number;
+  id?: number;
+  team1?: PongTeam | number;
+  team2?: PongTeam | number;
+  result?: PongResult;
+  future_match?: number;
+  tournament?: number;
 }
 
 export interface PongTournament {
-    id?: number;
-    name?: string;
-    matches?: PongMatch[];
-    status: TournamentStatus;
-    pin_code?: string;
-    creator: User;
-    access: TournamentAccess;
+  id?: number;
+  name?: string;
+  matches?: PongMatch[];
+  status: TournamentStatus;
+  pin_code?: string;
+  creator: User;
+  access: TournamentAccess;
 }
 
-export type TournamentStatus = "PENDING" | "ACTIVE" | "FINISHED"
+export type TournamentStatus = 'PENDING' | 'ACTIVE' | 'FINISHED';
 
-export type TournamentAccess = "PUBLIC" | "PIN";
+export type TournamentAccess = 'PUBLIC' | 'PIN';

components/tournament/create_team_dialog.tsx

@@ -13,18 +13,51 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Trash2Icon as DeleteIcon, PlusIcon } from 'lucide-react';
-import { useState } from 'react';
 import { Card } from '../ui/card';
+import {
+  useCreatePongTeam,
+  useUpdatePongTeam,
+} from '../../app/hooks/useTournament';
+import { useState } from 'react';
+import * as yup from 'yup';
+import { useFormik } from 'formik';
+
+const validationSchema = yup.object({
+  name: yup.string().required('Teamnavn må fylles ut'),
+  members: yup
+    .array()
+    .of(yup.string().required('Spillernavn må fylles ut'))
+    .min(1, 'Laget må ha minst en spiller'),
+});
+
+type FormValues = yup.InferType<typeof validationSchema>;
+
+const initialValues: FormValues = {
+  name: '',
+  members: [],
+};
 
 export function CreateTeamDialog() {
-  const [users, setUsers] = useState<string[]>([]);
+  const { mutateAsync: createTeam } = useCreatePongTeam();
+  const onSubmit = (values: FormValues) => {
+    createTeam({
+      anonymous_members: values.members.map((name) => ({ name })),
+      team_name: values.name,
+    });
+  };
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit,
+  });
 
   const handleAddUser = () => {
     const element = document.getElementById('username') as unknown as {
       value: string;
     };
     const text = element.value;
-    setUsers((u) => [...u, text]);
+    formik.setFieldValue('members', [...formik.values.members, text]);
     element.value = '';
   };
 
@@ -72,18 +105,14 @@ export function CreateTeamDialog() {
             </div>
           </div>
           <div className="flex flex-col gap-2 items-center w-full">
-            {users.map((user, idx) => (
+            {formik.values.members.map((user, idx) => (
               <Card
                 key={user}
                 className="flex gap-2 items-center px-4 py-2 w-full"
               >
                 <div>#{idx + 1}</div>
                 <div className="p-2 flex-grow font-medium text-lg">{user}</div>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => setUsers((u) => u.filter((_, i) => i !== idx))}
-                >
+                <Button size="icon" variant="ghost" onClick={handleAddUser}>
                   <DeleteIcon />
                 </Button>
               </Card>

components/tournament/teamDetailsDialog.tsx

@@ -12,10 +12,10 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import React, { ReactNode } from 'react';
-import { Team } from '@/app/tournament/[id]/before';
+import { PongTeam } from '../../app/types/tournament';
 
 interface TeamCard {
-  team: Team;
+  team: PongTeam;
   children: ReactNode;
 }
 
@@ -25,12 +25,12 @@ export function TeamDetailsDialog({ team, children }: TeamCard) {
       <DialogTrigger>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle className="text-left">{team.name}</DialogTitle>
+          <DialogTitle className="text-left">{team.team_name}</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-4">
           <Label>Spillere</Label>
-          {team.players.map((player) => (
-            <li key={player}>{player}</li>
+          {[...team.anonymous_members, ...team.members].map((player) => (
+            <li key={player.toString()}>{player.toString()}</li>
           ))}
         </div>
         <DialogFooter>