ui/src/components/history/HistoryInspect.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { useState, useEffect } from "react";

import PacmanLoader from "react-spinners/PacmanLoader";

import CodeBlock from "@/components/CodeBlock";
import HistoryRow from "@/components/history/HistoryRow";
import { ShellHistory, inspectCommandHistory } from "@/state/models";

function renderLoading() {
  return (
    <div className="flex items-center justify-center h-full">
      <PacmanLoader color="#26bd65" />
    </div>
  );
}

export default function HistoryInspect({ history }: any) {
  let [other, setOther] = useState<ShellHistory[]>([]);

  useEffect(() => {
    (async () => {
      let inspect = await inspectCommandHistory(history);
      setOther(inspect.other);
    })();
  }, []);

  if (other.length == 0) return renderLoading();

  return (
    <div className="overflow-y-auto">
      <CodeBlock code={history.command} language="bash" />

      <div>
        {other.map((i: any) => {
          return <HistoryRow h={i} />;
        })}
      </div>
    </div>
  );
}