{"size": 1328, "ext": "js", "max_stars_repo_path": "admin_ui/src/views/Terminal.js", "max_stars_repo_name": "layerssss/michaelhost", "max_stars_repo_stars_event_min_datetime": "2021-06-19T15:41:35.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-19T15:41:35.000Z", "max_issues_repo_path": "admin_ui/src/views/Terminal.js", "max_issues_repo_name": "layerssss/michaelhost", "max_issues_repo_issues_event_min_datetime": "2019-11-03T20:53:07.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-29T05:08:56.000Z", "max_forks_repo_path": "admin_ui/src/views/Terminal.js", "max_forks_repo_name": "layerssss/michaelhost", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 10, "max_forks_count": null, "avg_line_length": 26.0392156863, "max_line_length": 79, "alphanum_fraction": 0.5331325301}
import React, { useState, useRef } from "react";
import { Fab } from "@material-ui/core";
import { Stop } from "mdi-material-ui";

import XTerm from "../controls/XTerm";
import useWebSocket from "../hooks/useWebSocket";

export default React.memo(Terminal);
function Terminal({ terminalId }) {
  const [alive, aliveSet] = useState(false);
  const containerRef = useRef();
  const xtermRef = useRef();
  const webSocket = useWebSocket(
    `/api/terminals/${terminalId}`,
    (data) => {
      aliveSet(data.alive);
      if (data.output && xtermRef.current) xtermRef.current.write(data.output);
    },
    () => {
      if (xtermRef.current) xtermRef.current.clear();
    },
  );

  return (
    <div style={{ height: "100%", position: "relative" }}>
      <XTerm
        xtermRef={xtermRef}
        onData={(input) => webSocket({ input })}
        onResize={(size) => webSocket({ size })}
      />
      <div style={{ height: "100%" }} ref={containerRef}></div>
      {alive && (
        <Fab
          size="small"
          style={{
            position: "absolute",
            zIndex: 1000,
            top: 10,
            right: 10,
          }}
          color="secondary"
          onClick={() => webSocket({ kill: "yes" })}
          title="kill"
        >
          <Stop />
        </Fab>
      )}
    </div>
  );
}
