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

Added pdf download to record page

Browse Source 
Reenabled reuse of PDF
This commit is contained in:
Joao Ramos
2024-01-09 22:42:42 +00:00
parent 6c741f944d
commit 418221427a
2 changed files with 91 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/record.tsx
View File

@@ -24,6 +24,9 @@ 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";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -55,6 +58,10 @@ 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[]}>();
@@ -69,7 +76,7 @@ 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();
useEffect(() => {
@@ -174,7 +181,7 @@ export default function History({user}: {user: User}) {
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
}));
const timeSpent = dateStats[0].timeSpent;
const { timeSpent, session } = dateStats[0];
const selectExam = () => {
const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
@@ -195,6 +202,34 @@ export default function History({user}: {user: User}) {
});
};
const textColor = clsx(
correct / total >= 0.7 && "text-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
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">
@@ -207,15 +242,39 @@ export default function History({user}: {user: User}) {
</>
)}
</div>
<span
className={clsx(
correct / total >= 0.7 && "text-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
correct / total < 0.3 && "text-mti-rose",
)}>
Level{" "}
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
</span>
<div className="flex flex-row gap-2">
<span
className={textColor}>
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();
}}
/>
)
}
</div>
</div>
<div className="w-full flex flex-col gap-1">