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;