All files / app/features/notifications NotificationSettingsListItem.tsx

94.73% Statements 18/19
50% Branches 1/2
83.33% Functions 5/6
94.44% Lines 17/18

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                1x 1x 1x 1x 1x     1x 1x             4x                       4x         4x   4x     4x   4x       4x 4x 4x   4x                                            
import {
  Collapse,
  ListItem,
  ListItemIcon,
  ListItemProps,
  ListItemText,
  styled,
  Typography,
} from "@mui/material";
import { ExpandLessIcon, ExpandMoreIcon } from "components/Icons";
import { NOTIFICATIONS } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { useState } from "react";
 
import { GroupAction, NotificationType } from "./EditNotificationSettingsPage";
import NotificationSettingsSubListItem from "./NotificationSettingsSubListItem";
import { mapNotificationSettingsTypeToIcon } from "./utils/constants";
 
export interface NotificationSettingsListItemProps {
  items: GroupAction[];
  type: NotificationType;
}
 
const StyledListItem = styled(ListItem)<ListItemProps>(({ theme }) => ({
  background: "transparent",
  border: "none",
 
  "&:hover": {
    backgroundColor: "transparent",
  },
  "&:not(:first-of-type)": {
    borderTop: `1px solid ${theme.palette.divider}`,
  },
}));
 
export default function NotificationSettingsListItem({
  items,
  type,
}: NotificationSettingsListItemProps) {
  const notificationType =
    type as `notifications:notification_settings.edit_preferences.list_items.${NotificationType}`;
 
  const { t } = useTranslation([NOTIFICATIONS], {
    keyPrefix: "notification_settings.edit_preferences.list_items",
  });
  const [isCollapseOpen, setIsCollapseOpen] = useState<boolean>(false);
 
  const handleCollapseClick = () => {
    setIsCollapseOpen(!isCollapseOpen);
  };
 
  const renderItems = () =>
    items
      .filter((item) => item.userEditable)
      .map((item) => (
        <NotificationSettingsSubListItem
          key={`${item.topic}:${item.action}`}
          topic={item.topic}
          action={item.action}
          push={item.push}
          email={item.email}
        />
      ));
 
  return (
    <>
      <StyledListItem component="button" onClick={handleCollapseClick}>
        <ListItemIcon>{mapNotificationSettingsTypeToIcon[type]}</ListItemIcon>
        <ListItemText>
          <Typography variant="h3">{t(notificationType)}</Typography>
        </ListItemText>
        {isCollapseOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
      </StyledListItem>
      <Collapse in={isCollapseOpen}>{renderItems()}</Collapse>
    </>
  );
}