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

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

export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, setAllLoaded}: IPages) {
    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} 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} 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} passphrase={passphrase} key={page.id}/>));
    };

    const loadAllPages = function() {
        listPages.map(function(page) {
            loadPage(page).then(r => {setAllLoaded(isAllLoadedLocally(listPages));});
        });
    }

    async function loadPage(page: IList) {
        if (localStorage.getItem(page.id + "text") === null) {
            const response = await fetch(url.replace("replace_me", page.id));

            const json = await response.json();
            localStorage.setItem(page.id + "title", json.metadata.title);
            localStorage.setItem(page.id + "text", json.content);
            updateListPages([]);
            updateListPages(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage).map(page =>
                <Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
        }
    }

    React.useEffect(() => {
        loadPages.current = loadAllPages;
    }, [])

    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>);
}