Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import { Card, Typography } from "@material-ui/core";
import Button from "components/Button";
import Markdown from "components/Markdown";
import { Trans, useTranslation } from "i18n";
import { AUTH, GLOBAL } from "i18n/namespaces";
import { ModNote } from "proto/account_pb";
import { useState } from "react";
import { service } from "service";
import { dateFormatter, timestamp2Date } from "utils/date";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
noteContainer: {
marginBottom: theme.spacing(4),
marginTop: theme.spacing(4),
},
noteCard: {
padding: theme.spacing(0, 2, 2, 2),
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
}));
interface ModNoteCardProps {
note: ModNote.AsObject;
updateJailed: () => void;
}
export default function ModNoteCard({ note, updateJailed }: ModNoteCardProps) {
const classes = useStyles(makeStyles);
const {
t,
i18n: { language: locale },
} = useTranslation([AUTH, GLOBAL]);
const [acknowledged, setAcknowledged] = useState(false);
const [loading, setLoading] = useState(false);
const formattedTime = dateFormatter(locale).format(
timestamp2Date(note.created!)
);
const acknowledge = async () => {
setLoading(true);
const info = await service.jail.acknowledgePendingModNote(
note.noteId,
true
);
if (!info.isJailed) {
updateJailed();
} else {
// if user is no longer jailed, this component will be unmounted anyway
setLoading(false);
setAcknowledged(true);
}
};
return (
<div key={note.noteId} className={classes.noteContainer}>
<Typography variant="h3">
<Trans t={t} i18nKey="auth:jail.mod_note_section.note_title">
Mod note received on {{ time: formattedTime }}:
</Trans>
</Typography>
<Card className={classes.noteCard}>
<Markdown source={note.noteContent} topHeaderLevel={3} />
</Card>
<Button loading={loading} onClick={acknowledge} disabled={acknowledged}>
{acknowledged
? t("global:thanks")
: t("auth:jail.mod_note_section.acknowledge")}
</Button>
</div>
);
}
|