Status.js

import Error from "./error";
// import { MatchWord } from "../utils/matchWord";
import React from "react";
import { convertBytes } from "../utils/convertBytes";
import { displayLocaleDates } from "../utils/displayLocaleDates";
import { getTimeRemaining } from "../utils/getTimeRemaining";
import { useStatus } from "../hooks/useStatus";

export default function Status() {
  const { data, isError, isLoading } = useStatus(2);
  console.log("data: ", data);
  console.log("isError: ", isError);
  console.log("isLoading: ", isLoading);

  if (isLoading) return <div>Loading...</div>;

  if (isError) return <Error message={isError} />;

  return (
    <div className="my-16 px-4 sm:px-6 lg:px-8">
      <div className="sm:flex sm:items-center">
        <div className="sm:flex-auto">
          <h1 className="text-xl font-semibold text-gray-900">Globus</h1>
          <p className="mt-2 text-sm text-gray-700">
            Status of all files being transferred.
          </p>
        </div>
        <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
          <button
            type="button"
            className="inline-flex items-center justify-center rounded-md border border-transparent bg-teal-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 sm:w-auto"
          >
            test
          </button>
        </div>
      </div>
      <div className="-mx-4 mt-8 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
        <table className="min-w-full divide-y divide-gray-300">
          <thead className="bg-gray-50">
            <tr>
              <th
                scope="col"
                className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
              >
                Status
              </th>
              <th
                scope="col"
                className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
              >
                Progress
              </th>
              <th
                scope="col"
                className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
              >
                User
              </th>
              <th
                scope="col"
                className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
              >
                Request Date
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 bg-white">
            {data &&
              data.map((data) => (
                <tr key={data.id}>
                  {/* STATUS */}
                  <td className="flex w-full max-w-0 flex-col py-4 pl-4 pr-3 text-sm font-medium text-gray-700 sm:w-auto sm:max-w-none sm:pl-6">
                    {/* inactive */}
                    {data.label === "inactive" && (
                      <span className="flex flex-col">
                        <span className="font-normal text-slate-500">
                          Not Started
                        </span>
                      </span>
                    )}
                    {/* in progress */}
                    {data.label === "in progress" && (
                      <span className="flex flex-col">
                        <span className="font-normal text-amber-500">
                          Time Remaining:{` `}
                          {getTimeRemaining(data.remaining).d
                            ? `${getTimeRemaining(data.remaining).d} days`
                            : `${getTimeRemaining(data.remaining).h}:${
                                getTimeRemaining(data.remaining).m
                              }:${getTimeRemaining(data.remaining).s}`}
                        </span>
                      </span>
                    )}
                    {/* error */}
                    {data.label === "error" && (
                      <span className="font-normal text-red-500">
                        Halted: {displayLocaleDates(data.end_date)}
                      </span>
                    )}
                    {/* success */}
                    {data.label === "success" && (
                      <span className="font-normal text-green-500">
                        Completed: {displayLocaleDates(data.end_date)}
                      </span>
                    )}

                    {/* this is the nice status */}
                    <span className="pl-3 font-normal">
                      {/* <MatchWord str={data.status} /> */}
                      {data.status}
                    </span>
                    <dl className="font-normal lg:hidden">
                      <dt className="sr-only">Title</dt>
                      <dd className="mt-1 text-slate-500">
                        {convertBytes(data.processed ?? 0)}/
                        {convertBytes(data.total ?? 0)}
                      </dd>
                      <dt className="sr-only sm:hidden">Email</dt>
                      <dd className="mt-1 truncate font-medium sm:hidden">
                        <a
                          className="text-blue-500 underline"
                          target="_blank"
                          href={`mailto:${data.email}`}
                          rel="noreferrer noopener"
                        >
                          {" "}
                          {data.fullname}
                        </a>
                      </dd>
                    </dl>
                  </td>
                  <td className="hidden px-3 py-4 text-sm font-medium text-slate-500 lg:table-cell">
                    {convertBytes(data.processed ?? 0)}/
                    {convertBytes(data.total ?? 0)}
                  </td>
                  <td className="hidden px-3 py-4 text-sm font-medium sm:table-cell">
                    <a
                      className="text-blue-500 underline"
                      target="_blank"
                      href={`mailto:${data.email}`}
                      rel="noreferrer noopener"
                    >
                      {" "}
                      {data.fullname}
                    </a>
                  </td>
                  <td className="px-3 py-4 text-sm font-medium  text-slate-500">
                    {displayLocaleDates(data.request_date)}
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}