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 => )); } } const [listPagesDisplayed, updateListPages] = React.useState(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage ).map(page => )); const handlePageChange = (event: React.ChangeEvent, value: number) => { setPage(value); updateListPages(listPages.slice((value-1) * perPage, ((value-1) * perPage) + perPage).map(page => )); }; 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 => )); } } React.useEffect(() => { loadPages.current = loadAllPages; }, []) if (isPassphraseSet) { return (
{listPagesDisplayed}
); } return (
); }