devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added download option for assignment cards

Browse Source 
Export PDF Download to hook
Prevented some NaN's
This commit is contained in:
Joao Ramos
2024-01-09 23:15:13 +00:00
parent 418221427a
commit cc0f9712d6
6 changed files with 111 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/dashboards/AssignmentCard.tsx
View File

@@ -2,19 +2,20 @@ import ProgressBar from "@/components/Low/ProgressBar";
import useUsers from "@/hooks/useUsers";
import {Module} from "@/interfaces";
import {Assignment} from "@/interfaces/results";
import {Stat} from "@/interfaces/user";
import {calculateBandScore} from "@/utils/score";
import clsx from "clsx";
import moment from "moment";
import {useState} from "react";
import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
import { usePDFDownload } from "@/hooks/usePDFDownload";
interface Props {
onClick?: () => void;
allowDownload?: boolean;
}
export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick}: Assignment & Props) {
export default function AssignmentCard({id, name, assigner, startDate, endDate, assignees, results, exams, onClick, allowDownload}: Assignment & Props) {
const {users} = useUsers();
const renderPdfIcon = usePDFDownload("assignments");
const calculateAverageModuleScore = (module: Module) => {
const resultModuleBandScores = results.map((r) => {
@@ -33,7 +34,10 @@ export default function AssignmentCard({id, name, assigner, startDate, endDate,
onClick={onClick}
className="w-[350px] h-fit flex flex-col gap-6 bg-white border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
<div className="flex flex-col gap-3">
<h3 className="font-semibold text-xl">{name}</h3>
<div className="flex flex-row justify-between">
<h3 className="font-semibold text-xl">{name}</h3>
{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
</div>
<ProgressBar
color={results.length / assignees.length < 0.5 ? "red" : "purple"}
percentage={(results.length / assignees.length) * 100}

2
src/dashboards/Teacher.tsx
View File

@@ -226,7 +226,7 @@ export default function TeacherDashboard({user}: Props) {
<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
<div className="flex flex-wrap gap-2">
{assignments.filter(pastFilter).map((a) => (
<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} allowDownload/>
))}
</div>
</section>

60
src/hooks/usePDFDownload.tsx Normal file
View File

@@ -0,0 +1,60 @@
import React from "react";
import axios from "axios";
import { toast } from "react-toastify";
import { BsFilePdf } from "react-icons/bs";
type DownloadingPdf = {
[key: string]: boolean;
};
type PdfEndpoint = "stats" | "assignments";
export const usePDFDownload = (endpoint: PdfEndpoint) => {
const [downloadingPdf, setDownloadingPdf] = React.useState<DownloadingPdf>(
{}
);
const triggerDownload = async (id: string) => {
try {
setDownloadingPdf((prev) => ({ ...prev, [id]: true }));
const res = await axios.post(`/api/${endpoint}/${id}/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, [id]: false }));
} catch (err) {
toast.error("Failed to display the report!");
console.error(err);
setDownloadingPdf((prev) => ({ ...prev, [id]: false }));
}
};
const renderIcon = (
id: string,
downloadClasses: string,
loadingClasses: string
) => {
if (downloadingPdf[id]) {
return (
<span className={`${loadingClasses} loading loading-infinity w-6`} />
);
}
return (
<BsFilePdf
className={`${downloadClasses} text-2xl cursor-pointer`}
onClick={(e) => {
e.stopPropagation();
triggerDownload(id);
}}
/>
);
};
return renderIcon;
};

41
src/pages/api/assignments/[id]/export.tsx
View File

@@ -15,17 +15,14 @@ import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import ReactPDF from "@react-pdf/renderer";
import GroupTestReport from "@/exams/pdf/group.test.report";
import { ref, uploadBytes } from "firebase/storage";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { Stat } from "@/interfaces/user";
import { User } from "@/interfaces/user";
import { Module } from "@/interfaces";
import { ModuleScore, StudentData } from "@/interfaces/module.scores";
import qrcode from "qrcode";
import { SkillExamDetails } from "@/exams/pdf/details/skill.exam";
import { LevelExamDetails } from "@/exams/pdf/details/level.exam";
import { calculateBandScore, getLevelScore } from "@/utils/score";
import axios from "axios";
import { moduleLabels } from "@/utils/moduleUtils";
import {
generateQRCode,
getRadialProgressPNG,
@@ -121,17 +118,25 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
results: any;
exams: { module: Module }[];
startDate: string;
pdf?: string;
};
if (!data) {
res.status(400).end();
return;
}
// TODO: Reenable this
// if (data.assigner !== req.session.user.id) {
// res.status(401).json({ ok: false });
// return;
// }
if (data.assigner !== req.session.user.id) {
res.status(401).json({ ok: false });
return;
}
if (data.pdf) {
// if it does, return the pdf url
const fileRef = ref(storage, data.pdf);
const url = await getDownloadURL(fileRef);
res.status(200).end(url);
return;
}
try {
const docUser = await getDoc(doc(db, "users", req.session.user.id));
@@ -185,9 +190,10 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
(e) => e.module === module
);
const bandScore =
const baseBandScore =
moduleResults.reduce((accm, curr) => accm + curr.bandScore, 0) /
moduleResults.length;
const bandScore = isNaN(baseBandScore) ? 0 : baseBandScore;
const { correct, total } = getScoreAndTotal(moduleResults);
const png = getRadialProgressPNG("azul", correct, total);
@@ -203,7 +209,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
const { correct: overallCorrect, total: overallTotal } =
getScoreAndTotal(flattenResults);
const overallResult = overallCorrect / overallTotal;
const baseOverallResult = overallCorrect / overallTotal;
const overallResult = isNaN(baseOverallResult) ? 0 : baseOverallResult;
const overallPNG = getRadialProgressPNG(
"laranja",
@@ -365,7 +372,8 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
// generate the file ref for storage
const fileName = `${Date.now().toString()}.pdf`;
const fileRef = ref(storage, `assignment_report/${fileName}`);
const refName = `assignment_report/${fileName}`;
const fileRef = ref(storage, refName);
// upload the pdf to storage
const pdfBuffer = await streamToBuffer(pdfStream);
@@ -375,9 +383,10 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
// update the stats entries with the pdf url to prevent duplication
await updateDoc(docSnap.ref, {
pdf: snapshot.ref.fullPath,
pdf: refName,
});
res.status(200).end(snapshot.ref.fullPath);
const url = await getDownloadURL(fileRef);
res.status(200).end(url);
return;
}
@@ -407,7 +416,9 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
}
if (data.pdf) {
return res.end(data.pdf);
const fileRef = ref(storage, data.pdf);
const url = await getDownloadURL(fileRef);
return res.redirect(url);
}
res.status(404).end();

59
src/pages/record.tsx
View File

@@ -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>

25
src/utils/pdf.ts
View File

@@ -22,22 +22,23 @@ export const getRadialProgressPNG = (
// calculate the percentage of the score
// and round it to the closest available image
const percent = (score / total) * 100;
if (isNaN(percent)) return `public/radial_progress/${color}_0.png`;
const remainder = percent % 10;
const roundedPercent = percent - remainder;
return `public/radial_progress/${color}_${roundedPercent}.png`;
};
export const streamToBuffer = async (
stream: NodeJS.ReadableStream
): Promise<Buffer> => {
return new Promise((resolve, reject) => {
const chunks: Buffer[] = [];
stream.on("data", (data) => {
chunks.push(data);
});
stream.on("end", () => {
resolve(Buffer.concat(chunks));
});
stream.on("error", reject);
stream: NodeJS.ReadableStream
): Promise<Buffer> => {
return new Promise((resolve, reject) => {
const chunks: Buffer[] = [];
stream.on("data", (data) => {
chunks.push(data);
});
};
stream.on("end", () => {
resolve(Buffer.concat(chunks));
});
stream.on("error", reject);
});
};