All files / app/components UserSummary.tsx

96% Statements 24/25
78.12% Branches 25/32
88.88% Functions 8/9
100% Lines 21/21

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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159          17x 17x 17x 17x 17x     17x 17x   17x   303x               17x             303x             17x 205x 94x           17x 644x 209x           17x                       303x                 303x   303x                                                                                                                                                                
import {
  ListItemAvatar,
  ListItemText,
  Skeleton,
  Typography,
} from "@mui/material";
import { styled } from "@mui/system";
import Avatar from "components/Avatar";
import { OpenInNewIcon } from "components/Icons";
import StyledLink from "components/StyledLink";
import { LiteUser } from "proto/api_pb";
import { BlockedUser } from "proto/blocking_pb";
import React from "react";
import { routeToUser } from "routes";
 
import StrongVerificationBadge from "./StrongVerificationBadge";
 
const StyledWrapper = styled("div")(({ theme }) => ({
  display: "flex",
  padding: 0,
  width: "100%",
  alignItems: "center",
  wordBreak: "break-word",
}));
 
const StyledOpenInNewIcon = styled(OpenInNewIcon)(({ theme }) => ({
  display: "block",
  marginInlineStart: theme.spacing(0.5),
  height: "1.25rem",
  width: "1.25rem",
}));
 
const StyledListItemText = styled(ListItemText)(({ theme }) => ({
  display: "grid",
  gap: theme.spacing(0.25),
  margin: 0,
  minHeight: theme.spacing(9),
}));
 
const StyledSkeleton = styled(Skeleton, {
  shouldForwardProp: (prop) => prop !== "isSmallAvatar",
})<{ isSmallAvatar: boolean }>(({ theme, isSmallAvatar }) => ({
  marginInlineEnd: theme.spacing(2),
  height: isSmallAvatar ? "3rem" : "4.5rem",
  width: isSmallAvatar ? "3rem" : "4.5rem",
}));
 
const StyledAvatar = styled(Avatar, {
  shouldForwardProp: (prop) => prop !== "isSmallAvatar",
})<{ isSmallAvatar: boolean }>(({ theme, isSmallAvatar }) => ({
  marginInlineEnd: theme.spacing(2),
  height: isSmallAvatar ? "3rem" : "4.5rem",
  width: isSmallAvatar ? "3rem" : "4.5rem",
}));
 
export const USER_TITLE_SKELETON_TEST_ID = "user-title-skeleton";
 
export interface UserSummaryProps {
  children?: React.ReactNode;
  smallAvatar?: boolean;
  nameOnly?: boolean;
  headlineComponent?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  user?: LiteUser.AsObject | BlockedUser.AsObject;
  titleIsLink?: boolean;
  isProfileLink?: boolean;
}
 
export default function UserSummary({
  children,
  smallAvatar = false,
  nameOnly = false,
  headlineComponent = "h2",
  user,
  titleIsLink = false,
  isProfileLink = true,
}: UserSummaryProps) {
  const headlineComponentWithRef = React.forwardRef(
    function HeadlineComponentWithRef(props, ref) {
      return React.createElement(headlineComponent, { ...props, ref });
    },
  );
 
  const title = (
    <Typography
      component={headlineComponentWithRef}
      variant="h2"
      noWrap={nameOnly}
      sx={{
        marginTop: "auto",
        fontSize: "1.2rem",
      }}
    >
      {!user ? (
        <Skeleton
          data-testid={USER_TITLE_SKELETON_TEST_ID}
          sx={{ maxWidth: 300 }}
        />
      ) : (
        <>
          {nameOnly
            ? user.name
            : `${user.name}${"age" in user ? `, ${user.age}` : ""}`}
          {"hasStrongVerification" in user && user.hasStrongVerification ? (
            <StrongVerificationBadge />
          ) : null}
        </>
      )}
    </Typography>
  );
 
  return (
    <StyledWrapper>
      <ListItemAvatar>
        {!user ? (
          <StyledSkeleton variant="circular" isSmallAvatar={smallAvatar} />
        ) : (
          <StyledAvatar
            user={user}
            isProfileLink={isProfileLink}
            isSmallAvatar={smallAvatar}
          />
        )}
      </ListItemAvatar>
      <StyledListItemText
        disableTypography
        primary={
          titleIsLink && user ? (
            <StyledLink
              href={routeToUser(user.username)}
              target="_blank"
              rel="noopener noreferrer"
              sx={{ display: "flex", alignItems: "center" }}
            >
              {title}
              <StyledOpenInNewIcon />
            </StyledLink>
          ) : (
            title
          )
        }
        secondary={
          <>
            {!nameOnly && (
              <Typography
                color="textSecondary"
                variant="body1"
                noWrap={nameOnly}
              >
                {!user ? <Skeleton /> : "city" in user ? user.city : null}
              </Typography>
            )}
            {children}
          </>
        }
      />
    </StyledWrapper>
  );
}