From 77b4eb0f7343a62913001788da55fed53dea9f44 Mon Sep 17 00:00:00 2001
From: Malted <malted@malted.dev>
Date: Wed, 22 Jan 2025 16:50:08 -0500
Subject: [PATCH 1/2] Toast notifs onchange

---
 src/app/harbor/shipyard/edit-ship-form.tsx |   2 +-
 src/app/harbor/tavern/tavern.tsx           | 135 +++++++++++----------
 2 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/src/app/harbor/shipyard/edit-ship-form.tsx b/src/app/harbor/shipyard/edit-ship-form.tsx
index b35eae5d..a5c7d7f9 100644
--- a/src/app/harbor/shipyard/edit-ship-form.tsx
+++ b/src/app/harbor/shipyard/edit-ship-form.tsx
@@ -7,7 +7,7 @@ import React, { useState } from 'react'
 import Modal from '../../../components/ui/modal'
 import { EditableShipFields } from '../../utils/server/data'
 
-const editMessages = [
+export const editMessages = [
   'Orpheus hopes you know that she put a lot of effort into recording your changes~',
   'Heidi scribbles down your changes hastily...',
   "Orpheus put your Ship changes in the logbook. They're going nowhere, rest assured.",
diff --git a/src/app/harbor/tavern/tavern.tsx b/src/app/harbor/tavern/tavern.tsx
index 65a1fa76..fc9bfc0f 100644
--- a/src/app/harbor/tavern/tavern.tsx
+++ b/src/app/harbor/tavern/tavern.tsx
@@ -20,6 +20,8 @@ import {
 } from './tavern-utils'
 import Modal from '@/components/ui/modal'
 import { Button } from '@/components/ui/button'
+import { useToast } from '@/hooks/use-toast'
+import { editMessages } from '../shipyard/edit-ship-form'
 
 const Map = dynamic(() => import('./map'), {
   ssr: false,
@@ -41,6 +43,15 @@ const RsvpStatusSwitcher = ({ tavernEvents, onTavernSelect }) => {
   const [attendeeNoOrganizerModal, setAttendeeNoOrganizerModal] =
     useState(false)
 
+  const { toast } = useToast()
+  useEffect(() => {
+    toast({
+      title: 'Saved',
+      description:
+        editMessages[Math.floor(Math.random() * editMessages.length)],
+    })
+  }, [rsvpStatus, whichTavern, shirtSize])
+
   useEffect(() => {
     // set rsvp status
     getTavernRsvpStatus().then((status) => setRsvpStatus(status))
@@ -99,71 +110,73 @@ const RsvpStatusSwitcher = ({ tavernEvents, onTavernSelect }) => {
         <br />
         Please consider volunteering to organize this tavern, me hearty!
       </Modal>
-      <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 either</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
+        className="text-center mb-6 mt-12 flex flex-col gap-2"
+        id="region-select"
+      >
+        <label>
+          Will you join?
+          <select
+            onChange={onOptionChangeHandler}
+            value={rsvpStatus}
+            className="ml-2 text-gray-600 rounded-sm"
+          >
+            <option disabled>Select</option>
+            <option value="none">Nope, can't do either</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>
+        </label>
 
         {tavernEvents &&
         (rsvpStatus === 'participant' || rsvpStatus === 'organizer') ? (
-          <div>
-            <label>Which tavern will you attend?</label>
-            <select
-              onChange={onTavernChangeHandler}
-              value={whichTavern}
-              className="ml-2 text-gray-600 rounded-sm"
-            >
-              <option value="">Select</option>
-              {Object.keys(eventsByCountry)
-                .sort()
-                .map((country) => (
-                  <optgroup key={country} label={country}>
-                    {eventsByCountry[country].map((te) => (
-                      <option key={te.id} value={te.id}>
-                        {te.locality}
-                        {te.organizers.length === 0
-                          ? ' (no organizers yet!)'
-                          : ''}
-                      </option>
-                    ))}
-                  </optgroup>
-                ))}
-              {/* {tavernEvents.map((te, idx) => {
-                console.log(te)
-                return (
-                  <option key={idx} value={te.id}>
-                    {te.locality}
-                    {te.organizers.length === 0 ? ' (no organizers yet!)' : ''}
-                  </option>
-                )
-              })} */}
-            </select>
+          <>
+            <label>
+              Which tavern will you attend?
+              <select
+                onChange={onTavernChangeHandler}
+                value={whichTavern}
+                className="ml-2 text-gray-600 rounded-sm"
+              >
+                <option value="">Select</option>
+                {Object.keys(eventsByCountry)
+                  .sort()
+                  .map((country) => (
+                    <optgroup key={country} label={country}>
+                      {eventsByCountry[country].map((te) => (
+                        <option key={te.id} value={te.id}>
+                          {te.locality}
+                          {te.organizers.length === 0
+                            ? ' (no organizers yet!)'
+                            : ''}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ))}
+              </select>
+            </label>
 
-            <label>What is your shirt size?</label>
-            <select
-              onChange={async (e) => {
-                setShirtSize(e.target.value)
-                await submitShirtSize(e.target.value)
-              }}
-              value={shirtSize}
-              className="ml-2 text-gray-600 rounded-sm"
-            >
-              <option disabled>Select</option>
-              <option value="Small">Small</option>
-              <option value="Medium">Medium</option>
-              <option value="Large">Large</option>
-              <option value="XL">XL</option>
-              <option value="XXL">XXL</option>
-            </select>
-          </div>
+            <label>
+              What is your shirt size?
+              <select
+                onChange={async (e) => {
+                  setShirtSize(e.target.value)
+                  await submitShirtSize(e.target.value)
+                }}
+                value={shirtSize}
+                className="ml-2 text-gray-600 rounded-sm"
+              >
+                <option disabled>Select</option>
+                <option value="Small">Small</option>
+                <option value="Medium">Medium</option>
+                <option value="Large">Large</option>
+                <option value="XL">XL</option>
+                <option value="XXL">XXL</option>
+              </select>
+            </label>
+          </>
         ) : null}
       </div>
     </>

From 53a2aeb8a2bea73db0cbe665d04f22fadf75d29a Mon Sep 17 00:00:00 2001
From: Malted <malted@malted.dev>
Date: Wed, 22 Jan 2025 17:14:03 -0500
Subject: [PATCH 2/2] done

---
 src/app/harbor/tavern/map.tsx | 79 +++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/app/harbor/tavern/map.tsx b/src/app/harbor/tavern/map.tsx
index dcda9442..d135d57b 100644
--- a/src/app/harbor/tavern/map.tsx
+++ b/src/app/harbor/tavern/map.tsx
@@ -32,7 +32,7 @@ export default function Map({ tavernEvents, tavernPeople, selectedTavern }) {
         className="h-96 rounded-lg"
         center={[0, 0]}
         zoom={2}
-        scrollWheelZoom={false}
+        scrollWheelZoom={true}
       >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -61,10 +61,10 @@ export default function Map({ tavernEvents, tavernPeople, selectedTavern }) {
           />
           <p>Mystic Tavern without organizer</p>
         </div>
-        <div className="flex flex-row justify-start items-center gap-2">
+        {/* <div className="flex flex-row justify-start items-center gap-2">
           <div className="h-7 w-7 rounded-full border-2 border-white bg-[#cfdfff]"></div>
           <p>Someone unable to organize or attend</p>
-        </div>
+        </div> */}
         <div className="flex flex-row justify-start items-center gap-2">
           <div className="h-7 w-7 rounded-full border-2 border-white bg-[#ffd66e]"></div>
           <p>Someone able to organize</p>
@@ -73,10 +73,10 @@ export default function Map({ tavernEvents, tavernPeople, selectedTavern }) {
           <div className="h-7 w-7 rounded-full border-2 border-white bg-[#f82b60]"></div>
           <p>Someone able to attend</p>
         </div>
-        <div className="flex flex-row justify-start items-center gap-2">
+        {/* <div className="flex flex-row justify-start items-center gap-2">
           <div className="h-7 w-7 rounded-full border-2 border-white bg-[#666666]"></div>
           <p>Someone who has not responded</p>
-        </div>
+        </div> */}
       </Card>
     </div>
   )
@@ -116,43 +116,48 @@ function TavernMarkers(props: MapProps) {
 
   console.log(props)
 
-  const peopleMarkers = props.people.map((t) => {
-    let iconClass = `rounded-full border-2 border-white w-full h-full `
+  const peopleMarkers = props.people
+    .map((t) => {
+      let iconClass = `rounded-full border-2 border-white w-full h-full `
 
-    switch (t.status) {
-      case 'none': {
-        iconClass += 'bg-[#cfdfff]'
-        break
-      }
-      case 'organizer': {
-        iconClass += 'bg-[#ffd66e]'
-        break
-      }
-      case 'participant': {
-        iconClass += 'bg-[#f82b60]'
-        break
-      }
-      default: {
-        iconClass += 'bg-[#666666]'
-        break
+      switch (t.status) {
+        case 'none': {
+          // iconClass += 'bg-[#cfdfff]'
+          // break
+          return null
+        }
+        case 'organizer': {
+          iconClass += 'bg-[#ffd66e]'
+          break
+        }
+        case 'participant': {
+          iconClass += 'bg-[#f82b60]'
+          break
+        }
+        default: {
+          // iconClass += 'bg-[#666666]'
+          // break
+          return null
+        }
       }
-    }
 
-    const icon = new DivIcon({
-      className: iconClass,
-      iconSize: [25, 25],
+      const icon = new DivIcon({
+        className: iconClass,
+        iconSize: [25, 25],
+      })
+
+      return (
+        <Marker
+          key={t.coordinates}
+          position={
+            t.coordinates.split(', ').map((c) => Number(c)) as LatLngExpression
+          }
+          icon={icon}
+        />
+      )
     })
+    .filter((e) => e !== null)
 
-    return (
-      <Marker
-        key={t.coordinates}
-        position={
-          t.coordinates.split(', ').map((c) => Number(c)) as LatLngExpression
-        }
-        icon={icon}
-      />
-    )
-  })
   const eventMarkers = props.events
     .map((e) => {
       if (!e.geocode) {