mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
fixed a bit
This commit is contained in:
bobbert committed
1 parent
e9d831c0a2
commit
9326f2845e
8 files changed
+990
-584
No files matched your search
+183
-104
@@ -1,118 +1,197 @@
|
||||
'use client'; // Mark as a Client Component
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
const styles = {
|
||||
navbar: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
backgroundColor: "#fff",
|
||||
borderTop: "1px solid #ccc",
|
||||
padding: "10px 0",
|
||||
textAlign: "center",
|
||||
},
|
||||
};
|
||||
|
||||
export default function CreateTeam() {
|
||||
const { data: session, status } = useSession();
|
||||
const [teamName, setTeamName] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { data: session, status } = useSession();
|
||||
const [teamName, setTeamName] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
// Use useEffect for navigation instead of doing it in render
|
||||
useEffect(() => {
|
||||
// Redirect if not authenticated
|
||||
if (status === 'unauthenticated') {
|
||||
router.push('/login');
|
||||
}
|
||||
if (status === "loading") {
|
||||
return <div className="loading">Loading...</div>;
|
||||
}
|
||||
|
||||
// Redirect if user is admin
|
||||
if (status === 'authenticated' && session?.user?.role === 'admin') {
|
||||
router.push('/admin');
|
||||
}
|
||||
}, [status, session, router]);
|
||||
if (!session || status === "unauthenticated") {
|
||||
router.replace("/login");
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleCreateTeam = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
if (session?.user?.role === "admin") {
|
||||
router.replace("/admin");
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/teams/create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: teamName,
|
||||
userId: session.user.id
|
||||
}),
|
||||
});
|
||||
const handleCreateTeam = async (e) => {
|
||||
e.preventDefault();
|
||||
if (isLoading || !teamName.trim()) return;
|
||||
|
||||
const result = await response.json();
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch("/api/teams/create", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: teamName,
|
||||
userId: session.user.id,
|
||||
}),
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
router.push(`/team/${result.teamId}`);
|
||||
} else {
|
||||
setError(result.error || 'Failed to create team');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('An unexpected error occurred');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
// Update the user's session with the new teamId
|
||||
await fetch("/api/auth/session", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
teamId: result.teamId,
|
||||
}),
|
||||
});
|
||||
|
||||
if (status === 'loading') {
|
||||
return <div className="loading">Loading...</div>;
|
||||
router.push(`/team/${result.teamId}`);
|
||||
} else {
|
||||
setError(result.error || "Failed to create team");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Team creation error:", err);
|
||||
setError("An unexpected error occurred");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Don't render anything if redirecting
|
||||
if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="page-header">
|
||||
<div className="back-button"></div>
|
||||
<div className="page-title">Create Team</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="team-selection-container">
|
||||
<div className="page-header">
|
||||
<div className="page-title">Create Team</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="team-selection-card">
|
||||
<h1>Create a New Team</h1>
|
||||
<form onSubmit={handleCreateTeam}>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Team Name"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
required
|
||||
className="team-input"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="team-button"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? 'Creating...' : 'Create Team'}
|
||||
</button>
|
||||
</form>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<div className="team-options">
|
||||
<Link href="/team-selection" className="create-team-link">Back to Team Selection</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-bar ">
|
||||
<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 className="auth-container">
|
||||
<div className="auth-card">
|
||||
<h1>Create a New Team</h1>
|
||||
<form onSubmit={handleCreateTeam}>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Team Name"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="auth-button" disabled={isLoading}>
|
||||
{isLoading ? "Creating..." : "Create Team"}
|
||||
</button>
|
||||
</form>
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
<div className="team-options">
|
||||
<Link href="/team-selection">
|
||||
<button className="auth-button">Back to Team Selection</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="nav-bar" style={styles.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>{`
|
||||
.auth-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.auth-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #68543c; /* Updated brown color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user