Fixed events and nav bar

Author: Malin Kussi

src/assets/pics/photo-gallery/rmc/comp-team-2024.jpg

@@ -1,46 +1,49 @@
 import { EventObject } from '../tools/CustomTypes'
 
-const semesterEnd = '5/31/25'
+const semesterEnd = '5/08/25'
 const EVENT_INFO: EventObject[] = [
 	{
 		title: 'Weekly SolidWorks Workshop',
 		description: `The goal of these classes is to equip you with the skills to model and design on a professional
 			level, as well as create a common ground for all engineers to work together more efficiently and effectively`,
-		date: new Date('2025-02-17T17:30:00'),
+		date: new Date('2025-02-24T17:30:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 90 // 1 hour 30 minutes
 	},
 	{
 		title: 'General Body Meeting',
 		description: 'Updates on what happened since the last GBM and the plan for the rest of the semester as well as an activity',
 		date: new Date('2025-02-05T17:00:00'),
-		// location: 'The Fish Bowl (first floor pf the engineering building)'
 		location: '201A classroom (The ideas hub second floor of the engineering building)'
 	},
 	{
 		title: 'Weekly Programming Meeting',
 		description: 'The weekly meeting for the programming sub-team. Take a look at the code for the robot',
-		date: new Date('2025-02-12T17:00:00'),
+		date: new Date('2025-02-26T17:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	},
 	{
 		title: 'Weekly Electrical Meeting',
 		description: 'The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, and more!',
-		date: new Date('2025-02-12T18:00:00'),
+		date: new Date('2025-02-26T18:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	},
 	{
 		title: 'Weekly Mechanical Meeting',
 		description: 'The weekly meeting for the mechanical sub-team. Learn about the design aspects of robot and 3D model parts.',
-		date: new Date('2025-02-12T16:00:00'),
+		date: new Date('2025-02-26T16:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	}
 ]
 

src/data/EventsDatabase.tsx

@@ -10,6 +10,16 @@ export default class EventListStyles {
 		grid-template-rows: repeat(${props => props.rows}, minmax(0, 1fr));
 		grid-row-gap: 5%;
 		justify-items: center;
+
+		@media (max-width: 718px) {
+			display: grid;
+			grid-template-columns: 100%;
+			grid-template-rows:
+				calc(var(--vh) * .2)    /* Intro heading */
+				max(calc(var(--vh) * .15), 100px);  /* Contact info */
+			justify-content: center;
+			align-content: center;
+		}
 	`
 
 	static readonly EventItemContainer = styled.div`

src/pages/events/EventListStyles.tsx

@@ -19,51 +19,80 @@ const Navigation = (): React.ReactElement => {
 	const TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
 		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
 
-	// State for handling dropdown hover
+	// State for handling dropdown visibility
 	const [showDropdown, setShowDropdown] = useState(false)
 
+	// Timeout variable to prevent flickering
+	let hideDropdownTimeout: NodeJS.Timeout
+
+	// Open dropdown when hovering over "Projects"
+	const handleMouseEnter = (): void => {
+		clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
+		setShowDropdown(true)
+	}
+
+	// Close dropdown when mouse leaves (with small delay)
+	const handleMouseLeave = (): void => {
+		hideDropdownTimeout = setTimeout(() => {
+			setShowDropdown(false)
+		}, 400) // Small delay before closing
+	}
+
+	// Close dropdown when clicking a project
+	const handleItemClick = (): void => {
+		setShowDropdown(false) // Close dropdown when a project is clicked
+		scrollToTop()
+	}
+
 	return (
 		<>
-			{/* The rest of the navigation bar. The className is dependent on whether the navbar is expanded or not */}
 			<Styles.NavigationBar id='navbar-transition'
-				transparency={ scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0 }
-				toggle={ width < Constants.MOBILE_SIZE ? 1 : 0 }
+				transparency={scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0}
+				toggle={width < Constants.MOBILE_SIZE ? 1 : 0}
 				sticky='top' bg='dark' variant='dark' expand='md' collapseOnSelect>
+				
 				{/* Top left of the navigation bar */}
 				<Styles.Logo className='logo-and-title'>
 					<Link className='logo-container' to='/home'>
-						<img alt='logo' src={nasaLogo} id='web-logo' onClick={scrollToTop}/>
+						<img alt='logo' src={nasaLogo} id='web-logo' onClick={scrollToTop} />
 						<div>
 							<p>Temple Space</p>
 							<p>Exploration</p>
 						</div>
 					</Link>
 				</Styles.Logo>
+
 				<Navbar.Toggle aria-controls='basic-navbar-nav' />
 				<Navbar.Collapse className='basic-navbar-links'>
-					<Styles.NavbarLinks variant='pills' toggle={ width < Constants.MOBILE_SIZE ? 1 : 0 }>
-						<NavLink eventKey='7' as={Link} to={Constants.PATHS.HOME} onClick={() => location.href = TEAMS}>Teams</NavLink>
+					<Styles.NavbarLinks variant='pills' toggle={width < Constants.MOBILE_SIZE ? 1 : 0}>
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>
-						{/* Projects Dropdown - Opens on Hover */}
-						<NavDropdown
-							title='Projects'
-							id='projects-dropdown'
-							show={showDropdown}
-							onMouseEnter={() => setShowDropdown(true)}
-							onMouseLeave={() => setShowDropdown(false)}
-							className='nav-link'>
-							<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>
-								Robotics
-							</NavDropdown.Item>
-							<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>
-								RockSat
-							</NavDropdown.Item>
-							<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>
-								NASA Ballooning
-							</NavDropdown.Item>
-						</NavDropdown>
+
+						{/* Projects Dropdown - Opens on Hover, Closes on Click */}
+						<div className='nav-item'
+							onMouseEnter={handleMouseEnter}
+							onMouseLeave={handleMouseLeave}>
+							<NavDropdown
+								title='Projects'
+								id='projects-dropdown'
+								show={showDropdown}
+								className='nav-link'>
+								<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={handleItemClick}>
+										Robotics
+									</NavDropdown.Item>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={handleItemClick}>
+										RockSat
+									</NavDropdown.Item>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={handleItemClick}>
+										NASA Ballooning
+									</NavDropdown.Item>
+								</div>
+							</NavDropdown>
+						</div>
+
+						<NavLink eventKey='7' as={Link} to={Constants.PATHS.HOME} onClick={() => location.href = TEAMS}>Teams</NavLink>
 					</Styles.NavbarLinks>
 				</Navbar.Collapse>
 			</Styles.NavigationBar>

src/pages/general/navigation/Navigation.tsx

@@ -80,29 +80,31 @@ export default class NavigationStyles {
 			padding: 4px 8px 8px 8px;
 		}
 
+		div.nav-item{
+			position: relative;
+			padding: 2px 0px 0px 0px;
+		}
+
 		a.dropdown-toggle {
 			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
 			color: ${COLORS.TEXT} !important;
-			font-size: 16px;
-		}
-
-		/* Show dropdown on hover */
-		.nav-item:hover .dropdown-menu {
-			display: block !important;
+			font-size: 17px;
+			padding: 6px 8px 8px 8px;
 		}
 
 		.dropdown-menu {
-			display: none;
 			position: absolute;
 			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
-			padding: 0px 8px 8px 13px;
+			padding: 0px 8px 8px 16px;
 			border: none;
 		}
 
 		.dropdown-item {
 			color: ${COLORS.TEXT} !important;
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
 			font-size: 15px;
 			border: none;
+			padding: 0px
 		}
 
 		.dropdown-item:hover {

src/pages/general/navigation/NavigationStyles.tsx

@@ -11,5 +11,6 @@ export type EventObject = {
 	description: string,
 	weekly?: boolean,
 	endDate?: Date,
-	tbd?: boolean
+	tbd?: boolean,
+	duration?: number
 }

src/tools/CustomTypes.tsx

@@ -16,34 +16,49 @@ function sortByDate(eventA: EventObject, eventB: EventObject): number {
  * @param events The events to be posted
  * @returns The events to be posted with the correct weekly dates
  */
+
 function handleWeeklyEvents(events: EventObject[]): EventObject[] {
-	// Date used to filter out old events
+	const currentDateTime = new Date().getTime() // Get current time in milliseconds
 	const dateFilter = new Date()
 	dateFilter.setDate(dateFilter.getDate() - 1)
 	dateFilter.setUTCHours(23, 59, 59, 999)
-
-	// Remove events that are in the past and no longer occurring.
 	events = events.filter(event => {
 		if (event.date < dateFilter && !event.weekly) return 0
 		if (event.weekly && ((event.endDate ?? new Date()) < dateFilter)) return 0
 		return 1
 	})
+	return events
+		.map(event => {
+			const eventDate = new Date(event.date) // Copy event date
+			const eventEndDate = event.endDate ? new Date(event.endDate) : null
+			const eventDuration = (event.duration ?? 60) * 60 * 1000 // Convert minutes to milliseconds (default 1hr)
+
+			// Compute the actual end time of the event
+			let eventEndTime = eventDate.getTime() + eventDuration
+
+			// If it's a weekly event and has passed, move it forward to the next valid week
+			if (event.weekly) {
+				while (eventEndTime < currentDateTime) {
+					eventDate.setDate(eventDate.getDate() + 7) // Move event forward by one week
+					eventEndTime = eventDate.getTime() + eventDuration // Update end time
+				}
 
-	// Handle weekly dates. Set them to be the next occurrence if they are in the past.
-	events.forEach(event => {
-		if (event.weekly) {
-			const currentDate = new Date()
-			const dayOffset = (7 + event.date.getDay() - currentDate.getDay()) % 7
-			const nextOccurrence = new Date(currentDate.getTime() + dayOffset * 24 * 60 * 60 * 1000)
-			if (nextOccurrence < currentDate) {
-				nextOccurrence.setDate(nextOccurrence.getDate() + 7)
+				// Stop repeating events if the new date exceeds `endDate`
+				if (eventEndDate && eventDate.getTime() > eventEndDate.getTime()) {
+					return null // Exclude this event
+				}
+
+				return { ...event, date: eventDate } // Return updated weekly event
 			}
-		}
-	})
 
-	return events.sort(sortByDate)
+			// Non-weekly events should stay as they are
+			return event
+		})
+		.filter((event): event is EventObject => event !== null)
+		.sort(sortByDate)
 }
 
+
 export function getEvents(): EventObject[] {
 	const data = EVENT_INFO
 	return handleWeeklyEvents(data)