diaREact/resources/js/components/pages/List.tsx
2022-04-14 11:22:44 +02:00

85 lines
3.4 KiB
TypeScript

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