💄 Améliore l'affichage et certaines actions

Fait fonctionner la suppression d'une page
Fait fonctionner la pagination
Fait fonctionner mieux le formulaire
Fait fonctionner le markdown
This commit is contained in:
Clement Desmidt 2022-03-04 13:07:27 +01:00
parent a8116aa5a2
commit 844f625298
5 changed files with 77671 additions and 245 deletions

77744
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@ import PageForm from "./Form";
import Pages from "./List";
import Prompt from "./Prompt";
import * as React from 'react';
import {Alert, AlertTitle, Divider} from "@mui/material";
import {Alert, AlertTitle, Button, Divider} from "@mui/material";
import {EncryptStorage} from "storage-encryption";
import {
Switch,
@ -96,17 +96,18 @@ function App() {
return user ? (
<p>
Welcome!{" "}
<button
onClick={() => {
Bienvenue !{" "}
<Button variant="outlined" size="small" sx={{align: "right"}} onClick={() => {
signout(() => history.push("/"));
}}
>
Sign out
</button>
}}>
Fermer mon carnet Ă  clef
</Button>
</p>
) : (
<p>You are not logged in.</p>
<p>
Votre carnet est fermé.{" "}
<Link to="/diary/public/pages">Voir vos pages</Link>
</p>
);
}
@ -149,7 +150,7 @@ function App() {
function ListPage() {
return (
<div className="col-md-8">
<div className="col-md-12">
<Pages
pages={listPages}
url={getPageContentUrl}
@ -167,12 +168,7 @@ function App() {
<div>
<AuthButton />
<Error/>
<ul>
<li>
<Link to="/diary/public/pages">Voir vos pages</Link>
</li>
</ul>
<Divider sx={{height: "20px", mb: "20px", mt:"10px"}}/>
<Switch>
<Route path="/diary/public/pass">
<PromptPage />

View File

@ -6,31 +6,35 @@ let encryptStorage = new EncryptStorage('test'); // TODO la clef doit venir de l
export default function PageForm({setListPages, csrf, url, passphrase}) {
const isPassphraseSet = passphrase !== null;
const [content, setContent] = React.useState("");
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
encryptStorage = new EncryptStorage(passphrase);
let HTMLForm : HTMLFormElement = event.currentTarget;
let decryptedFormData = new FormData(HTMLForm);
let encryptedFormData = new FormData();
for (let [key, value] of decryptedFormData.entries()) {
const HTMLForm : HTMLFormElement = event.currentTarget;
const decryptedFormData = new FormData(HTMLForm);
const encryptedFormData = new FormData();
for (const [key, value] of decryptedFormData.entries()) {
encryptStorage.encrypt('uuid'+key, value);
let newEncryptedString = localStorage.getItem('uuid'+key);
const newEncryptedString = localStorage.getItem('uuid'+key);
if (newEncryptedString) {
encryptedFormData.append(key, newEncryptedString);
}
}
encryptStorage.encrypt('uuidtext', content);
encryptedFormData.append("text", ""+localStorage.getItem('uuidtext'))
encryptedFormData.append('_token', csrf);
let response = await fetch(url, {
const response = await fetch(url, {
method: 'POST',
body: encryptedFormData
});
const json = await response.json();
const uuid = json.uuid;
for (let key of decryptedFormData.keys()) {
let newEncryptedString = localStorage.getItem('uuid'+key);
for (const key of decryptedFormData.keys()) {
const newEncryptedString = localStorage.getItem('uuid'+key);
localStorage.setItem(uuid+key, ""+newEncryptedString);
localStorage.removeItem("uuid"+key);
}
@ -50,14 +54,10 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
if (isPassphraseSet) {
return (
/* <Stack
component="form"
sx={{
width: '25ch',
}}
<form action={url} id="postPage" method="post" onSubmit={onSubmit}>
<Stack
component="div"
spacing={2}
noValidate
autoComplete="off"
>
<TextField
label="Titre"
@ -67,40 +67,14 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
size="small"
/>
<MDEditor
value={value}
onChange={setValue}
value={content}
onChange={setContent}
/>
<MDEditor.Markdown source={value} />
<TextField
label="Texte"
name="content"
id="filled-hidden-label-normal"
defaultValue="Normal"
variant="outlined"
multiline
maxRows={15}
/>
<Button variant="contained" component="span" onClick={onSubmit}>
<Button variant="contained" type={"submit"}>
Enregistrer
</Button>
</Stack>*/
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<form action={url} id="postPage" method="post" onSubmit={onSubmit}>
<label htmlFor="title">Titre:</label>
<input id="title" name="title"/>
<hr/>
<label htmlFor="text">Texte:</label>
<textarea id="text" name="text"/>
<hr/>
<input type="submit" value="Enregistrer"/>
</Stack>
</form>
</div>
</div>
</div>
</div>
);
}

View File

@ -1,4 +1,4 @@
import {Grid, List, Pagination} from '@mui/material';
import {Grid, Pagination} from '@mui/material';
import * as React from 'react';
import Page from "./Page";
@ -9,18 +9,53 @@ interface List {
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);
let listPages = pages.map(page =>
<Page page={page} url={url} setPassphrase={setPassphrase} passphrase={passphrase} csrf={csrf} removeUrl={removeUrl} key={page.id}/>
)
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}/>));
};
if (isPassphraseSet) {
return (
<div>
<Grid container rowSpacing={1} columnSpacing={1}>
{listPages}
{listPagesDisplayed}
</Grid>
<Pagination count={10} color="primary" />
<Pagination count={numberOfPage} page={currentPage} onChange={handlePageChange} sx={{align: "center"}} color="primary" />
</div>
);
}

View File

@ -13,7 +13,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import * as React from 'react';
import {EncryptStorage} from 'storage-encryption';
import {Delete} from "@mui/icons-material";
import {unmountComponentAtNode} from "react-dom";
import MDEditor from "@uiw/react-md-editor";
interface Page {
date: string;
@ -36,24 +36,13 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
}),
}));
export default function Page({page, url, removeUrl, csrf, passphrase, setPassphrase}) {
export default function Page({page, url, passphrase, setPassphrase, remove}) {
const [more, setMore] = React.useState(false);
const [expanded, setExpanded] = React.useState(false);
const handleMoreClick = () => { setMore(!more); };
const handleExpandClick = () => { onLoad().then(r => setExpanded(!expanded)); };
const remove = async () => {
const formData = new FormData();
formData.set('_token', csrf);
formData.set('_method', 'DELETE');
let response = await fetch(removeUrl.replace("replace_me", page.id), {
method: 'POST', body: formData
});
const json = await response.json();
unmountComponentAtNode(document.getElementById(page.id));
};
let encryptStorage = new EncryptStorage(passphrase);
const encryptStorage = new EncryptStorage(passphrase);
let title, content = "";
let alert_popup:JSX.Element|null = null;
let setTitle, setContent: React.Dispatch<any>|null = null;
@ -63,9 +52,9 @@ export default function Page({page, url, removeUrl, csrf, passphrase, setPassphr
[title, setTitle] = React.useState(encryptStorage.decrypt(page.id + "title"));
onLoad = async () => {
if (localStorage.getItem(page.id + "text") === null) {
let response = await fetch(url.replace("replace_me", page.id));
const response = await fetch(url.replace("replace_me", page.id));
let json = await response.json();
const json = await response.json();
localStorage.setItem(page.id + "title", json.metadata.title);
localStorage.setItem(page.id + "text", json.content);
}
@ -83,7 +72,7 @@ export default function Page({page, url, removeUrl, csrf, passphrase, setPassphr
}
return (
<Grid item xs={12} sm={6} md={6} id={page.id}>
<Grid item xs={12} sm={12} md={12} id={page.id}>
{alert_popup}
<Card>
<CardHeader
@ -96,7 +85,7 @@ export default function Page({page, url, removeUrl, csrf, passphrase, setPassphr
subheader={page.date}
/>
<Collapse in={more} timeout="auto" unmountOnExit>
<IconButton aria-label="remove" onClick={remove} >
<IconButton aria-label="remove" onClick={() => {remove(page.id)}} >
<Delete />
</IconButton>
</Collapse>
@ -113,7 +102,7 @@ export default function Page({page, url, removeUrl, csrf, passphrase, setPassphr
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>
{content}
<MDEditor.Markdown source={content} />
</Typography>
</CardContent>
</Collapse>