render()

in src/App.tsx [308:436]
128 lines of code
3 McCabe index (conditional complexity)

  render() { 
    const { classes } = this.props;
    return (
      <React.Fragment>
      <ApplicationBar handleSearchChange={this.searchToggle}/>
      <main> 
      <Grid container spacing={8}>           
          {this.state.movies
            .sort(function(a,b) {
              if(a.title.toLowerCase() < b.title.toLowerCase()) {
                return -1 }
              if (a.title.toLowerCase() > b.title.toLowerCase()) {
                return 1 }
              return 0
            })
            .filter(this.handleSearchFilter)
            .map((item, i) => (
            <Grid item key={item.movieId} sm={6} md={4} lg={3}>
              <MovieCard toggleCheck={this.checkBoxToggle} deleteMovie={this.deleteMovieConfirm} editMovie={this.editMovie} movie={item}/>
            </Grid> ))}
        </Grid>
      </main>
      <div className="dialogs">
          <Dialog     
            open={this.state.openForms}
            aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">{this.state.formsTitle}</DialogTitle>
            <DialogContent>
              <Formik
                initialValues={this.state.formsMovie}
                validateOnChange= {true}
                validationSchema={Yup.object().shape({
                  title: Yup.string()
                  .required('Title Required'),
                  year: Yup.string()
                    .required('Year Required'),
                  runtime: Yup.string()
                    .required('Runtime Required'),
                  movieId: Yup.string()
                    .required('ID Required'),                                   
                })}
                onSubmit={this.submitMovie}
                render={(formikBag: FormikProps<Movie>) => (
                  <Form autoComplete="on">
                    <Grid container spacing={2}>
                      <Grid item xs={12} sm={6}>
                        <InputLabel>Title</InputLabel>
                        <Field
                          required
                          name="title"
                          type="text"
                          component={TextField}
                          fullWidth
                          margin="dense" />
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <InputLabel>Movie ID</InputLabel>
                        <Field
                          required
                          name="movieId"
                          type="text"
                          component={TextField}
                          margin="dense" />
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <InputLabel>Year</InputLabel>
                        <Field 
                          requiredField
                          name="year"
                          type="number"
                          component={TextField}
                          margin="dense" />
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <InputLabel>Runtime</InputLabel>
                        <Field 
                          required
                          name="runtime"
                          type="number"
                          component={TextField}
                          margin="dense" />
                      </Grid>
                      <Grid item xs={12}>
                        <InputLabel>Roles</InputLabel>
                        <div className="roleScroll">
                          {this.state.formsMovie.roles.map((item:any) => (
                            <List>
                              <ListItem>
                                <ListItemAvatar>
                                  <Avatar className={classes.personAvatar}><Person/></Avatar>
                                </ListItemAvatar>
                                <ListItemText 
                                  primary={item.name}
                                  secondary={<Typography
                                    variant="body2"
                                    color="textPrimary">{item.category}</Typography>} />
                              </ListItem>
                            </List>
                            ))}
                         
                        </div>                    
                      </Grid>
                      <Grid item xs={12}>
                        <div>
                          <InputLabel>Genres</InputLabel>
                          <br/>
                          {this.state.formsMovie.genres.map(currentGenre => (
                            <Chip color="primary" label={currentGenre} onDelete={() => {this.handleCurrentGenreRemove(currentGenre)}}/>
                          ))}      
                          <br />       
                          {this.state.movieGenres.map(genre => (
                            <Chip className={classes.newChip} label={genre} onDelete={() => {this.handleNewGenreRemove(genre)}} />
                          ))}
                        </div>
                      </Grid>
                      <Grid item xs={12}>
                        <Select
                          multiple
                          value={this.state.genreSelect}
                          onChange={this.handleSelectGenre}
                          input = {<Input />}>
                        {genreOptions.map(genre => (
                          <MenuItem key={genre} value={genre}>{genre}</MenuItem>
                        ))}
                        </Select>
                      </Grid>
                    </Grid>
                    <div className="formButtons">
                      <Button color="primary" onClick={() => this.setState({openForms: false})}>Cancel</Button>