9323798220

Committed 31 May 2024 08:13PM UTC coverage: 31.881% (-0.02%) from 31.905%

Build # 9323798220

Build Type

Pull #9346

github

Committed by

darkruby501

Commit Message

Feed Cards have comment count

Pull Request Pull Request #9346: Subscribed feed launch

Run Details

4815 of 39333 branches covered (12.24%)

Branch coverage included in aggregate %.

64 of 195 new or added lines in 18 files covered. (32.82%)

38 existing lines in 7 files now uncovered.

27972 of 63510 relevant lines covered (44.04%)

180.23 hits per line

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

17.33

/packages/lesswrong/components/tagging/subforums/SubforumSubforumTab.tsx

import React, { useCallback, useRef } from 'react';
import { useLocation } from '../../../lib/routeUtil';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { MAX_COLUMN_WIDTH } from '../../posts/PostsPage/PostsPage';
import { useCurrentUser } from '../../common/withUser';
import { defaultSubforumSorting, SubforumSorting, subforumSortingToResolverName, subforumSortingTypes } from '../../../lib/collections/tags/subforumHelpers';
import { tagPostTerms } from '../TagPage';
import { useUpdate } from '../../../lib/crud/withUpdate';
import { TAG_POSTS_SORT_ORDER_OPTIONS } from '../../../lib/collections/tags/schema';
import difference from 'lodash/fp/difference';
import { PostsLayout } from '../../../lib/collections/posts/dropdownOptions';
import { ObservableQuery } from '@apollo/client';

const styles = (theme: ThemeType) => ({
  centralColumn: {
    marginLeft: "auto",
    marginRight: "auto",
    maxWidth: MAX_COLUMN_WIDTH,
  },
  feedHeader: {
    display: "flex",
    justifyContent: "space-between",
    [theme.breakpoints.down('xs')]: {
      '& .PostsListSortDropdown-root': {
        marginRight: "0px !important",
      }
    }
  },
  newShortformContainer: {
    background: theme.palette.grey[0],
    marginTop: 16,
    paddingTop: 2,
    borderRadius: theme.borderRadius.default,
  },
  shortformComment: {
    '&&': {
      marginTop: 0,
      marginBottom: 16,
    }
  },
  centerChild: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  feedPostWrapper: {
    marginTop: 8,
    marginBottom: 8,
  },
  commentPermalink: {
    marginBottom: 8,
  },
  listLayout: {
    paddingTop: 8,
  }
})

const SubforumSubforumTab = ({
  tag,
  userTagRel,
  layout,
  newShortformOpen,
  setNewShortformOpen,
  classes
}: {
  tag: TagPageFragment | TagPageWithRevisionFragment,
  userTagRel?: UserTagRelDetails,
  layout: PostsLayout,
  newShortformOpen: boolean,
  setNewShortformOpen: (open: boolean) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const {
    CommentPermalink,
    MixedTypeFeed,
    RecentDiscussionThread,
    CommentWithReplies,
    PostsList2,
    CommentsListCondensed,
    ShortformSubmitForm,
    LoginForm,
    PostsListSortDropdown,
    PostsLayoutDropdown,
  } = Components;

  const { query } = useLocation();
  const currentUser = useCurrentUser();
  const refetchRef = useRef<null|ObservableQuery['refetch']>(null);
  const refetch = useCallback(() => {
    if (refetchRef.current)
      void refetchRef.current();
  }, [refetchRef]);

  const hideIntroPost = currentUser && userTagRel && !!userTagRel?.subforumHideIntroPost

  const { mutate: updateUserTagRel } = useUpdate({
    collectionName: 'UserTagRels',
    fragmentName: 'UserTagRelDetails',
  });

  const dismissIntroPost = useCallback(() => {
    if (!userTagRel) return;
    void updateUserTagRel({selector: {_id: userTagRel?._id}, data: {subforumHideIntroPost: true}})
  }, [updateUserTagRel, userTagRel])

  const excludeSorting = layout === "card" ? ["relevance", "topAdjusted"] : []
  const sortByOptions = difference(Object.keys(TAG_POSTS_SORT_ORDER_OPTIONS), excludeSorting)
  // if no sort order was selected, try to use the tag page's default sort order for posts
  const sortBy: CommentSortingMode = (
    (sortByOptions.includes(query.sortedBy) && query.sortedBy)
    || (sortByOptions.includes(tag.postsDefaultSortOrder) && tag.postsDefaultSortOrder)
    || defaultSubforumSorting
  ) as CommentSortingMode;
  
  const commentNodeProps = {
    treeOptions: {
      postPage: true,
      refetch,
      tag,
    },
    startThreadTruncated: true,
    isChild: false,
    enableGuidelines: false,
    displayMode: "minimalist" as const,
  };
  const maxAgeHours = 18;
  const commentsLimit = 3;
  
  const cardLayoutComponent = <>
    {tag.subforumIntroPost && !hideIntroPost && (
      <div className={classes.feedPostWrapper}>
        <RecentDiscussionThread
          key={tag.subforumIntroPost._id}
          post={{ ...tag.subforumIntroPost, recentComments: [] }}
          comments={[]}
          maxLengthWords={50}
          refetch={refetch}
          smallerFonts
          dismissCallback={dismissIntroPost}
          isSubforumIntroPost
        />
      </div>
    )}
    <MixedTypeFeed
      firstPageSize={15}
      pageSize={20}
      refetchRef={refetchRef}
      // type is guaranteed to be SubforumSorting by the `sortByOptions` logic above
      resolverName={`Subforum${subforumSortingToResolverName(sortBy as SubforumSorting)}Feed`}
      sortKeyType={(subforumSortingTypes as AnyBecauseTodo)[sortBy]}
      resolverArgs={{
        tagId: "String!",
        af: "Boolean",
      }}
      resolverArgsValues={{
        tagId: tag._id,
        af: false,
      }}
      fragmentArgs={{
        maxAgeHours: "Int",
        commentsLimit: "Int",
      }}
      fragmentArgsValues={{
        maxAgeHours,
        commentsLimit,
      }}
      renderers={{
        tagSubforumPosts: {
          fragmentName: "PostsRecentDiscussion",
          render: (post: PostsRecentDiscussion) => {
            // Remove the intro post from the feed IFF it has not been dismissed from the top
            return !(post._id === tag.subforumIntroPost?._id && !hideIntroPost) && (
              <div className={classes.feedPostWrapper}>
                <RecentDiscussionThread
                  key={post._id}
                  post={{ ...post }}
                  comments={post.recentComments}
                  commentTreeOptions={{forceSingleLine: true}}
                  maxLengthWords={50}
                  refetch={refetch}
                  smallerFonts
                />
              </div>
            );
          },
        },
        tagSubforumComments: {
          fragmentName: "CommentWithRepliesFragment",
          render: (comment: CommentWithRepliesFragment) => (
            <CommentWithReplies
              key={comment._id}
              comment={comment}
              commentNodeProps={commentNodeProps}
              initialMaxChildren={5}
              className={classes.shortformComment}
            />
          ),
        },
        tagSubforumStickyComments: {
          fragmentName: "StickySubforumCommentFragment",
          render: (comment: CommentWithRepliesFragment) => (
            <CommentWithReplies
              key={comment._id}
              comment={{ ...comment, isPinnedOnProfile: true }}
              commentNodeProps={{
                ...commentNodeProps,
                showPinnedOnProfile: true,
                treeOptions: {
                  ...commentNodeProps.treeOptions,
                  showPostTitle: true,
                },
              }}
              initialMaxChildren={3}
              startExpanded={false}
            />
          ),
        },
      }}
    />
  </>;

  const terms = {
    ...tagPostTerms(tag, {...query, sortedBy: sortBy}),
    limit: 10
  }
  const listLayoutComponent = (
    <div className={classes.listLayout}>
      <PostsList2 terms={terms} tagId={tag._id} itemsPerPage={50} hideTagRelevance enableTotal/>
      <CommentsListCondensed
        label="Quick takes"
        terms={{
          view: "tagSubforumComments" as const,
          tagId: tag._id,
          sortBy,
        }}
        initialLimit={8}
        itemsPerPage={20}
        showTotal
        hideTag
      />
    </div>
  );

  const layoutComponents: Record<PostsLayout, JSX.Element> = {
    card: cardLayoutComponent,
    list: listLayoutComponent
  }

  return (
    <div className={classes.centralColumn}>
      {query.commentId && (
        <div className={classes.commentPermalink}>
          <CommentPermalink documentId={query.commentId} />
        </div>
      )}
      <div className={classes.feedHeader}>
        <PostsListSortDropdown value={sortBy} options={sortByOptions}/>
        <PostsLayoutDropdown value={layout} />
      </div>
      {newShortformOpen && (
        <div className={classes.newShortformContainer}>
          {currentUser ? <ShortformSubmitForm
            prefilledProps={{
              relevantTagIds: [tag._id],
            }}
            cancelCallback={() => setNewShortformOpen(false)}
            successCallback={() => {
              setNewShortformOpen(false);
              refetch();
            }}
            noDefaultStyles
            hideCloseButton
          /> : <div className={classes.centerChild}>
            <LoginForm />
          </div>}
        </div>
      )}
      {layoutComponents[layout]}
    </div>
  );
}

const SubforumSubforumTabComponent = registerComponent(
  'SubforumSubforumTab', SubforumSubforumTab, {styles}
);

declare global {
  interface ComponentTypes {
    SubforumSubforumTab: typeof SubforumSubforumTabComponent
  }
}

1	import React, { useCallback, useRef } from 'react';	1✔
2	import { useLocation } from '../../../lib/routeUtil';	1✔
3	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
4	import { MAX_COLUMN_WIDTH } from '../../posts/PostsPage/PostsPage';	1✔
5	import { useCurrentUser } from '../../common/withUser';	1✔
6	import { defaultSubforumSorting, SubforumSorting, subforumSortingToResolverName, subforumSortingTypes } from '../../../lib/collections/tags/subforumHelpers';	1✔
7	import { tagPostTerms } from '../TagPage';	1✔
8	import { useUpdate } from '../../../lib/crud/withUpdate';	1✔
9	import { TAG_POSTS_SORT_ORDER_OPTIONS } from '../../../lib/collections/tags/schema';	1✔
10	import difference from 'lodash/fp/difference';	1✔
11	import { PostsLayout } from '../../../lib/collections/posts/dropdownOptions';
12	import { ObservableQuery } from '@apollo/client';
13
14	const styles = (theme: ThemeType) => ({	1✔
15	centralColumn: {
16	marginLeft: "auto",
17	marginRight: "auto",
18	maxWidth: MAX_COLUMN_WIDTH,
19	},
20	feedHeader: {
21	display: "flex",
22	justifyContent: "space-between",
23	[theme.breakpoints.down('xs')]: {
24	'& .PostsListSortDropdown-root': {
25	marginRight: "0px !important",
26	}
27	}
28	},
29	newShortformContainer: {
30	background: theme.palette.grey[0],
31	marginTop: 16,
32	paddingTop: 2,
33	borderRadius: theme.borderRadius.default,
34	},
35	shortformComment: {
36	'&&': {
37	marginTop: 0,
38	marginBottom: 16,
39	}
40	},
41	centerChild: {
42	display: "flex",
43	justifyContent: "center",
44	alignItems: "center",
45	},
46	feedPostWrapper: {
47	marginTop: 8,
48	marginBottom: 8,
49	},
50	commentPermalink: {
51	marginBottom: 8,
52	},
53	listLayout: {
54	paddingTop: 8,
55	}
56	})
57
58	const SubforumSubforumTab = ({	1✔
59	tag,
60	userTagRel,
61	layout,
62	newShortformOpen,
63	setNewShortformOpen,
64	classes
65	}: {
66	tag: TagPageFragment \| TagPageWithRevisionFragment,
67	userTagRel?: UserTagRelDetails,
68	layout: PostsLayout,
69	newShortformOpen: boolean,
70	setNewShortformOpen: (open: boolean) => void,
71	classes: ClassesType<typeof styles>,
72	}) => {
73	const {
74	CommentPermalink,
75	MixedTypeFeed,
76	RecentDiscussionThread,
77	CommentWithReplies,
78	PostsList2,
79	CommentsListCondensed,
80	ShortformSubmitForm,
81	LoginForm,
82	PostsListSortDropdown,
83	PostsLayoutDropdown,
84	} = Components;	×
85
86	const { query } = useLocation();	×
87	const currentUser = useCurrentUser();	×
NEW 88	const refetchRef = useRef<null\|ObservableQuery['refetch']>(null);	×
89	const refetch = useCallback(() => {	×
90	if (refetchRef.current)	×
NEW 91	void refetchRef.current();	×
92	}, [refetchRef]);
93
94	const hideIntroPost = currentUser && userTagRel && !!userTagRel?.subforumHideIntroPost	×
95
96	const { mutate: updateUserTagRel } = useUpdate({	×
97	collectionName: 'UserTagRels',
98	fragmentName: 'UserTagRelDetails',
99	});
100
101	const dismissIntroPost = useCallback(() => {	×
102	if (!userTagRel) return;	×
103	void updateUserTagRel({selector: {_id: userTagRel?._id}, data: {subforumHideIntroPost: true}})	×
104	}, [updateUserTagRel, userTagRel])
105
106	const excludeSorting = layout === "card" ? ["relevance", "topAdjusted"] : []	×
107	const sortByOptions = difference(Object.keys(TAG_POSTS_SORT_ORDER_OPTIONS), excludeSorting)	×
108	// if no sort order was selected, try to use the tag page's default sort order for posts
109	const sortBy: CommentSortingMode = (
110	(sortByOptions.includes(query.sortedBy) && query.sortedBy)	×
111	\|\| (sortByOptions.includes(tag.postsDefaultSortOrder) && tag.postsDefaultSortOrder)
112	\|\| defaultSubforumSorting
113	) as CommentSortingMode;
114
115	const commentNodeProps = {	×
116	treeOptions: {
117	postPage: true,
118	refetch,
119	tag,
120	},
121	startThreadTruncated: true,
122	isChild: false,
123	enableGuidelines: false,
124	displayMode: "minimalist" as const,
125	};
126	const maxAgeHours = 18;	×
127	const commentsLimit = 3;	×
128
129	const cardLayoutComponent = <>	×
130	{tag.subforumIntroPost && !hideIntroPost && (	×
131	<div className={classes.feedPostWrapper}>
132	<RecentDiscussionThread
133	key={tag.subforumIntroPost._id}
134	post={{ ...tag.subforumIntroPost, recentComments: [] }}
135	comments={[]}
136	maxLengthWords={50}
137	refetch={refetch}
138	smallerFonts
139	dismissCallback={dismissIntroPost}
140	isSubforumIntroPost
141	/>
142	</div>
143	)}
144	<MixedTypeFeed
145	firstPageSize={15}
146	pageSize={20}
147	refetchRef={refetchRef}
148	// type is guaranteed to be SubforumSorting by the `sortByOptions` logic above
149	resolverName={`Subforum${subforumSortingToResolverName(sortBy as SubforumSorting)}Feed`}
150	sortKeyType={(subforumSortingTypes as AnyBecauseTodo)[sortBy]}
151	resolverArgs={{
152	tagId: "String!",
153	af: "Boolean",
154	}}
155	resolverArgsValues={{
156	tagId: tag._id,
157	af: false,
158	}}
159	fragmentArgs={{
160	maxAgeHours: "Int",
161	commentsLimit: "Int",
162	}}
163	fragmentArgsValues={{
164	maxAgeHours,
165	commentsLimit,
166	}}
167	renderers={{
168	tagSubforumPosts: {
169	fragmentName: "PostsRecentDiscussion",
170	render: (post: PostsRecentDiscussion) => {
171	// Remove the intro post from the feed IFF it has not been dismissed from the top
172	return !(post._id === tag.subforumIntroPost?._id && !hideIntroPost) && (	×
173	<div className={classes.feedPostWrapper}>
174	<RecentDiscussionThread
175	key={post._id}
176	post={{ ...post }}
177	comments={post.recentComments}
178	commentTreeOptions={{forceSingleLine: true}}
179	maxLengthWords={50}
180	refetch={refetch}
181	smallerFonts
182	/>
183	</div>
184	);
185	},
186	},
187	tagSubforumComments: {
188	fragmentName: "CommentWithRepliesFragment",
189	render: (comment: CommentWithRepliesFragment) => (
190	<CommentWithReplies	×
191	key={comment._id}
192	comment={comment}
193	commentNodeProps={commentNodeProps}
194	initialMaxChildren={5}
195	className={classes.shortformComment}
196	/>
197	),
198	},
199	tagSubforumStickyComments: {
200	fragmentName: "StickySubforumCommentFragment",
201	render: (comment: CommentWithRepliesFragment) => (
202	<CommentWithReplies	×
203	key={comment._id}
204	comment={{ ...comment, isPinnedOnProfile: true }}
205	commentNodeProps={{
206	...commentNodeProps,
207	showPinnedOnProfile: true,
208	treeOptions: {
209	...commentNodeProps.treeOptions,
210	showPostTitle: true,
211	},
212	}}
213	initialMaxChildren={3}
214	startExpanded={false}
215	/>
216	),
217	},
218	}}
219	/>
220	</>;
221
222	const terms = {	×
223	...tagPostTerms(tag, {...query, sortedBy: sortBy}),
224	limit: 10
225	}
226	const listLayoutComponent = (
227	<div className={classes.listLayout}>	×
228	<PostsList2 terms={terms} tagId={tag._id} itemsPerPage={50} hideTagRelevance enableTotal/>
229	<CommentsListCondensed
230	label="Quick takes"
231	terms={{
232	view: "tagSubforumComments" as const,
233	tagId: tag._id,
234	sortBy,
235	}}
236	initialLimit={8}
237	itemsPerPage={20}
238	showTotal
239	hideTag
240	/>
241	</div>
242	);
243
244	const layoutComponents: Record<PostsLayout, JSX.Element> = {	×
245	card: cardLayoutComponent,
246	list: listLayoutComponent
247	}
248
249	return (	×
250	<div className={classes.centralColumn}>
251	{query.commentId && (	×
252	<div className={classes.commentPermalink}>
253	<CommentPermalink documentId={query.commentId} />
254	</div>
255	)}
256	<div className={classes.feedHeader}>
257	<PostsListSortDropdown value={sortBy} options={sortByOptions}/>
258	<PostsLayoutDropdown value={layout} />
259	</div>
260	{newShortformOpen && (	×
261	<div className={classes.newShortformContainer}>
262	{currentUser ? <ShortformSubmitForm	×
263	prefilledProps={{
264	relevantTagIds: [tag._id],
265	}}
266	cancelCallback={() => setNewShortformOpen(false)}	×
267	successCallback={() => {
268	setNewShortformOpen(false);	×
269	refetch();	×
270	}}
271	noDefaultStyles
272	hideCloseButton
273	/> : <div className={classes.centerChild}>
274	<LoginForm />
275	</div>}
276	</div>
277	)}
278	{layoutComponents[layout]}
279	</div>
280	);
281	}
282
283	const SubforumSubforumTabComponent = registerComponent(	1✔
284	'SubforumSubforumTab', SubforumSubforumTab, {styles}
285	);
286
287	declare global {
288	interface ComponentTypes {
289	SubforumSubforumTab: typeof SubforumSubforumTabComponent
290	}
291	}

ForumMagnum / ForumMagnum / 9323798220

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