All files / app/features/profile/view ReferenceListItem.tsx

100% Statements 18/18
100% Branches 2/2
100% Functions 4/4
100% Lines 14/14

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 793x 3x 3x 3x 3x 3x 3x     3x   6x               29x                   29x                     29x         29x               29x                                                  
import { ListItem, styled } from "@mui/material";
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 { LiteUser } from "proto/api_pb";
import { Reference } from "proto/references_pb";
import { monthFormatter, timestamp2Date } from "utils/date";
 
export const REFERENCE_LIST_ITEM_TEST_ID = "reference-list-item";
 
interface ReferenceListItemProps {
  isReceived: boolean;
  user: LiteUser.AsObject;
  reference: Reference.AsObject;
}
 
const StyledBadgesContainer = styled("div")(({ theme }) => ({
  "& > * + *": {
    marginBlockStart: theme.spacing(2),
  },
  display: "flex",
  flexDirection: "column",
  marginInlineEnd: theme.spacing(2),
  minWidth: theme.spacing(9),
}));
 
const StyledListItem = styled(ListItem)(({ theme }) => ({
  "& > * + *": {
    marginBlockStart: theme.spacing(2),
  },
  alignItems: "flex-start",
  borderBlockEnd: `${theme.typography.pxToRem(1)} solid ${
    theme.palette.grey[300]
  }`,
  flexDirection: "column",
}));
 
const StyledReferencesBodyContainer = styled("div")(({ theme }) => ({
  display: "flex",
  width: "100%",
}));
 
export default function ReferenceListItem({
  isReceived,
  user,
  reference,
}: ReferenceListItemProps) {
  const {
    t,
    i18n: { language: locale },
  } = useTranslation([GLOBAL, COMMUNITIES]);
 
  return (
    <StyledListItem data-testid={REFERENCE_LIST_ITEM_TEST_ID}>
      <UserSummary user={user} />
      <StyledReferencesBodyContainer>
        <StyledBadgesContainer>
          {isReceived && (
            <Pill variant="rounded">
              {referenceBadgeLabel(t)[reference.referenceType]}
            </Pill>
          )}
          {reference.writtenTime && (
            <Pill variant="rounded">
              {monthFormatter(locale).format(
                timestamp2Date(reference.writtenTime),
              )}
            </Pill>
          )}
        </StyledBadgesContainer>
        <TextBody sx={{ whiteSpace: "pre-wrap" }}>{reference.text}</TextBody>
      </StyledReferencesBodyContainer>
    </StyledListItem>
  );
}