10252128609

Committed 05 Aug 2024 04:00PM UTC coverage: 32.041% (-0.07%) from 32.113%

Build # 10252128609

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9568 from ForumMagnum/master

[EA] deploy notifications redesign and new tag info box

Run Details

4936 of 40158 branches covered (12.29%)

Branch coverage included in aggregate %.

72 of 162 new or added lines in 17 files covered. (44.44%)

4 existing lines in 3 files now uncovered.

28772 of 65044 relevant lines covered (44.23%)

180.44 hits per line

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

18.46

/packages/lesswrong/components/notifications/NotificationsPopoverNotification.tsx

import React, { MouseEvent, useCallback, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { getDisplayConfig } from "./NotificationsPage/NotificationsPageNotification";
import { useClickableCell } from "../common/useClickableCell";
import { useTracking } from "@/lib/analyticsEvents";
import { useCurrentUser } from "../common/withUser";
import type { NotificationDisplay } from "@/lib/notificationTypes";
import classNames from "classnames";
import moment from "moment";

const styles = (theme: ThemeType) => ({
  root: {
    cursor: "pointer",
    padding: 8,
    paddingLeft: 0,
    borderRadius: theme.borderRadius.default,
    "&:hover": {
      background: theme.palette.grey[140],
    },
  },
  icon: {
    marginTop: 4,
  },
  container: {
    flexGrow: 1,
    display: "flex",
    gap: "4px",
    width: "100%",
  },
  info: {
    flexGrow: 1,
    display: "flex",
    flexDirection: "column",
  },
  meta: {
    display: "flex",
    flexGrow: 1,
  },
  type: {
    color: theme.palette.grey[600],
    fontSize: 12,
    fontWeight: 500,
  },
  message: {
    fontSize: 13,
    fontWeight: 600,
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    "-webkit-line-clamp": 2,
  },
  messageRead: {
    color: theme.palette.grey[600],
  },
  messageUnread: {
    color: theme.palette.grey[1000],
  },
  unreadFlag: {
    marginTop: 5,
    width: 10,
    height: 10,
    minWidth: 10,
    minHeight: 10,
    borderRadius: "50%",
    background: theme.palette.primary.main,
  },
  date: {
    color: theme.palette.grey[600],
    fontSize: 13,
    fontWeight: 500,
  },
});

const formatNotificationType = (type: string): string => {
  switch (type) {
    case "newRSVP":
      return "New RSVP";
    case "newShortform":
      return "New Quick take";
    case "coauthorRequestNotification":
      return "Co-author requested";
    case "coauthorAcceptNotification":
      return "Co-author accepted";
    default:
      const words = type.replace(/([A-Z])/g, " $1");
      return words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();
  }
}

const NotificationsPopoverNotification = ({notification, onClick, classes}: {
  notification: NotificationDisplay,
  onClick?: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const {captureEvent} = useTracking();
  const {onClick: redirect} = useClickableCell({href: notification.link ?? "#"});
  const [isRead, setIsRead] = useState(
    (currentUser?.lastNotificationsCheck ?? new Date()) > notification.createdAt,
  );

  const onSelect = useCallback((ev: MouseEvent<HTMLDivElement>) => {
    onClick?.();
    setIsRead(true);
    captureEvent("notificationClick", {
      notification: {
        _id: notification._id,
        link: notification.link,
      },
    });
    redirect(ev);
  }, [redirect, onClick, captureEvent, notification]);

  if (!currentUser) {
    return null;
  }

  const {Icon, iconVariant} = getDisplayConfig(notification);
  const {post, comment, type, message, createdAt} = notification;
  const {PostsTooltip, NotificationsPageItem} = Components;
  return (
    <PostsTooltip
      postId={post?._id ?? comment?.post?._id}
      commentId={comment?._id}
      placement="left-start"
      clickable
    >
      <div onClick={onSelect} className={classes.root}>
        <NotificationsPageItem
          Icon={Icon}
          iconVariant={iconVariant}
          iconClassName={classes.icon}
          metaClassName={classes.meta}
          noMargin
        >
          <div className={classes.container}>
            <div className={classes.info}>
              <div className={classes.type}>
                {formatNotificationType(type)}
              </div>
              <div className={classNames(
                classes.message,
                isRead && classes.messageRead,
                !isRead && classes.messageUnread,
              )}>
                {message}
              </div>
            </div>
            {!isRead && <div className={classes.unreadFlag} />}
            <div className={classes.date}>
              {moment(createdAt).fromNow()}
            </div>
          </div>
        </NotificationsPageItem>
      </div>
    </PostsTooltip>
  );
}

const NotificationsPopoverNotificationComponent = registerComponent(
  "NotificationsPopoverNotification",
  NotificationsPopoverNotification,
  {styles},
);

declare global {
  interface ComponentTypes {
    NotificationsPopoverNotification: typeof NotificationsPopoverNotificationComponent
  }
}

1	import React, { MouseEvent, useCallback, useState } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { getDisplayConfig } from "./NotificationsPage/NotificationsPageNotification";	1✔
4	import { useClickableCell } from "../common/useClickableCell";	1✔
5	import { useTracking } from "@/lib/analyticsEvents";	1✔
6	import { useCurrentUser } from "../common/withUser";	1✔
7	import type { NotificationDisplay } from "@/lib/notificationTypes";
8	import classNames from "classnames";	1✔
9	import moment from "moment";	1✔
10
11	const styles = (theme: ThemeType) => ({	1✔
12	root: {
13	cursor: "pointer",
14	padding: 8,
15	paddingLeft: 0,
16	borderRadius: theme.borderRadius.default,
17	"&:hover": {
18	background: theme.palette.grey[140],
19	},
20	},
21	icon: {
22	marginTop: 4,
23	},
24	container: {
25	flexGrow: 1,
26	display: "flex",
27	gap: "4px",
28	width: "100%",
29	},
30	info: {
31	flexGrow: 1,
32	display: "flex",
33	flexDirection: "column",
34	},
35	meta: {
36	display: "flex",
37	flexGrow: 1,
38	},
39	type: {
40	color: theme.palette.grey[600],
41	fontSize: 12,
42	fontWeight: 500,
43	},
44	message: {
45	fontSize: 13,
46	fontWeight: 600,
47	overflow: "hidden",
48	textOverflow: "ellipsis",
49	display: "-webkit-box",
50	"-webkit-box-orient": "vertical",
51	"-webkit-line-clamp": 2,
52	},
53	messageRead: {
54	color: theme.palette.grey[600],
55	},
56	messageUnread: {
57	color: theme.palette.grey[1000],
58	},
59	unreadFlag: {
60	marginTop: 5,
61	width: 10,
62	height: 10,
63	minWidth: 10,
64	minHeight: 10,
65	borderRadius: "50%",
66	background: theme.palette.primary.main,
67	},
68	date: {
69	color: theme.palette.grey[600],
70	fontSize: 13,
71	fontWeight: 500,
72	},
73	});
74
75	const formatNotificationType = (type: string): string => {	1✔
NEW 76	switch (type) {	×
77	case "newRSVP":
NEW 78	return "New RSVP";	×
79	case "newShortform":
NEW 80	return "New Quick take";	×
81	case "coauthorRequestNotification":
NEW 82	return "Co-author requested";	×
83	case "coauthorAcceptNotification":
NEW 84	return "Co-author accepted";	×
85	default:
NEW 86	const words = type.replace(/([A-Z])/g, " $1");	×
NEW 87	return words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();	×
88	}
89	}
90
91	const NotificationsPopoverNotification = ({notification, onClick, classes}: {	1✔
92	notification: NotificationDisplay,
93	onClick?: () => void,
94	classes: ClassesType<typeof styles>,
95	}) => {
NEW 96	const currentUser = useCurrentUser();	×
NEW 97	const {captureEvent} = useTracking();	×
NEW 98	const {onClick: redirect} = useClickableCell({href: notification.link ?? "#"});	×
NEW 99	const [isRead, setIsRead] = useState(	×
100	(currentUser?.lastNotificationsCheck ?? new Date()) > notification.createdAt,	×
101	);
102
NEW 103	const onSelect = useCallback((ev: MouseEvent<HTMLDivElement>) => {	×
NEW 104	onClick?.();	×
NEW 105	setIsRead(true);	×
NEW 106	captureEvent("notificationClick", {	×
107	notification: {
108	_id: notification._id,
109	link: notification.link,
110	},
111	});
NEW 112	redirect(ev);	×
113	}, [redirect, onClick, captureEvent, notification]);
114
NEW 115	if (!currentUser) {	×
NEW 116	return null;	×
117	}
118
NEW 119	const {Icon, iconVariant} = getDisplayConfig(notification);	×
NEW 120	const {post, comment, type, message, createdAt} = notification;	×
NEW 121	const {PostsTooltip, NotificationsPageItem} = Components;	×
NEW 122	return (	×
123	<PostsTooltip
124	postId={post?._id ?? comment?.post?._id}	×
125	commentId={comment?._id}	×
126	placement="left-start"
127	clickable
128	>
129	<div onClick={onSelect} className={classes.root}>
130	<NotificationsPageItem
131	Icon={Icon}
132	iconVariant={iconVariant}
133	iconClassName={classes.icon}
134	metaClassName={classes.meta}
135	noMargin
136	>
137	<div className={classes.container}>
138	<div className={classes.info}>
139	<div className={classes.type}>
140	{formatNotificationType(type)}
141	</div>
142	<div className={classNames(
143	classes.message,
144	isRead && classes.messageRead,	×
145	!isRead && classes.messageUnread,	×
146	)}>
147	{message}
148	</div>
149	</div>
150	{!isRead && <div className={classes.unreadFlag} />}	×
151	<div className={classes.date}>
152	{moment(createdAt).fromNow()}
153	</div>
154	</div>
155	</NotificationsPageItem>
156	</div>
157	</PostsTooltip>
158	);
159	}
160
161	const NotificationsPopoverNotificationComponent = registerComponent(	1✔
162	"NotificationsPopoverNotification",
163	NotificationsPopoverNotification,
164	{styles},
165	);
166
167	declare global {
168	interface ComponentTypes {
169	NotificationsPopoverNotification: typeof NotificationsPopoverNotificationComponent
170	}
171	}

ForumMagnum / ForumMagnum / 10252128609

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