React как сделать фильтрацию по дате и автору?

Question

[MadBl1ss]

В useEffect через axios получаю данные пользователей и их постов.

const Main = () => {
  const [articles, setArticles] = useState([]);
 
  useEffect(() => {
    axios
      .get("https://mocki.io/v1/a5814d24-4e22-49fc-96d1-0e9ae2952afc")
      .then((res) => {
        setArticles(res?.data?.articles);
      });
  }, []);

Далее просто рендерю в карточки

return (
    <>
      <SwiperInfo />
      <div className="main__container">
        {articles.map((article, index) => (
          <Card
            key={index}
            title={article?.title}
            article={article?.content}
            author={article?.author}
            date={article?.publishedAt}
          />
        ))}
      </div>
      <Footer />
    </>
  );

Как сделать фильтрацию c выпадающими списками по имени и по дате? (скриншот)

P.S. Данные прилетают в таком формате:

Comments

[Gary_Ihar]

Там утечка памяти в Main компоненте

Answer 1

[0xD34F]

const [ author, setAuthor ] = useState(null);
const [ dateMin, setDateMin ] = useState(null);
const [ dateMax, setDateMax ] = useState(null);

const authors = useMemo(
  () => [...new Set(articles.map(n => n.author))],
  [ articles ]
);
const filteredArticles = useMemo(
  () => [
    [  author, n => n.author === author      ],
    [ dateMin, n => n.publishedAt >= dateMin ],
    [ dateMax, n => n.publishedAt <= dateMax ],
  ].reduce((acc, n) => n[0] ? acc.filter(n[1]) : acc, articles),
  [ articles, author, dateMin, dateMax ]
);

<select value={author} onChange={e => setAuthor(e.target.value)}>
  <option></option>
  {authors.map(n => <option>{n}</option>)}
</select>

от <input type="date" value={dateMin} onChange={e => setDateMin(e.target.value)} />
до <input type="date" value={dateMax} onChange={e => setDateMax(e.target.value)} />

{filteredArticles.map(n => <Card {...n} />)}

Comments

[Alexandroppolus]

для filteredArticles и authors лучше подойдет useMemo

[0xD34F]

Alexandroppolus, точно. Поправил.

[MadBl1ss]

0xD34F, Храни тебя Аллах