Александр

https://www.npmjs.com/package/jodit-react

Как сказал alexanchek это нужно делать на стороне сервера. Но если Вы точно уверенны, что в Вашем случае нужно это делать у клиента, то должно быть как то так:

function app() {
    let currentPage = 1;
    let currentCategory;
    const itemsPerPage = 4;
    const buttons = document.querySelectorAll('.btn')
    const cards = document.querySelectorAll('.card')
    const pages = document.querySelectorAll('.pagination-item > a');

    function setPage(page, offset) {
        if (page !== undefined) {
            currentPage = page;
        } else {
            currentPage += offset;
            const pagesTotal = Math.ceil(cards.length / itemsPerPage)
            if (currentPage < 0) {
                currentPage = 0;
            } else if (currentPage > pagesTotal) {
                currentPage = pagesTotal;
            }
        }
    }

    function filter (items) {
        items.slice((currentPage - 1 * itemsPerPage) ).forEach((item) => {
            const isItemFiltered = !item.classList.contains(currentCategory)
            const isShowAll = currentCategory === 'all'
            if (isItemFiltered && !isShowAll) {
                item.classList.add('hide-filter')
            } else {
                item.classList.remove('hide-filter')
            }
        })
    }

    buttons.forEach((button) => {
        button.addEventListener('click', () => {
            currentCategory = button.dataset.filter
            // currentPage = 1; // Eсли нужно сбросить страницу при смене фильтра
            filter(cards)
        })
    })

    pages.forEach((link) => {
        link.addEventListener('click', () => {
            if (link.classList.contains('item-prev')) {
                setPage(undefined, -1);
            } else if(link.classList.contains('item-next')) {
                setPage(undefined, 1);
            } else {
                setPage(link.dataset.page);
            }
            filter(cards)
        })
    })
}

Ссылки с пагинацией должны иметь дата-аттрибут "page" с номером страницы.
Код не тестировал, могут быть опечатки, но в целом должно быть понятно.

Вообще то такие вещи делаются через flock:
Добавляете в крон на постоянное выполнение и все. Она сам будет отслеживать, когда процесс умер и перезапускать его, без баз и приседаний:
flock -n /tmp/lockfile.lock /usr/bin/php worker.php

Если настроить завершение скрипта на 59 секунде простоя не будет вообще.

Подставьте вместо this.value в onchange

Array.from(this.selectedOptions).map(option => option.value)

Например, можно перенести скачивание в фунцию:

const element = document.createElement('a');
element.href = instance.url;
element.setAttribute('download',  'test.pdf');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

Я обычно делаю так:

interface ILinkProps extends React.HTMLProps<HTMLLinkElement> {
  cursorPointer?: boolean;
}

echo "const fileName = '$fileName';";
Скрипт будет иметь доступ к такой переменной.

Так же можно передавать переменную в js функцию как аргумент:

echo "<a href='javascript:void(0)' onclick='showPdf($fileName)'>{$path_parts['basename']}</a>";

P.S.
То, что вы описываете выглядит как очень спорное решение и лучше бы вам использовать его только в качестве практики и наработки опыта.

- В ответ добавлять версию/время запроса и отбрасывать старый.
- При переходе (componentWillUnmount) отменять запрос (https://github.com/axios/axios#cancellation)