Add tab for the RSVPing to tavern

src/app/[tab]/page.tsx

@@ -28,7 +28,7 @@ export default function Page({
   }, [])
 
   const { tab } = params
-  const validTabs = ['signpost', 'shipyard', 'wonderdome', 'shop']
+  const validTabs = ['signpost', 'shipyard', 'wonderdome', 'shop', 'tavern']
   if (!validTabs.includes(tab)) return notFound()
 
   const { magic_auth_token } = searchParams

src/app/harbor/tabs/tabs.tsx

@@ -5,6 +5,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import Shipyard from '../shipyard/shipyard'
 import Battles from '../battles/battles'
 import Shop from '../shop/shop'
+import Tavern from '../tavern/tavern'
 import { useEffect } from 'react'
 import SignPost from '../signpost/signpost'
 import { tour } from './tour'
@@ -211,6 +212,11 @@ export default function Harbor({
       path: 'shop',
       component: <Shop session={session} />,
     },
+    {
+      name: <>Tavern 🍻</>,
+      path: 'tavern',
+      component: <Tavern />,
+    },
   ]
 
   let usPrices = false

src/app/harbor/tavern/tavern.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect } from 'react'
+import useLocalStorageState from '../../../../lib/useLocalStorageState'
+import { setTavernRsvpStatus, getTavernRsvpStatus } from '@/app/utils/tavern'
+
+const RsvpStatusSwitcher = () => {
+  const [rsvpStatus, setRsvpStatus] = useLocalStorageState(
+    'cache.rsvpStatus',
+    'none',
+  )
+
+  useEffect(() => {
+    // set rsvp status
+    getTavernRsvpStatus().then((status) => setRsvpStatus(status))
+  }, [])
+
+  const onOptionChangeHandler = (e) => {
+    setRsvpStatus(e.target.value)
+    setTavernRsvpStatus(e.target.value)
+  }
+
+  return (
+    <div className="text-center mb-6 mt-12" id="region-select">
+      <label>Will you join?</label>
+      <select
+        onChange={onOptionChangeHandler}
+        value={rsvpStatus}
+        className="ml-2 text-gray-600 rounded-sm"
+      >
+        <option disabled>Select</option>
+        <option value="none">Nope, can't do neither</option>
+        <option value="organizer">I can organize a tavern near me</option>
+        <option value="participant">I want to attend a tavern near me</option>
+      </select>
+    </div>
+  )
+}
+
+export default function Tavern() {
+  return (
+    <div className="container mx-auto px-4 py-8 text-white relative">
+      <div className="text-center text-white">
+        <h1 className="font-heading text-5xl mb-6 text-center relative w-fit mx-auto">
+          Mystic Tavern
+        </h1>
+
+        <RsvpStatusSwitcher />
+      </div>
+    </div>
+  )
+}

src/app/utils/tavern.ts

@@ -0,0 +1,45 @@
+'use server'
+
+import Airtable from 'airtable'
+import { getSession } from './auth'
+
+Airtable.configure({
+  apiKey: process.env.AIRTABLE_API_KEY,
+  endpointUrl: process.env.AIRTABLE_ENDPOINT_URL,
+})
+
+type RsvpStatus = 'none' | 'organizer' | 'participant'
+export const setTavernRsvpStatus = async (rsvpStatus: RsvpStatus) => {
+  // check auth
+  const session = await getSession()
+  if (!session) {
+    return
+  }
+  if (!session.personId) {
+    return
+  }
+
+  // update status
+  const base = Airtable.base(process.env.BASE_ID)
+  const result = await base('people').update(session.personId, {
+    tavern_rsvp_status: rsvpStatus,
+  })
+
+  return result.get('tavern_rsvp_status')
+}
+
+export const getTavernRsvpStatus = async () => {
+  // check auth
+  const session = await getSession()
+  if (!session) {
+    return
+  }
+  if (!session.personId) {
+    return
+  }
+
+  // get status
+  const base = Airtable.base(process.env.BASE_ID)
+  const record = await base('people').find(session.personId)
+  return record.get('tavern_rsvp_status') as RsvpStatus
+}

src/middleware.ts

@@ -212,5 +212,12 @@ export async function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/signpost', '/shipyard', '/wonderdome', '/shop', '/api/cron/'],
+  matcher: [
+    '/signpost',
+    '/shipyard',
+    '/wonderdome',
+    '/shop',
+    '/tavern',
+    '/api/cron/',
+  ],
 }