How can i simplify my current React code? - reactjs

Question

How can I simplify my React code? I have a feeling that I'm not writing DRY React code.
I have multiple handlers and setStates, and Sorting functions.. but can I make one function which handles one state.. and sort it from there? I will split my code in chunks and components.
What can i do to simplify my code? Any suggestion?
import React, { Component } from 'react';
import { getMovies } from '../services/fakeMovieService';
class Movies extends Component {
state = {
isSorted: false,
movies: getMovies(),
isDisabled: true,
};
componentDidMount() {
console.log(this.state.movies);
}
// Display all movies but not the one selected.
handleDelete = movie => {
this.setState({
movies: this.state.movies.filter(m => m._id !== movie._id),
isDisabled: false,
});
console.log(`Movie ${movie.title} deleted.`);
};
// Sort all video's by title
sortByTitle = () => {
this.setState({
movies: this.state.movies.sort((a, b) =>
a.title.localeCompare(b.title)
),
isDisabled: false,
});
console.log('sorted by title');
};
// Sort all video's by genre
sortByGenre = () => {
this.setState({
movies: this.state.movies.sort((a, b) =>
a.genre.name.localeCompare(b.genre.name)
),
isDisabled: false,
});
console.log('sorted by genre.');
};
// sort all video's by stock size
sortByStock = () => {
this.setState({
movies: this.state.movies.sort(
(a, b) => a.numberInStock - b.numberInStock
),
isDisabled: false,
});
console.log('sorted by stock size.');
};
// Sort all video's by rating score
sortByRating = () => {
this.setState({
movies: this.state.movies.sort(
(a, b) => a.dailyRentalRate - b.dailyRentalRate
),
isDisabled: false,
});
console.log('sorted by rating sore.');
};
// Add class to the reset button based on the current filter state.
resetButtonClass = () => {
let btnClass = 'btn btn-sm btn-';
btnClass += this.state.isDisabled ? 'warning' : 'primary';
return btnClass;
};
// Reset the video's filter
resetFilter = () => {
this.setState({
movies: [...getMovies()],
isDisabled: true,
});
console.log('Reset movies database.');
};
render() {
const { length: count } = this.state.movies;
// Check if there are movies available.
if (count === 0)
return (
<React.Fragment>
<h4>There are no movies in the database.</h4>
<button
type="button"
onClick={this.resetFilter}
className="btn btn-primary btn-sm">
Reset
</button>
</React.Fragment>
);
return (
<React.Fragment>
<h5 className="pb-2">Showing {count} in the database.</h5>
<table className="table table-hover table-striped table-dark">
<thead>
<tr>
<th>
<span onClick={this.sortByTitle}>Title</span>
</th>
<th>
<span onClick={this.sortByGenre}>Genre</span>
</th>
<th>
<span onClick={this.sortByStock}>Stock</span>
</th>
<th>
<span onClick={this.sortByRating}>Rate</span>
</th>
<th>
<button
onClick={this.resetFilter}
className={this.resetButtonClass()}
disabled={this.state.isDisabled && true}>
Reset filter
</button>
</th>
</tr>
</thead>
<tbody>
{this.state.movies.map(movie => {
const {
_id,
title,
genre,
numberInStock,
dailyRentalRate,
} = movie;
return (
<tr key={_id}>
<th>{title}</th>
<td>{genre.name}</td>
<td>{numberInStock}</td>
<td>{dailyRentalRate}</td>
<td>
<button
onClick={() =>
this.handleDelete(movie)
}
className="btn btn-danger btn-sm">
Delete
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</React.Fragment>
);
}
}
export default Movies;

Answer 1

You can make it much DRYer by using a more generalised sort function:
// general sort function
sortBy = predicateFunction => {
this.setState({
movies: this.state.movies.sort( predicateFunction ),
isDisabled: false,
});
};
// and then call it
sortByRating = () => this.sortBy((a, b) => a.dailyRentalRate - b.dailyRentalRate)
sortByTitle = () => this.sortBy((a, b) =>
a.title.localeCompare(b.title))
... etc