add support for select all, none, and other options for volunteer application

components/Event/EventApplication/ApplicationPopup.tsx

@@ -1,4 +1,4 @@
-import { Modal } from 'antd';
+import { Modal, message } from 'antd';
 import 'survey-core/defaultV2.min.css';
 import { Model } from 'survey-core';
 import { Survey } from 'survey-react-ui';
@@ -8,19 +8,44 @@ import {
   ApplicationAnswer,
   QueriedVolunteerEventDTO,
 } from 'bookem-shared/src/types/database';
+import * as constants from '@/utils/constants';
 
 // choices can type string[] or null
 const processChoices = (choices: String[] | undefined) => {
   if (choices == null) {
     return null;
   }
 
-  return choices.map(choice => {
-    return {
-      value: choice,
-      text: choice,
-    };
+  const processedChoices: any[] = [];
+  let showNoneItem = false;
+  let showOtherItem = false;
+  let showSelectAllItem = false;
+
+  choices.forEach(choice => {
+    switch (choice) {
+      case constants.NONE:
+        showNoneItem = true;
+        break;
+      case constants.OTHER:
+        showOtherItem = true;
+        break;
+      case constants.SELECT_ALL:
+        showSelectAllItem = true;
+        break;
+      default:
+        processedChoices.push({
+          value: choice,
+          text: choice,
+        });
+    }
   });
+
+  return {
+    showNoneItem,
+    showOtherItem,
+    showSelectAllItem,
+    choices: processedChoices,
+  };
 };
 
 // process answes to fit the answer type. return the answer casted into application answer
@@ -40,14 +65,17 @@ const processAnswers = (answerObj: any) => {
   return answers;
 };
 
+// TODO modify survey model
+// TODO modify process response
+
 const makeSurveyModel = (questions: ApplicationQuestionData[]) => {
   const elements = questions.map(question => {
     return {
       name: question._id,
       title: question.title,
       type: question.type,
       isRequired: question.isRequired,
-      choices: processChoices(question.choices),
+      ...processChoices(question.choices),
     };
   });
 
@@ -72,11 +100,11 @@ export default function ApplicationPopup({
 
   let survey = new Model(makeSurveyModel(questions));
 
-  survey.onComplete.add(result => {
+  survey.onComplete.add(async result => {
     const answers = processAnswers(result.data);
     console.log('Survey results: ', answers);
     // send the answers to the server
-    fetch('/api/event/' + event._id + '/apply', {
+    const res = await fetch('/api/event/' + event._id + '/apply', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -86,6 +114,12 @@ export default function ApplicationPopup({
       }),
     });
 
+    if (res.status !== 200) {
+      message.error('Failed to submit application');
+      console.error('Failed to submit application');
+      return;
+    }
+
     onClose();
     onSubmit();
   });

utils/constants.ts

@@ -111,3 +111,12 @@ export const EVENT_CONTACT_ICON_WIDTH = 23;
  * Default height of event contact icons
  */
 export const EVENT_CONTACT_ICON_HEIGHT = 23;
+
+
+/**
+ * Constants for application form choices
+ */
+
+export const NONE = 'None';
+export const OTHER = 'Other';
+export const SELECT_ALL = 'Select All';