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

97.05% Statements 33/34
87.5% Branches 7/8
83.33% Functions 5/6
100% Lines 31/31

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 1183x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x   3x 3x           3x         26x       26x               3x                     34x 26x 26x 26x 26x   26x 6x                                           130x 130x                                                                      
import { styled, Typography } from "@mui/material";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Button from "components/Button";
import { AddIcon } from "components/Icons";
import { MenuItem } from "components/Menu";
import { referencesFilterLabels } from "features/profile/constants";
import { useListAvailableReferences } from "features/profile/hooks/referencesHooks";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import Link from "next/link";
import { User } from "proto/api_pb";
import { ReferenceType } from "proto/references_pb";
import React, { useState } from "react";
import { leaveReferenceBaseRoute, referenceTypeRoute } from "routes";
import { theme } from "theme";
 
import ReferencesGivenList from "./ReferencesGivenList";
import ReferencesReceivedList from "./ReferencesReceivedList";
 
export type ReferenceTypeState = keyof ReturnType<
  typeof referencesFilterLabels
>;
 
const StyledReferencesContainer = styled("div")({
  display: "flex",
  flexFlow: "row wrap",
});
 
const StyledHeaderParentContainer = styled("div")(({ theme }) => ({
  width: "100%",
}));
 
const StyledHeaderContainer = styled("div")(({ theme }) => ({
  alignItems: "center",
  display: "flex",
  justifyContent: "space-between",
  paddingBlockStart: theme.spacing(2),
  width: "100%",
}));
 
const StyledButtonContainer = styled("div")(({ theme }) => ({
  "& > button": {
    marginInline: theme.spacing(2),
  },
  display: "flex",
  width: "100%",
  justifyContent: "flex-end",
  marginInlineEnd: theme.spacing(2),
  marginTop: theme.spacing(1),
}));
 
export default function References() {
  const { t } = useTranslation([GLOBAL, PROFILE]);
  const [referenceType, setReferenceType] = useState<ReferenceTypeState>("all");
  const { userId, friends } = useProfileUser();
  const { data: availableReferences } = useListAvailableReferences(userId);
 
  const handleChange = (event: SelectChangeEvent<ReferenceTypeState>) => {
    setReferenceType(event.target.value as ReferenceTypeState);
  };
 
  return (
    <StyledReferencesContainer>
      <StyledHeaderParentContainer>
        <StyledHeaderContainer>
          <Typography variant="h1" sx={{ marginTop: 0 }}>
            {t("profile:heading.references")}
          </Typography>
          <Select
            variant="standard"
            displayEmpty
            inputProps={{
              "aria-label": t("profile:references_filter_a11y_label"),
            }}
            onChange={handleChange}
            value={referenceType}
            sx={{ paddingInlineStart: theme.spacing(1) }}
          >
            {Object.entries(referencesFilterLabels(t)).map(([key, label]) => {
              const value =
                key === "all" || key === "given" ? key : Number(key);
              return (
                <MenuItem key={value} value={value}>
                  {label}
                </MenuItem>
              );
            })}
          </Select>
        </StyledHeaderContainer>
        {availableReferences?.canWriteFriendReference &&
          friends === User.FriendshipStatus.FRIENDS && (
            <StyledButtonContainer>
              <Link
                href={{
                  pathname: `${leaveReferenceBaseRoute}/${
                    referenceTypeRoute[ReferenceType.REFERENCE_TYPE_FRIEND]
                  }/${userId}`,
                }}
                passHref
                legacyBehavior
              >
                <Button startIcon={<AddIcon />}>
                  {t("profile:write_reference")}
                </Button>
              </Link>
            </StyledButtonContainer>
          )}
      </StyledHeaderParentContainer>
      {referenceType !== "given" ? (
        <ReferencesReceivedList referenceType={referenceType} />
      ) : (
        <ReferencesGivenList />
      )}
    </StyledReferencesContainer>
  );
}