Skip to content

Commit

Permalink
chore: Resolves conflict with dev branch
Browse files Browse the repository at this point in the history
  • Loading branch information
DedsecKnight committed Jun 11, 2022
2 parents af000ac + 2faf304 commit 23a9e45
Show file tree
Hide file tree
Showing 12 changed files with 1,298 additions and 593 deletions.
48 changes: 48 additions & 0 deletions components/DisplayQuestion.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions components/FaqDisclosure.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Disclosure } from '@headlessui/react';
import { ChevronUpIcon } from '@heroicons/react/solid';
import { ChevronDownIcon } from '@heroicons/react/solid';

/**
*
Expand Down Expand Up @@ -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 && (
Expand Down
145 changes: 145 additions & 0 deletions components/RegistrationQuestion.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions components/faq.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 */}
Expand Down
Loading

0 comments on commit 23a9e45

Please sign in to comment.