Make activities display based on active event

src/store/store.js

@@ -1,5 +1,6 @@
 import { createStore } from 'vuex';
 import axios from 'axios';
+import { formatDateToEST } from "@/utils/formatDate.js";
 
 // Optional: a small adapter for user objects
 class UserAdapter {
@@ -40,7 +41,7 @@ export default createStore({
         state.activities = [];
     },
     setEvent(state, event) {
-        state.events = event;
+        state.event = event;
     },
     clearEvent(state) {
         state.event = null;
@@ -105,7 +106,7 @@ export default createStore({
     async getAllActivities({ commit,state }, eventId) {
         try{
             if (!eventId) return;
-            const response = await axios.get(`${state.apiBaseUrl}/user/register/event/activity/${eventId}`);
+            const response = await axios.get(`${state.apiBaseUrl}/event/activity/${eventId}`);
 
             // Convert dates from UTC to local time (i.e., EST) and to a user-friendly format
             const activities = response.data.activities.map(activity => {
@@ -132,12 +133,12 @@ export default createStore({
 
       async getActiveEvent({ commit, state }) {
           try {
-              const response = await axios.get(`${state.apiBaseUrl}/user/register/event/active`);
+              const response = await axios.get(`${state.apiBaseUrl}/event/active`);
 
               // Convert dates from UTC to local time (i.e., EST) and to a user-friendly format
-              const event = response.data
-              event.startDate = formatDateToEST(event.startDate);
-              event.endDate = formatDateToEST(event.endDate);
+              const event = response.data.event
+              event.startDate = new Date(formatDateToEST(event.startDate));
+              event.endDate = new Date (formatDateToEST(event.endDate));
 
               commit("setEvent", event);
               return {success: true, message: response.data.message};

src/utils/formatDate.js

@@ -0,0 +1,13 @@
+export function formatDateToEST(dateString) {
+    const options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+        timeZone: "America/New_York"
+    };
+    return new Date(dateString).toLocaleString("en-US", options);
+}

src/views/ActivitiesPage.vue

@@ -3,7 +3,7 @@
     <div v-if="event && Object.keys(event).length > 0" class="container" style="color: #ffffff">
       <div class="header" style="margin-bottom: 10px;">
         <div class="circle" style="font-size:27px; height:100px;">
-          <p>{{ event.startDate.getFullYear() || '' }} Schedule</p>
+          <p>{{ new Date(event.startDate).getFullYear() || '' }} Schedule</p>
         </div>
       </div>
 
@@ -95,21 +95,17 @@ export default {
   name: "ActivityPage",
   components: {},
   computed: {
-    ...mapGetters(['isLoggedIn']),
+    ...mapGetters(['isLoggedIn', 'getEvent']),
+    event() {
+      return this.getEvent;
+    },
     groupedActivities() {
       return this.groupActivitiesByDay(store.state.activities);
     }
   },
   data() {
     return {
       isLoading: false,
-      event: { // NOTE THIS IS TEMPORARY AND SHOULD BE REPLACED WITH A CALL TO THE BACKEND TO GET THE CORRECT EVENT
-        id: 1,
-        eventName: 'YCP Hacks 2025',
-        startDate: new Date('2025-11-07T22:00:00.000Z'),
-        endDate: new Date('2025-11-09T21:00:00.000Z'),
-        canChange: true
-      },
       hoveredRow: 0,
       expandedRows: []
     }
@@ -118,6 +114,7 @@ export default {
     async fetchActivities() {
       this.isLoading = true
 
+      await store.dispatch('getActiveEvent');
       await store.dispatch('getAllActivities', this.event.id);
 
       this.isLoading = false;