Merge pull request #40 from templerobotics/updating-meeting-events

Updating meeting events

Author: monty2464

README.md

@@ -11,21 +11,23 @@ The only other accepted format is an empty string, meaning the date has not been
 
 **Important:** Make sure to increment the id
 
-```json
+```ts
 [
  {
-  "title": "Title of the event",
-  "description": "Description of the event",
-  "date": "04/22",
-  "location": "Engineering building",
-  "id": 0
+    title: 'Title of the event',
+    description: 'Description of the event',
+    date: new Date('2025-01-22T17:00:00'),
+    location: 'The ideas hub (second floor of the engineering building)',
+    weekly: true,
+    endDate: new Date(semesterEnd)
  },
  {
-  "title": "Title of the event 2",
-  "description": "Description of the event 2",
-  "date": "04/23",
-  "location": "Engineering building",
-  "id": 1
+    title: 'Title of the event 2',
+    description: 'Description of the event 2',
+    date: new Date('2025-01-22T14:00:00'),
+    location: 'The ideas hub (second floor of the engineering building)',
+    weekly: true,
+    endDate: new Date(semesterEnd)
  }
 ]
 ```

package-lock.json

@@ -26,6 +26,7 @@
     "react-spinners": "^0.13.4",
     "typescript": "^4.7.4",
     "util": "^0.12.4",
+    "uuid": "^11.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -14,26 +14,23 @@ const EVENT_INFO: EventObject[] = [
 	{
 		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('TBD'),
-		time: 'TBD',
+		date: new Date('2025-01-22T17:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd)
 	},
 	{
 		title: 'Weekly Electrical Meeting',
 		description: 'The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, and more!',
-		date: new Date('1/22/2025'),
-		time: '6:00 PM',
+		date: new Date('2025-01-22T18:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd)
 	},
 	{
 		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('1/22/2025'),
-		time: '4:00 PM',
+		date: new Date('2025-01-22T16:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd)

src/data/EventsDatabase.tsx

@@ -24,7 +24,7 @@ class EventList extends React.Component<{events: EventObject[], loading: boolean
 							</div>
 							<div className='location'>
 								<p>Location: {event.location}</p>
-								<p>Time: {event.time === '' ? 'TBD' : event.time}</p>
+								<p>Time: {event.tbd ? 'TBD' : toTimeString(event.date)}</p>
 							</div>
 							<p className='description'>Description: {event.description}</p>
 						</Styles.EventItemContainer>
@@ -35,4 +35,11 @@ class EventList extends React.Component<{events: EventObject[], loading: boolean
 	}
 }
 
+function toTimeString (date: Date): string {
+	const time = date.toTimeString().split(' ')[0].split(':')
+	const hours = parseInt(time[0])
+	const minutes = time[1]
+	return `${hours % 12}:${minutes} ${hours >= 12 ? 'PM' : 'AM'}`
+}
+
 export default EventList

src/pages/events/EventList.tsx

@@ -2,18 +2,20 @@
 import React from 'react'
 import $ from 'jquery'
 import { BsChevronLeft, BsChevronRight, BsDashLg } from 'react-icons/bs'
+import {v4 as uuid} from 'uuid'
 
 // Custom styles
 import Styles, { PhotoGalleryProps, GallerySlideProps } from './PhotoGalleryStyles'
 
 // General tools
 import { ANIMATION_TIME, COLORS } from '../../../tools/Constants'
 
-export default class PhotoGallery extends React.Component<PhotoGalleryProps, {currentSlide: number}> {
+export default class PhotoGallery extends React.Component<PhotoGalleryProps, {currentSlide: number, galleryId: string}> {
 	constructor(props: PhotoGalleryProps) {
 		super(props)
 		this.state = {
-			currentSlide: 0
+			currentSlide: 0,
+			galleryId: this.props.id ?? uuid()
 		}
 	}
 
@@ -48,14 +50,14 @@ export default class PhotoGallery extends React.Component<PhotoGalleryProps, {cu
 		const slidesLength = Math.ceil(this.props.galleryInfo.length / 3)
 		nextSlide = ((nextSlide % slidesLength) + slidesLength) % slidesLength
 
-		$(`#slide${this.state.currentSlide}`)
+		$(`#${this.state.galleryId} #slide${this.state.currentSlide}`)
 			.fadeOut(animationSpeed).end()
-		$(`#slide${nextSlide}`)
+		$(`#${this.state.galleryId} #slide${nextSlide}`)
 			.fadeIn(animationSpeed).end()
 
-		$(`#counter${this.state.currentSlide}`)
+		$(`#${this.state.galleryId} #counter${this.state.currentSlide}`)
 			.css('color', COLORS.TEXT)
-		$(`#counter${nextSlide}`)
+		$(`#${this.state.galleryId} #counter${nextSlide}`)
 			.css('color', COLORS.PRIMARY)
 
 		this.setState({ currentSlide: nextSlide })
@@ -64,17 +66,17 @@ export default class PhotoGallery extends React.Component<PhotoGalleryProps, {cu
 	componentDidMount(): void {
 		// Hide slides after they render
 		for (let i = 1; i < this.props.galleryInfo.length % 3; i++) {
-			$(`#slide${i}`).hide()
+			$(`#${this.state.galleryId} #slide${i}`).hide()
 		}
-		$('#counter0').css('color', COLORS.PRIMARY)
+		$(`#${this.state.galleryId} #counter0`).css('color', COLORS.PRIMARY)
 	}
 
 	render(): React.ReactElement {
 		const gridColumns = '100% '.repeat(Math.ceil(this.props.galleryInfo.length / 3))
 		const width = document.documentElement.style.getPropertyValue('--vh')
 
 		return (
-			<Styles.GalleryContainer className={this.props.className} id={this.props.id}>
+			<Styles.GalleryContainer className={this.props.className} id={this.state.galleryId}>
 				<Styles.Title>{this.props.title ?? 'Photo Gallery'}</Styles.Title>
 				<Styles.Chevron as={BsChevronLeft} size={parseFloat(width) * 0.05} onClick={this.slideLeft}/>
 				<Styles.SlideContainer gridColumns={gridColumns}>

src/pages/general/photo-gallery/PhotoGallery.tsx

@@ -78,7 +78,7 @@ const RoboticMining = (): React.ReactElement => {
 					</div>
 				</Styles.OutreachGallery>
 
-				<PhotoGallery galleryInfo={ GALLERY_INFO }/>
+				<PhotoGallery className='testing' galleryInfo={ GALLERY_INFO }/>
 			</Styles.SpaceBackground>
 
 			<Contact/>

src/pages/robotic-mining/RoboticMining.tsx

@@ -8,8 +8,8 @@ export type EventObject = {
 	title: string,
 	date: Date,
 	location: string,
-	time: string,
 	description: string,
 	weekly?: boolean,
-	endDate?: Date
+	endDate?: Date,
+	tbd?: boolean
 }

src/tools/CustomTypes.tsx

@@ -2,7 +2,8 @@ import EVENT_INFO from '../../data/EventsDatabase'
 import { EventObject } from '../CustomTypes'
 
 function sortByDate(eventA: EventObject, eventB: EventObject): number {
-	if (eventA.date > eventB.date || isNaN(eventA.date.getMonth())) {
+	const dateComparison = eventA.date.getTime() - eventB.date.getTime()
+	if (dateComparison > 0 || isNaN(eventA.date.getMonth())) {
 		return 1
 	} else if (eventA.date == eventB.date) {
 		return 0
@@ -16,22 +17,24 @@ function sortByDate(eventA: EventObject, eventB: EventObject): number {
  * @returns The events to be posted with the correct weekly dates
  */
 function handleWeeklyEvents(events: EventObject[]): EventObject[] {
-	const currentDate = new Date()
-	currentDate.setDate(currentDate.getDate() - 1)
-	currentDate.setUTCHours(23, 59, 59, 999)
+	// Date used to filter out old events
+	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 < currentDate && !event.weekly) return 0
-		if (event.weekly && ((event.endDate ?? new Date()) < currentDate)) return 0
+		if (event.date < dateFilter && !event.weekly) return 0
+		if (event.weekly && ((event.endDate ?? new Date()) < dateFilter)) return 0
 		return 1
 	})
 
 	// Handle weekly dates
 	events.forEach(event => {
 		const currentDayForWeek = new Date()
 		const dayOffset = (7 + event.date.getDay() - currentDayForWeek.getDay()) % 7
-		if (event.weekly && event.date < currentDayForWeek) {
+		const dateComparison = event.date.getTime() - currentDayForWeek.getTime()
+		if (event.weekly && dateComparison < 0) {
 			const newDate = currentDayForWeek.getTime() + dayOffset * 24 * 60 * 60 * 1000
 			event.date = new Date(newDate)
 		}