8692071052

Committed 15 Apr 2024 03:43PM UTC coverage: 31.991% (+0.002%) from 31.989%

Build # 8692071052

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9115 from ForumMagnum/master

[EA] deploy post item ghost loading state for saved posts

Run Details

4645 of 37811 branches covered (12.28%)

Branch coverage included in aggregate %.

12 of 30 new or added lines in 6 files covered. (40.0%)

1 existing line in 1 file now uncovered.

27057 of 61286 relevant lines covered (44.15%)

182.85 hits per line

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

27.91

/packages/lesswrong/components/bookmarks/BookmarksList.tsx

import React from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { useCurrentUser } from '../common/withUser';
import { useMulti } from '../../lib/crud/withMulti';
import withErrorBoundary from '../common/withErrorBoundary';
import sortBy from 'lodash/sortBy';
import findIndex from 'lodash/findIndex';
import { AnalyticsContext } from '../../lib/analyticsEvents';
import { isEAForum } from '../../lib/instanceSettings';

const styles = (theme: ThemeType): JssStyles => ({
  empty: {
    color: theme.palette.grey[600],
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontWeight: 500,
    fontSize: 14,
    lineHeight: "1.6em",
    marginBottom: 40,
  },
});

const BookmarksList = ({showMessageIfEmpty=false, limit=20, hideLoadMore=false, classes}: {
  showMessageIfEmpty?: boolean,
  limit?: number,
  hideLoadMore?: boolean,
  classes: ClassesType,
}) => {
  const currentUser = useCurrentUser();
  const { PostsLoading, PostsItem, LoadMore } = Components
  
  const {results: bookmarkedPosts, loading, loadMoreProps} = useMulti({
    collectionName: "Posts",
    terms: {
      view: "myBookmarkedPosts",
      limit,
    },
    itemsPerPage: 20,
    fragmentName: "PostsListWithVotes",
    fetchPolicy: "cache-and-network",
    skip: !currentUser?._id,
  });
  
  if (!currentUser) return null
  
  // HACK: The results have limit/pagination which correctly reflects the order
  // of currentUser.bookmarkedPostsMetadata, but within the limited result set
  // the posts themselves may be out of order. Sort them. See also comments in
  // the myBookmarkedPosts view.
  const sortedBookmarkedPosts = sortBy(bookmarkedPosts,
    post => -findIndex(
      currentUser.bookmarkedPostsMetadata||[],
      (bookmark)=>bookmark.postId === post._id
    )
  );

  return <AnalyticsContext pageSubSectionContext="bookmarksList">
    <div>
      {showMessageIfEmpty && !loading && !sortedBookmarkedPosts.length && <div className={classes.empty}>
        {isEAForum
          ? "You haven't saved any posts yet."
          : "You haven't bookmarked any posts yet."
        }
      </div>}
      {loading && !sortedBookmarkedPosts.length && <PostsLoading placeholderCount={Math.min(currentUser.bookmarkedPostsMetadata.length, limit)} />}
      {sortedBookmarkedPosts && sortedBookmarkedPosts.map((post: PostsListWithVotes, i: number) =>
        <PostsItem
          key={post._id} post={post} bookmark
          showBottomBorder={i < sortedBookmarkedPosts.length-1}
        />
      )}
      {!hideLoadMore && <LoadMore {...loadMoreProps} />}
    </div>
  </AnalyticsContext>
}

const BookmarksListComponent = registerComponent('BookmarksList', BookmarksList, {
  styles,
  hocs: [withErrorBoundary]
});

declare global {
  interface ComponentTypes {
    BookmarksList: typeof BookmarksListComponent
  }
}

1	import React from 'react';	1✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import { useCurrentUser } from '../common/withUser';	1✔
4	import { useMulti } from '../../lib/crud/withMulti';	1✔
5	import withErrorBoundary from '../common/withErrorBoundary';	1✔
6	import sortBy from 'lodash/sortBy';	1✔
7	import findIndex from 'lodash/findIndex';	1✔
8	import { AnalyticsContext } from '../../lib/analyticsEvents';	1✔
9	import { isEAForum } from '../../lib/instanceSettings';	1✔
10
11	const styles = (theme: ThemeType): JssStyles => ({	1✔
12	empty: {
13	color: theme.palette.grey[600],
14	fontFamily: theme.palette.fonts.sansSerifStack,
15	fontWeight: 500,
16	fontSize: 14,
17	lineHeight: "1.6em",
18	marginBottom: 40,
19	},
20	});
21
22	const BookmarksList = ({showMessageIfEmpty=false, limit=20, hideLoadMore=false, classes}: {	1!
23	showMessageIfEmpty?: boolean,
24	limit?: number,
25	hideLoadMore?: boolean,
26	classes: ClassesType,
27	}) => {
28	const currentUser = useCurrentUser();	×
NEW 29	const { PostsLoading, PostsItem, LoadMore } = Components	×
30
31	const {results: bookmarkedPosts, loading, loadMoreProps} = useMulti({	×
32	collectionName: "Posts",
33	terms: {
34	view: "myBookmarkedPosts",
35	limit,
36	},
37	itemsPerPage: 20,
38	fragmentName: "PostsListWithVotes",
39	fetchPolicy: "cache-and-network",
40	skip: !currentUser?._id,	×
41	});
42
NEW 43	if (!currentUser) return null	×
44
45	// HACK: The results have limit/pagination which correctly reflects the order
46	// of currentUser.bookmarkedPostsMetadata, but within the limited result set
47	// the posts themselves may be out of order. Sort them. See also comments in
48	// the myBookmarkedPosts view.
49	const sortedBookmarkedPosts = sortBy(bookmarkedPosts,	×
50	post => -findIndex(	×
51	currentUser.bookmarkedPostsMetadata\|\|[],	×
52	(bookmark)=>bookmark.postId === post._id	×
53	)
54	);
55
56	return <AnalyticsContext pageSubSectionContext="bookmarksList">	×
57	<div>
58	{showMessageIfEmpty && !loading && !sortedBookmarkedPosts.length && <div className={classes.empty}>	×
59	{isEAForum
60	? "You haven't saved any posts yet."	×
61	: "You haven't bookmarked any posts yet."
62	}
63	</div>}
64	{loading && !sortedBookmarkedPosts.length && <PostsLoading placeholderCount={Math.min(currentUser.bookmarkedPostsMetadata.length, limit)} />}	×
65	{sortedBookmarkedPosts && sortedBookmarkedPosts.map((post: PostsListWithVotes, i: number) =>	×
66	<PostsItem	×
67	key={post._id} post={post} bookmark
68	showBottomBorder={i < sortedBookmarkedPosts.length-1}
69	/>
70	)}
71	{!hideLoadMore && <LoadMore {...loadMoreProps} />}	×
72	</div>
73	</AnalyticsContext>
74	}
75
76	const BookmarksListComponent = registerComponent('BookmarksList', BookmarksList, {	1✔
77	styles,
78	hocs: [withErrorBoundary]
79	});
80
81	declare global {
82	interface ComponentTypes {
83	BookmarksList: typeof BookmarksListComponent
84	}
85	}

ForumMagnum / ForumMagnum / 8692071052

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