Avenmia/add workshop dropdown (#125)

* Adding dropdown option for the workshop

* Adding second dropdown

* Fixing blank answer issue and refactoring dropdown

* Refactoring dropdown

* Fixing dropdown enabled and disabled

* Fixing dropdown styling

* Updating delimiter

* Removing extra console.log

* Fixing enabled and disabled for multiselect andclearing text

Author: avenmia

prisma/migrations/20230312022837_initial_migration/migration.sql

@@ -221,7 +221,7 @@ VALUES
         '16',
         'What is your workshop location? (Select one answer)',
         16,
-        'option'
+        'dropdown'
     );
 
 INSERT INTO

src/components/survey/demographicssurvey.tsx

@@ -16,13 +16,20 @@ export interface SurveyAnswer {
 }
 
 export type QuestionDirection = "Prev" | "Next";
-export type QuestionType = "option" | "multiSelect" | "text" | "number";
+export type QuestionType =
+  | "option"
+  | "multiSelect"
+  | "text"
+  | "number"
+  | "dropdown";
 export type AnswerType = "option" | "text" | "number" | "optionText";
 export interface DemographicSurveyInfo {
   questionNumber: number;
   totalQuestions: number;
 }
 
+export const MULTI_ANSWER_DELIMITER = "---";
+
 export default function DemographicsSurvey() {
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [surveyCompleted, setSurveyCompleted] = useState(false);
@@ -86,8 +93,8 @@ export default function DemographicsSurvey() {
       }
       const questionId = surveyData[currentQuestion]?.questionId;
       let answers = [answer];
-      if (answer?.includes(";")) {
-        answers = answer.split(";");
+      if (answer?.includes(MULTI_ANSWER_DELIMITER)) {
+        answers = answer.split(MULTI_ANSWER_DELIMITER).filter((a) => a !== "");
       }
 
       // TODO: Fix these conditionals

src/components/survey/dropdownAnswers.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useState } from "react";
+import type { SurveyAnswer } from "./demographicssurvey";
+
+interface DropdownAnswersProps {
+  answers: SurveyAnswer[];
+  updateCurrentAnswer: (val: string) => void;
+  setDisabled: (val: boolean) => void;
+}
+
+export default function DropdownAnswers({
+  answers,
+  updateCurrentAnswer,
+  setDisabled,
+}: DropdownAnswersProps) {
+  const uniqueCounties = useMemo(() => {
+    const counties = answers.map((a) => a.answer.split("-")[0]);
+    return ["--", ...new Set(counties)] as string[];
+  }, [answers]);
+
+  const [county, setCounty] = useState(uniqueCounties[0] ?? "");
+
+  const getFilteredWorkshopsByCounty = (val: string) => {
+    const filteredWorkshops: string[] = answers
+      .map((a) => a.answer)
+      .filter((c) => c.includes(val));
+    return [
+      "--",
+      ...(filteredWorkshops.map((c) => c.split("-")[1]) as string[]),
+    ];
+  };
+
+  const [countyWorkshops, setCountyWorkshops] = useState<string[]>(
+    getFilteredWorkshopsByCounty(uniqueCounties[0] ?? "")
+  );
+
+  useEffect(() => {
+    if (county === "--") {
+      setDisabled(true);
+    }
+    setCountyWorkshops(getFilteredWorkshopsByCounty(county));
+  }, [county, answers]);
+
+  const handleChange = (val: string) => {
+    updateCurrentAnswer(`${county}-${val}`);
+    if (county !== "--" && val !== "--") {
+      setDisabled(false);
+    }
+    if (county === "--" || val === "--") {
+      setDisabled(true);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col">
+        <>
+          <label htmlFor="county" className="text-med mb-5 mr-2">
+            Select your county
+          </label>
+          <select
+            id="county"
+            className="form-select mb-5 w-64 rounded"
+            onChange={(e) => setCounty((e.target as HTMLSelectElement).value)}
+          >
+            {uniqueCounties.map((c, index) => (
+              <option key={index} value={c}>
+                {c}
+              </option>
+            ))}
+          </select>
+        </>
+        {countyWorkshops.length > 0 && (
+          <>
+            <label htmlFor="workshop" className="mb-5 mr-2 text-base">
+              Select your workshop
+            </label>
+            <select
+              id="workshop"
+              className="form-select mb-5 w-64 rounded"
+              onChange={(e) =>
+                handleChange((e.target as HTMLSelectElement).value)
+              }
+            >
+              {countyWorkshops.map((w, index) => (
+                <option key={index} value={w}>
+                  {w}
+                </option>
+              ))}
+            </select>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

src/components/survey/multiSelectAnswers.tsx

@@ -1,5 +1,8 @@
 import { useRef, useState } from "react";
-import type { SurveyAnswer } from "./demographicssurvey";
+import {
+  MULTI_ANSWER_DELIMITER,
+  type SurveyAnswer,
+} from "./demographicssurvey";
 
 interface MultiSelectAnswersProps {
   answers: SurveyAnswer[];
@@ -26,9 +29,13 @@ export default function MultiSelectAnswers({
     const checkedTextAnswers = Array.from(checkboxesText).filter(
       (cb) => (cb as HTMLInputElement).checked
     );
+    const uncheckedTextAnswers = Array.from(checkboxesText).filter(
+      (cb) => !(cb as HTMLInputElement).checked
+    );
     const values = checkedAnswers
       .map((ca) => (ca as HTMLInputElement).value)
-      .join(";");
+      .join(MULTI_ANSWER_DELIMITER);
+
     const textValues = checkedTextAnswers.map(
       (ca) =>
         (ca as HTMLInputElement).value +
@@ -38,13 +45,23 @@ export default function MultiSelectAnswers({
       (ca) => (ca as HTMLInputElement).value
     );
     setDisabledInput(answerValues);
-    const textValuesConcat = textValues.join(";");
+    const textValuesConcat = textValues.join(MULTI_ANSWER_DELIMITER);
     if (values.length > 0) {
-      updateCurrentAnswer(values + ";" + textValuesConcat);
+      updateCurrentAnswer(values + MULTI_ANSWER_DELIMITER + textValuesConcat);
     } else {
       updateCurrentAnswer(textValuesConcat);
     }
-
+    if (textValuesConcat.length === 0) {
+      // clear text boxes
+      uncheckedTextAnswers.forEach((ca) => {
+        (ca.nextElementSibling?.children[0] as HTMLInputElement).value = "";
+        return;
+      });
+    }
+    if (values.length === 0 && textValuesConcat.length === 0) {
+      setDisabled(true);
+      return;
+    }
     setDisabled(false);
   };
 
@@ -64,7 +81,6 @@ export default function MultiSelectAnswers({
       </>
     );
   };
-  console.log("Disabled inputs are:", disabledInput);
   const checkBoxText = (a: SurveyAnswer, index: number) => {
     return (
       <>

src/components/survey/surveyquestion.tsx

@@ -9,6 +9,7 @@ import type {
 import RadioButtonAnswers from "./radioButtonAnswers";
 import MultiSelectAnswers from "./multiSelectAnswers";
 import TextAnswer from "./textAnswers";
+import DropdownAnswers from "./dropdownAnswers";
 
 interface SurveyQuestionProps {
   surveyInfo: DemographicSurveyInfo;
@@ -57,6 +58,14 @@ export default function SurveyQuestion({
             number={questionType === "number"}
           />
         );
+      case "dropdown":
+        return (
+          <DropdownAnswers
+            setDisabled={setDisabled}
+            updateCurrentAnswer={setSelectedAnswer}
+            answers={answers}
+          />
+        );
       default:
         return null;
     }