9324535195

Committed 31 May 2024 09:26PM UTC coverage: 31.877% (-0.02%) from 31.9%

Build # 9324535195

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9347 from ForumMagnum/master

Merge master to lw-deploy 2024 05 31

Run Details

4815 of 39332 branches covered (12.24%)

Branch coverage included in aggregate %.

443 of 913 new or added lines in 128 files covered. (48.52%)

23 existing lines in 22 files now uncovered.

27972 of 63524 relevant lines covered (44.03%)

180.16 hits per line

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

17.29

/packages/lesswrong/components/analytics/AuthorAnalyticsPage.tsx

import React, { useEffect, useState } from "react";
import { useLocation } from "../../lib/routeUtil";
import { Components, capitalize, registerComponent, slugify } from "../../lib/vulcan-lib";
import { useCurrentUser } from "../common/withUser";
import { userIsAdminOrMod } from "../../lib/vulcan-users";
import { useMulti } from "../../lib/crud/withMulti";
import { getUserFromResults } from "../users/UsersProfile";
import { useMultiPostAnalytics } from "../hooks/useAnalytics";
import classNames from "classnames";
import { useNavigate } from "../../lib/reactRouterWrapper";
import qs from "qs";
import isEmpty from "lodash/isEmpty";
import range from "lodash/range";
import { GRAPH_LEFT_MARGIN } from "./AnalyticsGraph";

export const mdTitleWidth = 60;
export const smTitleWidth = 50;
export const xsTitleWidth = 45;
const valueWidth = (titleWidth: number) => (100 - titleWidth) / 4;
export const gridColumns = (titleWidth: number) =>
  `${titleWidth}% ${valueWidth(titleWidth)}% ${valueWidth(titleWidth)}% ${valueWidth(titleWidth)}% ${valueWidth(
    titleWidth
  )}%`;

const styles = (theme: ThemeType) => ({
  root: {
    width: 800,
    maxWidth: "100%",
    fontFamily: theme.palette.fonts.sansSerifStack,
    [theme.breakpoints.down("sm")]: {
      // Add the top padding back in for mobile
      paddingTop: theme.spacing.mainLayoutPaddingTop,
    }
  },
  section: {
    background: theme.palette.grey[0],
    padding: 24,
    marginBottom: 24,
    borderRadius: theme.borderRadius.default,
    fontFamily: theme.palette.fonts.sansSerifStack,
    [theme.breakpoints.down("xs")]: {
      padding: "16px 8px",
    },
  },
  postsSection: {
    [theme.breakpoints.down("xs")]: {
      marginRight: GRAPH_LEFT_MARGIN,
    },
  },
  pageHeader: {
    margin: "24px 36px",
    [theme.breakpoints.down("xs")]: {
      marginLeft: GRAPH_LEFT_MARGIN,
    },
  },
  pageHeaderText: {
    fontSize: 32,
    fontWeight: "700",
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.grey[1000],
  },
  postsListHeader: {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
  },
  fetchingLatest: {
    fontSize: 14,
    color: theme.palette.grey[600],
    fontWeight: 500,
    // stick to bottom
    alignSelf: "flex-end",
    marginBottom: 4,
  },
  allYourPosts: {
    fontSize: 18,
    fontWeight: 600,
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.grey[1000],
    marginLeft: GRAPH_LEFT_MARGIN,
  },
  grid: {
    display: "grid",
    gridTemplateColumns: gridColumns(mdTitleWidth),
    alignItems: "center",
    [theme.breakpoints.down("sm")]: {
      gridTemplateColumns: gridColumns(smTitleWidth),
    },
    [theme.breakpoints.down("xs")]: {
      gridTemplateColumns: gridColumns(xsTitleWidth),
    },
  },
  gridHeader: {
    color: theme.palette.grey[600],
    fontSize: 13,
    padding: "12px 4px 12px 0",
    fontWeight: 500,
    marginLeft: GRAPH_LEFT_MARGIN,
    [theme.breakpoints.down("xs")]: {
      fontSize: 11,
    },
  },
  postItem: {
    marginLeft: GRAPH_LEFT_MARGIN,
  },
  dateHeader: {
    justifyContent: "flex-start",
    display: "flex",
  },
  dateHeaderLabel: {
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
  },
  valueHeader: {
    justifyContent: "center",
    display: "flex",
  },
  valueHeaderLabel: {
    cursor: "pointer",
    marginLeft: GRAPH_LEFT_MARGIN,
    display: "flex",
    alignItems: "center",
    [theme.breakpoints.down("xs")]: {
      marginLeft: 0,
    },
  },
  loadMore: {
    marginTop: 10,
    marginLeft: 28,
  },
  sortArrow: {
    color: theme.palette.grey[600],
    fontSize: 14,
    marginLeft: 2,
    // flip vertically
    transform: "scaleY(-1)",
    [theme.breakpoints.down("xs")]: {
      marginLeft: 0,
    },
  },
  desc: {
    transform: "scaleY(1)",
  },
  hide: {
    // Set opacity: 0 rather than display: none to avoid layout shift
    opacity: 0,
    [theme.breakpoints.down("xs")]: {
      // On mobile: accept some layout shift in return for having more space
      display: "none",
    },
  },
});

const AuthorAnalyticsPage = ({ classes }: {
  classes: ClassesType<typeof styles>,
}) => {
  const { params, query, location } = useLocation();
  const navigate = useNavigate();
  const slug = slugify(params.slug);
  const currentUser = useCurrentUser();

  const {results} = useMulti({
    terms: { view: "usersProfile", slug },
    collectionName: "Users",
    fragmentName: "UsersMinimumInfo",
    enableTotal: false,
    fetchPolicy: "cache-and-network",
  });
  const user = getUserFromResults(results);

  const { sortBy, sortDesc: sortDescRaw } = query;
  const sortDesc = sortDescRaw === "true" ? true : sortDescRaw === "false" ? false : undefined;

  const onClickHeader = (headerField: string) => {
    let newSortBy: string | undefined = sortBy;
    let newSortDesc: boolean | undefined = sortDesc;

    if (headerField === sortBy) {
      if (sortDesc === true) {
        newSortDesc = false;
      } else if (sortDesc === false) {
        newSortBy = undefined;
        newSortDesc = undefined;
      }
    } else {
      newSortBy = headerField;
      newSortDesc = true;
    }

    const currentQuery = isEmpty(query)
      ? {}
      : Object.keys(query)
          .filter((key) => key !== "sortBy" && key !== "sortDesc")
          .reduce((obj, key) => {
            obj[key] = query[key];
            return obj;
          }, {} as Record<string, string>);
    const newQuery = {
      ...currentQuery,
      ...(newSortBy !== undefined && { sortBy: newSortBy }),
      ...(newSortDesc !== undefined && { sortDesc: newSortDesc }),
    };
    navigate({ ...location.location, search: `?${qs.stringify(newQuery)}` });
  };

  const initialLimit = 10;
  const itemsPerPage = 20;

  const {
    data,
    loading: analyticsLoading,
    loadMoreProps,
  } = useMultiPostAnalytics({
    userId: user?._id,
    sortBy,
    desc: sortDesc,
    initialLimit,
    itemsPerPage,
  });

  // Give the posts their own state so the list doesn't disappear when
  // clicking "load more" or updating other data
  const [posts, setPosts] = useState(data?.posts ?? []);
  const [totalCount, setTotalCount] = useState(loadMoreProps.totalCount);

  useEffect(() => {
    if ((data?.posts?.length ?? 0) > posts.length) {
      setPosts(data!.posts);
    }
  }, [data, posts, loadMoreProps]);

  useEffect(() => {
    setTotalCount((current) => Math.max(current, loadMoreProps.totalCount));
  }, [loadMoreProps.totalCount]);

  // Manually reset the post list if we navigate to a different user's stats
  useEffect(() => {
    setPosts([]);
    setTotalCount(0);
  }, [slug]);

  const {
    SingleColumnSection, HeadTags, Typography, LoadMore, ForumIcon, LWTooltip,
    AnalyticsGraph, AnalyticsPostItem, AnalyticsPostItemSkeleton,
  } = Components;

  const isCurrentUser = currentUser?.slug === slug
  if (!currentUser || (!isCurrentUser && !userIsAdminOrMod(currentUser))) {
    return (
      <SingleColumnSection className={classes.root}>
        You don't have permission to view this page.
      </SingleColumnSection>
    );
  }

  const title = `Stats for ${user?.displayName ?? slug}`;

  const getUserHeading = (uppercase: boolean) => {
    const format = uppercase ? capitalize : (s: string) => s;
    if (isCurrentUser) {
      return format("your");
    }
    return user ? `${user.displayName}'s` : format("user");
  }

  const renderHeaderCell = (headerField: string, label: string) => (
    <div onClick={() => onClickHeader(headerField)} className={classes.valueHeader}>
      <div className={classes.valueHeaderLabel}>
        {label}
        <ForumIcon
          className={classNames(classes.sortArrow, {
            [classes.desc]: sortDesc,
            [classes.hide]: sortBy !== headerField,
          })}
          icon="NarrowArrowDown"
        />
      </div>
    </div>
  );

  const placeholderCount = posts.length
    ? Math.min(itemsPerPage, totalCount - posts.length)
    : initialLimit;

  return (
    <>
      <HeadTags title={title} />
      <SingleColumnSection className={classes.root}>
        <div className={classes.pageHeader}>
          <Typography variant="headline" className={classes.pageHeaderText}>
            {getUserHeading(true)} post stats
          </Typography>
        </div>
        <div className={classes.section}>
          <AnalyticsGraph userId={user?._id} />
        </div>
        <div className={classNames(classes.section, classes.postsSection)}>
          <div className={classes.allYourPosts}>All {getUserHeading(false)} posts</div>
          <div className={classNames(classes.grid, classes.gridHeader)}>
            <div onClick={() => onClickHeader("postedAt")} className={classes.dateHeader}>
              <div className={classes.dateHeaderLabel}>
                Date
                <ForumIcon
                  className={classNames(classes.sortArrow, {
                    [classes.desc]: sortDesc,
                    [classes.hide]: sortBy !== "postedAt",
                  })}
                  icon="NarrowArrowDown"
                />
              </div>
            </div>
            {renderHeaderCell("views", "Views")}
            <LWTooltip title="Unique views 30s or longer" placement="top">{renderHeaderCell("reads", "Reads")}</LWTooltip>
            {renderHeaderCell("baseScore", "Karma")}
            {renderHeaderCell("commentCount", "Comments")}
          </div>
          {posts.map((post) => (
            <AnalyticsPostItem
              key={post._id}
              post={post}
              className={classes.postItem}
            />
          ))}
          {analyticsLoading &&
            range(0, placeholderCount).map((i) => (
              <AnalyticsPostItemSkeleton key={i} className={classes.postItem} />
            ))
          }
          <LoadMore className={classes.loadMore} {...loadMoreProps} hideLoading />
        </div>
      </SingleColumnSection>
    </>
  );
};

const AuthorAnalyticsPageComponent = registerComponent("AuthorAnalyticsPage", AuthorAnalyticsPage, { styles });

declare global {
  interface ComponentTypes {
    AuthorAnalyticsPage: typeof AuthorAnalyticsPageComponent;
  }
}

1	import React, { useEffect, useState } from "react";	9✔
2	import { useLocation } from "../../lib/routeUtil";	1✔
3	import { Components, capitalize, registerComponent, slugify } from "../../lib/vulcan-lib";	1✔
4	import { useCurrentUser } from "../common/withUser";	1✔
5	import { userIsAdminOrMod } from "../../lib/vulcan-users";	1✔
6	import { useMulti } from "../../lib/crud/withMulti";	1✔
7	import { getUserFromResults } from "../users/UsersProfile";	1✔
8	import { useMultiPostAnalytics } from "../hooks/useAnalytics";	1✔
9	import classNames from "classnames";	1✔
10	import { useNavigate } from "../../lib/reactRouterWrapper";	1✔
11	import qs from "qs";	1✔
12	import isEmpty from "lodash/isEmpty";	1✔
13	import range from "lodash/range";	1✔
14	import { GRAPH_LEFT_MARGIN } from "./AnalyticsGraph";	1✔
15
16	export const mdTitleWidth = 60;	1✔
17	export const smTitleWidth = 50;	1✔
18	export const xsTitleWidth = 45;	1✔
19	const valueWidth = (titleWidth: number) => (100 - titleWidth) / 4;	24✔
20	export const gridColumns = (titleWidth: number) =>	1✔
21	`${titleWidth}% ${valueWidth(titleWidth)}% ${valueWidth(titleWidth)}% ${valueWidth(titleWidth)}% ${valueWidth(	6✔
22	titleWidth
23	)}%`;
24
25	const styles = (theme: ThemeType) => ({	1✔
26	root: {
27	width: 800,
28	maxWidth: "100%",
29	fontFamily: theme.palette.fonts.sansSerifStack,
30	[theme.breakpoints.down("sm")]: {
31	// Add the top padding back in for mobile
32	paddingTop: theme.spacing.mainLayoutPaddingTop,
33	}
34	},
35	section: {
36	background: theme.palette.grey[0],
37	padding: 24,
38	marginBottom: 24,
39	borderRadius: theme.borderRadius.default,
40	fontFamily: theme.palette.fonts.sansSerifStack,
41	[theme.breakpoints.down("xs")]: {
42	padding: "16px 8px",
43	},
44	},
45	postsSection: {
46	[theme.breakpoints.down("xs")]: {
47	marginRight: GRAPH_LEFT_MARGIN,
48	},
49	},
50	pageHeader: {
51	margin: "24px 36px",
52	[theme.breakpoints.down("xs")]: {
53	marginLeft: GRAPH_LEFT_MARGIN,
54	},
55	},
56	pageHeaderText: {
57	fontSize: 32,
58	fontWeight: "700",
59	fontFamily: theme.palette.fonts.sansSerifStack,
60	color: theme.palette.grey[1000],
61	},
62	postsListHeader: {
63	display: "flex",
64	justifyContent: "space-between",
65	flexDirection: "row",
66	},
67	fetchingLatest: {
68	fontSize: 14,
69	color: theme.palette.grey[600],
70	fontWeight: 500,
71	// stick to bottom
72	alignSelf: "flex-end",
73	marginBottom: 4,
74	},
75	allYourPosts: {
76	fontSize: 18,
77	fontWeight: 600,
78	fontFamily: theme.palette.fonts.sansSerifStack,
79	color: theme.palette.grey[1000],
80	marginLeft: GRAPH_LEFT_MARGIN,
81	},
82	grid: {
83	display: "grid",
84	gridTemplateColumns: gridColumns(mdTitleWidth),
85	alignItems: "center",
86	[theme.breakpoints.down("sm")]: {
87	gridTemplateColumns: gridColumns(smTitleWidth),
88	},
89	[theme.breakpoints.down("xs")]: {
90	gridTemplateColumns: gridColumns(xsTitleWidth),
91	},
92	},
93	gridHeader: {
94	color: theme.palette.grey[600],
95	fontSize: 13,
96	padding: "12px 4px 12px 0",
97	fontWeight: 500,
98	marginLeft: GRAPH_LEFT_MARGIN,
99	[theme.breakpoints.down("xs")]: {
100	fontSize: 11,
101	},
102	},
103	postItem: {
104	marginLeft: GRAPH_LEFT_MARGIN,
105	},
106	dateHeader: {
107	justifyContent: "flex-start",
108	display: "flex",
109	},
110	dateHeaderLabel: {
111	cursor: "pointer",
112	display: "flex",
113	alignItems: "center",
114	},
115	valueHeader: {
116	justifyContent: "center",
117	display: "flex",
118	},
119	valueHeaderLabel: {
120	cursor: "pointer",
121	marginLeft: GRAPH_LEFT_MARGIN,
122	display: "flex",
123	alignItems: "center",
124	[theme.breakpoints.down("xs")]: {
125	marginLeft: 0,
126	},
127	},
128	loadMore: {
129	marginTop: 10,
130	marginLeft: 28,
131	},
132	sortArrow: {
133	color: theme.palette.grey[600],
134	fontSize: 14,
135	marginLeft: 2,
136	// flip vertically
137	transform: "scaleY(-1)",
138	[theme.breakpoints.down("xs")]: {
139	marginLeft: 0,
140	},
141	},
142	desc: {
143	transform: "scaleY(1)",
144	},
145	hide: {
146	// Set opacity: 0 rather than display: none to avoid layout shift
147	opacity: 0,
148	[theme.breakpoints.down("xs")]: {
149	// On mobile: accept some layout shift in return for having more space
150	display: "none",
151	},
152	},
153	});
154
155	const AuthorAnalyticsPage = ({ classes }: {	1✔
156	classes: ClassesType<typeof styles>,
157	}) => {
158	const { params, query, location } = useLocation();	×
159	const navigate = useNavigate();	×
160	const slug = slugify(params.slug);	×
161	const currentUser = useCurrentUser();	×
162
NEW 163	const {results} = useMulti({	×
164	terms: { view: "usersProfile", slug },
165	collectionName: "Users",
166	fragmentName: "UsersMinimumInfo",
167	enableTotal: false,
168	fetchPolicy: "cache-and-network",
169	});
170	const user = getUserFromResults(results);	×
171
172	const { sortBy, sortDesc: sortDescRaw } = query;	×
173	const sortDesc = sortDescRaw === "true" ? true : sortDescRaw === "false" ? false : undefined;	×
174
175	const onClickHeader = (headerField: string) => {	×
176	let newSortBy: string \| undefined = sortBy;	×
177	let newSortDesc: boolean \| undefined = sortDesc;	×
178
179	if (headerField === sortBy) {	×
180	if (sortDesc === true) {	×
181	newSortDesc = false;	×
182	} else if (sortDesc === false) {	×
183	newSortBy = undefined;	×
184	newSortDesc = undefined;	×
185	}
186	} else {
187	newSortBy = headerField;	×
188	newSortDesc = true;	×
189	}
190
191	const currentQuery = isEmpty(query)	×
192	? {}	×
193	: Object.keys(query)
194	.filter((key) => key !== "sortBy" && key !== "sortDesc")	×
195	.reduce((obj, key) => {
196	obj[key] = query[key];	×
197	return obj;	×
198	}, {} as Record<string, string>);
199	const newQuery = {	×
200	...currentQuery,
201	...(newSortBy !== undefined && { sortBy: newSortBy }),	×
202	...(newSortDesc !== undefined && { sortDesc: newSortDesc }),	×
203	};
204	navigate({ ...location.location, search: `?${qs.stringify(newQuery)}` });	×
205	};
206
NEW 207	const initialLimit = 10;	×
NEW 208	const itemsPerPage = 20;	×
209
210	const {
211	data,
212	loading: analyticsLoading,
213	loadMoreProps,
214	} = useMultiPostAnalytics({	×
215	userId: user?._id,	×
216	sortBy,
217	desc: sortDesc,
218	initialLimit,
219	itemsPerPage,
220	});
221
222	// Give the posts their own state so the list doesn't disappear when
223	// clicking "load more" or updating other data
NEW 224	const [posts, setPosts] = useState(data?.posts ?? []);	×
NEW 225	const [totalCount, setTotalCount] = useState(loadMoreProps.totalCount);	×
226
NEW 227	useEffect(() => {	×
NEW 228	if ((data?.posts?.length ?? 0) > posts.length) {	×
NEW 229	setPosts(data!.posts);	×
230	}
231	}, [data, posts, loadMoreProps]);
232
NEW 233	useEffect(() => {	×
NEW 234	setTotalCount((current) => Math.max(current, loadMoreProps.totalCount));	×
235	}, [loadMoreProps.totalCount]);
236
237	// Manually reset the post list if we navigate to a different user's stats
NEW 238	useEffect(() => {	×
NEW 239	setPosts([]);	×
NEW 240	setTotalCount(0);	×
241	}, [slug]);
242
243	const {
244	SingleColumnSection, HeadTags, Typography, LoadMore, ForumIcon, LWTooltip,
245	AnalyticsGraph, AnalyticsPostItem, AnalyticsPostItemSkeleton,
NEW 246	} = Components;	×
247
248	const isCurrentUser = currentUser?.slug === slug	×
249	if (!currentUser \|\| (!isCurrentUser && !userIsAdminOrMod(currentUser))) {	×
NEW 250	return (	×
251	<SingleColumnSection className={classes.root}>
252	You don't have permission to view this page.
253	</SingleColumnSection>
254	);
255	}
256
NEW 257	const title = `Stats for ${user?.displayName ?? slug}`;	×
258
NEW 259	const getUserHeading = (uppercase: boolean) => {	×
NEW 260	const format = uppercase ? capitalize : (s: string) => s;	×
NEW 261	if (isCurrentUser) {	×
NEW 262	return format("your");	×
263	}
NEW 264	return user ? `${user.displayName}'s` : format("user");	×
265	}
266
267	const renderHeaderCell = (headerField: string, label: string) => (	×
268	<div onClick={() => onClickHeader(headerField)} className={classes.valueHeader}>	×
269	<div className={classes.valueHeaderLabel}>
270	{label}
271	<ForumIcon
272	className={classNames(classes.sortArrow, {
273	[classes.desc]: sortDesc,
274	[classes.hide]: sortBy !== headerField,
275	})}
276	icon="NarrowArrowDown"
277	/>
278	</div>
279	</div>
280	);
281
NEW 282	const placeholderCount = posts.length	×
283	? Math.min(itemsPerPage, totalCount - posts.length)	×
284	: initialLimit;
285
UNCOV 286	return (	×
287	<>
288	<HeadTags title={title} />
289	<SingleColumnSection className={classes.root}>
290	<div className={classes.pageHeader}>
291	<Typography variant="headline" className={classes.pageHeaderText}>
292	{getUserHeading(true)} post stats
293	</Typography>
294	</div>
295	<div className={classes.section}>
296	<AnalyticsGraph userId={user?._id} />	×
297	</div>
298	<div className={classNames(classes.section, classes.postsSection)}>
299	<div className={classes.allYourPosts}>All {getUserHeading(false)} posts</div>
300	<div className={classNames(classes.grid, classes.gridHeader)}>
301	<div onClick={() => onClickHeader("postedAt")} className={classes.dateHeader}>	×
302	<div className={classes.dateHeaderLabel}>
303	Date
304	<ForumIcon
305	className={classNames(classes.sortArrow, {
306	[classes.desc]: sortDesc,
307	[classes.hide]: sortBy !== "postedAt",
308	})}
309	icon="NarrowArrowDown"
310	/>
311	</div>
312	</div>
313	{renderHeaderCell("views", "Views")}
314	<LWTooltip title="Unique views 30s or longer" placement="top">{renderHeaderCell("reads", "Reads")}</LWTooltip>
315	{renderHeaderCell("baseScore", "Karma")}
316	{renderHeaderCell("commentCount", "Comments")}
317	</div>
318	{posts.map((post) => (
NEW 319	<AnalyticsPostItem	×
320	key={post._id}
321	post={post}
322	className={classes.postItem}
323	/>
324	))}
325	{analyticsLoading &&	×
326	range(0, placeholderCount).map((i) => (
NEW 327	<AnalyticsPostItemSkeleton key={i} className={classes.postItem} />	×
328	))
329	}
330	<LoadMore className={classes.loadMore} {...loadMoreProps} hideLoading />
331	</div>
332	</SingleColumnSection>
333	</>
334	);
335	};
336
337	const AuthorAnalyticsPageComponent = registerComponent("AuthorAnalyticsPage", AuthorAnalyticsPage, { styles });	1✔
338
339	declare global {
340	interface ComponentTypes {
341	AuthorAnalyticsPage: typeof AuthorAnalyticsPageComponent;
342	}
343	}

ForumMagnum / ForumMagnum / 9324535195

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