Как я могу упростить эту логику двойной фильтрации (по статусу и приоритету) в React, используя методы массива JavaScrip ⇐ Javascript

[Anonymous]

Я создаю небольшое приложение React для управления задачами.
Каждая задача имеет статус (true/false) и приоритет (низкий/средний/высокий).
У меня есть две кнопки фильтра — одна для статуса и одна для приоритета — и я использую приведенные ниже обработчики для обновления отображаемого списка (taskArray) на основе того, что выбирает пользователь.
Вот моя работа код:

Код: Выделить всё

const handleStatus = (e: React.MouseEvent) => {
const label = e.currentTarget.innerText;
setStatusLabel(label);
setStatusActive(e.currentTarget.id);

const priorityArray =
priorityLabel === "All"
? allTasks
: allTasks.filter((x) => x.priority === priorityLabel);

if (label === "All") {
setTaskArray(priorityArray);
} else if (label === "Active") {
setTaskArray(priorityArray.filter((x) => !x.status));
} else if (label === "Complete") {
setTaskArray(priorityArray.filter((x) => x.status));
}
};

const handlePriority = (e: React.MouseEvent) => {
const label = e.currentTarget.innerText;
setPriorityLabel(label);
setPriorityActive(e.currentTarget.id);

const statusArray =
statusLabel === "All"
? allTasks
: statusLabel === "Active"
? allTasks.filter((x) => !x.status)
: allTasks.filter((x) => x.status);

setTaskArray(
label === "All"
? statusArray
: statusArray.filter((x) => x.priority === label)
);
};

Это работает, но я чувствую, что может быть более краткий или многоразовый способ добиться этого с помощью методов массива JavaScript — возможно, объединив оба фильтра в одну функцию или соединив их более элегантно.
Вопрос:
Как я могу упростить или реорганизовать этот код, чтобы более эффективно обрабатывать оба фильтра (сохраняя при этом читабельность)?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -react-usi