Function CertificateComponent

src/components/Certificate.tsx:16–123

({
  certificateId,
  certificateSlug,
  course,
  userName,
}: OneCertificate & { userName: string })

import { useMemo, useState, useEffect } from 'react';

export const CertificateComponent = ({
  certificateId,
  certificateSlug,
  course,
  userName,
}: OneCertificate & { userName: string }) => {
  const [loading, setLoading] = useState(true);

  const certificateDetails = useMemo(
    () => ({
      certificateId,
      course,
      userName,
      certificateSlug,
    }),
    [certificateId, course, userName, certificateSlug],
  );

  const { certificateImageUrl } = useGenerateCertificate({
    certificateDetails,
    userName,
  });

  useEffect(() => {
    if (certificateImageUrl) {
      setLoading(false);
    }
  }, [certificateImageUrl]);

  const handleDownloadPNG = async () => {
    if (loading) return;
    setLoading(true);
    const downloadUrl = certificateImageUrl;
    console.log('downloadUrl is : ', downloadUrl);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'certificate.png';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setLoading(false);
  };

  const handleShareLinkedIn = async () => {
    if (loading) return;
    setLoading(true);
    const certificateUrl = `${window.location.origin}/certificate/verify/${certificateSlug}`;
    const postContent = `I just earned the "${course.title}" certificate on 100xDevs! Check it out: ${certificateUrl}`;
    const shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
      certificateUrl,
    )}&text=${encodeURIComponent(postContent)}`;
    window.open(shareUrl);
    setLoading(false);
  };

  const handleShareTwitter = () => {
    if (loading) return;
    setLoading(true);