Fix events page

Author: Ryan Hodge

.github/workflows/deploy.yml

@@ -12,7 +12,7 @@ name: Deploy Next.js site to Pages
 #   # Allows you to run this workflow manually from the Actions tab
 #   workflow_dispatch:
 
-# on: [push]
+on: [push]
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -28,7 +28,7 @@ concurrency:
 
 defaults:
   run:
-    working-directory: ./templerobotics.github.io
+    working-directory: ./
 
 jobs:
   # Build job
@@ -68,7 +68,7 @@ jobs:
       - name: Restore cache
         uses: actions/cache@v4
         with:
-          path: ./templerobotics.github.io/.next/cache
+          path: ./.next/cache
           # Generate a new cache whenever packages or source files change.
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
@@ -84,7 +84,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./templerobotics.github.io/out
+          path: ./out
 
   # Deployment job
   deploy:

.github/workflows/node.js.yml

@@ -3,7 +3,7 @@
 
 name: Node.js CI
 
-on: [push]
+# on: [push]
 
 jobs:
   build:

assets/images/rocksat-photo-gallery/rocksat-2011.jpg renamed to assets/images/rocksat-photo-gallery/rocksat-2011.bmp

@@ -1,29 +1,39 @@
+'use client'
 import { EventProps, events } from './EventsData'
 import styles from './EventsSection.module.css'
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
 
 const EventsSection = (): React.ReactElement => {
-	const removePastEvents = (): EventProps[] => {
+	const [futureEvents, setFutureEvents] = useState<EventProps[]>([])
+
+	useEffect(() => {
 		const currentDate = new Date();
 		currentDate.setHours(23, 59, 0, 0)
 		const updatedEventsWithDates = events.map(event => {
-			if (event.endDate && event.endDate.getTime() > currentDate.getTime()) {
+			const newEvent: EventProps = JSON.parse(JSON.stringify(event))
+			newEvent.date = new Date(newEvent.date)
+			if (newEvent.endDate) {
+				newEvent.endDate = new Date(newEvent.endDate)
+			}
+			if (newEvent.endDate && newEvent.endDate.getTime() > currentDate.getTime()) {
 				// Set date to be the next event occurrence if weekly
-				const dayOffset = (7 + event.date.getDay() - currentDate.getDay()) % 7
+				const dayOffset = (7 + newEvent.date.getDay() - currentDate.getDay()) % 7
 				const nextOccurrence = new Date(currentDate.getTime() + dayOffset * 24 * 60 * 60 * 1000)
-				nextOccurrence.setHours(event.date.getHours(), event.date.getMinutes())
-				event.date = nextOccurrence
+				nextOccurrence.setHours(newEvent.date.getHours(), newEvent.date.getMinutes())
+				newEvent.date = nextOccurrence
 			}
-			return event
+			return newEvent
 		});
 		const filteredEvents = updatedEventsWithDates.filter(event => event.date.getTime() > currentDate.getTime())
-		return filteredEvents
-	}
+		setFutureEvents(filteredEvents)
+	}, [])
 
 	return (
 		<div className={`flex-vertical ${styles.container}`}>
-			{removePastEvents().map((event, i) => <EventRow key={i} event={event}/>)}
+			{futureEvents.map((event, i) => <EventRow key={i} event={event}/>)}
 		</div>
 	)
 }
@@ -33,7 +43,7 @@ const EventRow = ({ event }: { event: EventProps }): React.ReactElement => {
 		<div className={styles.eventRow}>
 			<div className={`flex-vertical ${styles.eventRowLeft}`}>
 				<div className={`sub-section-header-text`}>{event.date.getMonth() + 1}/{event.date.getDate()}</div>
-				{event.endDate && <div>Weekly on Monday&apos;s</div>}
+				{event.endDate && <div>Weekly on {dayOfWeek[event.date.getDay()]}&apos;s</div>}
 			</div>
 			<div className={styles.eventRowRight}>
 				<div className={`flex-horizontal sub-section-header-text`}>{event.title}</div>

components/events/EventsSection.tsx

@@ -33,6 +33,6 @@
 }
 
 .menuItem:last-child {
-    border-bottom-left-radius: 8;
-    border-bottom-right-radius: 8;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }

components/navigation/DropDownMenu.module.css

@@ -9,7 +9,7 @@ import img5 from '@assets/images/rocksat-photo-gallery/rocksat-2015.jpg'
 import img6 from '@assets/images/rocksat-photo-gallery/rocksat-2014-3.jpg'
 import img7 from '@assets/images/rocksat-photo-gallery/rocksat-2014-2.jpg'
 import img8 from '@assets/images/rocksat-photo-gallery/rocksat-2014-1.jpg'
-import img9 from '@assets/images/rocksat-photo-gallery/rocksat-2011.jpg'
+import img9 from '@assets/images/rocksat-photo-gallery/rocksat-2011.bmp'
 
 export const rocksatPhotoGallery: PhotoComponentProps[] = [
 	{ image: img1, title: '2020', content: 'This group developed a payload to collect air samples via atmospheric port at varying altitudes to evaluate ozone and CFC levels' },

components/rocksat/RocksatData.ts

@@ -28,7 +28,7 @@ const theme = createTheme({
           color: 'var(--foreground)',
           backgroundColor: 'transparent',
           borderColor: 'var(--foreground)',
-          borderRadius: 8,
+          borderRadius: '8px',
           transition: 'color 500ms, background-color 500ms',
           '&:hover': {
             color: 'var(--primary)',