mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
fixed some styling with member list page
This commit is contained in:
bobbert committed
1 parent
593c51a883
commit
10c117e223
3 files changed
+599
-17
No files matched your search
@@ -0,0 +1,489 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { use } from "react"; // Add this import for React.use()
|
||||
|
||||
export default function TeamPage({ params }) {
|
||||
const { status, data: session } = useSession();
|
||||
const [team, setTeam] = useState(null);
|
||||
const [teamMembers, setTeamMembers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [huntActive, setHuntActive] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
// Unwrap the params Promise using React.use()
|
||||
const unwrappedParams = use(params);
|
||||
const teamId = unwrappedParams.teamId;
|
||||
|
||||
// Add a function to check if the hunt has been activated by admin
|
||||
const checkHuntStatus = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHuntActive(data.active || false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchTeamData = useCallback(async () => {
|
||||
try {
|
||||
if (!teamId || isNaN(parseInt(teamId, 10))) {
|
||||
throw new Error("Invalid team ID");
|
||||
}
|
||||
|
||||
console.log("Fetching team data for team ID:", teamId);
|
||||
|
||||
const response = await fetch(`/api/teams/${teamId}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
// Add cache: 'no-store' to prevent caching of team data
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text();
|
||||
let errorMessage;
|
||||
try {
|
||||
const errorData = JSON.parse(text);
|
||||
errorMessage = errorData.error || "Failed to fetch team data";
|
||||
} catch (unused) {
|
||||
errorMessage = `Failed to fetch team data: ${
|
||||
response.status
|
||||
} ${text.slice(0, 100)}`;
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Team data received:", data);
|
||||
|
||||
if (!data.team) {
|
||||
throw new Error("Team not found");
|
||||
}
|
||||
|
||||
setTeam(data.team);
|
||||
setTeamMembers(data.members || []);
|
||||
setError("");
|
||||
|
||||
// Check hunt status whenever we fetch team data
|
||||
await checkHuntStatus();
|
||||
} catch (err) {
|
||||
console.error("Team page error:", err);
|
||||
setError(err.message);
|
||||
// If we get a 401 error, redirect to login
|
||||
if (err.message.includes("401")) {
|
||||
router.push("/login");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [teamId, router, checkHuntStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
// Only attempt to fetch data when session is ready and we have a teamId
|
||||
if (status === "authenticated" && teamId) {
|
||||
console.log("Session authenticated, fetching team data");
|
||||
fetchTeamData();
|
||||
|
||||
// Set up an interval to refresh team data every 10 seconds
|
||||
const refreshInterval = setInterval(fetchTeamData, 10000);
|
||||
|
||||
// Clean up the interval when component unmounts
|
||||
return () => clearInterval(refreshInterval);
|
||||
} else if (status === "unauthenticated") {
|
||||
console.log("User not authenticated, redirecting to login");
|
||||
router.push("/login");
|
||||
}
|
||||
}, [teamId, status, fetchTeamData, router]);
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return (
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner"></div>
|
||||
<div className="loading-text">Loading team data...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="error-container">
|
||||
<div className="error-icon">⚠️</div>
|
||||
<div className="error-message">Error: {error}</div>
|
||||
<Link href="/team-selection">
|
||||
<button className="back-button">Back to Team Selection</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) {
|
||||
return (
|
||||
<div className="error-container">
|
||||
<div className="error-icon">🔍</div>
|
||||
<div className="error-message">Team not found</div>
|
||||
<Link href="/team-selection">
|
||||
<button className="back-button">Back to Team Selection</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="team-page">
|
||||
<div className="team-banner">
|
||||
<div className="team-info">
|
||||
<h1 className="team-name">Team Name: {team.name}</h1>
|
||||
<div className="team-code">{team.code}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="members-container">
|
||||
<h2 className="members-title">Team Members</h2>
|
||||
|
||||
{teamMembers.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="member-card">
|
||||
<div className="member-avatar">👤</div>
|
||||
<div className="member-details">
|
||||
<div className="member-name">
|
||||
{member.username}
|
||||
{member.id === session?.user?.id && " (You)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
|
||||
{/* Remove the add member button - it was here before */}
|
||||
</div>
|
||||
|
||||
<div className="team-actions">
|
||||
<button
|
||||
className="action-button leave-button"
|
||||
onClick={async () => {
|
||||
if (confirm("Are you sure you want to leave this team?")) {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/api/teams/${teamId}/leave`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
router.push("/team-selection");
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to leave team");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
Leave Team
|
||||
</button>
|
||||
|
||||
{/* New Start Hunt button with conditional behavior */}
|
||||
{session?.user?.role !== "admin" && (
|
||||
<button
|
||||
className="action-button start-button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (!huntActive) {
|
||||
// If hunt is not active, redirect to the "not started" page
|
||||
router.push(`/hunt-not-started?teamId=${teamId}`);
|
||||
} else {
|
||||
// If hunt is active, try to start the hunt
|
||||
const response = await fetch(
|
||||
`/api/teams/${teamId}/start-hunt`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
fetchTeamData();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to start hunt");
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Start Hunt
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Keep the admin start button which directly starts the hunt */}
|
||||
{session?.user?.role === "admin" && (
|
||||
<button
|
||||
className="action-button start-button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(
|
||||
`/api/teams/${teamId}/start-hunt`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
fetchTeamData();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to start hunt");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Start Hunt
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-bar">
|
||||
{/* Update the Home link to point to the current team page */}
|
||||
<Link href={`/${teamId}`} className="nav-item">
|
||||
<div className="nav-icon">🏠</div>
|
||||
<div className="nav-label">Home</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
<div className="nav-label">Stats</div>
|
||||
</Link>
|
||||
<Link href="/team-selection" className="nav-item active">
|
||||
<div className="nav-icon">👥</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>
|
||||
<Link href="/profile" className="nav-item">
|
||||
<div className="nav-icon">👤</div>
|
||||
<div className="nav-label">Profile</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.team-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.team-banner {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.add-member-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leave-button {
|
||||
background-color: #f6bd60;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.start-button {
|
||||
background-color: #588157;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #68543c;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.loading-container,
|
||||
.error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #68543c;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-bottom: 20px;
|
||||
color: #d32f2f;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HuntNotStarted() {
|
||||
const [countdown, setCountdown] = useState(10);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const teamId = searchParams.get("teamId");
|
||||
|
||||
useEffect(() => {
|
||||
// Countdown timer
|
||||
if (countdown > 0) {
|
||||
const timer = setTimeout(() => {
|
||||
setCountdown(countdown - 1);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
// Redirect back to team page when countdown reaches 0
|
||||
if (teamId) {
|
||||
router.push(`/${teamId}`);
|
||||
} else {
|
||||
router.push("/team-selection");
|
||||
}
|
||||
}
|
||||
}, [countdown, router, teamId]);
|
||||
|
||||
return (
|
||||
<div className="hunt-not-started">
|
||||
<div className="message-container">
|
||||
<div className="message-icon">⏳</div>
|
||||
<h1 className="message-title">Hunt Not Started Yet</h1>
|
||||
<p className="message-text">
|
||||
The treasure hunt has not been activated by an administrator yet.
|
||||
Please check back later or contact an admin to start the hunt.
|
||||
</p>
|
||||
<p className="countdown">Redirecting back in {countdown} seconds...</p>
|
||||
<Link href={teamId ? `/${teamId}` : "/team-selection"}>
|
||||
<button className="back-button">Return Now</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.hunt-not-started {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: #68543c;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
color: #555;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-weight: bold;
|
||||
color: #68543c;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #53402d;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -132,12 +132,9 @@ export default function TeamPage({ params }) {
|
||||
return (
|
||||
<div className="team-page">
|
||||
<div className="team-banner">
|
||||
<Link href="/team-selection" className="back-button">
|
||||
←
|
||||
</Link>
|
||||
<div className="team-info">
|
||||
<h1 className="team-name">{team.name}</h1>
|
||||
<div className="team-code">Team Code: {team.code}</div>
|
||||
<h1 className="team-name">Team Name: {team.name}</h1>
|
||||
<div className="team-code">{team.code}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -299,17 +296,11 @@ export default function TeamPage({ params }) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
@@ -319,9 +310,9 @@ export default function TeamPage({ params }) {
|
||||
}
|
||||
|
||||
.team-code {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
|
||||
Reference in new issue
Block a user