8791129981

Committed 22 Apr 2024 09:25PM UTC coverage: 32.038% (+0.02%) from 32.017%

Build # 8791129981

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9152 from ForumMagnum/master

LW Deploy, 2024-04-22

Run Details

4685 of 38033 branches covered (12.32%)

Branch coverage included in aggregate %.

64 of 247 new or added lines in 25 files covered. (25.91%)

3 existing lines in 3 files now uncovered.

27176 of 61413 relevant lines covered (44.25%)

182.06 hits per line

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

23.08

/packages/lesswrong/components/messaging/FriendlyConversationItem.tsx

import React from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { truncate } from "../../lib/editor/ellipsize";
import { useClickableCell } from "../common/useClickableCell";
import classNames from "classnames";
import { conversationGetFriendlyTitle } from "../../lib/collections/conversations/helpers";

const styles = (theme: ThemeType) => ({
  root: {
    backgroundColor: theme.palette.background.pageActiveAreaBackground,
    display: "flex",
    alignItems: "center",
    fontFamily: theme.palette.fonts.sansSerifStack,
    padding: "12px 12px 12px 16px",
    borderBottom: theme.palette.border.grey200,
    cursor: "pointer",
    "&:hover": {
      background: theme.palette.grey[50],
    },
  },
  rootSelected: {
    // Important to take precendence over unread styles
    background: `${theme.palette.grey[100]} !important`,
  },
  profileImage: {
    marginRight: 12,
  },
  content: {
    width: "100%",
    minWidth: 0,
  },
  titleRow: {
    display: "flex",
    justifyContent: "space-between",
  },
  title: {
    overflow: "hidden",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    color: theme.palette.grey[1000],
    fontSize: "1.1rem",
    fontWeight: 600,
    lineHeight: '21px'
  },
  titleUnread: {
    fontWeight: 700,
  },
  date: {
    display: "flex",
    alignItems: "center",
    gap: "6px",
    color: theme.palette.grey[600],
    fontSize: "13px",
    fontWeight: 500,
    lineHeight: '21px',
    marginLeft: 4,
    marginRight: 4,
  },
  preview: {
    overflow: "hidden",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    color: theme.palette.grey[600],
    fontSize: "13px",
    fontWeight: 500,
    marginTop: 2,
  },
  previewUnread: {
    color: theme.palette.grey[1000],
    fontWeight: 600,
  },
  unread: {
    width: 8,
    height: 8,
    background: theme.palette.primary.main,
    borderRadius: "50%",
  },
});

const FriendlyConversationItem = ({
  conversation,
  currentUser,
  classes,
  selectedConversationId,
  setSelectedConversationId,
}: {
  conversation: ConversationsListWithReadStatus;
  currentUser: UsersCurrent;
  classes: ClassesType<typeof styles>;
  selectedConversationId: string | undefined;
  setSelectedConversationId: React.Dispatch<React.SetStateAction<string | undefined>>;
}) => {
  const { UsersProfileImage, FormatDate } = Components;
  const isSelected = selectedConversationId === conversation._id;

  const { onClick } = useClickableCell({ onClick: () => setSelectedConversationId(conversation._id) });

  if (!conversation) return null;

  const otherParticipants = conversation.participants.filter((u)=> u._id !== currentUser._id)
  // Handle case of conversation with yourself
  const firstParticipant = otherParticipants[0] ?? conversation.participants[0];
  const title = conversationGetFriendlyTitle(conversation, currentUser)

  const latestMessagePlaintext = conversation.latestMessage?.contents?.plaintextMainText ?? ""
  // This will be truncated further by webkit-line-clamp. This truncation is just to avoid padding
  // the html with too much junk
  const previewText = truncate(latestMessagePlaintext, 400)
  const {hasUnreadMessages = false} = conversation;

  return (
    <div onClick={onClick} className={classNames(
      classes.root,
      isSelected && classes.rootSelected,
    )}>
      <UsersProfileImage
        user={firstParticipant}
        size={40}
        className={classes.profileImage}
      />
      <div className={classes.content}>
        <div className={classes.titleRow}>
          <div className={classNames(
            classes.title,
            hasUnreadMessages && classes.titleUnread,
          )}>
            {title}
          </div>
          <div className={classes.date}>
            {hasUnreadMessages && <div className={classes.unread} />}
            <FormatDate date={conversation.latestActivity} />
          </div>
        </div>
        <div className={classNames(
          classes.preview,
          hasUnreadMessages && classes.previewUnread,
        )}>
          {previewText}
        </div>
      </div>
    </div>
  );
};

const FriendlyConversationItemComponent = registerComponent("FriendlyConversationItem", FriendlyConversationItem, { styles });

declare global {
  interface ComponentTypes {
    FriendlyConversationItem: typeof FriendlyConversationItemComponent;
  }
}

1	import React from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { truncate } from "../../lib/editor/ellipsize";	1✔
4	import { useClickableCell } from "../common/useClickableCell";	1✔
5	import classNames from "classnames";	1✔
6	import { conversationGetFriendlyTitle } from "../../lib/collections/conversations/helpers";	1✔
7
8	const styles = (theme: ThemeType) => ({	1✔
9	root: {
10	backgroundColor: theme.palette.background.pageActiveAreaBackground,
11	display: "flex",
12	alignItems: "center",
13	fontFamily: theme.palette.fonts.sansSerifStack,
14	padding: "12px 12px 12px 16px",
15	borderBottom: theme.palette.border.grey200,
16	cursor: "pointer",
17	"&:hover": {
18	background: theme.palette.grey[50],
19	},
20	},
21	rootSelected: {
22	// Important to take precendence over unread styles
23	background: `${theme.palette.grey[100]} !important`,
24	},
25	profileImage: {
26	marginRight: 12,
27	},
28	content: {
29	width: "100%",
30	minWidth: 0,
31	},
32	titleRow: {
33	display: "flex",
34	justifyContent: "space-between",
35	},
36	title: {
37	overflow: "hidden",
38	whiteSpace: "nowrap",
39	textOverflow: "ellipsis",
40	color: theme.palette.grey[1000],
41	fontSize: "1.1rem",
42	fontWeight: 600,
43	lineHeight: '21px'
44	},
45	titleUnread: {
46	fontWeight: 700,
47	},
48	date: {
49	display: "flex",
50	alignItems: "center",
51	gap: "6px",
52	color: theme.palette.grey[600],
53	fontSize: "13px",
54	fontWeight: 500,
55	lineHeight: '21px',
56	marginLeft: 4,
57	marginRight: 4,
58	},
59	preview: {
60	overflow: "hidden",
61	whiteSpace: "nowrap",
62	textOverflow: "ellipsis",
63	color: theme.palette.grey[600],
64	fontSize: "13px",
65	fontWeight: 500,
66	marginTop: 2,
67	},
68	previewUnread: {
69	color: theme.palette.grey[1000],
70	fontWeight: 600,
71	},
72	unread: {
73	width: 8,
74	height: 8,
75	background: theme.palette.primary.main,
76	borderRadius: "50%",
77	},
78	});
79
80	const FriendlyConversationItem = ({	1✔
81	conversation,
82	currentUser,
83	classes,
84	selectedConversationId,
85	setSelectedConversationId,
86	}: {
87	conversation: ConversationsListWithReadStatus;
88	currentUser: UsersCurrent;
89	classes: ClassesType<typeof styles>;
90	selectedConversationId: string \| undefined;
91	setSelectedConversationId: React.Dispatch<React.SetStateAction<string \| undefined>>;
92	}) => {
93	const { UsersProfileImage, FormatDate } = Components;	×
94	const isSelected = selectedConversationId === conversation._id;	×
95
96	const { onClick } = useClickableCell({ onClick: () => setSelectedConversationId(conversation._id) });	×
97
98	if (!conversation) return null;	×
99
100	const otherParticipants = conversation.participants.filter((u)=> u._id !== currentUser._id)	×
101	// Handle case of conversation with yourself
102	const firstParticipant = otherParticipants[0] ?? conversation.participants[0];	×
103	const title = conversationGetFriendlyTitle(conversation, currentUser)	×
104
105	const latestMessagePlaintext = conversation.latestMessage?.contents?.plaintextMainText ?? ""	×
106	// This will be truncated further by webkit-line-clamp. This truncation is just to avoid padding
107	// the html with too much junk
108	const previewText = truncate(latestMessagePlaintext, 400)	×
NEW 109	const {hasUnreadMessages = false} = conversation;	×
110
111	return (	×
112	<div onClick={onClick} className={classNames(
113	classes.root,
114	isSelected && classes.rootSelected,	×
115	)}>
116	<UsersProfileImage
117	user={firstParticipant}
118	size={40}
119	className={classes.profileImage}
120	/>
121	<div className={classes.content}>
122	<div className={classes.titleRow}>
123	<div className={classNames(
124	classes.title,
125	hasUnreadMessages && classes.titleUnread,	×
126	)}>
127	{title}
128	</div>
129	<div className={classes.date}>
130	{hasUnreadMessages && <div className={classes.unread} />}	×
131	<FormatDate date={conversation.latestActivity} />
132	</div>
133	</div>
134	<div className={classNames(
135	classes.preview,
136	hasUnreadMessages && classes.previewUnread,	×
137	)}>
138	{previewText}
139	</div>
140	</div>
141	</div>
142	);
143	};
144
145	const FriendlyConversationItemComponent = registerComponent("FriendlyConversationItem", FriendlyConversationItem, { styles });	1✔
146
147	declare global {
148	interface ComponentTypes {
149	FriendlyConversationItem: typeof FriendlyConversationItemComponent;
150	}
151	}

ForumMagnum / ForumMagnum / 8791129981

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