Function useGenerateCertificate

src/hooks/useCertGen.ts:17–168

({
  certificateDetails,
  userName,
}: GenerateCertificateProps)

};

export function useGenerateCertificate({
  certificateDetails,
  userName,
}: GenerateCertificateProps) {
  const [generating, setGenerating] = useState(false);
  const [certificatePdfUrl, setCertificatePdfUrl] = useState<string | null>(
    null,
  );
  const [certificateImageUrl, setCertificateImageUrl] = useState('');
  const [downloadDate, setDownloadDate] = useState<Date | null>(null);

  useEffect(() => {
    async function generateCertificateAndImage() {
      setGenerating(true);

      try {
        await generateCertificate();
        await generateCertificateImage();
        setDownloadDate(new Date());
      } catch (error) {
        console.error(error);
      } finally {
        setGenerating(false);
      }
    }

    generateCertificateAndImage();
  }, []);

  async function generateCertificate() {
    try {
      const existingPdfBytes = await fetch('/certificate.pdf').then((res) =>
        res.arrayBuffer(),
      );
      const pdfDoc = await PDFDocument.load(existingPdfBytes);
      const timesRomanBoldFont = await pdfDoc.embedFont(
        StandardFonts.HelveticaBold,
      );

      const pages = pdfDoc.getPages();
      const firstPage = pages[0];
      const { width, height } = firstPage.getSize();

      const fontSize = 30;
      const textWidth = timesRomanBoldFont.widthOfTextAtSize(
        userName,
        fontSize,
      );
      const xRecipient = (width - textWidth) / 2;
      const yRecipient = height * 0.46;
      firstPage.drawText(capitalizeFirstLetter(userName), {
        x: xRecipient,
        y: yRecipient,
        size: fontSize,
        font: timesRomanBoldFont,
        color: rgb(0, 0, 0),
      });