Merge pull request #1170 from hackclub/malted/tavern-rsvp-rewrite

malted/tavern rsvp rewrite
hackclub · Feb 3, 2025 · 8f910a9 · 8f910a9
2 parents efab2bf + c9a59e1
commit 8f910a9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/app/harbor/tavern/tavern-utils.ts b/src/app/harbor/tavern/tavern-utils.ts
@@ -109,6 +109,7 @@ export const getTavernEvents = async () => {
 }
 
 export async function rspvForTavern(formData: FormData) {
+  console.log('Saving rspv for tavern seliction...')
   let res = { success: true, error: null }
 
   await Promise.all([

diff --git a/src/app/harbor/tavern/tavern.tsx b/src/app/harbor/tavern/tavern.tsx
@@ -49,7 +49,7 @@ const RsvpStatusSwitcher = ({
   rsvpStatus: RsvpStatus
   setRsvpStatus: (status: RsvpStatus) => void
   tavernEvents: TavernEventItem[]
-  selectedTavern: TavernEventItem | null
+  selectedTavern: TavernEventItem | null | 'loading'
   setSelectedTavern: (tavernId: string | null) => void
   shirtSize: any
   setShirtSize: (size: string) => void
@@ -58,6 +58,7 @@ const RsvpStatusSwitcher = ({
   const [editedFlag, setEditedFlag] = useState(false)
   const [attendeeNoOrganizerModal, setAttendeeNoOrganizerModal] =
     useState(false)
+  const [submitting, setSubmitting] = useState(false)
 
   const { toast } = useToast()
 
@@ -128,21 +129,40 @@ const RsvpStatusSwitcher = ({
       </Modal>
 
       <form
-        action={async (formData: FormData) => {
-          const rsvpResponse = JSON.parse(await rspvForTavern(formData))
-
-          if (rsvpResponse.success) {
-            toast({
-              title: 'Saved',
-              description:
-                editMessages[Math.floor(Math.random() * editMessages.length)],
+        onSubmit={(e) => {
+          e.preventDefault() // Prevent default form submission
+          setSubmitting(true)
+
+          rspvForTavern(new FormData(e.currentTarget))
+            .then((res) => {
+              const rsvpResponse = JSON.parse(res)
+
+              if (rsvpResponse.success) {
+                toast({
+                  title: 'Saved',
+                  description:
+                    editMessages[
+                      Math.floor(Math.random() * editMessages.length)
+                    ],
+                })
+              } else {
+                toast({
+                  title: 'Error',
+                  description: `Failed to save your changes:\n${rsvpResponse.error}`,
+                })
+              }
+              setSubmitting(false)
+              setEditedFlag(false)
             })
-          } else {
-            toast({
-              title: 'Error',
-              description: `Failed to save your changes:\n${rsvpResponse.error}`,
+            .catch((error) => {
+              console.error('Submission error:', error)
+              toast({
+                title: 'Error',
+                description: 'An unexpected error occurred',
+              })
+              setSubmitting(false)
+              setEditedFlag(false)
             })
-          }
         }}
         className="flex flex-col justify-items-stretch gap-2"
       >
@@ -187,13 +207,13 @@ const RsvpStatusSwitcher = ({
                     <p className="text-red-500">
                       Failed to fetch your tavern location
                     </p>
-                  ) : !tavernEvents || !selectedTavern ? (
+                  ) : !tavernEvents || selectedTavern === 'loading' ? (
                     <p>Loading tavern events selection...</p>
                   ) : (
                     <label>
                       Which tavern will you attend?
                       <select
-                        value={selectedTavern.id}
+                        value={selectedTavern?.id}
                         onChange={(e) => {
                           const t = tavernEvents.find(
                             (te) => te.id === e.target.value,
@@ -263,8 +283,10 @@ const RsvpStatusSwitcher = ({
             <p className="text-orange-500">You have unsaved changes!</p>
           ) : null}
 
-          <Button type="submit" disabled={!editedFlag}>
-            Submit {editedFlag ? ' your changes' : ''}
+          <Button type="submit" disabled={!editedFlag || submitting}>
+            {submitting
+              ? 'Submitting, please be patient!'
+              : `Submit ${editedFlag ? ' your changes' : ''}`}
           </Button>
         </div>
       </form>
@@ -335,9 +357,9 @@ export default function Tavern() {
   )
   const [tavernPeople, setTavernPeople] = useState<TavernPersonItem[]>([])
   const [tavernEvents, setTavernEvents] = useState<TavernEventItem[]>([])
-  const [selectedTavern, setSelectedTavern] = useState<TavernEventItem | null>(
-    null,
-  )
+  const [selectedTavern, setSelectedTavern] = useState<
+    TavernEventItem | null | 'loading'
+  >('loading')
   const [shirtSize, setShirtSize] = useLocalStorageState(
     'cache.shirtSize',
     'none',