add form submission;

This commit is contained in:
Brandon Egger 2023-03-17 01:12:23 -05:00
parent c349cd702e
commit f118bbecdd
3 changed files with 69 additions and 5 deletions

View File

@ -1,6 +1,8 @@
import { Platform, RangeInput, Skill, SkillLevel } from "@prisma/client";
import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import Head from "next/head";
import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";
import ResourceTable from "~/components/ResourceTable";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
@ -24,15 +26,64 @@ export async function getStaticProps() {
};
}
interface ViewDetails {
page?: number;
}
interface SearchQuery {
age?: RangeInput,
platforms?: Platform[],
skill_levels?: SkillLevel[],
skills?: Skill[],
}
const parseQueryData = (query: ParsedUrlQuery): SearchQuery & ViewDetails => {
const view = {
page: Number(query["page"] ?? 1),
}
const filter: SearchQuery = {};
if (query["ages"]) {
const ages: number[] = [];
if (Array.isArray(query["ages"])) {
const validRanges = query["ages"].filter((value) => {
return value.split("-").length == 2;
});
validRanges.forEach((value) => {
const split = value.split("-");
ages.push(Number(split[0]));
ages.push(Number(split[1]));
});
} else {
const split = query["ages"].split("-");
ages.push(Number(split[0]));
ages.push(Number(split[1]));
}
filter.age = {
min: Math.min(...ages),
max: Math.max(...ages),
}
}
if (query["platforms"])
return {...filter, ...view};
}
const Resources = () => {
const router = useRouter()
const queryData = parseQueryData(router.query);
const currentPage = queryData.page;
const query = api.auditoryResource.getAll.useQuery();
if (!query.data) {
return <></>
}
const currentPage = Number(router.query["page"] ?? 1)
return (
<>
<Head>

View File

@ -167,14 +167,12 @@ const ChoiceQuestion = ({question, formData, updateFormData}: {question: Questio
const SearchForm = ({questions}: {questions: Question<QuestionTypes>[]}) => {
const [formData, setFormData] = useState<(Record<string, QuestionTypes[]>)>({});
console.log(formData);
const questionComponents = questions.map((question, index) => {
return <ChoiceQuestion key={index} question={question} formData={formData} updateFormData={setFormData} />
})
return (
<form action="/" className="py-4 flex flex-col">
<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>

View File

@ -1,3 +1,4 @@
import { Platform } from "@prisma/client";
import { z } from "zod";
import {
@ -20,4 +21,18 @@ export const auditoryResourceRouter = createTRPCRouter({
getAll: publicProcedure.query(({ ctx }) => {
return ctx.prisma.auditoryResource.findMany();
}),
search: publicProcedure
.input(z.object({
ages: z.object({
min: z.number().int(),
max: z.number().int(),
}).optional(),
platforms: z.string().array().optional()
}))
.query(({ctx}) => {
return {
test: "hello",
};
}),
});