summaryrefslogtreecommitdiff
path: root/buildscripts/libdeps/graph_visualizer_web_stack/src/GraphCommitDisplay.js
blob: 86d01e88b87733ec3a67dfc621f98806acef2b5d (plain)
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React from "react";
import ScrollContainer from "react-indiana-drag-scroll";
import { connect } from "react-redux";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import Paper from "@material-ui/core/Paper";
import TableRow from "@material-ui/core/TableRow";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import TextField from "@material-ui/core/TextField";

import { getGraphFiles } from "./redux/store";
import { setGraphFiles } from "./redux/graphFiles";

import GitHashButton from "./GitHashButton";

const { REACT_APP_API_URL } = process.env;

const flexContainer = {
  display: "flex",
  flexDirection: "row",
  padding: 0,
  width: "50%",
  height: "50%",
};

const textFields = [
  "Scroll to commit",
  "Commit Range Begin",
  "Commit Range End",
];

const GraphCommitDisplay = ({ graphFiles, setGraphFiles }) => {
  React.useEffect(() => {
    fetch(REACT_APP_API_URL + "/api/graphs")
      .then((res) => res.json())
      .then((data) => {
        setGraphFiles(data.graph_files);
      })
      .catch((err) => {
        /* eslint-disable no-console */
        console.log("Error Reading data " + err);
      });
    }, []);

  return (
    <Paper style={{ height: "100%", width: "100%" }}>
      <List style={flexContainer}>
        {textFields.map((text) => (
          <ListItem key={text}>
            <TextField size="small" label={text} />
          </ListItem>
        ))}
      </List>
      <ScrollContainer
        vertical={false}
        style={{ height: "50%" }}
        className="scroll-container"
        hideScrollbars={true}
      >
        <Table style={{ height: "100%" }}>
          <TableBody>
            <TableRow>
              {graphFiles.map((file) => (
                <TableCell key={file.id}>
                  <GitHashButton text={file.git} />
                </TableCell>
              ))}
            </TableRow>
          </TableBody>
        </Table>
      </ScrollContainer>
    </Paper>
  );
};

export default connect(getGraphFiles, { setGraphFiles })(GraphCommitDisplay);