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 | import { Card, styled, Typography } from "@mui/material";
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 { theme } from "theme";
import { dateFormatter, timestamp2Date } from "utils/date";
const StyledNoteContainer = styled("div")(() => ({
marginBottom: theme.spacing(4),
marginTop: theme.spacing(4),
}));
const StyledNoteCard = styled(Card)(() => ({
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 {
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 (
<StyledNoteContainer key={note.noteId}>
<Typography variant="h3">
<Trans t={t} i18nKey="auth:jail.mod_note_section.note_title">
Mod note received on {{ time: formattedTime }}:
</Trans>
</Typography>
<StyledNoteCard>
<Markdown source={note.noteContent} topHeaderLevel={3} />
</StyledNoteCard>
<Button loading={loading} onClick={acknowledge} disabled={acknowledged}>
{acknowledged
? t("global:thanks")
: t("auth:jail.mod_note_section.acknowledge")}
</Button>
</StyledNoteContainer>
);
}
|