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

add form submission;

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/resources/index.tsx
View File

@ -1,6 +1,8 @@
import { Platform, RangeInput, Skill, SkillLevel } from "@prisma/client";
import { createProxySSGHelpers } from "@trpc/react-query/ssg"; import { createProxySSGHelpers } from "@trpc/react-query/ssg";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { ParsedUrlQuery } from "querystring";
import ResourceTable from "~/components/ResourceTable"; import ResourceTable from "~/components/ResourceTable";
import { appRouter } from "~/server/api/root"; import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db"; 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 Resources = () => {
const router = useRouter() const router = useRouter()
const queryData = parseQueryData(router.query);
const currentPage = queryData.page;
const query = api.auditoryResource.getAll.useQuery(); const query = api.auditoryResource.getAll.useQuery();
if (!query.data) { if (!query.data) {
return <></> return <></>
} }
const currentPage = Number(router.query["page"] ?? 1)
return ( return (
<> <>
<Head> <Head>

4
src/pages/resources/search.tsx
View File

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

15
src/server/api/routers/auditoryResources.ts
View File

@ -1,3 +1,4 @@
import { Platform } from "@prisma/client";
import { z } from "zod"; import { z } from "zod";
import { import {
@ -20,4 +21,18 @@ export const auditoryResourceRouter = createTRPCRouter({
getAll: publicProcedure.query(({ ctx }) => { getAll: publicProcedure.query(({ ctx }) => {
return ctx.prisma.auditoryResource.findMany(); 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",
};
}),
}); });