8673226934

Committed 13 Apr 2024 11:40AM UTC coverage: 31.989% (+0.003%) from 31.986%

Build # 8673226934

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9105 from ForumMagnum/wh-posts-page-nossr-2024-04

Posts page SSR optimisations

Run Details

4645 of 37805 branches covered (12.29%)

Branch coverage included in aggregate %.

8 of 13 new or added lines in 10 files covered. (61.54%)

2 existing lines in 2 files now uncovered.

27047 of 61266 relevant lines covered (44.15%)

182.9 hits per line

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

25.42

/packages/lesswrong/lib/postSideRecommendations.tsx

import React, { ComponentType, useRef } from "react";
import { Link } from "./reactRouterWrapper";
import { useRecommendations } from "../components/recommendations/withRecommendations";
import { useSsrRenderedAt } from "./utils/timeUtil";
import { postGetPrimaryTag } from "./collections/posts/helpers";
import { HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE } from "./cookies/cookies";
import { useCookiesWithConsent, Cookies } from "../components/hooks/useCookiesWithConsent";
import type {
  RecommendationsAlgorithmWithStrategy,
  StrategySpecification,
} from "./collections/users/recommendationSettings";
import { Components } from "./vulcan-lib";

type RecommendablePost = PostsWithNavigation|PostsWithNavigationAndRevision;

/**
 * The content to be displayed as recommendations at the side of posts is
 * generated in the following format, which allows easily switching between
 * different algorithms and configurations. To add a new algorithm, simply
 * create a React hook function of type `RecommendationsGenerator` and add
 * it to the array of generators returned by `getAvailableGenerators`.
 */
export type PostSideRecommendations = {
  /** If recommendations are still loading */
  loading: boolean,
  /** Title for the section (generally the algorithm name) */
  title: string,
  /** The container type to place the results in (defaults to "div") */
  Container?: "div" | "ol" | "ul",
  /** List of recommendations to display - may be empty if loading */
  items: ComponentType[],
  /** An optional cookie name to handle hiding the section - if undefined
   *  the section is not hideable */
  hideCookieName?: string,
}

/**
 * Recommendations generators are used as hooks, so the name should begin
 * with "use".
 */
type RecommendationsGenerator = (post: RecommendablePost) => PostSideRecommendations;

const useMoreFromTheForumRecommendations: RecommendationsGenerator = (
  _post: RecommendablePost,
) => {
  const usefulLinks = "/posts/BsnGqnLzrLdmsYTGt/new-start-here-useful-links-1";
  const podcast = "/posts/K5Snxo5EhgmwJJjR2/announcing-ea-forum-podcast-audio-narrations-of-ea-forum";
  const digest = "https://effectivealtruism.us8.list-manage.com/subscribe?u=52b028e7f799cca137ef74763&id=7457c7ff3e";
  const jobs = "/topics/opportunities-to-take-action";
  return {
    loading: false,
    title: "More from the Forum",
    Container: "ul",
    items: [
      () => <li>
        New? <Link to={usefulLinks}>Expore useful links</Link>
      </li>,
      () => <li>
        <Link to={podcast}>Listen</Link> to popular & recent posts
      </li>,
      () => <li>
        Get weekly highlights in your inbox: Sign up for the{" "}
        <Link to={digest}>EA Forum Digest</Link>
      </li>,
      () => <li>
        Browse <Link to={jobs}>job opportunities</Link>
      </li>,
    ],
    hideCookieName: HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE,
  };
}

const useGeneratorWithStrategy = (
  title: string,
  strategy: StrategySpecification,
): PostSideRecommendations => {
  const algorithm: RecommendationsAlgorithmWithStrategy = {
    strategy: {
      context: "post-right",
      ...strategy,
    },
    count: 3,
    disableFallbacks: true,
  };
  const {
    recommendations: posts = [],
    recommendationsLoading: loading,
  } = useRecommendations({ algorithm });
  return {
    loading,
    title,
    items: posts.map((post) => () => <Components.SideRecommendation post={post} />),
  };
}

const useMorePostsListThisRecommendations: RecommendationsGenerator = (
  post: RecommendablePost,
) =>
  useGeneratorWithStrategy("More posts like this", {
    name: "tagWeightedCollabFilter",
    postId: post._id,
  });

const useNewAndUpvotedInTagRecommendations: RecommendationsGenerator = (
  post: RecommendablePost,
) => {
  const tag = postGetPrimaryTag(post, true);
  if (!tag) {
    throw new Error("Couldn't choose recommendation tag");
  }
  return useGeneratorWithStrategy(`More in ${tag.name}`, {
    name: "newAndUpvotedInTag",
    postId: post._id,
    tagId: tag._id,
  });
}

const getAvailableGenerators = (
  user: UsersCurrent|null,
  post: RecommendablePost,
  cookies: Cookies,
): RecommendationsGenerator[] => {
  const generators: RecommendationsGenerator[] = [
    useMorePostsListThisRecommendations.bind(null, post),
  ];
  if (post.tags.length) {
    generators.push(useNewAndUpvotedInTagRecommendations.bind(null, post));
  }
  if (!user && cookies[HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE] !== "true") {
    // Temporarily disabled
    // generators.push(useMoreFromTheForumRecommendations);
  }
  return generators;
}

const useGenerator = (
  seed: number,
  user: UsersCurrent|null,
  post: RecommendablePost,
): RecommendationsGenerator => {
  const [cookies] = useCookiesWithConsent();
  const generator = useRef<RecommendationsGenerator>();
  if (!generator.current) {
    const generators = getAvailableGenerators(user, post, cookies);
    const index = Math.floor(seed) % generators.length;
    generator.current = generators[index];
  }
  return generator.current;
}

export const usePostSideRecommendations = (
  user: UsersCurrent|null,
  post: RecommendablePost,
): PostSideRecommendations => {
  const ssrRenderedAt = useSsrRenderedAt().getTime();
  const useRecommendations = useGenerator(ssrRenderedAt, user, post);
  return useRecommendations(post);
}

1	import React, { ComponentType, useRef } from "react";	3✔
2	import { Link } from "./reactRouterWrapper";	1✔
3	import { useRecommendations } from "../components/recommendations/withRecommendations";	1✔
4	import { useSsrRenderedAt } from "./utils/timeUtil";	1✔
5	import { postGetPrimaryTag } from "./collections/posts/helpers";	1✔
6	import { HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE } from "./cookies/cookies";	1✔
7	import { useCookiesWithConsent, Cookies } from "../components/hooks/useCookiesWithConsent";	1✔
8	import type {
9	RecommendationsAlgorithmWithStrategy,
10	StrategySpecification,
11	} from "./collections/users/recommendationSettings";
12	import { Components } from "./vulcan-lib";	1✔
13
14	type RecommendablePost = PostsWithNavigation\|PostsWithNavigationAndRevision;
15
16	/**
17	* The content to be displayed as recommendations at the side of posts is
18	* generated in the following format, which allows easily switching between
19	* different algorithms and configurations. To add a new algorithm, simply
20	* create a React hook function of type `RecommendationsGenerator` and add
21	* it to the array of generators returned by `getAvailableGenerators`.
22	*/
23	export type PostSideRecommendations = {
24	/** If recommendations are still loading */
25	loading: boolean,
26	/** Title for the section (generally the algorithm name) */
27	title: string,
28	/** The container type to place the results in (defaults to "div") */
29	Container?: "div" \| "ol" \| "ul",
30	/** List of recommendations to display - may be empty if loading */
31	items: ComponentType[],
32	/** An optional cookie name to handle hiding the section - if undefined
33	* the section is not hideable */
34	hideCookieName?: string,
35	}
36
37	/**
38	* Recommendations generators are used as hooks, so the name should begin
39	* with "use".
40	*/
41	type RecommendationsGenerator = (post: RecommendablePost) => PostSideRecommendations;
42
43	const useMoreFromTheForumRecommendations: RecommendationsGenerator = (	1✔
44	_post: RecommendablePost,
45	) => {
46	const usefulLinks = "/posts/BsnGqnLzrLdmsYTGt/new-start-here-useful-links-1";	×
47	const podcast = "/posts/K5Snxo5EhgmwJJjR2/announcing-ea-forum-podcast-audio-narrations-of-ea-forum";	×
48	const digest = "https://effectivealtruism.us8.list-manage.com/subscribe?u=52b028e7f799cca137ef74763&id=7457c7ff3e";	×
49	const jobs = "/topics/opportunities-to-take-action";	×
50	return {	×
51	loading: false,
52	title: "More from the Forum",
53	Container: "ul",
54	items: [
55	() => <li>	×
56	New? <Link to={usefulLinks}>Expore useful links</Link>
57	</li>,
58	() => <li>	×
59	<Link to={podcast}>Listen</Link> to popular & recent posts
60	</li>,
61	() => <li>	×
62	Get weekly highlights in your inbox: Sign up for the{" "}
63	<Link to={digest}>EA Forum Digest</Link>
64	</li>,
65	() => <li>	×
66	Browse <Link to={jobs}>job opportunities</Link>
67	</li>,
68	],
69	hideCookieName: HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE,
70	};
71	}
72
73	const useGeneratorWithStrategy = (	1✔
74	title: string,
75	strategy: StrategySpecification,
76	): PostSideRecommendations => {
77	const algorithm: RecommendationsAlgorithmWithStrategy = {	×
78	strategy: {
79	context: "post-right",
80	...strategy,
81	},
82	count: 3,
83	disableFallbacks: true,
84	};
85	const {
86	recommendations: posts = [],	×
87	recommendationsLoading: loading,
NEW 88	} = useRecommendations({ algorithm });	×
89	return {	×
90	loading,
91	title,
92	items: posts.map((post) => () => <Components.SideRecommendation post={post} />),	×
93	};
94	}
95
96	const useMorePostsListThisRecommendations: RecommendationsGenerator = (	1✔
97	post: RecommendablePost,
98	) =>
99	useGeneratorWithStrategy("More posts like this", {	×
100	name: "tagWeightedCollabFilter",
101	postId: post._id,
102	});
103
104	const useNewAndUpvotedInTagRecommendations: RecommendationsGenerator = (	1✔
105	post: RecommendablePost,
106	) => {
107	const tag = postGetPrimaryTag(post, true);	×
108	if (!tag) {	×
109	throw new Error("Couldn't choose recommendation tag");	×
110	}
111	return useGeneratorWithStrategy(`More in ${tag.name}`, {	×
112	name: "newAndUpvotedInTag",
113	postId: post._id,
114	tagId: tag._id,
115	});
116	}
117
118	const getAvailableGenerators = (	1✔
119	user: UsersCurrent\|null,
120	post: RecommendablePost,
121	cookies: Cookies,
122	): RecommendationsGenerator[] => {
123	const generators: RecommendationsGenerator[] = [	×
124	useMorePostsListThisRecommendations.bind(null, post),
125	];
126	if (post.tags.length) {	×
127	generators.push(useNewAndUpvotedInTagRecommendations.bind(null, post));	×
128	}
129	if (!user && cookies[HIDE_MORE_FROM_THE_FORUM_RECOMMENDATIONS_COOKIE] !== "true") {	×
130	// Temporarily disabled
131	// generators.push(useMoreFromTheForumRecommendations);
132	}
133	return generators;	×
134	}
135
136	const useGenerator = (	1✔
137	seed: number,
138	user: UsersCurrent\|null,
139	post: RecommendablePost,
140	): RecommendationsGenerator => {
141	const [cookies] = useCookiesWithConsent();	×
142	const generator = useRef<RecommendationsGenerator>();	×
143	if (!generator.current) {	×
144	const generators = getAvailableGenerators(user, post, cookies);	×
145	const index = Math.floor(seed) % generators.length;	×
146	generator.current = generators[index];	×
147	}
148	return generator.current;	×
149	}
150
151	export const usePostSideRecommendations = (	1✔
152	user: UsersCurrent\|null,
153	post: RecommendablePost,
154	): PostSideRecommendations => {
155	const ssrRenderedAt = useSsrRenderedAt().getTime();	×
156	const useRecommendations = useGenerator(ssrRenderedAt, user, post);	×
157	return useRecommendations(post);	×
158	}

ForumMagnum / ForumMagnum / 8673226934

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