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

65 lines
2.5 KiB
TypeScript
Raw Normal View History

import {Grid, Pagination} from '@mui/material';
2022-02-11 17:26:15 +01:00
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);
2022-02-11 17:26:15 +01:00
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}/>));
};
2022-02-11 17:26:15 +01:00
if (isPassphraseSet) {
return (
<div>
<Grid container rowSpacing={1} columnSpacing={1}>
{listPagesDisplayed}
2022-02-11 17:26:15 +01:00
</Grid>
<Pagination count={numberOfPage} page={currentPage} onChange={handlePageChange} sx={{align: "center"}} color="primary" />
2022-02-11 17:26:15 +01:00
</div>
);
}
return (<div></div>);
}