DownloadStatus.jsx

Go to the documentation of this file.

import React, { useEffect, useState } from "react";
import { apiFetch } from '../lib/api';
import { useSearchParams } from "react-router-dom";
import "./DownloadStatusCard.css";
 
export default function DownloadStatus() {
  const [searchParams] = useSearchParams();
  const jobId = searchParams.get("job");  // <-- FIXED
  const os = searchParams.get("os");
  const [status, setStatus] = useState(null);
  const [filePath, setFilePath] = useState(null);
  const [error, setError] = useState(null);
  const [progressPercent, setProgressPercent] = useState(0);
 
  // Poll backend for job status
  useEffect(() => {
    if (!jobId) {
      setError("No job ID provided.");
      return;
    }
 
    let timer = setInterval(async () => {
      try {
        // Use apiFetch to include JWT
        const res = await apiFetch(`/download-job/${jobId}/status`);
        const response = await res.json();
        if (!response) return;
 
        setStatus(response.status);
        setProgressPercent(parseInt(response.progressPercent) || 0);
        if (response.filePath) {
          setFilePath(response.filePath);
        }
        if (response.status === "complete") {
          clearInterval(timer);
          // Use a download link/button with JWT
          setTimeout(() => {
            window.location.href = `/api/download-job/${jobId}/download`;
          }, 1000);
        }
        if (response.status === "failed") {
          clearInterval(timer);
          setError("Build failed. Please try again.");
        }
      } catch (err) {
        setError(err?.message || "Status check failed.");
        console.error(err);
      }
    }, 2000);
 
    return () => clearInterval(timer);
  }, [jobId]);
 
  // Progress bar width by actual percent
  const progressWidth = `${progressPercent}%`;
  let statusText = "Loading…";
  if (status === "queued") statusText = "Queued";
  else if (status === "building") statusText = "Building";
  else if (status === "complete") statusText = "Ready";
  else if (status === "failed") statusText = "Failed";
 
  return (
    <div className="download-status-page" style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80vh" }}>
      <div className="download-status-card">
        <div className="download-status-title">Agent Installer Status</div>
        <div className="download-status-progress">
          <div className="download-status-bar" style={{ width: progressWidth }}></div>
        </div>
        <div className="download-status-step">{statusText}</div>
        <div className="download-status-meta">
          <span><b>Job ID:</b> {jobId}</span>
          <span><b>Device:</b> {os ? os.toUpperCase() : "-"}</span>
        </div>
        {error && <div className="download-status-error">{error}</div>}
        {status === "complete" && filePath && (
          <div className="download-status-ready">
            <a className="download-status-btn" href={filePath} download>
              Download Installer
            </a>
            <div style={{ marginTop: "0.5rem" }}>
              <span>Installer is ready. If your download didn't start, click above.</span>
            </div>
          </div>
        )}
        {status === "failed" && (
          <div className="download-status-error">
            Build failed. <button className="download-status-btn" onClick={() => window.location.reload()}>Retry</button>
          </div>
        )}
      </div>
    </div>
  );
}