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

106 lines
4.0 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, settings, 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}
sx={{
bgcolor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<Card>
<CardHeader
sx={{
bgcolor: settings.background_color,
color: settings.text_color
}}
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 sx={{
backgroundColor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<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);