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

switch to only query DB for the current page

Browse Source
This commit is contained in:
Brandon Egger 2023-04-10 00:29:58 -05:00
parent 024abe2548
commit a069f4a03a
4 changed files with 98 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/ResourceTable.tsx
View File

@ -4,9 +4,10 @@ import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
import Image from 'next/image';
import Link from 'next/link';
import { translateEnumPlatform, translateEnumSkill } from '~/utils/enumWordLut';
import { type ChangeEvent, type Dispatch, type SetStateAction, useState } from 'react';
import { type ChangeEvent } from 'react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import { type ParsedUrlQuery, type ParsedUrlQueryInput } from 'querystring';
import { useRouter } from 'next/router';
export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResource, showMoreInfo?: boolean}) => {
const PriceIcons = ({type}: {type: PaymentType}) => {
@ -169,10 +170,10 @@ interface PagesNavigationProps {
currentPage: number;
pageCount: number;
resultsPerPage: number;
updateResultsPerPage: Dispatch<SetStateAction<number>>;
}
const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage, updateResultsPerPage}: PagesNavigationProps) => {
const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage}: PagesNavigationProps) => {
const router = useRouter();
const PageButton = ({number}: {number: number}) => {
const redirectQueryData: ParsedUrlQueryInput = {...query};
redirectQueryData.page = number;
@ -194,7 +195,28 @@ const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage, updateR
});
const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
updateResultsPerPage(parseInt(event.target.value));
if (!query) {
router.push({
pathname: '/resources',
query: {
perPage: event.target.value,
}
}).catch((reason) => {
console.error(reason);
});
return;
}
query['perPage'] = event.target.value;
router.push({
pathname: '/resources',
query: {
...query,
}
}).catch((reason) => {
console.error(reason);
});
};
return (
@ -225,21 +247,23 @@ const PagesNavigation = ({query, currentPage, pageCount, resultsPerPage, updateR
)
}
const ResourceTable = ({resources, currentPage, query}: {resources?: AuditoryResource[], currentPage: number, query?: ParsedUrlQuery}) => {
const [resourcesPerPage, setResourcesPerPage] = useState<number>(10);
const totalPages = Math.ceil((resources?.length ?? 0) / resourcesPerPage);
const pageResources = resources?.slice(resourcesPerPage*(currentPage-1), (resourcesPerPage*currentPage)) ?? [];
const resourceElements = pageResources?.map((resource, index) => {
return (<ResourceEntry key={index} resource={resource} />);
const ResourceTable = ({resources, resourcesPerPage, currentPage, totalPages, query}: {
resources: AuditoryResource[],
resourcesPerPage: number,
currentPage: number,
totalPages: number,
query: ParsedUrlQuery
}) => {
const resourceElements = resources.map((resource, index) => {
return (<ResourceEntry key={index} resource={resource} />);
}) ?? [];
return(
<div className="w-full">
<div className="mx-auto rounded-xl overflow-hidden border border-neutral-400">
<PagesNavigation query={query} updateResultsPerPage={setResourcesPerPage} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
<table className="w-full table-fixed bg-neutral-200 drop-shadow-md">
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 rounded-xl overflow-hidden">
<div className="mx-auto rounded-xl overflow-hidden border border-neutral-400 drop-shadow-md overflow-hidden">
<PagesNavigation query={query} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
<table className="w-full table-fixed bg-neutral-200 border-b border-neutral-400">
<thead className="bg-gradient-to-t from-neutral-900 to-neutral-700 drop-shadow-md">
<tr>
<th className="w-1/3 max-w-xs">
<span className="text-gray-300 block px-4 py-2 text-left">
@ -262,6 +286,9 @@ const ResourceTable = ({resources, currentPage, query}: {resources?: AuditoryRes
{resourceElements}
</tbody>
</table>
{(resources && resources.length > 4) ?
<PagesNavigation query={query} resultsPerPage={resourcesPerPage} currentPage={currentPage} pageCount={totalPages} />
: undefined}
</div>
</div>
);

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

@ -12,17 +12,21 @@ const Resources = () => {
const queryData = parseQueryData(router.query);
const currentPage = queryData.page;
const query = api.auditoryResource.search.useQuery({
ages: queryData.age,
platforms: queryData.platforms,
skill_levels: queryData.skill_levels,
skills: queryData.skills,
const resourceQuery = api.auditoryResource.search.useQuery({
skip: (queryData.page - 1) * queryData.perPage,
take: queryData.perPage,
ages: queryData.age,
platforms: queryData.platforms,
skill_levels: queryData.skill_levels,
skills: queryData.skills,
});
if (!query.data) {
return <></>
if (!resourceQuery.data) {
return <></>
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
return (
<>
<Head>
@ -43,7 +47,7 @@ const Resources = () => {
<p className="inline"> for specific resource recommendations.</p>
</div>
</div>
<ResourceTable query={router.query} resources={query.data} currentPage={currentPage} />
<ResourceTable resourcesPerPage={queryData.perPage} resources={resourceQuery.data.resources} totalPages={totalPages} query={router.query} currentPage={currentPage} />
</main>
</>
);

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

@ -1,4 +1,4 @@
import { SkillLevel, Skill, Platform, AuditoryResource } from "@prisma/client";
import { SkillLevel, Skill, Platform, type AuditoryResource } from "@prisma/client";
import { z } from "zod";
import {
@ -24,6 +24,8 @@ export const auditoryResourceRouter = createTRPCRouter({
search: publicProcedure
.input(z.object({
take: z.number().int(),
skip: z.number().int(),
ages: z.object({
min: z.number().int(),
max: z.number().int(),
@ -32,34 +34,47 @@ export const auditoryResourceRouter = createTRPCRouter({
skill_levels: z.nativeEnum(SkillLevel).array().optional(),
skills: z.nativeEnum(Skill).array().optional(),
}))
.query(({ input, ctx}) => {
return ctx.prisma.auditoryResource.findMany({
where: {
ages: {
is: {
min: {
lte: input.ages?.min,
},
max: {
gte: input.ages?.max,
}
.query(async ({ input, ctx}) => {
const search = {
ages: {
is: {
min: {
lte: input.ages?.min,
},
max: {
gte: input.ages?.max,
}
},
skill_levels: {
hasEvery: input.skill_levels ?? [],
},
skills: {
hasEvery: input.skills ?? [],
},
platform_links: {
some: {
platform: {
in: input.platforms,
}
}
},
skill_levels: {
hasEvery: input.skill_levels ?? [],
},
skills: {
hasEvery: input.skills ?? [],
},
platform_links: {
some: {
platform: {
in: input.platforms,
}
}
}
})
}
const [count, resources] = await ctx.prisma.$transaction([
ctx.prisma.auditoryResource.count({
where: search,
}),
ctx.prisma.auditoryResource.findMany({
skip: input.skip,
take: input.take,
where: search,
})
]);
return {
count,
resources,
}
}),
});

2
src/utils/parseSearchForm.ts
View File

@ -3,6 +3,7 @@ import { type ParsedUrlQuery } from "querystring";
export interface ViewDetails {
page: number;
perPage: number;
}
export interface SearchQuery {
@ -17,6 +18,7 @@ export type ParsedQueryData = SearchQuery & ViewDetails;
export const parseQueryData = (query: ParsedUrlQuery): ParsedQueryData => {
const view = {
page: Number(query["page"] ?? 1),
perPage: Number(query["perPage"] ?? 10),
}
const filter: SearchQuery = {};