Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: tournament registration frontend #146

Merged
merged 2 commits into from
Dec 19, 2024
Merged

fix: tournament registration frontend #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4c51cb
fix: tournament registration frontend
Abhi-m-anue Dec 19, 2024
1f073e8
remove redundant tournament-registration endpoint
Abhi-m-anue Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 0 additions & 55 deletions app/api/register/[tournamentId]/route.js
View file
Open in desktop

This file was deleted.

74 changes: 33 additions & 41 deletions app/tournaments/[id]/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useToast } from "@/components/ui/use-toast";
import TournamentBracket from "@/components/TournamentBracket";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
// import { useRouter } from "next/navigation";
import { useToast } from "../../../@/components/ui/use-toast";
import TournamentBracket from "../../../components/TournamentBracket";
import { Button } from "../../../@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "../../../@/components/ui/card";
import { motion, AnimatePresence } from "framer-motion";
import { fetchTournamentData, registerForTournament } from "@/lib/api/tournament";
import { fetchTournamentData, registerForTournament } from "../../../lib/api/tournament";
import { Loader2 } from "lucide-react";

export default function TournamentPage({ params }) {
const [tournament, setTournament] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [registering, setRegistering] = useState(false);
const router = useRouter();
// const [registering, setRegistering] = useState(false);
// const router = useRouter();
const { toast } = useToast();

useEffect(() => {
Expand All @@ -40,25 +40,25 @@ export default function TournamentPage({ params }) {
}
};

const handleRegister = async () => {
try {
setRegistering(true);
await registerForTournament(params.id);
toast({
title: "Success",
description: "Successfully registered for tournament"
});
router.refresh();
} catch (err) {
toast({
variant: "destructive",
title: "Error",
description: err.message || "Failed to register for tournament"
});
} finally {
setRegistering(false);
}
};
// const handleRegister = async () => {
// try {
// setRegistering(true);
// await registerForTournament(params.id);
// toast({
// title: "Success",
// description: "Successfully registered for tournament"
// });
// router.refresh();
// } catch (err) {
// toast({
// variant: "destructive",
// title: "Error",
// description: err.message || "Failed to register for tournament"
// });
// } finally {
// setRegistering(false);
// }
// };

if (loading) {
return (
Expand Down Expand Up @@ -114,17 +114,9 @@ export default function TournamentPage({ params }) {
>
<Button
size="lg"
onClick={handleRegister}
disabled={registering}
asChild
>
{registering ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Registering...
</>
) : (
'Register Now'
)}
<Link href={`/tournaments/${tournament._id}/register`}>Register Now</Link>
</Button>
<Button size="lg" variant="outline">
View Details
Expand Down Expand Up @@ -176,7 +168,7 @@ export default function TournamentPage({ params }) {
<CardContent>
<TournamentBracket
matches={tournament.matches}
roundNames={roundNames}
roundNames={tournament.roundNames}
/>
</CardContent>
</Card>
Expand All @@ -189,7 +181,7 @@ export default function TournamentPage({ params }) {
</CardHeader>
<CardContent>
<ul className="list-disc list-inside space-y-2 text-muted-foreground">
{tournament.rules.map((rule, index) => (
{tournament?.rules?.map((rule, index) => (
<li key={index}>{rule}</li>
))}
</ul>
Expand All @@ -202,7 +194,7 @@ export default function TournamentPage({ params }) {
</CardHeader>
<CardContent>
<div className="space-y-4">
{tournament.schedule.map((event, index) => (
{tournament && tournament?.schedule?.map((event, index) => (
<div key={index} className="flex justify-between items-center">
<span className="text-muted-foreground">{event.stage}</span>
<span className="text-primary">{event.date}</span>
Expand Down
139 changes: 82 additions & 57 deletions app/tournaments/[id]/register/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,80 @@
"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import { useRouter } from "next/navigation";

export default function RegisterPage() {
const [teamName, setTeamName] = useState("");
const [members, setMembers] = useState("");
const [email, setEmail] = useState("");
const [selectedPlatform, setSelectedPlatform] = useState("");
const [participantType, setParticipantType] = useState("");
const [isLoading, setIsLoading] = useState(false);
import { useRouter } from "next/navigation";

export default function RegisterPage({ params }) {
const { register, handleSubmit, formState: { errors } } = useForm();
const router = useRouter();
const { id: tournamentId } = router.query;

const handleSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
const onSubmit = async (data) => {
console.log(data)

// modify members string to desired format
const membersString = data.members;
const membersArray = membersString.split(",");
data = { ...data, members : membersArray };
console.log(data)

try {
const response = await axios.post(`/api/register/${tournamentId}`, {
teamName,
members,
email,
selectedPlatform,
participantType,
});
const response = await axios.post(`/api/tournaments/${params.id}/registration`, data);

if (response.status === 201) {
alert("Registration successful!");
router.push(`/tournament/${tournamentId}`);
if (response.status === 200) {
// toast({
// title: "Success",
// description: "Registration successful!",
// variant: "success",
// });
alert("Registration successful")
router.push(`/tournaments/${params.id}`);
} else {
// toast({
// title: "Error",
// description: "Registration failed. Please try again.",
// variant: "destructive",
// });
alert("Registration failed. Please try again.");
}
} catch (error) {
console.error("Registration error:", error);
// toast({
// title: "Error",
// description: "An error occurred. Please try again.",
// variant: "destructive",
// });
alert("Registration failed. Please try again.");
} finally {
setIsLoading(false);
}
};

if (!params.id) {
return <p>Loading...</p>;
}

return (
<div className="min-h-screen flex items-center justify-center bg-gray-900">
<div className="max-w-lg w-full bg-gray-800 p-8 rounded-lg shadow-lg">
<h1 className="text-4xl font-bold text-white mb-8 text-center">
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-black via-gray-800 to-black">
<div className="max-w-xl w-full p-8 rounded-lg text-white">
<h1 className="text-4xl font-bold text-white mb-6 text-center">
Register for Tournament
</h1>
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div>
<label
htmlFor="teamName"
htmlFor="name"
className="block text-gray-300 text-sm font-semibold mb-2"
>
Team Name
</label>
<input
{...register("name", { required: "Team name is required" })}
id="name"
type="text"
id="teamName"
value={teamName}
onChange={(e) => setTeamName(e.target.value)}
className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your team name"
required
/>
{errors.name && (
<p className="text-red-500 text-xs mt-1">{errors.name.message}</p>
)}
</div>
<div>
<label
Expand All @@ -73,14 +84,21 @@ export default function RegisterPage() {
Team Members (Comma-separated)
</label>
<input
type="text"
{...register("members", {
required: "Members are required",
pattern: {
value: /^[a-zA-Z]+(,[a-zA-Z]+)*$/,
message: "Enter names separated by commas only (e.g., John,Jane,Joe)",
},
})}
id="members"
value={members}
onChange={(e) => setMembers(e.target.value)}
className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter team members"
required
/>
{errors.members && (
<p className="text-red-500 text-xs mt-1">{errors.members.message}</p>
)}
</div>
<div>
<label
Expand All @@ -90,14 +108,18 @@ export default function RegisterPage() {
Email
</label>
<input
type="email"
{...register("email", {
required: "Email is required",
pattern: { value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: "Enter a valid email" }
})}
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your email"
required
/>
{errors.email && (
<p className="text-red-500 text-xs mt-1">{errors.email.message}</p>
)}
</div>
<div>
<label
Expand All @@ -107,13 +129,15 @@ export default function RegisterPage() {
Selected Platform
</label>
<input
type="text"
{...register("selectedPlatform", { required: "Platform is required" })}
id="selectedPlatform"
value={selectedPlatform}
onChange={(e) => setSelectedPlatform(e.target.value)}
className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter the platform (e.g., PC, Console)"
/>
{errors.selectedPlatform && (
<p className="text-red-500 text-xs mt-1">{errors.selectedPlatform.message}</p>
)}
</div>
<div>
<label
Expand All @@ -123,20 +147,21 @@ export default function RegisterPage() {
Participant Type
</label>
<input
type="text"
{...register("participantType", { required: "Participant type is required" })}
id="participantType"
value={participantType}
onChange={(e) => setParticipantType(e.target.value)}
className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
className="w-full p-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter the participant type (e.g., Player, Coach)"
/>
{errors.participantType && (
<p className="text-red-500 text-xs mt-1">{errors.participantType.message}</p>
)}
</div>
<button
type="submit"
className="w-full bg-blue-600 text-white p-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-500"
disabled={isLoading}
className="w-full bg-blue-600 text-white p-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{isLoading ? "Registering..." : "Register"}
Register
</button>
</form>
</div>
Expand Down
Loading