Remove Checkbox and File Upload question types, some logic changes

components/hackerAppNavbar.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   padding: 12px;
   gap: 20px;
   width: 100px;
-  height: 110px;
+  height: 150px;
   justify-content: center;
 `
 

components/questionCard.js

@@ -2,7 +2,13 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import Toggle from 'react-toggle'
 import TextField from './TextField'
-import { BASIC_INFO_FORM_INPUT_FIELDS, COLOR, QUESTION_TYPES, SKILLS_FORM_INPUT_FIELDS } from '../constants'
+import {
+  BASIC_INFO_FORM_INPUT_FIELDS,
+  COLOR,
+  QUESTION_TYPES,
+  QUESTIONNAIRE_FORM_INPUT_FIELDS,
+  SKILLS_FORM_INPUT_FIELDS,
+} from '../constants'
 import QuestionDropdown from './questionDropdown'
 import Icon from './Icon'
 
@@ -130,24 +136,53 @@ const QuestionCard = ({
 }) => {
   const [isToggled, setToggled] = useState(true)
   const [formInputOptions, setFormInputOptions] = useState(BASIC_INFO_FORM_INPUT_FIELDS)
+  const [questionTypes, setQuestionTypes] = useState([])
 
   useEffect(() => {
-    const pathSegments = location.pathname.split('/')
+    const pathSegments = window.location.pathname.split('/')
     const currentSection = pathSegments[pathSegments.length - 1]
 
     let allOptions
     if (currentSection === 'basicinfo') {
       allOptions = BASIC_INFO_FORM_INPUT_FIELDS
     } else if (currentSection === 'skills') {
       allOptions = SKILLS_FORM_INPUT_FIELDS
+    } else if (currentSection === 'questionnaire') {
+      allOptions = QUESTIONNAIRE_FORM_INPUT_FIELDS
     }
     const selectedFormInputs = questions.map(q => q.formInput)
     const filteredOptions = allOptions.filter(
       option => !selectedFormInputs.includes(option) || option === question.formInput
     )
 
     setFormInputOptions(filteredOptions)
-  }, [location.pathname, questions, question.formInput])
+  }, [window.location.pathname, questions, question.formInput])
+
+  useEffect(() => {
+    const pathSegments = window.location.pathname.split('/')
+    const currentSection = pathSegments[pathSegments.length - 1]
+
+    let allTypes = [
+      QUESTION_TYPES.MCQ,
+      QUESTION_TYPES.DROPDOWN,
+      QUESTION_TYPES.SELECTALL,
+      QUESTION_TYPES.SHORTANS,
+      QUESTION_TYPES.LONGANS,
+    ]
+    if (currentSection === 'basicinfo') {
+      allTypes = [
+        ...allTypes,
+        QUESTION_TYPES.SCHOOL,
+        QUESTION_TYPES.COUNTRY,
+        QUESTION_TYPES.MAJOR,
+        QUESTION_TYPES.LEGALNAME,
+      ]
+    } else if (currentSection === 'skills') {
+      allTypes = [...allTypes, QUESTION_TYPES.PORTFOLIO]
+    }
+
+    setQuestionTypes(allTypes)
+  }, [window.location.pathname])
 
   const handleOptionChange = (index, value) => {
     const newOptions = [...question.options]
@@ -192,33 +227,33 @@ const QuestionCard = ({
 
       {isToggled && (
         <>
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Question</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Question</QuestionTitle>
           <TextField
             placeholder="Question title"
             customValue={question.title || ''}
             onChangeCustomValue={e => handleChange(id, 'title', e.target.value)}
           />
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Description (optional)</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Description (optional)</QuestionTitle>
           <TextField
             placeholder="Question description"
             customValue={question.description || ''}
             onChangeCustomValue={e => handleChange(id, 'description', e.target.value)}
           />
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Question Type</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Question Type</QuestionTitle>
           <QuestionDropdown
             onSelect={o => handleChange(id, 'type', o)}
             defaultValue={question.type || ''}
-            options={Object.values(QUESTION_TYPES)}
+            options={questionTypes}
           />
-          {![
-            QUESTION_TYPES.MAJOR,
-            QUESTION_TYPES.SCHOOL,
-            QUESTION_TYPES.COUNTRY,
-            QUESTION_TYPES.PORTFOLIO,
-            QUESTION_TYPES.LEGALNAME,
+          {[
+            QUESTION_TYPES.MCQ,
+            QUESTION_TYPES.DROPDOWN,
+            QUESTION_TYPES.SELECTALL,
+            QUESTION_TYPES.SHORTANS,
+            QUESTION_TYPES.LONGANS,
           ].includes(question.type) && (
             <>
-              <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Form Input Field</QuestionTitle>
+              <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Form Input Field</QuestionTitle>
               <QuestionDropdown
                 onSelect={o => handleChange(id, 'formInput', o)}
                 defaultValue={question.formInput || ''}
@@ -231,20 +266,17 @@ const QuestionCard = ({
       )}
       {isToggled && question.type === QUESTION_TYPES.LONGANS && (
         <>
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Max Words</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Max Words</QuestionTitle>
           <TextField
             placeholder="Max words"
             customValue={question.maxWords || ''}
             onChangeCustomValue={e => handleChange(id, 'maxWords', e.target.value)}
           />
         </>
       )}
-      {isToggled &&
-      [QUESTION_TYPES.MCQ, QUESTION_TYPES.DROPDOWN, QUESTION_TYPES.SELECTALL, QUESTION_TYPES.CHECKBOX].includes(
-        question.type
-      ) ? (
+      {isToggled && [QUESTION_TYPES.MCQ, QUESTION_TYPES.DROPDOWN, QUESTION_TYPES.SELECTALL].includes(question.type) ? (
         <div>
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Options</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Options</QuestionTitle>
           <StyledOptions>
             {(question.options || []).map((option, index) => (
               <OptionsContent key={index}>
@@ -263,7 +295,7 @@ const QuestionCard = ({
             <Icon color={COLOR.MIDNIGHT_PURPLE_DEEP} icon="plus-circle" />
           </StyledQuestionButton>
           <StyledOtherToggle>
-            <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Add Other</QuestionTitle>
+            <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Add Other</QuestionTitle>
             <StyledToggle
               checked={question.other || false}
               icons={false}
@@ -279,7 +311,7 @@ const QuestionCard = ({
             icons={false}
             onChange={() => handleChange(id, 'required', !question.required)}
           />
-          <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Required</QuestionTitle>
+          <QuestionTitle color={COLOR.MIDNIGHT_PURPLE_DEEP}>Required</QuestionTitle>
         </StyledOtherToggle>
       )}
     </StyledQuestionCard>

constants.js

@@ -91,6 +91,7 @@ export const HACKER_APP_NAVBAR = {
   welcome: 'Welcome',
   basicinfo: 'Basic Info',
   skills: 'Skills',
+  questionnaire: 'Questionnaire',
 }
 
 export const ASSESSMENT_COLOR = {
@@ -341,11 +342,9 @@ export const QUESTION_TYPES = Object.freeze({
   SELECTALL: 'Select All',
   SHORTANS: 'Short Answer',
   LONGANS: 'Long Answer',
-  CHECKBOX: 'Checkbox',
   SCHOOL: 'School',
   COUNTRY: 'Country',
   MAJOR: 'Major',
-  UPLOAD: 'File Upload',
   PORTFOLIO: 'Portfolio',
   LEGALNAME: 'Full Legal Name',
 })
@@ -379,3 +378,5 @@ export const SKILLS_FORM_INPUT_FIELDS = [
   'longAnswers4',
   'longAnswers5',
 ]
+
+export const QUESTIONNAIRE_FORM_INPUT_FIELDS = ['eventsAttended', 'engagementSource']

pages/hackerapps/[id]/basicinfo.js

@@ -131,7 +131,21 @@ export default ({ id, hackathons }) => {
     setQuestions(newQuestions)
   }
 
+  const validateQuestions = questions => {
+    for (let question of questions) {
+      if (!question.formInput || question.formInput.trim() === '') {
+        return false
+      }
+    }
+    return true
+  }
+
   const handleSave = async hackathon => {
+    const validated = validateQuestions(questions)
+    if (!validated) {
+      alert('Please make sure that you have selected a formInput field for each question.')
+      return
+    }
     await updateHackerAppQuestions(hackathon, questions, 'BasicInfo')
     const newMetadata = { lastEditedAt: getTimestamp(), lastEditedBy: user }
     setMetadata(newMetadata)