ota-admin-portal/src/components/Controls/CarUpdateStatusProgress/index.jsx

import React, { useState, useEffect } from "react";
import { CheckCircle, RadioButtonUnchecked, Error } from "@material-ui/icons";
import Typography from "@material-ui/core/Typography";
import clsx from "clsx";

import CircularProgress from "../CircularProgress";

const PHASES = [
  {
    label: "Pending",
    events: ["pending"],
    progress: () => 100,
  },
  {
    label: "Received",
    events: ["manifest_accepted", "manifest_received"],
    progress: () => 100,
  },
  {
    label: "Precondition",
    events: ["requirements_succeeded"],
    progress: () => 100,
  },
  {
    label: "Download",
    events: [
      "downloading",
      "download_start",
      "download_complete",
      "download_error",
      "package_download_start",
    ],
    progress: (msg, progress) =>
      [
        "package_download_start",
        "downloading",
        "download_start",
        "download_complete",
      ].indexOf(msg) > -1
        ? progress
        : -100,
  },
  {
    label: "Approved",
    events: ["package_download_complete", "install_approval_await"],
    progress: () => -1,
  },
  {
    label: "Install",
    events: [
      "install_approval_received",
      "install_start",
      "installing",
      "install_complete",
      "install_error",
    ],
    progress: (msg, progress) =>
      [
        "install_approval_received",
        "install_start",
        "installing",
        "install_complete",
      ].indexOf(msg) > -1
        ? progress
        : -100,
  },
  {
    label: "Clean up",
    events: ["package_install_complete", "cleanup_failed"],
    progress: (msg, progress) => {
      if (msg === "package_install_complete") return -1;
      return -100;
    },
  },
  {
    label: "Updated",
    events: ["cleanup_success", "manifest_succeeded"],
    progress: (msg, progress) => 100,
  },
];

const Progress = ({ value, classes }) => {
  if (value === 100)
    return (
      <CheckCircle
        className={clsx(classes.progressIcon, classes.progressSuccess)}
      />
    );
  if (value >= 0) return <CircularProgress value={value} />;
  if (value < -1)
    return (
      <Error className={clsx(classes.progressIcon, classes.progressError)} />
    );

  return <RadioButtonUnchecked className={classes.progressIcon} />;
};

const getProgress = (index, phase, progress) => {
  if (index === phase) return progress;
  if (index < phase) return 100;
  return -1;
};

const CarUpdateStatus = ({ status, classes }) => {
  const [phase, setPhase] = useState(0);
  const [progress, setProgress] = useState(-1);

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

    for (let i = 0, len = PHASES.length; i < len; i++) {
      const PHASE = PHASES[i];
      if (PHASE.events.indexOf(status.msg) > -1) {
        setPhase(i);
        setProgress(PHASE.progress(status.msg, status.progress));
        break;
      }
    }
  }, [status]);

  return (
    <div
      style={{
        width: "100%",
        display: "flex",
        justifyContent: "space-between",
        flexWrap: "wrap",
      }}
    >
      {PHASES.map((item, index) => {
        return (
          <div key={index} className={classes.textCenterAlign}>
            <Progress
              value={getProgress(index, phase, progress)}
              classes={classes}
            />
            <Typography>{item.label}</Typography>
          </div>
        );
      })}
    </div>
  );
};

export default CarUpdateStatus;