From c7d7603d46953be90555b0ec5de757616ccba578 Mon Sep 17 00:00:00 2001
From: jasonkuoubc <jason.kuo@ubc.ca>
Date: Thu, 16 Jan 2025 08:54:15 -0800
Subject: [PATCH 1/2] tested

---
 pages/[id]/HackerInfo.js | 59 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/pages/[id]/HackerInfo.js b/pages/[id]/HackerInfo.js
index 1d89d784..a78d957c 100644
--- a/pages/[id]/HackerInfo.js
+++ b/pages/[id]/HackerInfo.js
@@ -122,6 +122,8 @@ export default function HackerInfo({ id, hackathons }) {
   const [filter, setFilter] = useState({})
   const [calculate, setCalculate] = useState({})
   const downloadLink = useRef()
+  const [uniqueEvents, setUniqueEvents] = useState([])
+  const [selectedEvents, setSelectedEvents] = useState([])
 
   const clearFilters = () => {
     setGroupBy({ col1: '', func: '', col2: '' })
@@ -152,6 +154,35 @@ export default function HackerInfo({ id, hackathons }) {
     setFilteredData(res)
   }, [filter])
 
+  useEffect(() => {
+    if (unfilteredData.length > 0 && currTable === 'Applicants') {
+      const events = new Set()
+      unfilteredData.forEach(hacker => {
+        if (hacker.attendedEvents) {
+          const hackerEvents = hacker.attendedEvents.split(',').map(e => e.trim())
+          hackerEvents.forEach(event => {
+            if (event) events.add(event)
+          })
+        }
+      })
+      setUniqueEvents(Array.from(events))
+    }
+  }, [unfilteredData, currTable])
+
+  const applyEventFilter = () => {
+    if (selectedEvents.length === 0) {
+      setFilteredData(unfilteredData)
+      return
+    }
+
+    const filtered = unfilteredData.filter(hacker => {
+      if (!hacker.attendedEvents) return false
+      const hackerEvents = hacker.attendedEvents.split(',').map(e => e.trim())
+      return selectedEvents.every(event => hackerEvents.includes(event))
+    })
+    setFilteredData(filtered)
+  }
+
   const saveGroupBy = () => {
     setFilter({
       ...filter,
@@ -464,6 +495,34 @@ export default function HackerInfo({ id, hackathons }) {
               )}
             </Selection>
           </Menu>
+          <Menu label="Events">
+            <Selection>
+              {uniqueEvents.map(event => (
+                <label key={event} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input
+                    type="checkbox"
+                    checked={selectedEvents.includes(event)}
+                    onChange={e => {
+                      if (e.target.checked) {
+                        setSelectedEvents([...selectedEvents, event])
+                      } else {
+                        setSelectedEvents(selectedEvents.filter(ev => ev !== event))
+                      }
+                    }}
+                  />
+                  {event}
+                </label>
+              ))}
+              {uniqueEvents.length > 0 && (
+                <Button
+                  type={CHECK}
+                  onClick={applyEventFilter}
+                  color={COLOR.TRANSPARENT}
+                  contentColor={COLOR.DARK_GRAY}
+                />
+              )}
+            </Selection>
+          </Menu>
         </FilterOptions>
       </Filters>
       {renderTable}

From 4aad826ce85227cc5d1140216c1cf83ac6e68299 Mon Sep 17 00:00:00 2001
From: jasonkuoubc <jason.kuo@ubc.ca>
Date: Thu, 16 Jan 2025 09:14:28 -0800
Subject: [PATCH 2/2] lint fix

---
 pages/[id]/HackerInfo.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/pages/[id]/HackerInfo.js b/pages/[id]/HackerInfo.js
index a78d957c..4d3ea4f3 100644
--- a/pages/[id]/HackerInfo.js
+++ b/pages/[id]/HackerInfo.js
@@ -498,8 +498,13 @@ export default function HackerInfo({ id, hackathons }) {
           <Menu label="Events">
             <Selection>
               {uniqueEvents.map(event => (
-                <label key={event} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <label
+                  key={event}
+                  htmlFor={`event-${event}`}
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                >
                   <input
+                    id={`event-${event}`}
                     type="checkbox"
                     checked={selectedEvents.includes(event)}
                     onChange={e => {