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

improve table loading

Browse Source
This commit is contained in:
Brandon Egger 2023-06-06 22:05:27 -05:00
parent a05f541713
commit 54701726cd
2 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/resources/[id]/index.tsx
View File

@ -130,9 +130,41 @@ const ResourceViewPage = (
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
const router = useRouter();
if (!resourceQuery.data) {
return <></>;
}
const ConditionalView = () => {
if (!resourceQuery.data) {
return <></>;
}
return (
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="mx-4">
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
<DownloadButtons
platformLinks={resourceQuery.data.platform_links}
/>
</div>
</div>
<div className="justify-left flex flex-col pb-5">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<ResourceDescription
manufacturer={resourceQuery.data.manufacturer}
description={resourceQuery.data.description}
/>
</div>
<div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
<span className="px-2 py-2 text-sm text-neutral-200">
Ages {resourceQuery.data.ages.min}
{resourceQuery.data.ages.max >= 100
? "+"
: `-${resourceQuery.data.ages.max}`}
</span>
</div>
</div>
</div>
);
};
return (
<>
@ -148,33 +180,7 @@ const ResourceViewPage = (
}
>
<main className="mb-12">
<div className="mx-auto flex max-w-2xl flex-col flex-col-reverse divide-x py-4 sm:flex-row">
<div className="my-5 mr-4 flex flex-col justify-end text-lg font-bold">
<div className="mx-4">
<h1 className="mb-2 border-b border-neutral-400">Links</h1>
<DownloadButtons
platformLinks={resourceQuery.data.platform_links}
/>
</div>
</div>
<div className="justify-left flex flex-col pb-5">
<ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 text-left shadow">
<ResourceDescription
manufacturer={resourceQuery.data.manufacturer}
description={resourceQuery.data.description}
/>
</div>
<div className="ml-4 mr-auto mt-4 rounded-lg border-2 border-neutral-900 bg-neutral-600">
<span className="px-2 py-2 text-sm text-neutral-200">
Ages {resourceQuery.data.ages.min}
{resourceQuery.data.ages.max >= 100
? "+"
: `-${resourceQuery.data.ages.max}`}
</span>
</div>
</div>
</div>
<ConditionalView />
</main>
</AdminBarLayout>
<Footer />

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

@ -23,17 +23,30 @@ const Resources = () => {
skills: queryData.skills,
});
if (!resourceQuery.data) {
return <></>;
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
const printQueryStr =
router.asPath.split("?").length === 2
? router.asPath.split("?").at(-1) ?? ""
: "";
const printLink = `${router.route}/print?${printQueryStr}`;
const ConditionalTable = () => {
if (!resourceQuery.data) {
return <></>;
}
const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);
return (
<ResourceTable
resourcesPerPage={queryData.perPage}
resources={resourceQuery.data.resources}
totalPages={totalPages}
query={router.query}
currentPage={currentPage}
/>
);
};
return (
<>
<Header />
@ -67,13 +80,7 @@ const Resources = () => {
</Link>
</section>
</div>
<ResourceTable
resourcesPerPage={queryData.perPage}
resources={resourceQuery.data.resources}
totalPages={totalPages}
query={router.query}
currentPage={currentPage}
/>
<ConditionalTable />
</main>
<Footer />
</>