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

113 lines
4.2 KiB
TypeScript
Raw Normal View History

2022-02-11 17:26:15 +01:00
import {
Alert,
AlertTitle,
Card, CardActions,
CardContent,
CardHeader, Collapse,
Grid, IconButton, IconButtonProps,
Typography
} from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { styled } from '@mui/material/styles';
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import * as React from 'react';
import {EncryptStorage} from 'storage-encryption';
import {Delete} from "@mui/icons-material";
import MDEditor from "@uiw/react-md-editor";
2022-02-11 17:26:15 +01:00
interface Page {
date: string;
title: string;
content: string;
}
interface ExpandMoreProps extends IconButtonProps {
expand: boolean;
}
const ExpandMore = styled((props: ExpandMoreProps) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
export default function Page({page, url, passphrase, setPassphrase, remove}) {
2022-02-11 17:26:15 +01:00
const [more, setMore] = React.useState(false);
const [expanded, setExpanded] = React.useState(false);
const handleMoreClick = () => { setMore(!more); };
const handleExpandClick = () => { onLoad().then(r => setExpanded(!expanded)); };
const encryptStorage = new EncryptStorage(passphrase);
2022-02-11 17:26:15 +01:00
let title, content = "";
let alert_popup:JSX.Element|null = null;
let setTitle, setContent: React.Dispatch<any>|null = null;
let onLoad = async () => {};
try {
[content, setContent] = React.useState(encryptStorage.decrypt(page.id + "text"));
[title, setTitle] = React.useState(encryptStorage.decrypt(page.id + "title"));
onLoad = async () => {
if (localStorage.getItem(page.id + "text") === null) {
const response = await fetch(url.replace("replace_me", page.id));
2022-02-11 17:26:15 +01:00
const json = await response.json();
2022-02-11 17:26:15 +01:00
localStorage.setItem(page.id + "title", json.metadata.title);
localStorage.setItem(page.id + "text", json.content);
}
setTitle(encryptStorage.decrypt(page.id + "title"));
// @ts-ignore
setContent(encryptStorage.decrypt(page.id + "text"));
}
} catch (e) {
console.error(e);
setPassphrase(null);
alert_popup = <Alert severity="error">
<AlertTitle>Erreur</AlertTitle>
Vos pages ne peuvent pas être décodées — <strong>Réindiquez votre clef!</strong>
</Alert>
}
return (
<Grid item xs={12} sm={12} md={12} id={page.id}>
2022-02-11 17:26:15 +01:00
{alert_popup}
<Card>
<CardHeader
action={
<IconButton aria-label="settings" onClick={handleMoreClick}>
<MoreVertIcon />
2022-02-11 17:26:15 +01:00
</IconButton>
}
title={title}
subheader={page.date}
/>
<Collapse in={more} timeout="auto" unmountOnExit>
<IconButton aria-label="remove" onClick={() => {remove(page.id)}} >
<Delete />
2022-02-11 17:26:15 +01:00
</IconButton>
</Collapse>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>
<MDEditor.Markdown source={content} />
2022-02-11 17:26:15 +01:00
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
);
}