diff --git a/frontend/src/components/EventList.tsx b/frontend/src/components/EventList.tsx index aa441fb..efae93a 100644 --- a/frontend/src/components/EventList.tsx +++ b/frontend/src/components/EventList.tsx @@ -13,10 +13,13 @@ import { Stack, Switch, FormControlLabel, + Snackbar, + Alert, } from '@mui/material'; import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; import VisibilityIcon from '@mui/icons-material/Visibility'; import HowToRegIcon from '@mui/icons-material/HowToReg'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import axios from 'axios'; interface Event { @@ -33,6 +36,8 @@ const EventList: React.FC = () => { const [events, setEvents] = useState([]); const navigate = useNavigate(); const [hideClosed, setHideClosed] = useState(false); + const [openSnackbar, setOpenSnackbar] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(''); useEffect(() => { fetchEvents(); @@ -63,6 +68,27 @@ const EventList: React.FC = () => { navigate(`/view/events/${event.slug}`); }; + const handleCopyLink = (event: Event) => { + const rsvpLink = `${window.location.origin}/rsvp/events/${event.slug}`; + navigator.clipboard.writeText(rsvpLink) + .then(() => { + setSnackbarMessage('RSVP link copied to clipboard!'); + setOpenSnackbar(true); + }) + .catch(err => { + setSnackbarMessage('Failed to copy link.'); + setOpenSnackbar(true); + console.error('Failed to copy: ', err); + }); + }; + + const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + setOpenSnackbar(false); + }; + return ( @@ -92,7 +118,7 @@ const EventList: React.FC = () => { control={ setHideClosed(checked)} + onChange={(event: React.ChangeEvent, checked: boolean) => setHideClosed(checked)} color="primary" /> } @@ -106,7 +132,7 @@ const EventList: React.FC = () => { {events .filter(event => !hideClosed || isEventOpen(event)) .map((event) => ( - + { > Manage + ))} + + + {snackbarMessage} + + ); }; -export default EventList; \ No newline at end of file +export default EventList; diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx index b8a8414..fdb69d3 100644 --- a/frontend/src/components/RSVPForm.tsx +++ b/frontend/src/components/RSVPForm.tsx @@ -52,6 +52,7 @@ const RSVPForm: React.FC = () => { const [success, setSuccess] = useState(false); const navigate = useNavigate(); const [event, setEvent] = useState(null); + const [isItemsSelectOpen, setIsItemsSelectOpen] = useState(false); // State to control select dropdown useEffect(() => { const fetchEventDetails = async () => { @@ -590,6 +591,22 @@ const RSVPForm: React.FC = () => { ))} )} + open={isItemsSelectOpen} // Control open state + onOpen={() => setIsItemsSelectOpen(true)} // Set open when opened + onClose={() => setIsItemsSelectOpen(false)} // Set closed when closed + MenuProps={{ + PaperProps: { + sx: { + maxHeight: 300, // Limit height of the dropdown + overflowY: 'auto', + }, + }, + MenuListProps: { + sx: { + paddingBottom: '60px', // Make space for the button + }, + }, + }} > {neededItems.map((item) => ( @@ -597,6 +614,26 @@ const RSVPForm: React.FC = () => { ))} + + + )}