diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx index e88d389..8a87dfa 100644 --- a/src/pages/resources/index.tsx +++ b/src/pages/resources/index.tsx @@ -1,34 +1,103 @@ import { LinkIcon } from "@heroicons/react/20/solid"; import { PrinterIcon } from "@heroicons/react/24/solid"; import Link from "next/link"; -import { useRouter } from "next/router"; +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 { useState } from "react"; +import { type Dispatch, type SetStateAction, useEffect, useState, FormEvent } from "react"; -const Resources = () => { - const router = useRouter(); - const [queryState, setQueryState] = useState(parseQueryData(router.query)); - - const currentPage = queryState.page; +/** + * 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: (queryState.page - 1) * queryState.perPage, - take: queryState.perPage, - ages: queryState.age, - platforms: queryState.platforms, - skill_levels: queryState.skill_levels, - skills: queryState.skills, + 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 <>; } - const totalPages = Math.ceil(resourceQuery.data.count / queryState.perPage); + 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; + + 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(() => { + 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); return ( <> @@ -56,15 +125,7 @@ const Resources = () => {
- + {printMode ? ( + + ) : ( + + )}