8881423236

Committed 29 Apr 2024 03:40PM UTC coverage: 32.031% (+0.08%) from 31.952%

Build # 8881423236

Build Type

Pull #9197

github

Committed by

Will-Howard

Commit Message

comment

Pull Request Pull Request #9197: [Draft] Gracefully handle dates and times when using an old SSR

Run Details

4744 of 38491 branches covered (12.32%)

Branch coverage included in aggregate %.

55 of 94 new or added lines in 24 files covered. (58.51%)

21 existing lines in 6 files now uncovered.

27530 of 62267 relevant lines covered (44.21%)

179.59 hits per line

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

18.06

/packages/lesswrong/components/comments/CommentsTableOfContents.tsx

import React from 'react';
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { CommentTreeNode } from '../../lib/utils/unflatten';
import { getCurrentSectionMark, getLandmarkY, ScrollHighlightLandmark, useScrollHighlight } from '../hooks/useScrollHighlight';
import { useLocation } from '../../lib/routeUtil';
import isEmpty from 'lodash/isEmpty';
import qs from 'qs'
import { commentsTableOfContentsEnabled } from '../../lib/betas';
import { useNavigate } from '../../lib/reactRouterWrapper';
import classNames from 'classnames';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    color: theme.palette.text.dim,
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
  },
  comment: {
    display: "inline-flex",
  },
  commentKarma: {
    width: 20,
    textAlign: "right",
    marginRight: 4,
  },
  commentAuthor: {
  },
  collapseButtonWrapper: {
    marginLeft: 4,
    height: 24,
  },
  collapseButton: {
    "&:hover": {
      background: theme.palette.greyAlpha(0.1),
      borderRadius: 8,
    },
  },
  collapseButtonExpanded: {
  },
  collapseButtonCollapsed: {
    transform: "rotate(-90deg)",
  },
  postTitle: {
    minHeight: 24,
    paddingTop: 16,
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
    marginBottom: 8,
    display: 'block'
  },
  tocPostedAt: {
    color: theme.palette.link.tocLink
  },
  highlightUnread: {
    paddingLeft: 4,
    marginLeft: -7,
    borderLeft: `solid 3px ${theme.palette.secondary.main}`
  },
})

const CommentsTableOfContents = ({commentTree, answersTree, post, highlightDate, classes}: {
  commentTree?: CommentTreeNode<CommentsList>[],
  answersTree?: CommentTreeNode<CommentsList>[],
  post: PostsWithNavigation | PostsWithNavigationAndRevision,
  highlightDate: Date|undefined,
  classes: ClassesType,
}) => {
  const { TableOfContentsRow, FormatDate } = Components;
  const flattenedComments = flattenCommentTree([
    ...(answersTree ?? []),
    ...(commentTree ?? [])
  ]);
  const { landmarkName: highlightedLandmarkName } = useScrollHighlight(
    flattenedComments.map(comment => commentIdToLandmark(comment._id))
  );

  if (flattenedComments.length === 0) return null;
  
  if (!commentsTableOfContentsEnabled) {
    return null;
  }
  
  return <div className={classes.root}>
    <TableOfContentsRow key="postTitle"
      href="#"
      onClick={ev => {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }}
      highlighted={highlightedLandmarkName==="above"}
      title
      fullHeight
      commentToC
    >
      <span className={classes.postTitle}>
        {post.title?.trim()}
      </span>
      {post.postedAt && <div className={classes.tocPostedAt}>
        <FormatDate date={post.postedAt} format={"Do MMM YYYY"} />
      </div>}
    </TableOfContentsRow>

    {answersTree && answersTree.map(answer => <>
      <ToCCommentBlock
        key={answer.item._id}
        commentTree={answer} indentLevel={1} classes={classes}
        highlightedCommentId={highlightedLandmarkName}
        highlightDate={highlightDate}
      />
      <Components.TableOfContentsDivider/>
    </>)}
    {commentTree && commentTree.map(comment => <ToCCommentBlock
      key={comment.item._id}
      commentTree={comment}
      indentLevel={1}
      highlightDate={highlightDate}
      highlightedCommentId={highlightedLandmarkName}
      classes={classes}
    />)}
  </div>
}

export function commentIdToLandmark(commentId: string): ScrollHighlightLandmark {
  return {
    landmarkName: commentId,
    elementId: commentId,
    position: "topOfElement",
    offset: 25, //approximate distance from top-border of a comment to the center of the metadata line
  }
}

const ToCCommentBlock = ({commentTree, indentLevel, highlightedCommentId, highlightDate, classes}: {
  commentTree: CommentTreeNode<CommentsList>,
  indentLevel: number,
  highlightedCommentId: string|null,
  highlightDate: Date|undefined,
  classes: ClassesType,
}) => {
  const { UsersNameDisplay, TableOfContentsRow } = Components;
  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;
  const comment = commentTree.item;
  
  return <div>
    <TableOfContentsRow
      indentLevel={indentLevel}
      highlighted={highlightedCommentId===comment._id}
      dense
      href={"#"+comment._id}
      onClick={ev => {
        const commentTop = getLandmarkY(commentIdToLandmark(comment._id));
        if (commentTop) {
          // Add window.scrollY because window.scrollTo takes a relative scroll distance
          // rather than an absolute scroll position, and a +1 because of rounding issues
          // that otherwise cause us to wind up just above the comment such that the ToC
          // highlights the wrong one.
          const y = commentTop + window.scrollY - getCurrentSectionMark() + 1;
          window.scrollTo({ top: y });
        }

        delete query.commentId;
        navigate({
          search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,
          hash: `#${comment._id}`,
        });
        ev.stopPropagation();
        ev.preventDefault();
      }}
    >
      <span className={classNames(classes.comment, {
        [classes.highlightUnread]: highlightDate && new Date(comment.postedAt) > new Date(highlightDate),
      })}>
        <span className={classes.commentKarma}>{comment.baseScore}</span>
        <span className={classes.commentAuthor}>
          <UsersNameDisplay user={comment.user} simple/>
        </span>
      </span>
    </TableOfContentsRow>
    
    {commentTree.children.map(child =>
      <ToCCommentBlock
        key={child.item._id}
        highlightedCommentId={highlightedCommentId}
        highlightDate={highlightDate}
        commentTree={child}
        indentLevel={indentLevel+1}
        classes={classes}
      />
    )}
  </div>
}

function flattenCommentTree(commentTree: CommentTreeNode<CommentsList>[]): CommentsList[] {
  let result: CommentsList[] = [];
  
  function visitComment(c: CommentTreeNode<CommentsList>) {
    if (c.item) {
      result.push(c.item);
    }
    for (const child of c.children) {
      visitComment(child);
    }
  }
  
  for (let comment of commentTree)
    visitComment(comment);
  
  return result;
}


const CommentsTableOfContentsComponent = registerComponent('CommentsTableOfContents', CommentsTableOfContents, { styles });

declare global {
  interface ComponentTypes {
    CommentsTableOfContents: typeof CommentsTableOfContentsComponent
  }
}

1	import React from 'react';	3✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { CommentTreeNode } from '../../lib/utils/unflatten';
4	import { getCurrentSectionMark, getLandmarkY, ScrollHighlightLandmark, useScrollHighlight } from '../hooks/useScrollHighlight';	1✔
5	import { useLocation } from '../../lib/routeUtil';	1✔
6	import isEmpty from 'lodash/isEmpty';	1✔
7	import qs from 'qs'	1✔
8	import { commentsTableOfContentsEnabled } from '../../lib/betas';	1✔
9	import { useNavigate } from '../../lib/reactRouterWrapper';	1✔
10	import classNames from 'classnames';	1✔
11
12	const styles = (theme: ThemeType): JssStyles => ({	1✔
13	root: {
14	color: theme.palette.text.dim,
15	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
16	'& .TableOfContentsRow-title': {
17	borderBottom: "none",
18	},
19	},
20	comment: {
21	display: "inline-flex",
22	},
23	commentKarma: {
24	width: 20,
25	textAlign: "right",
26	marginRight: 4,
27	},
28	commentAuthor: {
29	},
30	collapseButtonWrapper: {
31	marginLeft: 4,
32	height: 24,
33	},
34	collapseButton: {
35	"&:hover": {
36	background: theme.palette.greyAlpha(0.1),
37	borderRadius: 8,
38	},
39	},
40	collapseButtonExpanded: {
41	},
42	collapseButtonCollapsed: {
43	transform: "rotate(-90deg)",
44	},
45	postTitle: {
46	minHeight: 24,
47	paddingTop: 16,
48	...theme.typography.postStyle,
49	...theme.typography.smallCaps,
50	fontSize: "1.3rem",
51	marginBottom: 8,
52	display: 'block'
53	},
54	tocPostedAt: {
55	color: theme.palette.link.tocLink
56	},
57	highlightUnread: {
58	paddingLeft: 4,
59	marginLeft: -7,
60	borderLeft: `solid 3px ${theme.palette.secondary.main}`
61	},
62	})
63
64	const CommentsTableOfContents = ({commentTree, answersTree, post, highlightDate, classes}: {	1✔
65	commentTree?: CommentTreeNode<CommentsList>[],
66	answersTree?: CommentTreeNode<CommentsList>[],
67	post: PostsWithNavigation \| PostsWithNavigationAndRevision,
68	highlightDate: Date\|undefined,
69	classes: ClassesType,
70	}) => {
NEW 71	const { TableOfContentsRow, FormatDate } = Components;	×
72	const flattenedComments = flattenCommentTree([	×
73	...(answersTree ?? []),	×
74	...(commentTree ?? [])	×
75	]);
76	const { landmarkName: highlightedLandmarkName } = useScrollHighlight(	×
77	flattenedComments.map(comment => commentIdToLandmark(comment._id))	×
78	);
79
80	if (flattenedComments.length === 0) return null;	×
81
82	if (!commentsTableOfContentsEnabled) {	×
83	return null;	×
84	}
85
86	return <div className={classes.root}>	×
87	<TableOfContentsRow key="postTitle"
88	href="#"
89	onClick={ev => {
90	window.scrollTo({	×
91	top: 0,
92	behavior: "smooth"
93	});
94	}}
95	highlighted={highlightedLandmarkName==="above"}
96	title
97	fullHeight
98	commentToC
99	>
100	<span className={classes.postTitle}>
101	{post.title?.trim()}	×
102	</span>
103	{post.postedAt && <div className={classes.tocPostedAt}>	×
104	<FormatDate date={post.postedAt} format={"Do MMM YYYY"} />
105	</div>}
106	</TableOfContentsRow>
107
108	{answersTree && answersTree.map(answer => <>	×
109	<ToCCommentBlock
110	key={answer.item._id}
111	commentTree={answer} indentLevel={1} classes={classes}
112	highlightedCommentId={highlightedLandmarkName}
113	highlightDate={highlightDate}
114	/>
115	<Components.TableOfContentsDivider/>
116	</>)}
117	{commentTree && commentTree.map(comment => <ToCCommentBlock	×
118	key={comment.item._id}
119	commentTree={comment}
120	indentLevel={1}
121	highlightDate={highlightDate}
122	highlightedCommentId={highlightedLandmarkName}
123	classes={classes}
124	/>)}
125	</div>
126	}
127
128	export function commentIdToLandmark(commentId: string): ScrollHighlightLandmark {
129	return {	×
130	landmarkName: commentId,
131	elementId: commentId,
132	position: "topOfElement",
133	offset: 25, //approximate distance from top-border of a comment to the center of the metadata line
134	}
135	}
136
137	const ToCCommentBlock = ({commentTree, indentLevel, highlightedCommentId, highlightDate, classes}: {	1✔
138	commentTree: CommentTreeNode<CommentsList>,
139	indentLevel: number,
140	highlightedCommentId: string\|null,
141	highlightDate: Date\|undefined,
142	classes: ClassesType,
143	}) => {
144	const { UsersNameDisplay, TableOfContentsRow } = Components;	×
145	const navigate = useNavigate();	×
146	const location = useLocation();	×
147	const { query } = location;	×
148	const comment = commentTree.item;	×
149
150	return <div>	×
151	<TableOfContentsRow
152	indentLevel={indentLevel}
153	highlighted={highlightedCommentId===comment._id}
154	dense
155	href={"#"+comment._id}
156	onClick={ev => {
157	const commentTop = getLandmarkY(commentIdToLandmark(comment._id));	×
158	if (commentTop) {	×
159	// Add window.scrollY because window.scrollTo takes a relative scroll distance
160	// rather than an absolute scroll position, and a +1 because of rounding issues
161	// that otherwise cause us to wind up just above the comment such that the ToC
162	// highlights the wrong one.
163	const y = commentTop + window.scrollY - getCurrentSectionMark() + 1;	×
164	window.scrollTo({ top: y });	×
165	}
166
167	delete query.commentId;	×
168	navigate({	×
169	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
170	hash: `#${comment._id}`,
171	});
172	ev.stopPropagation();	×
173	ev.preventDefault();	×
174	}}
175	>
176	<span className={classNames(classes.comment, {
177	[classes.highlightUnread]: highlightDate && new Date(comment.postedAt) > new Date(highlightDate),	×
178	})}>
179	<span className={classes.commentKarma}>{comment.baseScore}</span>
180	<span className={classes.commentAuthor}>
181	<UsersNameDisplay user={comment.user} simple/>
182	</span>
183	</span>
184	</TableOfContentsRow>
185
186	{commentTree.children.map(child =>
187	<ToCCommentBlock	×
188	key={child.item._id}
189	highlightedCommentId={highlightedCommentId}
190	highlightDate={highlightDate}
191	commentTree={child}
192	indentLevel={indentLevel+1}
193	classes={classes}
194	/>
195	)}
196	</div>
197	}
198
199	function flattenCommentTree(commentTree: CommentTreeNode<CommentsList>[]): CommentsList[] {
200	let result: CommentsList[] = [];	×
201
202	function visitComment(c: CommentTreeNode<CommentsList>) {
203	if (c.item) {	×
204	result.push(c.item);	×
205	}
206	for (const child of c.children) {	×
207	visitComment(child);	×
208	}
209	}
210
211	for (let comment of commentTree)	×
212	visitComment(comment);	×
213
214	return result;	×
215	}
216
217
218	const CommentsTableOfContentsComponent = registerComponent('CommentsTableOfContents', CommentsTableOfContents, { styles });	1✔
219
220	declare global {
221	interface ComponentTypes {
222	CommentsTableOfContents: typeof CommentsTableOfContentsComponent
223	}
224	}

ForumMagnum / ForumMagnum / 8881423236

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