diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx
index b0282db..a61f5b3 100644
--- a/src/components/ResourceTable.tsx
+++ b/src/components/ResourceTable.tsx
@@ -310,12 +310,14 @@ const ResourceTable = ({
currentPage,
totalPages,
query,
+ showPageBar = true,
}: {
resources: AuditoryResource[];
resourcesPerPage: number;
currentPage: number;
totalPages: number;
query: ParsedUrlQuery;
+ showPageBar?: boolean;
}) => {
const resourceElements =
resources.map((resource, index) => {
@@ -325,12 +327,14 @@ const ResourceTable = ({
return (
-
+ {showPageBar ? (
+
+ ) : undefined}
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 3c7be8f..5f19b47 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -1,60 +1,15 @@
import { LinkIcon } from "@heroicons/react/20/solid";
import { PrinterIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
-import router, { useRouter } from "next/router";
+import { useRouter } from "next/router";
import ResourceTable from "~/components/ResourceTable";
import { api } from "~/utils/api";
import { parseQueryData } from "~/utils/parseSearchForm";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
-import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
-
-/**
- * Quick extension of the resource table designed to query all elements so they can be printed
- */
-const PrintResourceTable = ({
- totalResources,
- setLoaded,
-}: {
- totalResources: number;
- setLoaded: Dispatch>;
-}) => {
- const queryData = parseQueryData(router.query);
-
- const resourceQuery = api.auditoryResource.search.useQuery({
- skip: 0,
- take: totalResources,
- ages: queryData.age,
- platforms: queryData.platforms,
- skill_levels: queryData.skill_levels,
- skills: queryData.skills,
- });
-
- useEffect(() => {
- if (resourceQuery.data) {
- setLoaded(true);
- }
- }, [resourceQuery, setLoaded]);
-
- if (!resourceQuery.data) {
- return <>>;
- }
-
- return (
-
- );
-};
const Resources = () => {
const router = useRouter();
- const [printMode, setPrintMode] = useState(false);
- const [printPreviewLoaded, setPrintPreviewLoaded] = useState(false);
const queryData = parseQueryData(router.query);
const currentPage = queryData.page;
@@ -68,36 +23,16 @@ const Resources = () => {
skills: queryData.skills,
});
- useEffect(() => {
- const handlePrint = (event: Event) => {
- if (!printMode) {
- event.preventDefault();
- setPrintMode(true);
- }
- };
-
- window.addEventListener("beforeprint", handlePrint);
-
- return () => {
- window.removeEventListener("beforeprint", handlePrint);
- };
- }, [printMode]);
-
- useEffect(() => {
- if (printPreviewLoaded && printMode) {
- window.onafterprint = () => {
- setPrintMode(false);
- setPrintPreviewLoaded(false);
- };
- window.print();
- }
- }, [printPreviewLoaded, printMode]);
-
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}`;
return (
<>
@@ -123,31 +58,22 @@ const Resources = () => {
-
+
- {printMode ? (
-
- ) : (
-
- )}
+
>
diff --git a/src/pages/resources/print.tsx b/src/pages/resources/print.tsx
new file mode 100644
index 0000000..a02f18d
--- /dev/null
+++ b/src/pages/resources/print.tsx
@@ -0,0 +1,94 @@
+import router, { useRouter } from "next/router";
+import ResourceTable from "~/components/ResourceTable";
+import { api } from "~/utils/api";
+import { parseQueryData } from "~/utils/parseSearchForm";
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
+import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
+
+/**
+ * Quick extension of the resource table designed to query all elements so they can be printed
+ */
+const PrintResourceTable = ({
+ totalResources,
+ setLoaded,
+}: {
+ totalResources: number;
+ setLoaded: Dispatch>;
+}) => {
+ const queryData = parseQueryData(router.query);
+
+ const resourceQuery = api.auditoryResource.search.useQuery({
+ skip: 0,
+ take: totalResources,
+ ages: queryData.age,
+ platforms: queryData.platforms,
+ skill_levels: queryData.skill_levels,
+ skills: queryData.skills,
+ });
+
+ useEffect(() => {
+ if (resourceQuery.data) {
+ setLoaded(true);
+ }
+ }, [resourceQuery, setLoaded]);
+
+ if (!resourceQuery.data) {
+ return <>>;
+ }
+
+ return (
+
+ );
+};
+
+const Resources = () => {
+ const router = useRouter();
+ const [printPreviewLoaded, setPrintPreviewLoaded] = useState(false);
+
+ const queryData = parseQueryData(router.query);
+
+ 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,
+ });
+
+ useEffect(() => {
+ if (printPreviewLoaded) {
+ window.onafterprint = () => {
+ router.back();
+ };
+ window.print();
+ }
+ }, [printPreviewLoaded, router]);
+
+ if (!resourceQuery.data) {
+ return <>>;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+};
+
+export default Resources;