10147657528

Committed 29 Jul 2024 03:55PM UTC coverage: 31.852% (-0.005%) from 31.857%

Build # 10147657528

Build Type

Pull #9554

github

Committed by

oetherington

Commit Message

Add formatting for notification popover items

Pull Request Pull Request #9554: EA Notifications redesign

Run Details

4936 of 40631 branches covered (12.15%)

Branch coverage included in aggregate %.

31 of 55 new or added lines in 9 files covered. (56.36%)

37 existing lines in 3 files now uncovered.

28897 of 65589 relevant lines covered (44.06%)

179.38 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

34.78

/packages/lesswrong/components/notifications/NotificationsPopover.tsx

import React from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { HEADER_HEIGHT } from "../common/Header";
import { styles as popoverStyles } from "../common/FriendlyHoverOver";
import { useNotificationDisplays } from "./NotificationsPage/useNotificationDisplays";
import type { NotificationDisplay } from "@/lib/notificationTypes";
import type { KarmaChanges } from "@/lib/collections/users/karmaChangesGraphQL";

const styles = (theme: ThemeType) => ({
  root: {
    ...popoverStyles(theme).root,
    fontFamily: theme.palette.fonts.sansSerifStack,
    padding: 16,
    width: 400,
    maxWidth: "calc(100vw - 32px)",
    maxHeight: `calc(100vh - ${HEADER_HEIGHT + 16}px)`,
    display: "flex",
    flexDirection: "column",
  },
  loading: {
    height: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 600,
  },
  sectionTitle: {
    fontSize: 12,
  },
  notifications: {
    overflow: "hidden",
    maskImage: `linear-gradient(to bottom, ${theme.palette.grey[0]} 90%, transparent 100%)`,
    "-webkit-mask-image": `linear-gradient(to bottom, ${theme.palette.grey[0]} 90%, transparent 100%)`,
  },
  notification: {
    display: "flex",
  },
});

const NotificationsPopover = ({karmaChanges, classes}: {
  karmaChanges?: KarmaChanges,
  classes: ClassesType<typeof styles>,
}) => {
  const {data, loading: notificationsLoading} = useNotificationDisplays(20);
  const notifs: NotificationDisplay[] = data?.NotificationDisplays?.results ?? [];

  const {
    SectionTitle, Loading, NotificationsPageKarmaChangeList,
    NotificationsPopoverNotification,
  } = Components;
  return (
    <div className={classes.root}>
      <div className={classes.title}>Notifications</div>
      <SectionTitle title="Karma & reacts" className={classes.sectionTitle} />
      {karmaChanges &&
        <NotificationsPageKarmaChangeList karmaChanges={karmaChanges} />
      }
      <SectionTitle title="Posts & comments" className={classes.sectionTitle} />
      <div className={classes.notifications}>
        {notifs.map((notification) =>
          <NotificationsPopoverNotification
            key={notification._id}
            notification={notification}
          />
        )}
        {notificationsLoading && <Loading className={classes.loading} />}
      </div>
    </div>
  );
}

const NotificationsPopoverComponent = registerComponent(
  "NotificationsPopover",
  NotificationsPopover,
  {styles},
);

declare global {
  interface ComponentTypes {
    NotificationsPopover: typeof NotificationsPopoverComponent
  }
}

1	import React from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { HEADER_HEIGHT } from "../common/Header";	1✔
4	import { styles as popoverStyles } from "../common/FriendlyHoverOver";	1✔
5	import { useNotificationDisplays } from "./NotificationsPage/useNotificationDisplays";	1✔
6	import type { NotificationDisplay } from "@/lib/notificationTypes";
7	import type { KarmaChanges } from "@/lib/collections/users/karmaChangesGraphQL";
8
9	const styles = (theme: ThemeType) => ({	1✔
10	root: {
11	...popoverStyles(theme).root,
12	fontFamily: theme.palette.fonts.sansSerifStack,
13	padding: 16,
14	width: 400,
15	maxWidth: "calc(100vw - 32px)",
16	maxHeight: `calc(100vh - ${HEADER_HEIGHT + 16}px)`,
17	display: "flex",
18	flexDirection: "column",
19	},
20	loading: {
21	height: 20,
22	},
23	title: {
24	fontSize: 24,
25	fontWeight: 600,
26	},
27	sectionTitle: {
28	fontSize: 12,
29	},
30	notifications: {
31	overflow: "hidden",
32	maskImage: `linear-gradient(to bottom, ${theme.palette.grey[0]} 90%, transparent 100%)`,
33	"-webkit-mask-image": `linear-gradient(to bottom, ${theme.palette.grey[0]} 90%, transparent 100%)`,
34	},
35	notification: {
36	display: "flex",
37	},
38	});
39
40	const NotificationsPopover = ({karmaChanges, classes}: {	1✔
41	karmaChanges?: KarmaChanges,
42	classes: ClassesType<typeof styles>,
43	}) => {
NEW 44	const {data, loading: notificationsLoading} = useNotificationDisplays(20);	×
NEW 45	const notifs: NotificationDisplay[] = data?.NotificationDisplays?.results ?? [];	×
46
47	const {
48	SectionTitle, Loading, NotificationsPageKarmaChangeList,
49	NotificationsPopoverNotification,
NEW 50	} = Components;	×
NEW 51	return (	×
52	<div className={classes.root}>
53	<div className={classes.title}>Notifications</div>
54	<SectionTitle title="Karma & reacts" className={classes.sectionTitle} />
55	{karmaChanges &&	×
56	<NotificationsPageKarmaChangeList karmaChanges={karmaChanges} />
57	}
58	<SectionTitle title="Posts & comments" className={classes.sectionTitle} />
59	<div className={classes.notifications}>
60	{notifs.map((notification) =>
NEW 61	<NotificationsPopoverNotification	×
62	key={notification._id}
63	notification={notification}
64	/>
65	)}
66	{notificationsLoading && <Loading className={classes.loading} />}	×
67	</div>
68	</div>
69	);
70	}
71
72	const NotificationsPopoverComponent = registerComponent(	1✔
73	"NotificationsPopover",
74	NotificationsPopover,
75	{styles},
76	);
77
78	declare global {
79	interface ComponentTypes {
80	NotificationsPopover: typeof NotificationsPopoverComponent
81	}
82	}

ForumMagnum / ForumMagnum / 10147657528

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous