fix/feat: n/a gender option, proposal error messages / revoking proposals (#23)

* fix: n/a gender option

* fix: proposal error messages show properly + propose on enter

* fix: more descriptive message for invalid proposee, proper return for dupe proposal

* feat: revoke proposals

Author: Dropheart

app/pages/proposals.vue

@@ -53,7 +53,7 @@ async function handlePropose() {
 
     router.go(0);
   } catch (err) {
-    alert(err.message);
+    alert(err.data);
   }
 }
 async function handleAccept(shortcode: string) {
@@ -65,7 +65,20 @@ async function handleAccept(shortcode: string) {
 
     router.go(0);
   } catch (err) {
-    alert(err.message);
+    alert(err.data);
+  }
+}
+
+async function handleRevoke(shortcode: string) {
+  try {
+    await $fetch('/api/family/proposal', {
+      method: 'DELETE',
+      body: { shortcode }
+    });
+
+    router.go(0);
+  } catch (err) {
+    alert(err.data);
   }
 }
 </script>
@@ -153,9 +166,20 @@ async function handleAccept(shortcode: string) {
             <div class="flex flex-col items-start">
               <strong>{{ proposal.proposee }}</strong>
             </div>
-            <div class="flex items-start gap-3">
-              <span class="cursor-pointer bg-yellow-400 p-1 text-sm text-white">
-                Pending
+            <div
+              class="flex items-start gap-3"
+              @click="handleRevoke(proposal.proposee)">
+              <span
+                class="group grid cursor-pointer bg-yellow-400 p-1 text-sm text-white duration-300 hover:bg-red-600 motion-reduce:transition-none">
+                <!-- We shove them into the same cell in a grid to essentially overlay them for the transition. duration-300 is not inherited. -->
+                <div
+                  class="col-start-1 row-start-1 duration-300 group-hover:opacity-0">
+                  Pending
+                </div>
+                <div
+                  class="col-start-1 row-start-1 opacity-0 duration-300 group-hover:opacity-100">
+                  Revoke?
+                </div>
               </span>
             </div>
           </div>
@@ -168,6 +192,7 @@ async function handleAccept(shortcode: string) {
           </strong>
           <div class="flex gap-4">
             <input
+              @keyup.enter="handlePropose"
               type="text"
               class="flex-grow"
               placeholder="e.g. nj421"

app/pages/survey.vue

@@ -160,7 +160,7 @@ async function handleSubmit() {
 
       <SurveyGroup label="Gender:" :required="true">
         <SurveySelect
-          :options="['male', 'female', 'other', 'na']"
+          :options="['male', 'female', 'other', 'n/a']"
           :labels="['Male', 'Female', 'Other', 'Prefer not to say']"
           name="gender"
           v-model="formData.gender"

hono/family/family.ts

@@ -124,7 +124,10 @@ export const family = factory
         .where(eq(students.shortcode, proposee));
 
       if (proposeeInDb.length == 0) {
-        return ctx.text('Invalid proposee.', 400);
+        return ctx.text(
+          'Invalid proposee. Have they signed in to MaDs yet?',
+          400
+        );
       }
 
       // 3 max proposals
@@ -140,10 +143,11 @@ export const family = factory
       }
 
       // No dupe proposals
-      currProposals.forEach(({ proposer: _proposer, proposee: _proposee }) => {
-        if (_proposee == proposee)
+      for (const proposal of currProposals) {
+        if (proposal.proposee == proposee) {
           return ctx.text('You have already proposed to this user.', 400);
-      });
+        }
+      }
 
       await db.insert(proposals).values({
         proposer: proposer,