import React, { useState, useEffect, useCallback, useMemo } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth'; import { getFirestore, doc, setDoc, onSnapshot, collection, query } from 'firebase/firestore'; // Define the event data based on the provided PDF content const eventsData = [ { date: "Wed Nov 12", team: "Basketball (B-6th)", event: "Parchment Middle School", startTime: "4:00 PM" }, { date: "Wed Nov 19", team: "Basketball (B-6th)", event: "Schoolcraft Middle School", startTime: "4:00 PM" }, { date: "Tue Nov 25", team: "Basketball (B-6th)", event: "St Augustine", startTime: "4:00 PM" }, { date: "Mon Dec 8", team: "Basketball (B-6th)", event: "Lawton Middle School", startTime: "4:00 PM" }, { date: "Wed Dec 10", team: "Basketball (B-6th)", event: "Martin High School", startTime: "4:00 PM" }, { date: "Wed Nov 12", team: "Basketball (B-7th)", event: "Parchment Middle School", startTime: "5:00 PM" }, { date: "Wed Nov 19", team: "Basketball (B-7th)", event: "Schoolcraft Middle School", startTime: "5:00 PM" }, { date: "Tue Nov 25", team: "Basketball (B-7th)", event: "St Augustine", startTime: "5:00 PM" }, { date: "Mon Dec 8", team: "Basketball (B-7th)", event: "Lawton Middle School", startTime: "5:00 PM" }, { date: "Wed Dec 10", team: "Basketball (B-7th)", event: "Martin High School", startTime: "5:00 PM" }, { date: "Thu Dec 11", team: "Basketball (B-7th)", event: "Galesburg-Augusta Middle School", startTime: "4:15 PM" }, { date: "Wed Nov 12", team: "Basketball (B-8th)", event: "Parchment Middle School", startTime: "6:00 PM" }, { date: "Wed Nov 19", team: "Basketball (B-8th)", event: "Schoolcraft Middle School", startTime: "6:00 PM" }, { date: "Tue Nov 25", team: "Basketball (B-8th)", event: "St Augustine", startTime: "6:00 PM" }, { date: "Mon Dec 8", team: "Basketball (B-8th)", event: "Lawton Middle School", startTime: "6:00 PM" }, { date: "Wed Dec 10", team: "Basketball (B-8th)", event: "Martin High School", startTime: "6:00 PM" }, { date: "Thu Dec 11", team: "Basketball (B-8th)", event: "Galesburg-Augusta Middle School", startTime: "5:15 PM" }, { date: "Tue Dec 2", team: "Basketball (B-JV)", event: "Bloomingdale High School", startTime: "5:30 PM" }, { date: "Thu Dec 4", team: "Basketball (B-JV)", event: "Black River Public School", startTime: "5:30 PM" }, { date: "Tue Dec 9", team: "Basketball (B-JV)", event: "Bridgman High School", startTime: "5:30 PM" }, { date: "Tue Dec 16", team: "Basketball (B-JV)", event: "Watervliet Senior High School", startTime: "5:30 PM" }, { date: "Thu Dec 18", team: "Basketball (B-JV)", event: "Saugatuck High School", startTime: "7:00 PM" }, { date: "Thu Jan 29", team: "Basketball (B-JV)", event: "Gobles MS/HS School", startTime: "7:00 PM" }, { date: "Tue Feb 3", team: "Basketball (B-JV)", event: "Maple Valley Jr/Sr High School", startTime: "5:30 PM" }, { date: "Tue Feb 10", team: "Basketball (B-JV)", event: "Fennville Public High School", startTime: "5:30 PM" }, { date: "Thu Feb 12", team: "Basketball (B-JV)", event: "Martin High School", startTime: "7:00 PM" }, { date: "Tue Feb 17", team: "Basketball (B-JV)", event: "Allegan High School", startTime: "5:30 PM" }, { date: "Thu Feb 19", team: "Basketball (B-JV)", event: "Galesburg-Augusta High School", startTime: "7:00 PM" }, { date: "Tue Dec 2", team: "Basketball (B-V)", event: "Bloomingdale High School", startTime: "7:00 PM" }, { date: "Thu Dec 4", team: "Basketball (B-V)", event: "Black River Public School", startTime: "7:00 PM" }, { date: "Tue Dec 9", team: "Basketball (B-V)", event: "Bridgman High School", startTime: "7:00 PM" }, { date: "Fri Dec 12", team: "Basketball (B-V)", event: "Gobles MS/HS School", startTime: "7:30 PM" }, { date: "Tue Dec 16", team: "Basketball (B-V)", event: "Watervliet Senior High School", startTime: "7:00 PM" }, { date: "Fri Jan 9", team: "Basketball (B-V)", event: "Martin High School", startTime: "7:30 PM" }, { date: "Fri Jan 16", team: "Basketball (B-V)", event: "Galesburg-Augusta High School", startTime: "7:30 PM" }, { date: "Tue Feb 3", team: "Basketball (B-V)", event: "Maple Valley Jr/Sr High School", startTime: "7:00 PM" }, { date: "Fri Feb 6", team: "Basketball (B-V)", event: "Saugatuck High School", startTime: "7:30 PM" }, { date: "Tue Feb 10", team: "Basketball (B-V)", event: "Fennville Public High School", startTime: "7:00 PM" }, { date: "Tue Feb 17", team: "Basketball (B-V)", event: "Allegan High School", startTime: "7:00 PM" }, { date: "Wed Jan 21", team: "Basketball (G-6th)", event: "Parchment Middle School", startTime: "4:00 PM" }, { date: "Wed Jan 28", team: "Basketball (G-6th)", event: "Schoolcraft Middle School", startTime: "4:00 PM" }, { date: "Wed Feb 4", team: "Basketball (G-6th)", event: "St Augustine", startTime: "4:00 PM" }, { date: "Mon Feb 16", team: "Basketball (G-6th)", event: "Lawton Middle School", startTime: "4:00 PM" }, { date: "Wed Feb 18", team: "Basketball (G-6th)", event: "Martin High School", startTime: "4:00 PM" }, { date: "Wed Jan 21", team: "Basketball (G-7th)", event: "Parchment Middle School", startTime: "5:00 PM" }, { date: "Wed Jan 28", team: "Basketball (G-7th)", event: "Schoolcraft Middle School", startTime: "5:00 PM" }, { date: "Wed Feb 4", team: "Basketball (G-7th)", event: "St Augustine", startTime: "5:00 PM" }, { date: "Mon Feb 16", team: "Basketball (G-7th)", event: "Lawton Middle School", startTime: "5:00 PM" }, { date: "Wed Feb 18", team: "Basketball (G-7th)", event: "Martin High School", startTime: "5:00 PM" }, { date: "Thu Feb 19", team: "Basketball (G-7th)", event: "Galesburg-Augusta Middle School", startTime: "4:15 PM" }, { date: "Wed Jan 21", team: "Basketball (G-8th)", event: "Parchment Middle School", startTime: "6:00 PM" }, { date: "Wed Jan 28", team: "Basketball (G-8th)", event: "Schoolcraft Middle School", startTime: "6:00 PM" }, { date: "Wed Feb 4", team: "Basketball (G-8th)", event: "St Augustine", startTime: "6:00 PM" }, { date: "Mon Feb 16", team: "Basketball (G-8th)", event: "Lawton Middle School", startTime: "6:00 PM" }, { date: "Wed Feb 18", team: "Basketball (G-8th)", event: "Martin High School", startTime: "6:00 PM" }, { date: "Thu Feb 19", team: "Basketball (G-8th)", event: "Galesburg-Augusta Middle School", startTime: "6:00 PM" }, { date: "Thu Dec 18", team: "Basketball (G-JV)", event: "Saugatuck High School", startTime: "5:30 PM" }, { date: "Tue Jan 6", team: "Basketball (G-JV)", event: "Constantine High School", startTime: "5:30 PM" }, { date: "Tue Jan 20", team: "Basketball (G-JV)", event: "Bridgman High School", startTime: "5:30 PM" }, { date: "Mon Jan 26", team: "Basketball (G-JV)", event: "Maple Valley Jr/Sr High School", startTime: "5:30 PM" }, { date: "Tue Jan 27", team: "Basketball (G-JV)", event: "Parchment High School", startTime: "5:30 PM" }, { date: "Thu Jan 29", team: "Basketball (G-JV)", event: "Gobles MS/HS School", startTime: "5:30 PM" }, { date: "Thu Feb 12", team: "Basketball (G-JV)", event: "Martin High School", startTime: "5:30 PM" }, { date: "Mon Feb 16", team: "Basketball (G-JV)", event: "Lakewood High School", startTime: "5:30 PM" }, { date: "Thu Feb 19", team: "Basketball (G-JV)", event: "Galesburg-Augusta High School", startTime: "5:30 PM" }, { date: "Tue Feb 24", team: "Basketball (G-JV)", event: "Black River Public School", startTime: "5:30 PM" }, { date: "Fri Dec 12", team: "Basketball (G-V)", event: "Gobles MS/HS School", startTime: "6:00 PM" }, { date: "Tue Jan 6", team: "Basketball (G-V)", event: "Constantine High School", startTime: "7:00 PM" }, { date: "Fri Jan 9", team: "Basketball (G-V)", event: "Martin High School", startTime: "6:00 PM" }, { date: "Fri Jan 16", team: "Basketball (G-V)", event: "Galesburg-Augusta High School", startTime: "6:00 PM" }, { date: "Tue Jan 20", team: "Basketball (G-V)", event: "Bridgman High School", startTime: "7:00 PM" }, { date: "Mon Jan 26", team: "Basketball (G-V)", event: "Maple Valley Jr/Sr High School", startTime: "7:00 PM" }, { date: "Tue Jan 27", team: "Basketball (G-V)", event: "Parchment High School", startTime: "7:00 PM" }, { date: "Fri Feb 6", team: "Basketball (G-V)", event: "Saugatuck High School", startTime: "6:00 PM" }, { date: "Mon Feb 16", team: "Basketball (G-V)", event: "Lakewood High School", startTime: "7:00 PM" }, { date: "Tue Feb 24", team: "Basketball (G-V)", event: "Black River Public School", startTime: "7:00 PM" }, { date: "Tue Nov 18", team: "Competitive Cheer (G-MS)", event: "SAC Jamboree #2", startTime: "6:00 PM" }, { date: "Thu Jan 22", team: "Competitive Cheer (G-V)", event: "SAC Jamboree #3", startTime: "6:00 PM" }, { date: "Thu Sep 4", team: "Football (JV)", event: "Allegan High School", startTime: "6:00 PM" }, { date: "Thu Oct 2", team: "Football (JV)", event: "Coloma High School", startTime: "6:00 PM" }, { date: "Thu Oct 16", team: "Football (JV)", event: "Schoolcraft High School", startTime: "6:00 PM" }, { date: "Thu Oct 23", team: "Football (JV)", event: "Parchment High School", startTime: "6:00 PM" }, { date: "Wed Sep 10", team: "Football (MS)", event: "Parchment Middle School", startTime: "5:00 PM" }, { date: "Wed Sep 17", team: "Football (MS)", event: "Galesburg-Augusta Middle School", startTime: "5:00 PM" }, { date: "Wed Oct 8", team: "Football (MS)", event: "Schoolcraft Middle School", startTime: "5:00 PM" }, { date: "Thu Aug 28", team: "Football (V)", event: "Constantine High School", startTime: "7:00 PM" }, { date: "Fri Sep 12", team: "Football (V)", event: "Watervliet Senior High School", startTime: "7:00 PM" }, { date: "Fri Sep 19", team: "Football (V)", event: "Lawton High School", startTime: "7:00 PM" }, { date: "Fri Sep 26", team: "Football (V)", event: "Saugatuck High School", startTime: "7:00 PM" }, { date: "Fri Oct 10", team: "Football (V)", event: "Galesburg-Augusta High School", startTime: "7:00 PM" }, { date: "Mon Aug 18", team: "Soccer (B-V)", event: "Harper Creek High School", startTime: "6:00 PM" }, { date: "Mon Aug 25", team: "Soccer (B-V)", event: "Lakewood High School", startTime: "6:00 PM" }, { date: "Mon Sep 8", team: "Soccer (B-V)", event: "Parchment High School", startTime: "6:00 PM" }, { date: "Wed Sep 10", team: "Soccer (B-V)", event: "Hackett Catholic High School", startTime: "6:00 PM" }, { date: "Mon Sep 22", team: "Soccer (B-V)", event: "Allegan High School", startTime: "6:00 PM" }, { date: "Wed Sep 24", team: "Soccer (B-V)", event: "Kalamazoo Christian High School", startTime: "6:00 PM" }, { date: "Thu Sep 25", team: "Soccer (B-V)", event: "Fennville Public High School", startTime: "6:00 PM" }, { date: "Wed Sep 10", team: "Volleyball (G-6th)", event: "Parchment Middle School", startTime: "4:00 PM" }, { date: "Wed Sep 17", team: "Volleyball (G-6th)", event: "Schoolcraft Middle School", startTime: "4:00 PM" }, { date: "Mon Oct 6", team: "Volleyball (G-6th)", event: "Lawton Middle School", startTime: "4:00 PM" }, { date: "Thu Oct 9", team: "Volleyball (G-6th)", event: "Parchment Middle School", startTime: "4:00 PM" }, { date: "Wed Sep 10", team: "Volleyball (G-7th)", event: "Parchment Middle School", startTime: "5:00 PM" }, { date: "Wed Sep 17", team: "Volleyball (G-7th)", event: "Schoolcraft Middle School", startTime: "5:00 PM" }, { date: "Wed Sep 24", team: "Volleyball (G-7th)", event: "St Augustine School", startTime: "5:00 PM" }, { date: "Mon Oct 6", team: "Volleyball (G-7th)", event: "Lawton Middle School", startTime: "5:00 PM" }, { date: "Wed Oct 8", team: "Volleyball (G-7th)", event: "Martin High School", startTime: "5:00 PM" }, { date: "Thu Oct 9", team: "Volleyball (G-7th)", event: "Galesburg-Augusta Middle School", startTime: "5:00 PM" }, { date: "Wed Sep 10", team: "Volleyball (G-8th)", event: "Parchment Middle School", startTime: "6:00 PM" }, { date: "Wed Sep 17", team: "Volleyball (G-8th)", event: "Schoolcraft Middle School", startTime: "6:00 PM" }, { date: "Wed Sep 24", team: "Volleyball (G-8th)", event: "St Augustine School", startTime: "6:00 PM" }, { date: "Mon Oct 6", team: "Volleyball (G-8th)", event: "Lawton Middle School", startTime: "6:00 PM" }, { date: "Wed Oct 8", team: "Volleyball (G-8th)", event: "Martin High School", startTime: "6:00 PM" }, { date: "Thu Oct 9", team: "Volleyball (G-8th)", event: "Galesburg-Augusta Middle School", startTime: "6:00 PM" }, { date: "Wed Aug 27", team: "Volleyball (JV)", event: "Battle Creek Central High School", startTime: "5:30 PM" }, { date: "Tue Sep 9", team: "Volleyball (JV)", event: "Watervliet Senior High School", startTime: "5:30 PM" }, { date: "Tue Sep 16", team: "Volleyball (JV)", event: "Martin High School", startTime: "5:30 PM" }, { date: "Thu Sep 18", team: "Volleyball (JV)", event: "Schoolcraft High School", startTime: "5:30 PM" }, { date: "Tue Sep 23", team: "Volleyball (JV)", event: "Gobles MS/HS School", startTime: "5:30 PM" }, { date: "Tue Oct 7", team: "Volleyball (JV)", event: "Saugatuck High School", startTime: "5:30 PM" }, { date: "Thu Oct 9", team: "Volleyball (JV)", event: "Hackett Catholic High School", startTime: "5:30 PM" }, { date: "Wed Oct 15", team: "Volleyball (JV)", event: "Bridgman High School", startTime: "5:30 PM" }, { date: "Wed Aug 27", team: "Volleyball (V)", event: "Battle Creek Central High School", startTime: "6:30 PM" }, { date: "Tue Sep 9", team: "Volleyball (V)", event: "Watervliet Senior High School", startTime: "6:30 PM" }, { date: "Tue Sep 16", team: "Volleyball (V)", event: "Martin High School", startTime: "6:30 PM" }, { date: "Thu Sep 18", team: "Volleyball (V)", event: "Schoolcraft High School", startTime: "7:00 PM" }, { date: "Tue Sep 23", team: "Volleyball (V)", event: "Gobles MS/HS School", startTime: "6:30 PM" }, { date: "Tue Oct 7", team: "Volleyball (V)", event: "Saugatuck High School", startTime: "6:30 PM" }, { date: "Thu Oct 9", team: "Volleyball (V)", event: "Hackett Catholic High School", startTime: "6:30 PM" }, { date: "Wed Oct 15", team: "Volleyball (V)", event: "Bridgman High School", startTime: "6:30 PM" }, { date: "Sat Dec 6", team: "Wrestling (B-V)", event: "DK Varsity Wrestling Invite", startTime: "9:00 AM" }, { date: "Fri Dec 5", team: "Wrestling (JV)", event: "DK JV Wrestling Invite", startTime: "9:00 AM" }, // New event added as per user request { date: "Fri Sep 12", team: "Football (V)", event: "New Football Game", startTime: "3:45 PM" } ]; // Helper function to parse time and calculate new times const calculateTimes = (startTimeStr, offsetMinutes) => { const [time, ampm] = startTimeStr.split(' '); let [hours, minutes] = time.split(':').map(Number); if (ampm === 'PM' && hours !== 12) { hours += 12; } if (ampm === 'AM' && hours === 12) { hours = 0; // Midnight } const date = new Date(); date.setHours(hours, minutes, 0, 0); date.setMinutes(date.getMinutes() + offsetMinutes); const newHours = date.getHours(); const newMinutes = newHours === 0 && newMinutes === 0 ? 0 : date.getMinutes(); // Handle midnight correctly const newAmpm = newHours >= 12 ? 'PM' : 'AM'; const formattedHours = newHours % 12 === 0 ? 12 : newHours % 12; const formattedMinutes = newMinutes < 10 ? `0${newMinutes}` : newMinutes; return `${formattedHours}:${formattedMinutes} ${newAmpm}`; }; // Function to parse date strings into comparable Date objects, inferring year for academic calendar const parseEventDate = (dateStr, timeStr) => { const [dayOfWeek, month, dayOfMonth] = dateStr.split(' '); let year; const monthMap = { "Jan": 0, "Feb": 1, "Mar": 2, "Apr": 3, "May": 4, "Jun": 5, "Jul": 6, "Aug": 7, "Sep": 8, "Oct": 9, "Nov": 10, "Dec": 11 }; const monthIndex = monthMap[month]; // Infer the year based on the academic year 2025-2026 (Aug 2025 - Jul 2026) if (monthIndex >= monthMap["Aug"]) { // August (7) to December (11) year = 2025; } else { // January (0) to July (6) year = 2026; } let [hours, minutes] = timeStr.replace(/ AM| PM/, '').split(':').map(Number); const ampm = timeStr.includes('PM') ? 'PM' : 'AM'; if (ampm === 'PM' && hours !== 12) { hours += 12; } if (ampm === 'AM' && hours === 12) { hours = 0; // Midnight } return new Date(year, monthIndex, parseInt(dayOfMonth), hours, minutes); }; const App = () => { const [db, setDb] = useState(null); const [auth, setAuth] = useState(null); const [userId, setUserId] = useState(null); const [signups, setSignups] = useState({}); const [showModal, setShowModal] = useState(false); const [modalMessage, setModalMessage] = useState(''); const [modalConfirmAction, setModalConfirmAction] = useState(null); const [currentSignupDetails, setCurrentSignupDetails] = useState(null); // To store details for signup/cancel // State for sorting const [sortKey, setSortKey] = useState('date'); // 'date', 'team', 'event' const [sortDirection, setSortDirection] = useState('asc'); // 'asc', 'desc' // Firebase initialization and authentication useEffect(() => { try { const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}'); if (!firebaseConfig || Object.keys(firebaseConfig).length === 0) { console.error("Firebase config is missing or empty."); setModalMessage("Firebase configuration error. Please check the setup."); setShowModal(true); return; } const app = initializeApp(firebaseConfig); const firestore = getFirestore(app); const firebaseAuth = getAuth(app); setDb(firestore); setAuth(firebaseAuth); // Listen for auth state changes onAuthStateChanged(firebaseAuth, async (user) => { if (user) { setUserId(user.uid); } else { // Sign in anonymously if no user is logged in try { if (typeof __initial_auth_token !== 'undefined') { await signInWithCustomToken(firebaseAuth, __initial_auth_token); } else { await signInAnonymously(firebaseAuth); } } catch (error) { console.error("Error signing in:", error); setModalMessage(`Authentication error: ${error.message}`); setShowModal(true); } } }); } catch (error) { console.error("Failed to initialize Firebase:", error); setModalMessage(`Firebase initialization error: ${error.message}`); setShowModal(true); } }, []); // Firestore listener for real-time updates useEffect(() => { if (db && userId) { const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const signupsColRef = collection(db, `artifacts/${appId}/public/data/signups`); const q = query(signupsColRef); const unsubscribe = onSnapshot(q, (snapshot) => { const currentSignups = {}; snapshot.forEach((doc) => { const data = doc.data(); currentSignups[doc.id] = data; }); setSignups(currentSignups); }, (error) => { console.error("Error fetching real-time signups:", error); setModalMessage(`Error loading sign-ups: ${error.message}`); setShowModal(true); }); return () => unsubscribe(); // Cleanup the listener on unmount } }, [db, userId]); // Memoized sorted events data const sortedEvents = useMemo(() => { let sortableEvents = [...eventsData]; sortableEvents.sort((a, b) => { let compareA, compareB; if (sortKey === 'date') { compareA = parseEventDate(a.date, a.startTime); compareB = parseEventDate(b.date, b.startTime); } else if (sortKey === 'team') { compareA = a.team.toLowerCase(); compareB = b.team.toLowerCase(); } else if (sortKey === 'event') { compareA = a.event.toLowerCase(); compareB = b.event.toLowerCase(); } if (compareA < compareB) { return sortDirection === 'asc' ? -1 : 1; } if (compareA > compareB) { return sortDirection === 'asc' ? 1 : -1; } return 0; }); return sortableEvents; }, [sortKey, sortDirection]); // Dependencies for useMemo // Function to handle signing up for a position const handleSignUp = useCallback(async (eventId, position, userName) => { if (!db || !userId) { setModalMessage("Authentication not ready. Please wait a moment."); setShowModal(true); return; } const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const signupDocRef = doc(db, `artifacts/${appId}/public/data/signups`, `${eventId}-${position}`); try { await setDoc(signupDocRef, { eventId, position, volunteerName: userName, volunteerId: userId, timestamp: new Date().toISOString() }); setModalMessage(`You have successfully signed up for ${position} for this event.`); setShowModal(true); } catch (error) { console.error("Error signing up:", error); setModalMessage(`Failed to sign up: ${error.message}`); setShowModal(true); } }, [db, userId]); // Function to handle canceling a sign-up const handleCancelSignup = useCallback(async (eventId, position) => { if (!db || !userId) { setModalMessage("Authentication not ready. Please wait a moment."); setShowModal(true); return; } const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const signupDocRef = doc(db, `artifacts/${appId}/public/data/signups`, `${eventId}-${position}`); try { const currentSignup = signups[`${eventId}-${position}`]; if (currentSignup && currentSignup.volunteerId === userId) { await setDoc(signupDocRef, { eventId, position, volunteerName: null, // Clear the volunteer name volunteerId: null, // Clear the volunteer ID timestamp: new Date().toISOString() }); setModalMessage(`You have successfully canceled your sign-up for ${position}.`); setShowModal(true); } else { setModalMessage("You can only cancel your own sign-up."); setShowModal(true); } } catch (error) { console.error("Error canceling sign-up:", error); setModalMessage(`Failed to cancel sign-up: ${error.message}`); setShowModal(true); } }, [db, userId, signups]); // Function to show confirmation modal for sign-up const confirmSignUp = (eventId, position) => { setCurrentSignupDetails({ eventId, position }); setModalMessage(`Are you sure you want to sign up for ${position}?`); setModalConfirmAction(() => (userName) => handleSignUp(eventId, position, userName)); setShowModal(true); }; // Function to show confirmation modal for cancellation const confirmCancel = (eventId, position) => { setCurrentSignupDetails({ eventId, position }); setModalMessage(`Are you sure you want to cancel your sign-up for ${position}?`); setModalConfirmAction(() => () => handleCancelSignup(eventId, position)); setShowModal(true); }; const closeModal = () => { setShowModal(false); setModalMessage(''); setModalConfirmAction(null); setCurrentSignupDetails(null); }; const handleModalConfirm = (userName = '') => { if (modalConfirmAction) { modalConfirmAction(userName); } closeModal(); }; // Modal component for confirmations and messages const Modal = ({ message, onConfirm, onCancel, showInput = false }) => { const [inputName, setInputName] = useState(''); if (!showModal) return null; return (

{message}

{showInput && ( setInputName(e.target.value)} /> )}

{onCancel && ( )} {onConfirm && ( )}

); }; return (

Delton Kellogg Athletic Volunteer Sign-up

Your User ID:

{userId || "Loading..."}

Share this ID with others for collaborative sign-ups.

{/* Sorting Controls */}

Sort Events By:

{sortedEvents.map((event, index) => { const eventId = `${event.date}-${event.team}-${event.event}-${event.startTime}`.replace(/[^a-zA-Z0-9-]/g, ''); // Calculate specific arrival/departure times const admissionsArrival = calculateTimes(event.startTime, -45); const admissionsDeparture = calculateTimes(event.startTime, 60); // 1 hour past start time const operatorAnnouncerArrival = calculateTimes(event.startTime, -15); // Check if it's a football game const isFootballGame = event.team.includes('Football'); // Check if it's a 6th, 7th, or 8th grade basketball or volleyball game const isMiddleSchoolGame = event.team.includes('Basketball (B-6th)') || event.team.includes('Basketball (B-7th)') || event.team.includes('Basketball (B-8th)') || event.team.includes('Volleyball (G-6th)') || event.team.includes('Volleyball (G-7th)') || event.team.includes('Volleyball (G-8th)'); return (

{event.event}

{event.team}

Date: {event.date} | Start Time: {event.startTime}

{/* Admissions Worker Slots */} {isFootballGame ? ( <> {/* Admissions Worker 1 */}

Admissions Worker 1 (1 needed)

Arrive: {admissionsArrival}, Depart: {admissionsDeparture}

{signups[`${eventId}-admissions-1`] && signups[`${eventId}-admissions-1`].volunteerName ? (

Signed Up: {signups[`${eventId}-admissions-1`].volunteerName} {signups[`${eventId}-admissions-1`].volunteerId === userId && ( )}

) : ( )}

{/* Admissions Worker 2 */}

Admissions Worker 2 (1 needed)

Arrive: {admissionsArrival}, Depart: {admissionsDeparture}

{signups[`${eventId}-admissions-2`] && signups[`${eventId}-admissions-2`].volunteerName ? (

Signed Up: {signups[`${eventId}-admissions-2`].volunteerName} {signups[`${eventId}-admissions-2`].volunteerId === userId && ( )}

) : ( )}

) : ( /* Single Admissions Worker for non-football games */

Admissions Worker (1 needed)

Arrive: {admissionsArrival}, Depart: {admissionsDeparture}

{signups[`${eventId}-admissions`] && signups[`${eventId}-admissions`].volunteerName ? (

Signed Up: {signups[`${eventId}-admissions`].volunteerName} {signups[`${eventId}-admissions`].volunteerId === userId && ( )}

) : ( )}

)} {/* Scoreboard Operator */}

Scoreboard Operator (1 needed)

Arrive: {operatorAnnouncerArrival}, Stay until conclusion

{signups[`${eventId}-scoreboard`] && signups[`${eventId}-scoreboard`].volunteerName ? (

Signed Up: {signups[`${eventId}-scoreboard`].volunteerName} {signups[`${eventId}-scoreboard`].volunteerId === userId && ( )}

) : ( )}

{/* Announcer (conditionally rendered) */} {!isMiddleSchoolGame && (

Announcer (1 needed)

Arrive: {operatorAnnouncerArrival}, Stay until conclusion

{signups[`${eventId}-announcer`] && signups[`${eventId}-announcer`].volunteerName ? (

Signed Up: {signups[`${eventId}-announcer`].volunteerName} {signups[`${eventId}-announcer`].volunteerId === userId && ( )}

) : ( )}

)}

); })}

); }; export default App;

Central Office Opening Later on Tuesday, July 21, 2026