85 lines
3.4 KiB
TypeScript
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>);
|
|
}
|