export default function DownloadButton()

in src/components/DownloadButton.tsx [39:148]
96 lines of code
11 McCabe index (conditional complexity)

export default function DownloadButton() {
  const latestAudioUrl = appStore.useState((s) => s.latestAudioUrl);
  const [dataUrl, setDataUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!latestAudioUrl) return;

    let objectUrl = "";
    const handler = (e: MessageEvent) => {
      if (e.data.type === "ADD_TO_CACHE" && e.data.url === latestAudioUrl) {
        objectUrl = URL.createObjectURL(e.data.blob);
        setDataUrl(objectUrl);
      }
    };
    navigator.serviceWorker.addEventListener("message", handler);

    return () => {
      setDataUrl(null);
      URL.revokeObjectURL(objectUrl);
      navigator.serviceWorker.removeEventListener("message", handler);
    };
  }, [latestAudioUrl]);

  useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        // update file name when updating the service worker to avoid cache issues
        .register("/worker-444eae9e2e1bdd6edd8969f319655e70.js")
        .catch((err) => console.error("SW registration failed", err));
    }
  }, []);

  const handleDownload = async () => {
    const {
      selectedEntry,
      input,
      prompt,
      voice,
      latestAudioUrl: storeUrl,
    } = appStore.getState();

    const vibe =
      selectedEntry?.name.toLowerCase().replace(/ /g, "-") ?? "audio";

    const filename = `openai-fm-${voice}-${vibe}.${IS_CHROME ? "wav" : "mp3"}`;

    if (!storeUrl) {
      setLoading(true);
      const form = new FormData();
      form.append("input", input);
      form.append("prompt", prompt);
      form.append("voice", voice);
      form.append("generation", crypto.randomUUID());
      form.append("vibe", vibe);

      const res = await fetch("/api/generate", { method: "POST", body: form });
      const blob = await res.blob();
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setLoading(false);
      return;
    }

    appStore.setState({ latestAudioUrl: null });

    if (!dataUrl) {
      setLoading(true);
      const handler = (e: MessageEvent) => {
        if (e.data.type === "ADD_TO_CACHE" && e.data.url === storeUrl) {
          navigator.serviceWorker.removeEventListener("message", handler);
          const link = document.createElement("a");
          link.href = URL.createObjectURL(e.data.blob);
          link.download = filename;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          setLoading(false);
        }
      };
      navigator.serviceWorker.addEventListener("message", handler);
      return;
    }

    const link = document.createElement("a");
    link.href = dataUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <Button color="tertiary" onClick={handleDownload} disabled={loading}>
      {loading ? (
        <PlayingWaveform
          audioLoaded={false}
          amplitudeLevels={[0.04, 0.04, 0.04, 0.04, 0.04]}
        />
      ) : (
        <Download />
      )}{" "}
      <span className="uppercase hidden md:inline pr-3">Download</span>
    </Button>
  );
}