Added download option for assignment cards

Export PDF Download to hook
Prevented some NaN's

src/pages/record.tsx

@@ -24,9 +24,7 @@ import useGroups from "@/hooks/useGroups";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
 import {uuidv4} from "@firebase/util";
-import { BsFilePdf } from "react-icons/bs";
-import axios from "axios";
-import {toast} from "react-toastify";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -58,10 +56,6 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-type DownloadingPdf = {
-	[key: string]: boolean;
-};
-
 export default function History({user}: {user: User}) {
 	const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
 	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
@@ -76,8 +70,8 @@ export default function History({user}: {user: User}) {
 	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
 	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
 	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
-	const [downloadingPdf, setDownloadingPdf] = useState<DownloadingPdf>({});
 	const router = useRouter();
+	const renderPdfIcon = usePDFDownload("stats");
 
 	useEffect(() => {
 		if (stats && !isStatsLoading) {
@@ -208,28 +202,6 @@ export default function History({user}: {user: User}) {
 			correct / total < 0.3 && "text-mti-rose",
 		);
 		
-		const triggerDownload = async () => {
-			try {
-				setDownloadingPdf((prev) => ({...prev, [session]: true}));
-				const res = await axios.post(`/api/stats/${session}/export`);
-				toast.success("Report ready!");
-				const link = document.createElement("a");
-				link.href = res.data;
-				// download should have worked but there are some CORS issues
-				// https://firebase.google.com/docs/storage/web/download-files#cors_configuration
-				// link.download="report.pdf";
-				link.target = '_blank';
-				link.rel="noreferrer"
-				link.click();
-				setDownloadingPdf((prev) => ({...prev, [session]: false}));
-			} catch(err) {
-				toast.error("Failed to display the report!");
-				console.error(err);
-				setDownloadingPdf((prev) => ({...prev, [session]: false}));
-
-			}
-			
-		}
 		const content = (
 			<>
 				<div className="w-full flex justify-between -md:items-center 2xl:items-center">
@@ -248,32 +220,7 @@ export default function History({user}: {user: User}) {
 							Level{" "}
 							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
 						</span>
-						{/*<a
-							href="https://firebasestorage.googleapis.com/v0/b/mti-ielts.appspot.com/o/exam_report%2F1704838712225.pdf?alt=media&token=0df9a50a-05a9-40a8-ba7c-4ff10ac5f3c8"
-							//download="report.pdf"
-							target="_blank"
-							rel="noreferrer"
-						>
-							<BsFilePdf
-								className={`${textColor} text-2xl cursor-pointer`}
-								onClick={(e) => {
-									e.stopPropagation();
-									triggerDownload();
-								}}
-							/>
-							</a>*/}
-							{downloadingPdf[session] ? 
-								<span className={`${textColor} loading loading-infinity w-6`} /> : 
-								(
-									<BsFilePdf
-										className={`${textColor} text-2xl cursor-pointer`}
-										onClick={(e) => {
-											e.stopPropagation();
-											triggerDownload();
-										}}
-									/>
-								)
-							}
+						{renderPdfIcon(session, textColor, textColor)}
 					</div>
 				</div>