Add new category types

Author: seakrueger

src/app/events/page.tsx

@@ -519,7 +519,7 @@ export default function EventPage() {
                   </DialogDescription>
                 </DialogHeader>
 
-                <div className="space-y-6 py-4">
+                <div className="space-y-4 py-4">
                   {/* Date Range Picker */}
                   <div>
                     <Label className="text-sm font-semibold mb-3 block">
@@ -552,7 +552,7 @@ export default function EventPage() {
                       <Label className="text-sm font-semibold mb-3 block">
                         {filter.name}
                       </Label>
-                      <div className="space-y-2">
+                      <div className="space-y-2 grid grid-cols-2 @xl/main:grid-cols-2 @4xl/main:grid-cols-2">
                         {filter.items.map((item) => {
                           const isActive =
                             selectedFilters[filter.name]?.has(item);
@@ -638,21 +638,15 @@ export default function EventPage() {
                             <SelectValue placeholder="Select a category" />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectGroup>
-                              <SelectLabel>Category</SelectLabel>
-                              <SelectItem
-                                value={EventTypes.VOLUNTEER.toString()}
-                              >
-                                Volunteering
-                              </SelectItem>
-                              <SelectItem value={EventTypes.SPORTS.toString()}>
-                                Sports
-                              </SelectItem>
-                              <SelectItem
-                                value={EventTypes.TUTORING.toString()}
-                              >
-                                Tutoring
-                              </SelectItem>
+                          <SelectGroup>
+                            <SelectLabel>Category</SelectLabel>
+                              {Object.values(EventTypes)
+                                .filter((v) => typeof v === "string" && v != 'NO_CATEGORY') // Does not work
+                                .map((category) => (
+                                  <SelectItem key={category} value={category}>
+                                    {category}
+                                  </SelectItem>
+                                ))}
                             </SelectGroup>
                           </SelectContent>
                         </Select>

src/context/EventFilterContext.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { EventTypes } from "@/lib/firebaseEvents"
 import { createContext, useContext, useState, ReactNode } from "react"
 import { DateRange } from "react-day-picker"
 
@@ -28,9 +29,12 @@ export type EventFilterContextType = {
   setSelectedTags: (tags: Set<string>) => void
 }
 
+const categoryItems = Object.values(EventTypes)
+  .filter((v) => typeof v === "string" && v != 'NO_CATEGORY') as string[];
+
 const initialFilters: FilterCategory[] = [
   { name: "Attendance", items: ["Organizing", "Attendee"] },
-  { name: "Category", items: ["Volunteering", "Sports", "Tutoring"] },
+  { name: "Category", items: categoryItems },
 ]
 
 const EventFilterContext = createContext<EventFilterContextType | undefined>(

src/lib/firebaseEvents.tsx

@@ -14,7 +14,15 @@ export enum EventTypes {
     NO_CATEGORY,
     VOLUNTEER = 'Volunteering',
     SPORTS = 'Sports',
-    TUTORING = 'Tutoring'
+    TUTORING = 'Tutoring',
+    ARTS = 'Arts & Crafts',
+    YOGA = 'Yoga',
+    BOOKS = 'Book Club',
+    WORKSHOP = 'Workshop & Learning',
+    MUSIC = 'Music & Concert',
+    HANGOUT = 'Hang-out',
+    OUTDOORS = 'Outdoors & Nature',
+    FOOD = 'Food & Dining'
 }
 
 export function getEventTypeFilename(category: EventTypes): string {
@@ -25,8 +33,24 @@ export function getEventTypeFilename(category: EventTypes): string {
       return "/models/SportsMarker.glb";
     case EventTypes.TUTORING:
       return "/models/TutoringMarker.glb";
+    case EventTypes.ARTS:
+      return "/models/ArtsAndCraftsMarker.glb";
+    case EventTypes.YOGA:
+      return "/models/YogaMarker.glb";
+    case EventTypes.BOOKS:
+      return "/models/BookClubMarker.glb";
+    case EventTypes.FOOD:
+      return "/models/FoodAndDining.glb";
+    case EventTypes.HANGOUT:
+      return "/models/HangOut.glb";
+    case EventTypes.MUSIC:
+      return "/models/MusicAndConcertMarker.glb";
+    case EventTypes.OUTDOORS:
+      return "/models/OutdoorAndNatureMarker.glb";
+    case EventTypes.WORKSHOP:
+      return "/models/WorkshopAndLearningMarker.glb";
     default:
-        return "";
+      return "/models/HangOut.glb";
   }
 }
 
@@ -38,6 +62,22 @@ function getEventTypeName(category: EventTypes) {
           return "SPORTS";
         case EventTypes.TUTORING:
           return "TUTORING";
+        case EventTypes.ARTS:
+          return "ARTS";
+        case EventTypes.YOGA:
+          return "YOGA";
+        case EventTypes.BOOKS:
+          return "BOOKS";
+        case EventTypes.FOOD:
+          return "FOOD";
+        case EventTypes.HANGOUT:
+          return "HANGOUT";
+        case EventTypes.MUSIC:
+          return "MUSIC";
+        case EventTypes.OUTDOORS:
+          return "OUTDOORS";
+        case EventTypes.WORKSHOP:
+          return "WORKSHOP";
         default:
             return "NO_CATEGORY";
     }