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 76 77 78 79 80 81 82 83 84 85 86 87 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 9x 3x 3x 40x 40x 40x | import { ListItem } from "@material-ui/core";
import Pill from "components/Pill";
import TextBody from "components/TextBody";
import UserSummary from "components/UserSummary";
import { referenceBadgeLabel } from "features/profile/constants";
import { COMMUNITIES, GLOBAL } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { User } from "proto/api_pb";
import { Reference } from "proto/references_pb";
import { dateTimeFormatter, timestamp2Date } from "utils/date";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
badgesContainer: {
"& > * + *": {
marginBlockStart: theme.spacing(2),
},
display: "flex",
flexDirection: "column",
marginInlineEnd: theme.spacing(2),
minWidth: theme.spacing(9),
},
listItem: {
"& > * + *": {
marginBlockStart: theme.spacing(2),
},
alignItems: "flex-start",
borderBlockEnd: `${theme.typography.pxToRem(1)} solid ${
theme.palette.grey[300]
}`,
flexDirection: "column",
},
referenceBodyContainer: {
display: "flex",
width: "100%",
},
referenceText: {
whiteSpace: "pre-wrap",
},
}));
export const REFERENCE_LIST_ITEM_TEST_ID = "reference-list-item";
interface ReferenceListItemProps {
isReceived: boolean;
user: User.AsObject;
reference: Reference.AsObject;
}
export default function ReferenceListItem({
isReceived,
user,
reference,
}: ReferenceListItemProps) {
const {
t,
i18n: { language: locale },
} = useTranslation([GLOBAL, COMMUNITIES]);
const classes = useStyles();
return (
<ListItem
className={classes.listItem}
data-testid={REFERENCE_LIST_ITEM_TEST_ID}
>
<UserSummary user={user} />
<div className={classes.referenceBodyContainer}>
<div className={classes.badgesContainer}>
{isReceived && (
<Pill variant="rounded">
{referenceBadgeLabel(t)[reference.referenceType]}
</Pill>
)}
{reference.writtenTime && (
<Pill variant="rounded">
{dateTimeFormatter(locale).format(
timestamp2Date(reference.writtenTime)
)}
</Pill>
)}
</div>
<TextBody className={classes.referenceText}>{reference.text}</TextBody>
</div>
</ListItem>
);
}
|