Pagination

const [historical, setHistorical] = useState(false);
const [objectType, setObjectType] = useState('ALL');
const [shownObjects, setShownObjects] = useState(100);

function clearRun() {
setRun(null);
setSelected(null);
setApproval(null);
setReferencePreview(null);
setHistorical(false);
setFilter('');
setObjectType('ALL');
setShownObjects(100);
}

async function scan() {
await task('Connecting and scanning', async () => {
const target = { input, alias, segment };

    await api('/connection/test', 'POST', target);

    const result = await api<Run>('/runs', 'POST', target);

    setRun(result);

    setSelected(
        result.actions.find(action => action.source === 'COMPILE') ||
        result.actions[0] ||
        null
    );

    setHistorical(false);
    setReferencePreview(null);
    setFilter('');
    setObjectType('ALL');
    setShownObjects(100);
});

}

const invalidActions = run?.actions.filter(action => action.source === 'COMPILE') || [];

const availableObjectTypes = Array.from(
new Set(invalidActions.map(action => action.objectType))
).sort();

const matchingInvalidActions = invalidActions.filter(action => {
const matchesType =
objectType === 'ALL' || action.objectType === objectType;

const matchesSearch =
    (action.objectName + ' ' + action.objectType)
        .toLowerCase()
        .includes(filter.toLowerCase());

return matchesType && matchesSearch;

});

const visible = matchingInvalidActions.slice(0, shownObjects);