Discord Events Panel

src/app/volunteer_dashboard/home.tsx

@@ -4,7 +4,13 @@ import { Detail } from '@/components/common/navigation_stack/detail/Detail'
 import { NavigationButton } from '@/components/common/navigation_stack/navigation_button/NavigationButton'
 import { cn } from '@/util'
 import type { ReactElement } from 'react'
-import { FaDonate, FaUserShield, FaUserTag, FaUsers } from 'react-icons/fa'
+import {
+    FaCalendarAlt,
+    FaDonate,
+    FaUserShield,
+    FaUserTag,
+    FaUsers,
+} from 'react-icons/fa'
 import {
     FaCheckToSlot,
     FaClipboardUser,
@@ -38,6 +44,7 @@ export interface VolunteerDashboardUnselectedDetailProps {
     permissionCount?: number
     positionCount?: number
     endorsementCount?: number
+    eventCount?: number
 }
 
 export function renderVolunteerDashboardUnselectedDetail({
@@ -53,6 +60,7 @@ export function renderVolunteerDashboardUnselectedDetail({
     permissionCount,
     positionCount,
     endorsementCount,
+    eventCount,
 }: VolunteerDashboardUnselectedDetailProps): ReactElement {
     const displayName = currentUserName?.trim()
         ? currentUserName
@@ -183,6 +191,18 @@ export function renderVolunteerDashboardUnselectedDetail({
                             resetPanelHistoryOnClick
                         />
                     </div>
+                    <div className={styles.unselectedGrid}>
+                        {renderUnselectedGridHeader('Community')}
+                        <NavigationButton
+                            label="Events"
+                            description="Discord community events" // TODO: this sucks lol
+                            href="/volunteer_dashboard/panels/events"
+                            icon={FaCalendarAlt}
+                            tag={{ count: eventCount }}
+                            buttonType="card"
+                            resetPanelHistoryOnClick
+                        />
+                    </div>
                 </div>
             }
         />

src/app/volunteer_dashboard/layout.tsx

@@ -9,7 +9,11 @@ import { Detail } from '@/components/common/navigation_stack/detail/Detail'
 import { NavigationButton } from '@/components/common/navigation_stack/navigation_button/NavigationButton'
 import { Sidebar } from '@/components/common/navigation_stack/sidebar/Sidebar'
 import { Header } from '@/components/layout/Header'
-import { useEndorsementQueries, usePositionQueries } from '@/queries'
+import {
+    useEndorsementQueries,
+    usePositionQueries,
+    useEventQueries,
+} from '@/queries'
 import { usePaginatedSearch, useCurrentUser } from '@/util/hooks'
 import { useQuery } from '@tanstack/react-query'
 import { usePathname, useSearchParams } from 'next/navigation'
@@ -22,7 +26,13 @@ import {
 } from 'pv-contracts/data'
 import { Suspense, useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
-import { FaDonate, FaUserShield, FaUserTag, FaUsers } from 'react-icons/fa'
+import {
+    FaCalendarAlt,
+    FaDonate,
+    FaUserShield,
+    FaUserTag,
+    FaUsers,
+} from 'react-icons/fa'
 import {
     FaClipboardUser,
     FaDollarSign,
@@ -66,6 +76,7 @@ function LayoutContent({ children }: { children: ReactNode }) {
     const previousPathnameRef = useRef(pathname)
     const positionQueries = usePositionQueries()
     const endorsementQueries = useEndorsementQueries()
+    const eventQueries = useEventQueries()
     const [showWelcome, setShowWelcome] = useState(
         pathname === '/volunteer_dashboard' && welcomeParam
     )
@@ -93,6 +104,11 @@ function LayoutContent({ children }: { children: ReactNode }) {
         queryFn: ({ signal }) => endorsementQueries.getEndorsements({ signal }),
         enabled: endorsementQueries.ready,
     })
+    const events = useQuery({
+        queryKey: ['events'],
+        queryFn: eventQueries.getEventsSummary,
+        enabled: eventQueries.ready,
+    })
 
     const positionCount = positionHierarchy.data?.positions?.length
 
@@ -169,6 +185,13 @@ function LayoutContent({ children }: { children: ReactNode }) {
             icon: FaCheckToSlot,
             count: endorsements.data?.length,
         },
+        {
+            key: 'events',
+            label: 'Events',
+            href: '/volunteer_dashboard/panels/events',
+            icon: FaCalendarAlt,
+            count: events.data?.query?.data?.count,
+        },
     ]
 
     useEffect(() => {

src/app/volunteer_dashboard/panels/endorsements/endorsementFilters.tsx

@@ -81,7 +81,7 @@ const publishedOptions = [
     { value: false, label: 'Not Published' },
 ]
 
-function YesNoMenu({
+export function YesNoMenu({
     selected,
     onSelect,
 }: {