88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import {
|
|
Alert,
|
|
AlertTitle,
|
|
Card, CardContent,
|
|
CardHeader, Collapse,
|
|
Grid, IconButton
|
|
} from '@mui/material';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import * as React from 'react';
|
|
import {EncryptStorage} from 'storage-encryption';
|
|
import {Delete, Download} from "@mui/icons-material";
|
|
import MDEditor from "@uiw/react-md-editor";
|
|
import {PropPage} from "../../interfaces/PropPage";
|
|
|
|
const Page = function({page, url, passphrase, remove}: PropPage) {
|
|
const [more, setMore] = React.useState<boolean>(false);
|
|
const handleMoreClick = () => { setMore(!more); };
|
|
|
|
const encryptStorage = new EncryptStorage(passphrase);
|
|
try {
|
|
const [title, setTitle] = React.useState<string>(encryptStorage.decrypt(page.id + "title"));
|
|
const [content, setContent] = React.useState<string>(encryptStorage.decrypt(page.id + "text"));
|
|
const onLoad = async () => {
|
|
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);
|
|
}
|
|
setTitle(encryptStorage.decrypt(page.id + "title"));
|
|
setContent(encryptStorage.decrypt(page.id + "text"));
|
|
}
|
|
let icons;
|
|
if (content === null || content === "") {
|
|
icons = (<div>
|
|
<IconButton aria-label="load" onClick={onLoad} >
|
|
<Download />
|
|
</IconButton>
|
|
<IconButton aria-label="settings" onClick={handleMoreClick}>
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
</div>);
|
|
} else {
|
|
icons = (
|
|
<IconButton aria-label="settings" onClick={handleMoreClick}>
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Grid item xs={12} sm={12} md={12} id={page.id}>
|
|
<Card>
|
|
<CardHeader
|
|
action={
|
|
icons
|
|
}
|
|
title={title}
|
|
subheader={page.date}
|
|
>
|
|
<Collapse in={more} timeout="auto" unmountOnExit>
|
|
<IconButton aria-label="remove" onClick={() => {remove(page.id)}} >
|
|
<Delete />
|
|
</IconButton>
|
|
</Collapse>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<MDEditor.Markdown source={content} />
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
);
|
|
} catch (e) {
|
|
console.error(e);
|
|
return (
|
|
<Grid item xs={12} sm={12} md={12} id={page.id}>
|
|
<Alert severity="error">
|
|
<AlertTitle>Erreur</AlertTitle>
|
|
Cette page ne peut pas être décodée — <strong>Réindiquez votre clef!</strong>
|
|
</Alert>
|
|
</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default React.forwardRef(Page);
|