9551325250

Committed 17 Jun 2024 04:30PM UTC coverage: 31.899% (+0.05%) from 31.851%

Build # 9551325250

Build Type

Pull #8676

github

Committed by

jpaddison3

Commit Message

Merge branch 'master' into comment-sort-reload

Pull Request Pull Request #8676: Maintain scroll position when changing comment sort order

Run Details

4816 of 39348 branches covered (12.24%)

Branch coverage included in aggregate %.

4 of 17 new or added lines in 3 files covered. (23.53%)

1 existing line in 1 file now uncovered.

27992 of 63502 relevant lines covered (44.08%)

180.28 hits per line

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

22.22

/packages/lesswrong/components/comments/CommentsViews.tsx

import { Components, registerComponent } from '../../lib/vulcan-lib';
import React from 'react';
import { useLocation } from '../../lib/routeUtil';
import { userCanDo } from '../../lib/vulcan-users/permissions';
import { commentGetDefaultView } from '../../lib/collections/comments/helpers'
import { useCurrentUser } from '../common/withUser';
import qs from 'qs'
import { isEmpty } from 'underscore';
import type { Option } from '../common/InlineSelect';
import { getCommentViewOptions } from '../../lib/commentViewOptions';
import { useNavigate } from '../../lib/reactRouterWrapper';

const CommentsViews = ({post, setRestoreScrollPos}: {post?: PostsDetails, setRestoreScrollPos?: (pos: number) => void}) => {
  const currentUser = useCurrentUser();
  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;

  const {InlineSelect} = Components

  // permalinkedCommentHeight() finds the height of the comment at the top of comment permalink pages
  // on the EA Forum and LessWrong. This is used when the user changes the comment sort order, which
  // changes the page from a comment permalink page to a regular post page, and we want to preserve
  // the user's (apparent) scroll position. With that top comment removed, we need to scroll up by its
  // height.
  // (If there is no permalinked comment at the top, whether because we're in a regular post page or
  // because we're on Waking Up, which doesn't put permalinked comments at the top, this function
  // returns zero.)
  const permalinkedCommentHeight = () => {
    const commentHeight = document.querySelector('.CommentPermalink-root')?.scrollHeight || 0;
    const dividerEl = document.querySelector('.CommentPermalink-dividerMargins');
    const dividerMarginBottom = dividerEl ? parseInt(getComputedStyle(dividerEl).marginBottom) : 0;
    return commentHeight + dividerMarginBottom;
  }

  const handleViewClick = (opt: Option & {value: CommentsViewName}) => {
    const view = opt.value
    const { query } = location;
    const currentQuery = isEmpty(query) ? {view: 'postCommentsTop'} : query
    const newQuery = {...currentQuery, view: view, postId: post ? post._id : undefined, commentId: undefined}
    setRestoreScrollPos?.(window.scrollY - permalinkedCommentHeight());
    navigate({...location.location, search: `?${qs.stringify(newQuery)}`})
  };

  const currentView: string = query?.view || commentGetDefaultView(post||null, currentUser)
  const includeAdminViews = userCanDo(currentUser, "comments.softRemove.all");
  const viewOptions = getCommentViewOptions({includeAdminViews});
  const selectedOption = viewOptions.find((option) => option.value === currentView) || viewOptions[0]

  return <InlineSelect options={viewOptions} selected={selectedOption} handleSelect={handleViewClick}/>

};

const CommentsViewsComponent = registerComponent('CommentsViews', CommentsViews);

declare global {
  interface ComponentTypes {
    CommentsViews: typeof CommentsViewsComponent,
  }
}

1	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
2	import React from 'react';	1✔
3	import { useLocation } from '../../lib/routeUtil';	1✔
4	import { userCanDo } from '../../lib/vulcan-users/permissions';	1✔
5	import { commentGetDefaultView } from '../../lib/collections/comments/helpers'	1✔
6	import { useCurrentUser } from '../common/withUser';	1✔
7	import qs from 'qs'	1✔
8	import { isEmpty } from 'underscore';	1✔
9	import type { Option } from '../common/InlineSelect';
10	import { getCommentViewOptions } from '../../lib/commentViewOptions';	1✔
11	import { useNavigate } from '../../lib/reactRouterWrapper';	1✔
12
13	const CommentsViews = ({post, setRestoreScrollPos}: {post?: PostsDetails, setRestoreScrollPos?: (pos: number) => void}) => {	1✔
14	const currentUser = useCurrentUser();	×
15	const navigate = useNavigate();	×
16	const location = useLocation();	×
17	const { query } = location;	×
18
19	const {InlineSelect} = Components	×
20
21	// permalinkedCommentHeight() finds the height of the comment at the top of comment permalink pages
22	// on the EA Forum and LessWrong. This is used when the user changes the comment sort order, which
23	// changes the page from a comment permalink page to a regular post page, and we want to preserve
24	// the user's (apparent) scroll position. With that top comment removed, we need to scroll up by its
25	// height.
26	// (If there is no permalinked comment at the top, whether because we're in a regular post page or
27	// because we're on Waking Up, which doesn't put permalinked comments at the top, this function
28	// returns zero.)
NEW 29	const permalinkedCommentHeight = () => {	×
NEW 30	const commentHeight = document.querySelector('.CommentPermalink-root')?.scrollHeight \|\| 0;	×
NEW 31	const dividerEl = document.querySelector('.CommentPermalink-dividerMargins');	×
NEW 32	const dividerMarginBottom = dividerEl ? parseInt(getComputedStyle(dividerEl).marginBottom) : 0;	×
NEW 33	return commentHeight + dividerMarginBottom;	×
34	}
35
36	const handleViewClick = (opt: Option & {value: CommentsViewName}) => {	×
37	const view = opt.value	×
38	const { query } = location;	×
39	const currentQuery = isEmpty(query) ? {view: 'postCommentsTop'} : query	×
NEW 40	const newQuery = {...currentQuery, view: view, postId: post ? post._id : undefined, commentId: undefined}	×
NEW 41	setRestoreScrollPos?.(window.scrollY - permalinkedCommentHeight());	×
UNCOV 42	navigate({...location.location, search: `?${qs.stringify(newQuery)}`})	×
43	};
44
45	const currentView: string = query?.view \|\| commentGetDefaultView(post\|\|null, currentUser)	×
46	const includeAdminViews = userCanDo(currentUser, "comments.softRemove.all");	×
47	const viewOptions = getCommentViewOptions({includeAdminViews});	×
48	const selectedOption = viewOptions.find((option) => option.value === currentView) \|\| viewOptions[0]	×
49
50	return <InlineSelect options={viewOptions} selected={selectedOption} handleSelect={handleViewClick}/>	×
51
52	};
53
54	const CommentsViewsComponent = registerComponent('CommentsViews', CommentsViews);	1✔
55
56	declare global {
57	interface ComponentTypes {
58	CommentsViews: typeof CommentsViewsComponent,
59	}
60	}

ForumMagnum / ForumMagnum / 9551325250

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