diaREact/resources/js/components/pages/List.tsx

import {Grid, Pagination} from '@mui/material';
import * as React from 'react';
import Page from "./Page";

interface List {
    id: string;
    date: string;
}

export default function Pages({pages, url, removeUrl, csrf, passphrase, setPassphrase}) {
    const isPassphraseSet = passphrase !== null;
    const perPage = 3;
    const total = pages.length;
    const numberOfPage = Math.ceil(total/perPage);
    const [currentPage, setPage] = React.useState(1);
    const [listPages, setListPages] = React.useState(pages);

    const removePage = async (id) => {
        const formData = new FormData();
        formData.set('_token', csrf);
        formData.set('_method', 'DELETE');
        const response = await fetch(removeUrl.replace("replace_me", id), {
            method: 'POST', body: formData
        });

        const json = await response.json();

        if (json.success) {
            console.log(listPages.length);
            const newListPages = listPages.filter(function (value) {
                console.log(value.id);
                return value.id !== id;
            });
            setListPages(newListPages);
            console.log(newListPages.length);
            console.log(listPages.length);
            updateListPages(newListPages.slice((currentPage - 1) * perPage, ((currentPage - 1) * perPage) + perPage).map(page =>
                <Page page={page} url={url} remove={removePage} setPassphrase={setPassphrase} passphrase={passphrase}
                      key={page.id}/>));
        }
    }

    const [listPagesDisplayed, updateListPages] = React.useState(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage ).map(page =>
        <Page page={page} url={url} remove={removePage} setPassphrase={setPassphrase} passphrase={passphrase} key={page.id}/>));

    const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
        setPage(value);
        updateListPages(listPages.slice((value-1) * perPage, ((value-1) * perPage) + perPage).map(page =>
            <Page page={page} url={url} remove={removePage} setPassphrase={setPassphrase} passphrase={passphrase} key={page.id}/>));
    };

    if (isPassphraseSet) {
        return (
            <div>
                <Grid container rowSpacing={1} columnSpacing={1}>
                    {listPagesDisplayed}
                </Grid>
                <Pagination count={numberOfPage} page={currentPage} onChange={handlePageChange} sx={{align: "center"}} color="primary" />
            </div>
        );
    }

    return (<div></div>);
}