Add event types

hcp-uw · Jan 15, 2025 · d99fbad · d99fbad
1 parent 3ab00c5
commit d99fbad
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 31 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,10 +6,85 @@ import 'App.css';
 const App = () => {
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
 
+  // TODO: How will this be structured?
+  // date and time field NOT FINAL => need to account for timezones (unless it's worked out in the backend)
+  const testEvents = [
+    {
+      id: 0,
+      name: 'General Meeting',
+      date: '2025-01-14',
+      time: '6:00-7:30pm',
+      location: 'MOR 220',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Club Meeting',
+    },
+    {
+      id: 1,
+      name: 'General Meeting',
+      date: '2025-01-21',
+      time: '6:00-7:30pm',
+      location: 'MOR 220',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Club Meeting',
+    },
+    {
+      id: 2,
+      name: 'Another Event',
+      date: '2025-01-14',
+      time: '8:00-9:30am',
+      location: 'Somewhere',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Some type',
+    },
+    {
+      id: 3,
+      name: 'Event but with a Long Name',
+      date: '2025-01-17',
+      time: '1:00-2:30pm',
+      location: 'The Quad',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Another type',
+    },
+    {
+      id: 4,
+      name: 'Some other event',
+      date: '2025-01-23',
+      time: '6:30-8:00pm',
+      location: 'Somehwhere',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Type',
+    },
+    {
+      id: 5,
+      name: 'UW v Purdue',
+      date: '2025-01-15',
+      time: '6:30pm',
+      location: 'Hec Edmundson Pavilion',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Sports Match',
+    },
+    {
+      id: 6,
+      name: 'UW event',
+      date: '2025-01-23',
+      time: '4:30-5:00pm',
+      location: 'Red Square',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'UW Event',
+    },
+  ];
+
   return (
     <div className="app">
       {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
-      <Calendar setSelectedEvent={setSelectedEvent} />
+      <Calendar setSelectedEvent={setSelectedEvent} events={testEvents} />
     </div>
   );
 };

diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -6,6 +6,7 @@ import { Event } from 'types/Event';
 
 interface CalendarProps {
   setSelectedEvent: (event: Event) => void;
+  events: Event[];
 }
 
 const Calendar = (props: CalendarProps) => {
@@ -25,36 +26,25 @@ const Calendar = (props: CalendarProps) => {
     'December',
   ];
   const weekDayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
-  // TODO: how is this going to be structured?
-  const events = [
-    {
-      id: 1,
-      name: 'General Meeting',
-      date: '2025-01-14',
-      time: '6:00-7:30pm',
-      location: 'MOR 220',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
-    {
-      id: 2,
-      name: 'Another Event',
-      date: '2025-01-14',
-      time: '8:00-9:30am',
-      location: 'Somewhere',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
-    {
-      id: 3,
-      name: 'Event but with a Long Name',
-      date: '2025-01-17',
-      time: '1:00-2:30pm',
-      location: 'The Quad',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
+  const colors = [
+    '#d39d9d',
+    '#d3b49d',
+    '#d2d39d',
+    '#9dd3ad',
+    '#9db4d3',
+    '#ad9dd3',
   ];
+  const eventColors: Record<string, string> = {};
+
+  const getColorForEvent = (eventType: string) => {
+    if (!eventColors[eventType]) {
+      eventColors[eventType] =
+        colors[Object.keys(eventColors).length % colors.length];
+    }
+    return eventColors[eventType];
+  };
+
+  const events = props.events;
 
   const getDaysInMonth = (date: Date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -96,7 +86,7 @@ const Calendar = (props: CalendarProps) => {
             <CalendarEvent
               key={event.id}
               name={event.name}
-              color="#ad88e8"
+              color={getColorForEvent(event.type)}
               onClick={() => props.setSelectedEvent(event)}
             />
           ))}

diff --git a/src/components/EventDetails/EventDetails.tsx b/src/components/EventDetails/EventDetails.tsx
@@ -10,6 +10,7 @@ const EventDetails = (props: EventDetailsProps) => {
     <div className="event-details card">
       <h2>{props.selectedEvent.name}</h2>
       <h4>{props.selectedEvent.time}</h4>
+      <p>{props.selectedEvent.type}</p>
       <p>{props.selectedEvent.location}</p>
       <p>{props.selectedEvent.description}</p>
     </div>

diff --git a/src/types/Event.ts b/src/types/Event.ts
@@ -1,6 +1,7 @@
 export type Event = {
   id: number;
   name: string;
+  type: string;
   date: string;
   time: string;
   location: string;