switch to only query DB for the current page

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

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>
</>
);