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

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);