chore: Resolves conflict with dev branch

acmutd · Jun 11, 2022 · 23a9e45 · 23a9e45
2 parents af000ac + 2faf304
commit 23a9e45
Show file tree

Hide file tree

Showing 12 changed files with 1,298 additions and 593 deletions.
diff --git a/components/DisplayQuestion.tsx b/components/DisplayQuestion.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState, useLayoutEffect, Fragment } from 'react';
+import { Field, ErrorMessage } from 'formik';
+import Question from './RegistrationQuestion';
+
+/**
+ *Display registration questions Component
+ *
+ *
+ */
+
+function DisplayQuestion(props) {
+  return (
+    <Fragment>
+      {/* Display text input questions */}
+      {props.obj.textInputQuestions?.map((inputObj) => (
+        <Question key={inputObj.id} type="text" question={inputObj} />
+      ))}
+      {/* Display number input questions */}
+      {props.obj.numberInputQuestions?.map((inputObj) => (
+        <Question
+          key={inputObj.id}
+          type="number"
+          question={inputObj}
+          value={props.values[inputObj.name]}
+          onChange={props.onChange}
+        />
+      ))}
+      {/* Display dropdown input questions */}
+      {props.obj.dropdownQuestions?.map((inputObj) => (
+        <Question key={inputObj.id} type="dropdown" question={inputObj} />
+      ))}
+      {/* Display datalist input questions */}
+      {props.obj.datalistQuestions?.map((inputObj) => (
+        <Question key={inputObj.id} type="datalist" question={inputObj} />
+      ))}
+      {/* Display checkbox input questions */}
+      {props.obj.checkboxQuestions?.map((inputObj) => (
+        <Question key={inputObj.id} type="checkbox" question={inputObj} />
+      ))}
+      {/* Display text area input questions */}
+      {props.obj.textAreaQuestions?.map((inputObj) => (
+        <Question key={inputObj.id} type="textArea" question={inputObj} />
+      ))}
+    </Fragment>
+  );
+}
+
+export default DisplayQuestion;
diff --git a/components/FaqDisclosure.tsx b/components/FaqDisclosure.tsx
@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react';
-import { ChevronUpIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/solid';
 
 /**
  *
@@ -43,7 +43,7 @@ export default function FaqDisclosure({
             }}
           >
             <span>{question}</span>
-            <ChevronUpIcon className={`${isOpen ? 'transform rotate-180' : ''} w-5 h-5`} />
+            <ChevronDownIcon className={`${isOpen ? 'transform rotate-180' : ''} w-5 h-5`} />
           </button>
         </Disclosure.Button>
         {isOpen && (

diff --git a/components/RegistrationQuestion.tsx b/components/RegistrationQuestion.tsx
@@ -0,0 +1,145 @@
+import React, { useEffect, useState, useLayoutEffect, Fragment } from 'react';
+import { Field, ErrorMessage } from 'formik';
+
+/**
+ *Text input question Component
+ *
+ *
+ */
+function Question(props) {
+  if (props.type === 'text') {
+    return (
+      <Fragment>
+        <label htmlFor={props.question.id} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <Field
+          id={props.question.id}
+          name={props.question.name}
+          className="border-2 border-gray-400 rounded-md p-1"
+        />
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  } else if (props.type === 'number') {
+    return (
+      <Fragment key={props.question.id}>
+        <label htmlFor={props.question.id} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <input
+          id={props.question.id}
+          className="border-2 border-gray-400 rounded-md p-1"
+          name={props.question.name}
+          type="number"
+          min={props.question.min}
+          max={props.question.max}
+          pattern={props.question.pattern}
+          onChange={props.onChange}
+          value={props.value}
+        />
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  } else if (props.type === 'dropdown') {
+    return (
+      <Fragment>
+        <label htmlFor={props.question.id} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <Field
+          as="select"
+          name={props.question.name}
+          id={props.question.id}
+          className="border-2 border-gray-400 rounded-md p-1 mr-auto"
+        >
+          <option value="" disabled selected></option>
+          {props.question.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.title}
+            </option>
+          ))}
+        </Field>
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  } else if (props.type === 'checkbox') {
+    return (
+      <Fragment>
+        <label htmlFor={props.question.name} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <div role="group" aria-labelledby="checkbox-group" className="flex flex-col">
+          {props.question.options.map((option) => (
+            <label key={option.value}>
+              <Field type="checkbox" name={props.question.name} value={option.value} />
+              &nbsp;{option.title}
+            </label>
+          ))}
+        </div>
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  } else if (props.type === 'datalist') {
+    return (
+      <Fragment>
+        <label htmlFor={props.question.name} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <Field
+          type="text"
+          id={props.question.id}
+          name={props.question.name}
+          list={props.question.datalist}
+          className="border-2 border-gray-400 rounded-md p-1"
+          autoComplete="off"
+        ></Field>
+        <datalist id={props.question.datalist}>
+          <option value="" disabled selected></option>
+        </datalist>
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  } else if (props.type === 'textArea') {
+    return (
+      <Fragment>
+        <label htmlFor={props.question.name} className="mt-4">
+          {props.question.required ? '*' : ''}
+          {props.question.question}
+        </label>
+        <Field
+          as="textarea"
+          name={props.question.name}
+          placeholder={props.question.placeholder}
+          className="border-2 border-gray-400 rounded-md p-1"
+        ></Field>
+        <ErrorMessage
+          name={props.question.name}
+          render={(msg) => <div className="text-red-600">{msg}</div>}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default Question;
diff --git a/components/faq.tsx b/components/faq.tsx
@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/solid';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import React, { useState, useEffect } from 'react';
@@ -60,7 +60,7 @@ export default function FaqPage({ fetchedFaqs }: { fetchedFaqs: AnsweredQuestion
             >
               Expand All
             </button>
-            <ChevronUpIcon className="w-5 h-5" />
+            <ChevronDownIcon className="w-5 h-5" />
           </div>
         </div>
         {/* FAQ for lg-md */}