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

100% Statements 23/23
75% Branches 3/4
100% Functions 4/4
100% Lines 20/20

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 1002x 2x 2x 2x 2x 2x 2x 2x 2x 2x             2x   2x   2x         26x                         24x                 24x                           14x                     24x 24x 24x                                                  
import { TabPanel } from "@mui/lab";
import { Box, Card, styled } from "@mui/material";
import TabBar from "components/TabBar";
import useAccountInfo from "features/auth/useAccountInfo";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import About from "features/profile/view/About";
import Home from "features/profile/view/Home";
import References from "features/profile/view/References";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { TFunction } from "i18next";
import { GetAccountInfoRes } from "proto/account_pb";
import { User } from "proto/api_pb";
import { ReactNode } from "react";
import { UserTab } from "routes";
 
import UserTabContext from "./UserTabContext";
 
const REQUEST_ID = "request";
 
export const sectionLabels = (
  t: TFunction,
  user?: User.AsObject,
  isSuperuser?: GetAccountInfoRes.AsObject["isSuperuser"],
) => {
  return {
    about: t("profile:heading.about_me"),
    home: t("profile:heading.home"),
    references: (
      <Box display="flex" alignItems="center" gap={1}>
        {t("profile:heading.references")}
        <StyledNumReferences>{user?.numReferences}</StyledNumReferences>
      </Box>
    ),
    ...(isSuperuser ? { mod: t("global:mod") } : {}),
  };
};
 
const StyledDetailsCard = styled(Card)(({ theme }) => ({
  [theme.breakpoints.down("md")]: {
    margin: 0,
    width: "100%",
  },
  flexGrow: 1,
  padding: theme.spacing(2),
}));
 
const StyledNumReferences = styled("div")(({ theme }) => ({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.white,
  fontWeight: "bold",
  fontSize: "0.65rem",
  width: "15px",
  height: "15px",
  borderRadius: "50%",
  padding: theme.spacing(1),
}));
 
export default function UserCard({
  top,
  onTabChange,
  tab,
  modPanel,
}: {
  top?: ReactNode;
  onTabChange: (tab: UserTab) => void;
  tab: UserTab;
  modPanel?: ReactNode;
}) {
  const { t } = useTranslation([PROFILE, GLOBAL]);
  const user = useProfileUser();
  const { data: accountInfo } = useAccountInfo();
 
  return (
    <StyledDetailsCard id={REQUEST_ID}>
      <UserTabContext tab={tab}>
        <TabBar
          setValue={onTabChange}
          labels={sectionLabels(t, user, accountInfo?.isSuperuser)}
          ariaLabel={t("profile:section_tabs_a11y_label")}
        />
        {top || null}
        <TabPanel value="about" sx={{ padding: 0 }}>
          <About user={user} />
        </TabPanel>
        {modPanel}
        <TabPanel value="home">
          <Home user={user}></Home>
        </TabPanel>
        <TabPanel value="references">
          <References />
        </TabPanel>
      </UserTabContext>
    </StyledDetailsCard>
  );
}