export default()

in src/core/Results.tsx [289:422]
121 lines of code
5 McCabe index (conditional complexity)

export default ({
  activeLedger,
  darkState,
  result,
  history,
  setHistory,
  setResult,
  error,
  setError,
  queryStats,
  setQueryStats,
}: {
  activeLedger: string;
  darkState: boolean;
  result: string;
  history: QueryHistoryEntry[];
  setHistory: SetHistoryFn;
  setResult: (text: string) => void;
  error: string;
  setError: (text: string) => void;
  queryStats: QueryStats;
  setQueryStats: (stats: QueryStats) => void;
}) => {
  const [activeTabValue, setActiveTabValue] = React.useState(0);
  const classes = useStyles();
  const queryResult = result ? JSON.parse(result) : [];
  const [viewType, setViewType] = React.useState("ion");

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setActiveTabValue(newValue);
  };

  function historyEntrySelected(entry: QueryHistoryEntry) {
    setResult(JSON.stringify(entry.result));
    setActiveTabValue(0);
    setError("");
    setQueryStats(entry.queryStats);
    const editor = ace.edit("aceEditor1");
    const currentValue = editor.getValue();
    editor.setValue(`${currentValue ? `${currentValue}\n` : ""}${entry.text}`);
  }

  React.useEffect(() => loadHistory(setHistory), []);

  return (
    <Box style={{ flexDirection: "row", height: "100%" }}>
      <Paper square elevation={0} className={classes.stickToTop}>
        <Button
          color={"primary"}
          variant={"contained"}
          className={classes.button}
          endIcon={<SendIcon />}
          onClick={() => {
            execute(
              activeLedger,
              setHistory,
              setResult,
              setError,
              setQueryStats
            );
          }}
        >
          Run
        </Button>
        <Tooltip title={"Table View (experimental)"}>
          <IconButton
            size={"medium"}
            aria-label="table"
            className={classes.iconButton}
            onClick={() => setViewType("table")}
          >
            {" "}
            <TableChartIcon />{" "}
          </IconButton>
        </Tooltip>
        <Tooltip title={"Ion View"}>
          <IconButton
            size={"medium"}
            aria-label="ion"
            className={classes.iconButton}
            onClick={() => setViewType("ion")}
          >
            {" "}
            <CodeIcon />{" "}
          </IconButton>
        </Tooltip>
        <Box style={{ float: "right" }}>
          {prepareQueryStatsView(queryStats)}
        </Box>
      </Paper>
      <TabPanel value={activeTabValue} index={0}>
        <Toolbar />
        <Box>
          {prepareErrorView(error)}
          {viewType == "ion"
            ? prepareIonView(queryResult, darkState)
            : prepareTableView(queryResult)}
        </Box>
        <Toolbar />
      </TabPanel>
      <TabPanel value={activeTabValue} index={1}>
        <Toolbar />
        <Box>
          <History
            history={history}
            setHistory={setHistory}
            historyEntrySelected={historyEntrySelected}
          />
        </Box>
        <Toolbar />
      </TabPanel>
      <Paper square className={classes.stickToBottom}>
        <Tabs
          value={activeTabValue}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
        >
          <Tab icon={<ReceiptIcon />} />
          <Tab icon={<HistoryIcon />} />
          <ButtonInTabs
            value={activeLedger}
            disabled={!activeLedger.toString()}
            startIcon={activeLedger ? <CloudDoneIcon /> : <CloudOffIcon />}
            style={{ flex: 1, textTransform: "none" }}
            color={"primary"}
          >
            {activeLedger ? "Connected to " + activeLedger : "No active ledger"}
          </ButtonInTabs>
        </Tabs>
      </Paper>
    </Box>
  );
};