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

Registration btn disable for past dates #55

Merged
merged 2 commits into from
Oct 9, 2024
Merged

Registration btn disable for past dates #55

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
61918e6
registration button disable
RchtDshr Oct 8, 2024
94a54e7
add events block past dates
RchtDshr Oct 8, 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
14 changes: 0 additions & 14 deletions .env.example
View file
Open in desktop

This file was deleted.

22 changes: 22 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

105 changes: 60 additions & 45 deletions src/app/(event)/add-event/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@ export default function AddEvent() {
formState: { errors },
} = useForm();

const [minDate, setMinDate] = useState("");
useEffect(() => {
// Get the current date and time
const now = new Date();
const isoDate = now.toISOString().slice(0, 16); // Format as 'YYYY-MM-DDTHH:MM'

setMinDate(isoDate); // Set the minimum date and time to the current time
}, []);

useEffect(() => {
userDetails()
.then((res: any) => {
Expand Down Expand Up @@ -198,51 +207,57 @@ export default function AddEvent() {
/>
</div>

<div className="flex flex-col w-full gap-2">
<label htmlFor="event_registration_startdate">
Event Registration Start Date:{" "}
</label>
<input
type="datetime-local"
placeholder="event_registration_startdate"
{...register("event_registration_startdate", {
required: true,
})}
className="w-full p-2 text-white bg-black border border-white rounded-md"
/>
</div>

<div className="flex flex-col w-full gap-2">
<label htmlFor="event_registration_enddate">
Event Registration End Date:{" "}
</label>
<input
type="datetime-local"
placeholder="event_registration_enddate"
{...register("event_registration_enddate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
/>
</div>

<div className="flex flex-col w-full gap-2">
<label htmlFor="event_startdate">Event Start Date: </label>
<input
type="datetime-local"
placeholder="event_startdate"
{...register("event_startdate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
/>
</div>

<div className="flex flex-col w-full gap-2">
<label htmlFor="event_enddate">Event End Date: </label>
<input
type="datetime-local"
placeholder="event_enddate"
{...register("event_enddate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
/>
</div>
{/* Event Registration Start Date */}
<div className="flex flex-col w-full gap-2">
<label htmlFor="event_registration_startdate">
Event Registration Start Date:{" "}
</label>
<input
type="datetime-local"
placeholder="event_registration_startdate"
{...register("event_registration_startdate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
min={minDate} // Set minimum date to current date and time
/>
</div>

{/* Event Registration End Date */}
<div className="flex flex-col w-full gap-2">
<label htmlFor="event_registration_enddate">
Event Registration End Date:{" "}
</label>
<input
type="datetime-local"
placeholder="event_registration_enddate"
{...register("event_registration_enddate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
min={minDate} // Set minimum date to current date and time
/>
</div>

{/* Event Start Date */}
<div className="flex flex-col w-full gap-2">
<label htmlFor="event_startdate">Event Start Date: </label>
<input
type="datetime-local"
placeholder="event_startdate"
{...register("event_startdate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
min={minDate} // Set minimum date to current date and time
/>
</div>

{/* Event End Date */}
<div className="flex flex-col w-full gap-2">
<label htmlFor="event_enddate">Event End Date: </label>
<input
type="datetime-local"
placeholder="event_enddate"
{...register("event_enddate", { required: true })}
className="w-full p-2 text-white bg-black border border-white rounded-md"
min={minDate} // Set minimum date to current date and time
/>
</div>

<div className="flex flex-col w-full gap-2">
<label htmlFor="event_duration">Event Duration(In hours): </label>
Expand Down
23 changes: 19 additions & 4 deletions src/components/EventPageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {
const [eventData, setEventData]: any = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [userData, setUserData]: any = useState([]);
const [registrationClosed, setRegistrationClosed] = useState(false); // New state

useEffect(() => {
async function getData() {
Expand All @@ -38,6 +39,7 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {
console.error("Error fetching event details:", error);
} else {
setEventData(data);
checkRegistrationStatus(data); // Check registration dates
}
setIsLoading(false);
}
Expand All @@ -52,6 +54,17 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {
});
}, []);

// Function to check if registration period has ended
const checkRegistrationStatus = (data: any) => {
const currentDate = new Date();
const registrationStartDate = new Date(data[0].event_registration_startdate);
const registrationEndDate = new Date(data[0].event_registration_enddate);

if (currentDate < registrationStartDate || currentDate > registrationEndDate) {
setRegistrationClosed(true); // Set registration closed if outside the valid period
}
};

async function isUser() {
if (!isAuthenticated) {
router.push("/unauthorized");
Expand Down Expand Up @@ -83,7 +96,7 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {

return (
<>
<div className=" w-full h-auto bg-black text-white py-[5rem] md:py-[8rem] px-[1rem] md:px-[2rem]">
<div className="w-full h-auto bg-black text-white py-[5rem] md:py-[8rem] px-[1rem] md:px-[2rem]">
{eventData.map((event: any) => (
<div
className="flex flex-wrap justify-center items-center"
Expand Down Expand Up @@ -177,10 +190,12 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {
<Button
variant="outline"
className="w-full"
disabled={isRegistered}
disabled={registrationClosed || isRegistered} // Button disabled if registration is closed
onClick={isUser}
>
{isRegistered
{registrationClosed
? "Registration Closed"
: isRegistered
? "Registered Waiting For Approval"
: "Register Now"}
</Button>
Expand All @@ -190,7 +205,7 @@ const EventPageClient = ({ eventsId }: { eventsId: string }) => {
<>
<Link href={`${event.event_formlink}`}>
<Button variant="outline" className="w-full">
Actual For Link
Actual Form Link
</Button>
</Link>
</>
Expand Down