10060637613

Committed 23 Jul 2024 02:15PM UTC coverage: 31.879% (-0.02%) from 31.897%

Build # 10060637613

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9522 from ForumMagnum/wh-comment-permalinks-2024-07

[EA] Make comment links default to in-context

Run Details

4932 of 40534 branches covered (12.17%)

Branch coverage included in aggregate %.

7 of 48 new or added lines in 6 files covered. (14.58%)

4 existing lines in 3 files now uncovered.

28851 of 65438 relevant lines covered (44.09%)

179.78 hits per line

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

20.0

/packages/lesswrong/components/comments/CommentsItem/useCommentLink.tsx

import React, { FC, MouseEvent, PropsWithChildren } from "react";
import { useTracking } from "../../../lib/analyticsEvents";
import { commentGetPageUrlFromIds } from "../../../lib/collections/comments/helpers";
import { useSubscribedLocation } from "../../../lib/routeUtil";
import { Link, useNavigate } from "../../../lib/reactRouterWrapper";
import qs from "qs";
import { commentPermalinkStyleSetting } from "@/lib/publicSettings";

export type UseCommentLinkProps = {
  comment: Pick<CommentsList, "_id" | "tagCommentType">,
  post?: Pick<PostsMinimumInfo, "_id" | "slug"> | null,
  tag?: TagBasicInfo,
  scrollOnClick?: boolean,
  scrollIntoView?: () => void,
  permalink?: boolean,
}

export const useCommentLink = ({
  comment,
  post,
  tag,
  scrollOnClick,
  scrollIntoView,
  permalink,
}: UseCommentLinkProps) => {
  const navigate = useNavigate();
  const {location, query} = useSubscribedLocation();
  const {captureEvent} = useTracking();

  const url = commentGetPageUrlFromIds({
    postId: post?._id,
    postSlug: post?.slug,
    tagSlug: tag?.slug,
    commentId: comment._id,
    tagCommentType: comment.tagCommentType,
    permalink,
  });

  const furtherContext = "dateIcon"; // For historical reasons

  const handleLinkClick = (event: MouseEvent) => {
    captureEvent("linkClicked", {
      buttonPressed: event.button,
      furtherContext,
    });

    // If the current location is not the same as the link's location (e.g. if a
    // comment on a post is showing on the frontpage), fall back to just following
    // the link
    if (location.pathname !== url.split("?")[0]) {
      return;
    }

    event.preventDefault();
    const navigateArgs = commentPermalinkStyleSetting.get() === 'top' ? {
      search: qs.stringify({...query, commentId: comment._id}),
      hash: null,
    } : {
      search: qs.stringify(query),
      hash: comment._id,
    }
    navigate({
      ...location,
      ...navigateArgs
    });

    if (scrollIntoView) {
      scrollIntoView();
    }
  }

  const Wrapper: FC<PropsWithChildren<{}>> = scrollOnClick
    ? ({children}) => (
      <a rel="nofollow" href={url} onClick={handleLinkClick}>
        {children}
      </a>
    )
    : ({children}) => (
      <Link rel="nofollow" to={url} eventProps={{furtherContext}}>
        {children}
      </Link>
    );

  return Wrapper;
}

1	import React, { FC, MouseEvent, PropsWithChildren } from "react";	3✔
2	import { useTracking } from "../../../lib/analyticsEvents";	1✔
3	import { commentGetPageUrlFromIds } from "../../../lib/collections/comments/helpers";	1✔
4	import { useSubscribedLocation } from "../../../lib/routeUtil";	1✔
5	import { Link, useNavigate } from "../../../lib/reactRouterWrapper";	1✔
6	import qs from "qs";	1✔
7	import { commentPermalinkStyleSetting } from "@/lib/publicSettings";	1✔
8
9	export type UseCommentLinkProps = {
10	comment: Pick<CommentsList, "_id" \| "tagCommentType">,
11	post?: Pick<PostsMinimumInfo, "_id" \| "slug"> \| null,
12	tag?: TagBasicInfo,
13	scrollOnClick?: boolean,
14	scrollIntoView?: () => void,
15	permalink?: boolean,
16	}
17
18	export const useCommentLink = ({	1✔
19	comment,
20	post,
21	tag,
22	scrollOnClick,
23	scrollIntoView,
24	permalink,
25	}: UseCommentLinkProps) => {
26	const navigate = useNavigate();	×
27	const {location, query} = useSubscribedLocation();	×
28	const {captureEvent} = useTracking();	×
29
30	const url = commentGetPageUrlFromIds({	×
31	postId: post?._id,	×
32	postSlug: post?.slug,	×
33	tagSlug: tag?.slug,	×
34	commentId: comment._id,
35	tagCommentType: comment.tagCommentType,
36	permalink,
37	});
38
39	const furtherContext = "dateIcon"; // For historical reasons	×
40
41	const handleLinkClick = (event: MouseEvent) => {	×
42	captureEvent("linkClicked", {	×
43	buttonPressed: event.button,
44	furtherContext,
45	});
46
47	// If the current location is not the same as the link's location (e.g. if a
48	// comment on a post is showing on the frontpage), fall back to just following
49	// the link
50	if (location.pathname !== url.split("?")[0]) {	×
51	return;	×
52	}
53
54	event.preventDefault();	×
NEW 55	const navigateArgs = commentPermalinkStyleSetting.get() === 'top' ? {	×
56	search: qs.stringify({...query, commentId: comment._id}),
57	hash: null,
58	} : {
59	search: qs.stringify(query),
60	hash: comment._id,
61	}
NEW 62	navigate({	×
63	...location,
64	...navigateArgs
65	});
66
67	if (scrollIntoView) {	×
68	scrollIntoView();	×
69	}
70	}
71
72	const Wrapper: FC<PropsWithChildren<{}>> = scrollOnClick	×
73	? ({children}) => (	×
74	<a rel="nofollow" href={url} onClick={handleLinkClick}>	×
75	{children}
76	</a>
77	)
78	: ({children}) => (
79	<Link rel="nofollow" to={url} eventProps={{furtherContext}}>	×
80	{children}
81	</Link>
82	);
83
84	return Wrapper;	×
85	}

ForumMagnum / ForumMagnum / 10060637613

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