render()

in frontend/app/DeliverableUploader/UploaderMain.tsx [139:236]

• 98 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    return (
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <label htmlFor="upload-selector">
            <input
              style={{ display: "none" }}
              id="upload-selector"
              name="upload-selector"
              type="file"
              disabled={this.state.uploadInProgress}
              onChange={this.newFileAdded}
            />
            <Fab
              size="small"
              component="span"
              aria-label="add"
              variant="extended"
              disabled={this.state.uploadInProgress}
              color="primary"
            >
              <Add /> Add more files
            </Fab>
          </label>
        </Grid>
        <Grid item xs={4}>
          <Fab
            size="small"
            component="span"
            aria-label="add"
            variant="extended"
            onClick={this.uploadButtonClicked}
            disabled={this.state.uploadInProgress}
            color="primary"
          >
            <CloudUploadOutlined />
            &nbsp;&nbsp;
            {this.state.uploadInProgress ? "Uploading..." : "Start upload"}
          </Fab>
        </Grid>
        <Grid item xs={2}>
          {this.state.uploadInProgress ? <CircularProgress size={32} /> : null}
        </Grid>
        <Grid item xs={12}>
          {this.state.dialogError ? (
            <>
              <Typography>
                An internal error occurred: {this.state.dialogError}
              </Typography>
              <Typography>Please refresh and try again</Typography>
            </>
          ) : (
            <Paper elevation={3}>
              <TableContainer>
                <Table style={{ width: "100%" }}>
                  <TableHead style={{ height: "2em" }}>
                    <TableRow>
                      <TableCell>File</TableCell>
                      <TableCell>Progress</TableCell>
                      <TableCell>Status</TableCell>
                      <TableCell>Problems</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {this.state.files.map((entry, idx) => (
                      <TableRow key={idx}>
                        <TableCell>{entry.filename}</TableCell>
                        <TableCell>
                          <LinearProgress
                            variant="determinate"
                            value={entry.progress > 100 ? 100 : entry.progress}
                          />
                        </TableCell>
                        <TableCell>
                          {entry.progress == 0 ? (
                            <div>Not uploaded</div>
                          ) : (
                            [
                              entry.progress < 100 ? (
                                <div>Uploading</div>
                              ) : (
                                <div>Uploaded</div>
                              ),
                            ]
                          )}
                        </TableCell>
                        <TableCell>{entry.lastError}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            </Paper>
          )}
        </Grid>
      </Grid>
    );
  }