React Filtering Data with Hooks - arrays

Question

I'm working with a dataset and want to implement a filtering option to only display what is selected (as filters do :) ). Here's the data and my code so far:
// Movies data =
[
{
name: "a",
genre: "comedy",
year: "2019",
},
{
name: "b",
genre: "drama",
year: "2019",
},
{
name: "c",
genre: "suspense",
year: "2020",
},
{
name: "d",
genre: "comedy",
year: "2020",
},
{
name: "e",
genre: "drama",
year: "2021",
},
{
name: "f",
genre: "action",
year: "2021",
},
{
name: "g",
genre: "action",
year: "2022",
},
]
and in my code, I'm have a piece of state for the API response (all data) as well as filtered data per year
import { useEffect, useState, useMemo } from 'react';
const MovieData = () => {
const [movies, setMovies] = useState([]); // all data. This will not change after API call
const [results setResults] = useState([]); // this will change based on selection
const [year, setYear] = useState({
y2019: false,
y2020: false,
y2021: false
});
// making API call
useEffect(() => {
fetch("myapiep")
.then(response => response.json())
.then(data => setMovies(data))
}, []);
// get subsets of data
const {m2019, m2020, m2021} = useMemo(() => {
const m2019 = movies.filter(m => m.year === '2019');
const m2020 = movies.filter(m => m.year === '2020');
const m2021 = movies.filter(m => m.year === '2021');
return {m2019, m2020, m2021}
});
// So far so good. Now this is where things get tricky for me
// I want to, based on the selection, modify my results array
useEffect(() => {
// update results based on movie year selected
if (year.y2019) setResults([...results, ...m2019]);
// HELP: filter out results when year is unselected
// this is not working
else {
const newArr = results.filter((movie) => !m2019.includes(movie));
}
if (year.y2020) setResults([...results, ...m2020]);
else {
const newArr = results.filter((movie) => !m2020.includes(movie));
}
if (year.y2021) setResults([...results, ...m2021]);
else {
const newArr = results.filter((movie) => !m2021.includes(movie));
}
// if none are selected, just return all movies
if (!year.y2019 && !year.y2020 && !year.y2021) {
setResults(movies);
}
}, [year]);
// I'm suppressing the logic to toggle years (y20xx) true/false for simplicity, but can add it if folks judge necessary
return (
<div>
{results.map((movie) => (
<Movie
key={uuidv4()}
name={movie.name}
genre={movie.genre}
year={movie.year}
/>
))}
</div>
)
}
What works: set filter works, for instance, setting the filter to movies made in 2019 returns
[
{
name: "a",
genre: "comedy",
year: "2019",
},
{
name: "b",
genre: "drama",
year: "2019",
},
]
What doesn't: unset the filter.

Answer 1

The below code snippet achieves the necessary logic (sans the React Hooks, API, and other items):
const movies = [{
name: "a",
genre: "comedy",
year: "2019",
},
{
name: "b",
genre: "drama",
year: "2019",
},
{
name: "c",
genre: "suspense",
year: "2020",
},
{
name: "d",
genre: "comedy",
year: "2020",
},
{
name: "e",
genre: "drama",
year: "2021",
},
{
name: "f",
genre: "action",
year: "2021",
},
{
name: "g",
genre: "action",
year: "2022",
}
];
const filterMyMovies = (byField = 'year', value = '2020', myMovies = movies) => (
(myMovies || [])
.filter(mov => !byField || !mov[byField] || mov[byField] === value)
);
console.log('movies in year 2020:\n', filterMyMovies());
console.log('movies in year 2019:\n', filterMyMovies('year', '2019'));
console.log('movies in genre drama:\n', filterMyMovies('genre', 'drama'));
console.log('movies with name d:\n', filterMyMovies('name', 'd'));
console.log('movies with NO FILTER:\n', filterMyMovies(null, null));
Explanation
Fairly-straightforward filtering of an array of objects, with only 1 column & 1 value. May be improvised for multi-column & multi-value filtering.
How to use this
The way to use this within React-Hooks is to invoke the 'filterMyMovies' method with the appropriate parameters when the filter-criteria changes. Suppose, the year is set to 'no-filter', then simply make call to the 'filterMyMovies' method with the first & second params as null.
Suppose we need to filter by year and then by genre as well, try something like this:
filterMyMovies('genre', 'comedy', filterMyMovies('year', '2019'));
This will return 2019 comedy movies.