brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

remove old survey code from survey page

Browse Source
This commit is contained in:
Brandon Egger 2023-04-11 01:48:03 -05:00
parent c6bcf23af1
commit 2f284ac882
2 changed files with 1 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/index.tsx
View File

@ -1,5 +1,4 @@
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { ArrowUpRightIcon } from '@heroicons/react/20/solid';

91
src/pages/resources/survey.tsx
View File

@ -1,5 +1,4 @@
import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
import { GuidedSurvey, type Question, type QuestionTypes, type Option } from "~/components/Survey";
import { GuidedSurvey, type Question, type QuestionTypes } from "~/components/Survey";
const questions: Question<QuestionTypes>[] = [
{
@ -101,94 +100,6 @@ const questions: Question<QuestionTypes>[] = [
},
]
const ChoiceQuestion = ({question, formData, updateFormData}: {question: Question<QuestionTypes>, formData: Record<string, QuestionTypes[]>, updateFormData: Dispatch<SetStateAction<Record<string, QuestionTypes[]>>>}) => {
const OptionToggle = ({option}: {option: Option<QuestionTypes>}) => {
const selected = formData[question.for]?.includes(option.value) ?? false;
const handleToggle = () => {
const newFormData = {
...formData
};
if (!newFormData[question.for]) {
newFormData[question.for] = [option.value];
} else if (newFormData[question.for]?.includes(option.value)) {
newFormData[question.for] = newFormData[question.for]?.filter(function(item) {
return item !== option.value
}) ?? [];
} else {
newFormData[question.for] = [...newFormData[question.for] ?? [], option.value];
}
updateFormData(newFormData);
}
return (
<button type="button" onClick={handleToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (selected ? "bg-amber-200" : "bg-white")}>
{option.label}
</button>
)
}
useEffect(() => {
if (!formData[question.for]) {
const newFormData = {...formData};
newFormData[question.for] = [];
updateFormData(newFormData);
}
});
const htmlOptions: JSX.Element[] = []
const optionButtons: JSX.Element[] = []
question.options.forEach((option, index) => {
optionButtons.push(<OptionToggle key={index} option={option} />)
htmlOptions.push(<option key={index} selected={formData[question.for]?.includes(option.value)} value={option.value.toString()}>{option.label}</option>)
});
return (
<div className="text-center border-b border-neutral-400 py-4 mx-auto">
<label htmlFor={question.for} className="font-bold border-b border-neutral-800 text-xl mb-2">{question.header}</label>
<p className="text-md mb-2">{question.question}</p>
<select className="hidden" name={question.for} multiple>
{htmlOptions}
</select>
<div className="flex flex-col space-y-1 justify-center">
{optionButtons}
</div>
</div>
)
}
const SearchForm = ({questions}: {questions: Question<QuestionTypes>[]}) => {
const [formData, setFormData] = useState<(Record<string, QuestionTypes[]>)>({});
const questionComponents = questions.map((question, index) => {
return <ChoiceQuestion key={index} question={question} formData={formData} updateFormData={setFormData} />
})
return (
<form action="/resources" className="py-4 flex flex-col">
{questionComponents}
<button className="mt-4 font-bold text-xl py-2 px-4 bg-white mx-auto rounded-xl border border-neutral-400 hover:border-neutral-800">search</button>
</form>
)
}
// const SearchPage = () => {
// return <>
// <div className="w-full max-w-xl mx-auto mt-4 mb-4 rounded-xl overflow-hidden border border-neutral-400 bg-neutral-200 drop-shadow-md">
// <div className="px-4 py-2 bg-gradient-to-t from-neutral-900 to-neutral-700 mx-auto overflow-hidden">
// <h1 className="text-gray-300 font-bold">Search</h1>
// </div>
// <div>
// <SearchForm questions={questions} />
// </div>
// </div>
// </>
// }
const SearchPage = () => {
return (
<div className="w-full max-w-xl mx-auto mt-4 mb-4 rounded-xl overflow-hidden border border-neutral-400 bg-neutral-200 drop-shadow-md">