add form submission;
This commit is contained in:
parent
c349cd702e
commit
f118bbecdd
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
};
|
||||
}),
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user