diff --git a/components/DrawerComp.tsx b/components/DrawerComp.tsx index b4ad2bbe..8e7d4375 100644 --- a/components/DrawerComp.tsx +++ b/components/DrawerComp.tsx @@ -79,6 +79,9 @@ const DrawerComp: React.FC = ({ isOpen, toggleDrawer }) => { {isAuth && user ? ( + toggleDrawer(false)} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> + + {user.role === 'admin' ? ( toggleDrawer(false)} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> diff --git a/components/Navbar.tsx b/components/Navbar.tsx index d4df35aa..51a52a32 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -35,13 +35,18 @@ export default function Navbar() { setAnchorElUser(null); }; + const handleProfileClick = () => { + router.push('/profile'); + toggleDrawer(false); + }; + const handleSignOut = () => { localStorage.removeItem('token'); window.dispatchEvent(new CustomEvent('auth-change')); router.push('/auth/sign-in'); }; - const handleProfileClick = () => { + const handleAccountClick = () => { if (user?.role === 'admin') { router.push('/admin'); } else if (user?.role === 'creator') { @@ -123,8 +128,13 @@ export default function Navbar() { onClose={handleCloseUserMenu} disableScrollLock > - {isAuth && user && (user.role === "admin" || user.role === "creator") && ( + {isAuth && user && ( { handleProfileClick(); handleCloseUserMenu(); }}> + Profile + + )} + {isAuth && user && (user.role === "admin" || user.role === "creator") && ( + { handleAccountClick(); handleCloseUserMenu(); }}> My Account )} diff --git a/hooks/useEventForm.tsx b/hooks/useEventForm.tsx index 6175ff29..d96f1fe7 100644 --- a/hooks/useEventForm.tsx +++ b/hooks/useEventForm.tsx @@ -1,12 +1,13 @@ -import { ChangeEventHandler, FormEvent, useState } from "react"; +import {ChangeEventHandler, FormEvent, useEffect, useState} from "react"; import { validateFormData } from "@/utility/validateFormData"; import { Activity, FormErrors } from "@/models/activity"; import useDateTimeSelection from "./useDateTimeSelection"; import { ActivityDatabase } from "@/models/activityDatabase"; import { useQueryClient } from "@tanstack/react-query"; +import { useRouter } from 'next/navigation'; export const useEventForm = (initialData: Activity | ActivityDatabase) => { - + const router = useRouter(); const [eventData, setEventData] = useState(initialData); const [errors, setErrors] = useState({ eventTitle: "", @@ -37,7 +38,7 @@ export const useEventForm = (initialData: Activity | ActivityDatabase) => { eventCapacity: "" }); const [selectedDate, setSelectedDate] = useState(null); - + const [fixingErrors, setFixingErrors] = useState(false); // success/error messages for event creation const [successMessage, setSuccessMessage] = useState(""); const [errorMessage, setErrorMessage] = useState(""); @@ -53,6 +54,13 @@ export const useEventForm = (initialData: Activity | ActivityDatabase) => { handleEndTimeChange, } = useDateTimeSelection("10:00", "11:00"); + useEffect(() => { + if (fixingErrors) { + const newErrors = validateFormData(eventData); + setErrors(newErrors); + } + }, [eventData]); + const handleInputChange: ChangeEventHandler = ({ target, }) => { @@ -61,7 +69,6 @@ export const useEventForm = (initialData: Activity | ActivityDatabase) => { ...prevEventData, [name]: value, })); - }; // handling changes to the social media fields @@ -113,7 +120,9 @@ export const useEventForm = (initialData: Activity | ActivityDatabase) => { e.preventDefault(); console.log("Event Data: ", eventData); const newErrors = validateFormData(eventData); - if (Object.keys(newErrors).length > 0) { + const numNewErrors = Object.keys(newErrors).length; + setFixingErrors(numNewErrors > 0); + if (numNewErrors > 0) { setErrors(newErrors); } else { createActivity(eventData as Activity); @@ -158,7 +167,9 @@ export const useEventForm = (initialData: Activity | ActivityDatabase) => { await queryClient.refetchQueries({queryKey:['events', 'myEvents', 'archivedEvents']}); setSuccessMessage(data.message || "Event successfully created!"); setErrorMessage(""); - // todo: navigate to a success page and clear form + setTimeout(() => { + router.push(`/event-detail?id=${data.activity._id}`) + }, 1200); } else { console.log("Failed to create activity:", response.status); throw new Error(data.message || "Failed to create the event."); diff --git a/utility/validateFormData.tsx b/utility/validateFormData.tsx index 17bc70db..e0723dd6 100644 --- a/utility/validateFormData.tsx +++ b/utility/validateFormData.tsx @@ -60,21 +60,13 @@ export const validateFormData = (data: Activity | ActivityDatabase): FormErrors }; } // todo: add more error validation rules - if (data.eventCoverPhoto || !data.eventCoverPhoto) { - try { - new URL(data.eventCoverPhoto); - } catch { + const urlPattern = /^(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})(?:[/?].*)?$/; + if (!data.eventCoverPhoto || !urlPattern.test(data.eventCoverPhoto)) { newErrors = { ...newErrors, eventCoverPhoto: "Event cover photo needs to be a valid URL" }; - } } - - if (data.eventMeetingURL || !data.eventMeetingURL) { - try { - new URL(data.eventMeetingURL); - } catch { - newErrors = { ...newErrors, eventMeetingURL: "Event meeting URL needs to be a valid URL" }; + if (!data.eventMeetingURL || !urlPattern.test(data.eventMeetingURL)) { + newErrors = { ...newErrors, eventMeetingURL: "Event meeting URL needs to be a valid URL" }; } - } // Overrides previous eventCapacity error check if (data.eventCapacity && isNaN(data.eventCapacity) || data.eventCapacity < 1) {