From fd15d216a42ff352a4b1b9c6dbcffa631b79ad94 Mon Sep 17 00:00:00 2001
From: Peppisparrow <127871840+Peppisparrow@users.noreply.github.com>
Date: Sun, 4 Feb 2024 17:20:41 +0100
Subject: [PATCH] correct profilepage

---
 .../src/components/NavBar.tsx                 |  8 ++--
 .../src/components/ProfilePage.tsx            | 30 ++++++-------
 .../VisualizeCoordinatedTournaments.tsx       | 43 +++++++++++--------
 .../VisualizeCreatedTournaments.tsx           | 43 +++++++++++--------
 .../components/VisualizeJoinedTournaments.tsx | 43 +++++++++++--------
 IT/codekatabattle-frontend/src/main.tsx       |  6 +--
 6 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/IT/codekatabattle-frontend/src/components/NavBar.tsx b/IT/codekatabattle-frontend/src/components/NavBar.tsx
index b653a87..c3f00be 100644
--- a/IT/codekatabattle-frontend/src/components/NavBar.tsx
+++ b/IT/codekatabattle-frontend/src/components/NavBar.tsx
@@ -37,9 +37,9 @@ export const NavBar= () => {
                                        className="drawer-overlay"></label>
                                 <ul className="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
                                     <li><Link to={"/all/tournaments/view/0"}>All Tournaments</Link></li>
-                                    <li><Link to={"/joined/tournaments/view/0"}>Joined Tournaments</Link></li>
-                                    <li><Link to={"/created/tournaments/view/0"}>Created Tournaments</Link></li>
-                                    <li><Link to={"/coordinated/tournaments/view/0"}>Coordinated Tournaments</Link></li>
+                                    <li><Link to={"/joined/tournaments/view/"+user?.login+"/0"}>Joined Tournaments</Link></li>
+                                    <li><Link to={"/created/tournaments/view/"+user?.login+"/0"}>Created Tournaments</Link></li>
+                                    <li><Link to={"/coordinated/tournaments/view/"+user?.login+"/0"}>Coordinated Tournaments</Link></li>
                                     <li><Link to="/tournament/create">Create Tournaments</Link></li>
                                     <li><Link to={"/profile/" + user?.login?.toString()}>My Profile</Link></li>
 
@@ -68,7 +68,7 @@ export const NavBar= () => {
                         <ul className="menu menu-vertical lg:menu-horizontal">
                                 <input type="text" placeholder="Type here..." style={{height:"5%",paddingTop:"4%"}} className="bg-base-100 "
                                        onChange={event => setUsername(event.target.value)}/>
-                                <button className="btm btn-sm btn-ghost btn-circle" style={{right:"70%"}} onClick={()=>navigate("/"+username)}>
+                                <button className="btm btn-sm btn-ghost btn-circle" style={{right:"70%"}} onClick={()=>navigate("/profile/"+username)}>
                                     <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none"
                                          viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
diff --git a/IT/codekatabattle-frontend/src/components/ProfilePage.tsx b/IT/codekatabattle-frontend/src/components/ProfilePage.tsx
index b87576e..a4fb4b6 100644
--- a/IT/codekatabattle-frontend/src/components/ProfilePage.tsx
+++ b/IT/codekatabattle-frontend/src/components/ProfilePage.tsx
@@ -7,14 +7,14 @@ import {NavBar} from "./NavBar.tsx";
 import {useEffect, useState} from "react";
 import educator from "../assets/educator.png";
 import student from "../assets/reading.png";
-import avatar from "../assets/avatar2.png";
+import {ImageCreator} from "./ImageCreator.tsx";
 
 
 
 export const ProfilePage= () => {
     const params = useParams();
     const [error, setError] = useState<Error | null>(null);
-    const [user, setUser]=useState<GHUser|null>(null)
+    const [user, setUser]=useState<GHUser|null>(null);
     const [createdTournaments, setCreatedTournaments]=useState<PageTournament|null>(null)
     const [coordinatedTournaments, setCoordinatedTournaments]=useState<PageTournament|null>(null)
     const [joinedTournaments, setJoinedTournaments]=useState<PageTournament|null>(null)
@@ -28,16 +28,16 @@ export const ProfilePage= () => {
         try {
             if(!params.username)
                 return;
-            const user =await AuthService.getUserInfo(params.username);
-            setUser(user);
-            if(!user.login)
+            const tuser =await AuthService.getUserInfo(params.username);
+            setUser(tuser);
+            if(!tuser?.login)
                 return;
-            const createdTournaments =await TournamentService.findAllCreatedByUser(user.login.toString(),0, 4);
-            setCreatedTournaments(createdTournaments);
-            const coordinatedTournaments =await TournamentService.findAllCoordinatedByUser(user.login.toString(),0, 4);
-            setCoordinatedTournaments(coordinatedTournaments);
-            const joinedTournaments =await TournamentService.findAllJoinedByUser(user.login.toString(),0, 4);
-            setJoinedTournaments(joinedTournaments);
+            const tcreatedTournaments =await TournamentService.findAllCreatedByUser(tuser.login.toString(),0, 4);
+            setCreatedTournaments(tcreatedTournaments);
+            const tcoordinatedTournaments =await TournamentService.findAllCoordinatedByUser(tuser.login.toString(),0, 4);
+            setCoordinatedTournaments(tcoordinatedTournaments);
+            const tjoinedTournaments =await TournamentService.findAllJoinedByUser(tuser.login.toString(),0, 4);
+            setJoinedTournaments(tjoinedTournaments);
         }catch (error1) {
             setError(error1 as Error);
             if (error?.message) alert(error?.message);
@@ -130,7 +130,7 @@ export const ProfilePage= () => {
                             <div className="stat-figure text-secondary">
                                 <div className="avatar online">
                                     <div className="w-16 rounded-full">
-                                        <img src={avatar}/>
+                                        <ImageCreator username={t.creator}/>
                                     </div>
                                 </div>
                             </div>
@@ -194,7 +194,7 @@ export const ProfilePage= () => {
                     <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Created tournaments" checked/>
                     <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">
                         <CreatedTournaments/>
-                        <div onClick={() => navigate("/created/tournaments/view/0")} className="badge badge-info gap-2 font-bold">
+                        <div onClick={() => navigate("/created/tournaments/view/"+user?.login+"/0")} className="badge badge-info gap-2 font-bold">
                             {"See more >>"}
                         </div>
                     </div>
@@ -203,7 +203,7 @@ export const ProfilePage= () => {
                            aria-label="Coordinated tournaments"/>
                     <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">
                         <CoordinatedTournaments/>
-                        <div  onClick={() => navigate("/coordinated/tournaments/view/0")} className="badge badge-info gap-2 font-bold">
+                        <div onClick={() => navigate("/coordinated/tournaments/view/"+user?.login+"/0")} className="badge badge-info gap-2 font-bold">
                             {"See more >>"}
                         </div>
                     </div>
@@ -211,7 +211,7 @@ export const ProfilePage= () => {
                     <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Joined tournaments"/>
                     <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">
                         <JoinedTournaments/>
-                        <div  onClick={() => navigate("/joined/tournaments/view/0")} className="badge badge-info gap-2 font-bold">
+                        <div  onClick={() => navigate("/joined/tournaments/view/"+user?.login+"/0")} className="badge badge-info gap-2 font-bold">
                             {"See more >>"}
                         </div>
 
diff --git a/IT/codekatabattle-frontend/src/components/VisualizeCoordinatedTournaments.tsx b/IT/codekatabattle-frontend/src/components/VisualizeCoordinatedTournaments.tsx
index 87bae26..d5951f7 100644
--- a/IT/codekatabattle-frontend/src/components/VisualizeCoordinatedTournaments.tsx
+++ b/IT/codekatabattle-frontend/src/components/VisualizeCoordinatedTournaments.tsx
@@ -1,4 +1,4 @@
-import { PageTournament, Tournament, TournamentService} from "../services/openapi";
+import {AuthService, PageTournament, Tournament, TournamentService} from "../services/openapi";
 import {useContext, useEffect, useState} from "react";
 import {NavBar} from "./NavBar.tsx";
 import five from "../assets/high-five.png"
@@ -16,12 +16,17 @@ export const VisualizeCoordinatedTournaments= () => {
 
     useEffect(() => {
         fetchTournaments();
-    }, [params,user]);
+    }, []);
 
     async function fetchTournaments() {
         try {
-            if(user?.login) {
-                const tournaments = await TournamentService.findAllCoordinatedByUser(user.login, +params.page!, 5);
+            let tuser;
+            if(!params.username) tuser=user;
+            else {
+                 tuser = await AuthService.getUserInfo(params.username);
+            }
+            if(tuser?.login) {
+                const tournaments = await TournamentService.findAllCoordinatedByUser(tuser.login, +params.page!, 5);
                 setTournaments(tournaments);
             }
 
@@ -33,7 +38,7 @@ export const VisualizeCoordinatedTournaments= () => {
 
     function to(id: string | undefined) {
         if (id != undefined) {
-            const s = "/coordinated/tournaments/" + id;
+            const s = "/coordinated/tournaments/view/"+params.username+"/"+id;
             navigate(s);
             location.reload();
         }
@@ -54,7 +59,7 @@ export const VisualizeCoordinatedTournaments= () => {
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                 </div>
             )
         }
@@ -62,7 +67,7 @@ export const VisualizeCoordinatedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}/>
+                           onClick={() => (to("0"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
                            checked/>
                 </div>
@@ -75,13 +80,13 @@ export const VisualizeCoordinatedTournaments= () => {
                            aria-label={"Page " + (+params.page! + 1).toString()}
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="»"
-                           onClick={() => (to("view/" + (+params.page! + 1).toString()))}/>
+                           onClick={() => (to((+params.page! + 1).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={(tournaments.totalPages - 1).toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                           onClick={() => (to(((tournaments?.totalPages ?? 2) - 2).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={tournaments.totalPages.toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                           onClick={() => (to(((tournaments?.totalPages ?? 1) - 1).toString()))}/>
                 </div>
             )
         }
@@ -89,12 +94,12 @@ export const VisualizeCoordinatedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}
+                           onClick={() => (to("0"))}
                     />
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="«"
-                           onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                           onClick={() => (to( (+params.page! - 1).toString()))}
                     />
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={"Page " + (+params.page! + 1).toString()}
@@ -104,23 +109,23 @@ export const VisualizeCoordinatedTournaments= () => {
         }
         return (<div className="join">
             <input className="join-item btn " type="radio" name="options" aria-label="1"
-                   onClick={() => (to("view/0"))}
+                   onClick={() => (to("0"))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label="2"
-                   onClick={() => (to("view/1"))}/>
+                   onClick={() => (to("1"))}/>
             <input className="join-item btn " type="radio" name="options" aria-label="«"
-                   onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                   onClick={() => (to( (+params.page! - 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label={"Page " + (+params.page! + 1).toString()}
                    checked/>
             <input className="join-item btn " type="radio" name="options" aria-label="»"
-                   onClick={() => (to("view/" + (+params.page! + 1).toString()))}
+                   onClick={() => (to( (+params.page! + 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options"
                    aria-label={(tournaments.totalPages - 1).toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
             <input className="join-item btn " type="radio" name="options" aria-label={tournaments.totalPages.toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
         </div>)
     }
 
diff --git a/IT/codekatabattle-frontend/src/components/VisualizeCreatedTournaments.tsx b/IT/codekatabattle-frontend/src/components/VisualizeCreatedTournaments.tsx
index 89166b7..1a05354 100644
--- a/IT/codekatabattle-frontend/src/components/VisualizeCreatedTournaments.tsx
+++ b/IT/codekatabattle-frontend/src/components/VisualizeCreatedTournaments.tsx
@@ -1,4 +1,4 @@
-import { PageTournament, Tournament, TournamentService} from "../services/openapi";
+import {AuthService, PageTournament, Tournament, TournamentService} from "../services/openapi";
 import {useContext, useEffect, useState} from "react";
 import {NavBar} from "./NavBar.tsx";
 import fight from "../assets/fight.png"
@@ -15,12 +15,17 @@ export const VisualizeCreatedTournaments= () => {
     const {user}=useContext(AuthContext);
     useEffect(() => {
         fetchTournaments();
-    }, [params,user]);
+    }, []);
 
     async function fetchTournaments() {
         try {
-            if(user?.login){
-                const tournaments = await TournamentService.findAllCreatedByUser(user.login,+params.page!, 5);
+            let tuser;
+            if(!params.username) tuser=user;
+            else {
+                tuser = await AuthService.getUserInfo(params.username);
+            }
+            if(tuser?.login){
+                const tournaments = await TournamentService.findAllCreatedByUser(tuser.login,+params.page!, 5);
                 setTournaments(tournaments);
             }
 
@@ -32,7 +37,7 @@ export const VisualizeCreatedTournaments= () => {
 
     function to(id: string | undefined) {
         if (id != undefined) {
-            const s = "/created/tournaments/" + id;
+            const s = "/created/tournaments/view/"+params.username+"/"+id;
             navigate(s);
             location.reload();
         }
@@ -53,7 +58,7 @@ export const VisualizeCreatedTournaments= () => {
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                 </div>
             )
         }
@@ -61,7 +66,7 @@ export const VisualizeCreatedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}/>
+                           onClick={() => (to("0"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
                            checked/>
                 </div>
@@ -74,13 +79,13 @@ export const VisualizeCreatedTournaments= () => {
                            aria-label={"Page " + (+params.page! + 1).toString()}
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="»"
-                           onClick={() => (to("view/" + (+params.page! + 1).toString()))}/>
+                           onClick={() => (to( (+params.page! + 1).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={(tournaments.totalPages - 1).toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                           onClick={() => (to( ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={tournaments.totalPages.toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                           onClick={() => (to( ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
                 </div>
             )
         }
@@ -88,12 +93,12 @@ export const VisualizeCreatedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}
+                           onClick={() => (to("0"))}
                     />
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="«"
-                           onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                           onClick={() => (to( (+params.page! - 1).toString()))}
                     />
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={"Page " + (+params.page! + 1).toString()}
@@ -103,23 +108,23 @@ export const VisualizeCreatedTournaments= () => {
         }
         return (<div className="join">
             <input className="join-item btn " type="radio" name="options" aria-label="1"
-                   onClick={() => (to("view/0"))}
+                   onClick={() => (to("0"))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label="2"
-                   onClick={() => (to("view/1"))}/>
+                   onClick={() => (to("1"))}/>
             <input className="join-item btn " type="radio" name="options" aria-label="«"
-                   onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                   onClick={() => (to( (+params.page! - 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label={"Page " + (+params.page! + 1).toString()}
                    checked/>
             <input className="join-item btn " type="radio" name="options" aria-label="»"
-                   onClick={() => (to("view/" + (+params.page! + 1).toString()))}
+                   onClick={() => (to((+params.page! + 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options"
                    aria-label={(tournaments.totalPages - 1).toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
             <input className="join-item btn " type="radio" name="options" aria-label={tournaments.totalPages.toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
         </div>)
     }
 
diff --git a/IT/codekatabattle-frontend/src/components/VisualizeJoinedTournaments.tsx b/IT/codekatabattle-frontend/src/components/VisualizeJoinedTournaments.tsx
index 8dfdc72..1eb9b05 100644
--- a/IT/codekatabattle-frontend/src/components/VisualizeJoinedTournaments.tsx
+++ b/IT/codekatabattle-frontend/src/components/VisualizeJoinedTournaments.tsx
@@ -1,4 +1,4 @@
-import { PageTournament, Tournament, TournamentService} from "../services/openapi";
+import {AuthService, PageTournament, Tournament, TournamentService} from "../services/openapi";
 import {useContext, useEffect, useState} from "react";
 import {NavBar} from "./NavBar.tsx";
 import join from "../assets/join.png"
@@ -15,12 +15,17 @@ export const VisualizeJoinedTournaments= () => {
     const {user}=useContext(AuthContext);
     useEffect(() => {
         fetchTournaments();
-    }, [params,user]);
+    }, []);
 
     async function fetchTournaments() {
         try {
-            if(user?.login){
-                const tournaments = await TournamentService.findAllJoinedByUser(user.login,+params.page!, 5);
+            let tuser;
+            if(!params.username) tuser=user;
+            else {
+                tuser = await AuthService.getUserInfo(params.username);
+            }
+            if(tuser?.login){
+                const tournaments = await TournamentService.findAllJoinedByUser(tuser.login,+params.page!, 5);
                 setTournaments(tournaments);
             }
 
@@ -32,7 +37,7 @@ export const VisualizeJoinedTournaments= () => {
 
     function to(id: string | undefined) {
         if (id != undefined) {
-            const s = "/joined/tournaments/" + id;
+            const s = "/joined/tournaments/view/" +params.username+"/"+ id;
             navigate(s);
             location.reload();
         }
@@ -53,7 +58,7 @@ export const VisualizeJoinedTournaments= () => {
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                 </div>
             )
         }
@@ -61,7 +66,7 @@ export const VisualizeJoinedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}/>
+                           onClick={() => (to("0"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
                            checked/>
                 </div>
@@ -74,13 +79,13 @@ export const VisualizeJoinedTournaments= () => {
                            aria-label={"Page " + (+params.page! + 1).toString()}
                            checked/>
                     <input className="join-item btn " type="radio" name="options" aria-label="»"
-                           onClick={() => (to("view/" + (+params.page! + 1).toString()))}/>
+                           onClick={() => (to( (+params.page! + 1).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={(tournaments.totalPages - 1).toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                           onClick={() => (to(((tournaments?.totalPages ?? 2) - 2).toString()))}/>
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={tournaments.totalPages.toString()}
-                           onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                           onClick={() => (to(((tournaments?.totalPages ?? 1) - 1).toString()))}/>
                 </div>
             )
         }
@@ -88,12 +93,12 @@ export const VisualizeJoinedTournaments= () => {
             return (
                 <div className="join">
                     <input className="join-item btn " type="radio" name="options" aria-label="1"
-                           onClick={() => (to("view/0"))}
+                           onClick={() => (to("0"))}
                     />
                     <input className="join-item btn " type="radio" name="options" aria-label="2"
-                           onClick={() => (to("view/1"))}/>
+                           onClick={() => (to("1"))}/>
                     <input className="join-item btn " type="radio" name="options" aria-label="«"
-                           onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                           onClick={() => (to( (+params.page! - 1).toString()))}
                     />
                     <input className="join-item btn " type="radio" name="options"
                            aria-label={"Page " + (+params.page! + 1).toString()}
@@ -103,23 +108,23 @@ export const VisualizeJoinedTournaments= () => {
         }
         return (<div className="join">
             <input className="join-item btn " type="radio" name="options" aria-label="1"
-                   onClick={() => (to("view/0"))}
+                   onClick={() => (to("0"))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label="2"
-                   onClick={() => (to("view/1"))}/>
+                   onClick={() => (to("1"))}/>
             <input className="join-item btn " type="radio" name="options" aria-label="«"
-                   onClick={() => (to("view/" + (+params.page! - 1).toString()))}
+                   onClick={() => (to( (+params.page! - 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options" aria-label={"Page " + (+params.page! + 1).toString()}
                    checked/>
             <input className="join-item btn " type="radio" name="options" aria-label="»"
-                   onClick={() => (to("view/" + (+params.page! + 1).toString()))}
+                   onClick={() => (to( (+params.page! + 1).toString()))}
             />
             <input className="join-item btn " type="radio" name="options"
                    aria-label={(tournaments.totalPages - 1).toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 2) - 2).toString()))}/>
             <input className="join-item btn " type="radio" name="options" aria-label={tournaments.totalPages.toString()}
-                   onClick={() => (to("view/" + ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
+                   onClick={() => (to( ((tournaments?.totalPages ?? 1) - 1).toString()))}/>
         </div>)
     }
 
diff --git a/IT/codekatabattle-frontend/src/main.tsx b/IT/codekatabattle-frontend/src/main.tsx
index 3ad0445..eb8d55c 100644
--- a/IT/codekatabattle-frontend/src/main.tsx
+++ b/IT/codekatabattle-frontend/src/main.tsx
@@ -43,17 +43,17 @@ const router = createBrowserRouter([
 
     },
     {
-        path: "/created/tournaments/view/:page",
+        path: "/created/tournaments/view/:username/:page",
         element: <VisualizeCreatedTournaments/>,
 
     },
     {
-        path: "/joined/tournaments/view/:page",
+        path: "/joined/tournaments/view/:username/:page",
         element: <VisualizeJoinedTournaments/>,
 
     },
     {
-        path: "/coordinated/tournaments/view/:page",
+        path: "/coordinated/tournaments/view/:username/:page",
         element: <VisualizeCoordinatedTournaments/>,
 
     },