fixed a bit

This commit is contained in:
bobbert committed 2025-03-11 23:09:05 +00:00
1 parent a0fb2b9970
commit 25fe268ed6
3 files changed
+149 -141

No files matched your search

+132 -55
View File
@@ -25,7 +25,7 @@ export default function TeamPage({ params }) {
headers: {
"Content-Type": "application/json",
},
credentials: "include", // Important for auth
credentials: "include",
});
if (!response.ok) {
@@ -74,78 +74,155 @@ export default function TeamPage({ params }) {
}
return (
<div className="team-page-container">
<div className="navbar">
<div className="team-info">
<div className="team-name">Team Name: {team.name}</div>
<div className="team-code">Team Join Code: {team.code}</div>
<div className="team-page">
<div className="header">
<Link href="/team-selection" className="back-button">
←
</Link>
<div className="team-name">{team.name}</div>
<div className="team-code">{team.code}</div>
<div className="timer">00:00</div>
</div>
<div className="content-container">
<div className="add-users-button">Add Users</div>
<div className="users-container">
{teamMembers.map((member, index) => (
<div key={member.id} className="user-card">
User #{index + 1}
</div>
))}
<div className="add-user-icon">
<div className="plus-icon">+</div>
</div>
</div>
</div>
<div className="team-members">
{teamMembers.map((member) => (
<div
key={member.id}
className={`member-card ${
member.id === session?.user?.id ? "current-user" : ""
}`}
>
{member.username}
<div className="navbar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
))}
</div>
<style jsx>{`
.team-page-container {
.team-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
height: 100vh;
overflow: hidden;
font-family: Arial, sans-serif;
}
.navbar {
position: sticky;
top: 0;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ccc;
padding: 10px 0;
text-align: center;
z-index: 1000;
}
.team-info {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 600px;
padding: 0 20px;
}
.team-name {
font-size: 24px;
.header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 15px 10px;
background-color: #c8b6a6;
color: white;
font-weight: bold;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.back-button {
font-size: 24px;
color: black;
text-decoration: none;
display: flex;
align-items: center;
}
.team-name,
.team-code {
font-size: 18px;
color: #555;
text-align: center;
font-weight: 600;
color: black;
}
.team-members {
.timer {
text-align: right;
color: black;
}
.content-container {
flex: 1;
background-color: #8ecae6;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 600px;
margin-top: 20px;
}
.member-card {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
text-align: center;
overflow-y: auto;
}
.member-card.current-user {
background-color: #d3d3d3;
.add-users-button {
background-color: #e9c46a;
color: black;
text-align: center;
padding: 15px;
margin: 10px 0;
border-radius: 15px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.users-container {
flex: 1;
background-color: #f6bd60;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
}
.user-card {
background-color: #c8b6a6;
color: black;
padding: 15px;
border-radius: 8px;
text-align: center;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.add-user-icon {
display: flex;
justify-content: center;
margin-top: 10px;
}
.plus-icon {
width: 30px;
height: 30px;
background-color: #c8b6a6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
}
.navbar {
display: flex;
justify-content: space-around;
padding: 15px 0;
background-color: #c8b6a6;
}
.nav-icon {
font-size: 24px;
}
`}</style>
</div>
+10 -85
View File
@@ -1,105 +1,30 @@
// app/api/teams/[teamId]/route.js
// app/(main)/team/[teamId]/route.js
import { queryOne, query } from "../../../../lib/db";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../../../api/auth/[...nextauth]/route";
import { redirect } from "next/navigation";
export async function GET(request, context) {
const session = await getServerSession(authOptions);
if (!session) {
return new Response(JSON.stringify({ error: "Unauthorised" }), {
status: 401,
});
// Redirect to login page instead of returning JSON
return redirect("/login");
}
try {
const { teamId } = await context.params; // Await the params
const { teamId } = context.params;
// Convert teamId to number for proper comparison
const requestedTeamId = parseInt(teamId, 10);
const userTeamId = parseInt(session.user.teamId, 10);
// Instead of returning JSON, we should let the page component handle rendering
// This route.js file should only be used for API endpoints, not page rendering
// Log for debugging
console.log("Requested team:", requestedTeamId);
console.log("User team:", userTeamId);
console.log("User role:", session.user.role);
// Ensure the user is requesting their own team or is an admin
if (userTeamId !== requestedTeamId && session.user.role !== "admin") {
return new Response(
JSON.stringify({ error: "Not authorized to view this team" }),
{ status: 403 }
);
}
const team = await queryOne(
"SELECT id, name, code FROM teams WHERE id = ?",
[requestedTeamId]
);
if (!team) {
return new Response(JSON.stringify({ error: "Team not found" }), {
status: 404,
});
}
const members = await query(
"SELECT id, username FROM users WHERE team_id = ?",
[requestedTeamId]
);
return new Response(JSON.stringify({ team, members }), { status: 200 });
// Redirect to the page component
return redirect(`/team/${teamId}`);
} catch (error) {
console.error("Team fetch error:", error);
return new Response(
JSON.stringify({ error: "Failed to fetch team details" }),
{ status: 500 }
);
}
}
export async function PATCH(request, context) {
const session = await getServerSession(authOptions);
if (!session) {
return new Response(JSON.stringify({ error: "Unauthorised" }), {
status: 401,
});
}
try {
const { teamId } = await context.params; // Await the params
const requestedTeamId = parseInt(teamId, 10);
const { userId } = await request.json(); // Parse the request body
// Log for debugging
console.log("Requested team:", requestedTeamId);
console.log("User role:", session.user.role);
// Ensure the user is an admin or the user themselves
if (session.user.role !== "admin" && session.user.id !== userId) {
return new Response(
JSON.stringify({ error: "Not authorized to change this team" }),
{ status: 403 }
);
}
// Update the user's team
await queryOne("UPDATE users SET teamId = ? WHERE id = ?", [
requestedTeamId,
userId,
]);
// Update the session with the new teamId
session.user.teamId = requestedTeamId;
return new Response(
JSON.stringify({ success: "Team updated successfully" }),
{ status: 200 }
);
} catch (error) {
console.error("Team update error:", error);
return new Response(JSON.stringify({ error: "Failed to update team" }), {
status: 500,
});
}
}
+7 -1
View File
@@ -1,3 +1,4 @@
// app/api/teams/[teamId]/route.js
import { queryOne, query } from "../../../../lib/db";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../../auth/[...nextauth]/route";
@@ -35,7 +36,12 @@ export async function GET(request, { params }) {
[teamId]
);
return new Response(JSON.stringify({ team, members }), { status: 200 });
return new Response(JSON.stringify({ team, members }), {
status: 200,
headers: {
"Content-Type": "application/json",
},
});
} catch (error) {
console.error("Team fetch error:", error);
return new Response(