8908564103

Committed 01 May 2024 11:05AM UTC coverage: 31.923% (-0.01%) from 31.936%

Build # 8908564103

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9186 from ForumMagnum/ea-card-view

[EA] Card view

Run Details

4726 of 38663 branches covered (12.22%)

Branch coverage included in aggregate %.

48 of 112 new or added lines in 17 files covered. (42.86%)

8 existing lines in 7 files now uncovered.

27572 of 62511 relevant lines covered (44.11%)

178.68 hits per line

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

37.78

/packages/lesswrong/components/common/HomeLatestPosts.tsx

import React, { useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useCurrentUser } from '../common/withUser';
import { Link } from '../../lib/reactRouterWrapper';
import { useLocation } from '../../lib/routeUtil';
import { useTimezone } from './withTimezone';
import { AnalyticsContext, useOnMountTracking } from '../../lib/analyticsEvents';
import { FilterSettings, useFilterSettings } from '../../lib/filterSettings';
import moment from '../../lib/moment-timezone';
import { useCurrentTime } from '../../lib/utils/timeUtil';
import { isEAForum, isLW, isLWorAF, taggingNamePluralSetting, taggingNameSetting} from '../../lib/instanceSettings';
import { sectionTitleStyle } from '../common/SectionTitle';
import { AllowHidingFrontPagePostsContext } from '../dropdowns/posts/PostActions';
import { HideRepeatedPostsProvider } from '../posts/HideRepeatedPostsContext';
import classNames from 'classnames';
import {useUpdateCurrentUser} from "../hooks/useUpdateCurrentUser";
import { reviewIsActive } from '../../lib/reviewUtils';
import { forumSelect } from '../../lib/forumTypeUtils';
import { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';
import { isFriendlyUI } from '../../themes/forumTheme';
import { EA_FORUM_TRANSLATION_TOPIC_ID } from '../../lib/collections/tags/collection';

const titleWrapper = isLWorAF ? {
  marginBottom: 8
} : {
  display: "flex",
  marginBottom: 8,
  flexWrap: "wrap",
  alignItems: "center"
};

const styles = (theme: ThemeType): JssStyles => ({
  titleWrapper,
  title: {
    ...sectionTitleStyle(theme),
    display: "inline",
    marginRight: "auto"
  },
  toggleFilters: {
    [theme.breakpoints.up('sm')]: {
      display: "none"
    },
  },
  hide: {
      display: "none"
  },
  hideOnMobile: {
    [theme.breakpoints.down('sm')]: {
      display: "none"
    },
  },
  hideOnDesktop: {
    [theme.breakpoints.up('md')]: {
      display: "none"
    },
  },
  postsListSettings: {
    display: "flex",
    alignItems: "center",
    gap: "6px",
  },
});

const latestPostsName = isFriendlyUI ? 'New & upvoted' : 'Latest Posts'

export const filterSettingsToggleLabels = forumSelect({
  EAForum: {
    desktopVisible: "Customize feed",
    desktopHidden: "Customize feed",
    mobileVisible: "Customize feed",
    mobileHidden: "Customize feed",
  },
  default: {
    desktopVisible: "Customize (Hide)",
    desktopHidden: "Customize",
    mobileVisible: "Customize (Hide)",
    mobileHidden: "Customize",
  }
})

const advancedSortingText = isFriendlyUI
  ? "Advanced sorting & filtering"
  : "Advanced Sorting/Filtering";

const defaultLimit = isFriendlyUI ? 11 : 13;

const applyConstantFilters = (filterSettings: FilterSettings): FilterSettings => {
  if (!isEAForum) {
    return filterSettings;
  }
  const tags = filterSettings.tags.filter(
    ({tagId}) => tagId !== EA_FORUM_TRANSLATION_TOPIC_ID,
  );
  tags.push({
    tagId: EA_FORUM_TRANSLATION_TOPIC_ID,
    tagName: "Translation",
    filterMode: "Hidden",
  });
  return {
    ...filterSettings,
    tags,
  };
}

const HomeLatestPosts = ({classes}: {classes: ClassesType}) => {
  const location = useLocation();
  const updateCurrentUser = useUpdateCurrentUser();
  const currentUser = useCurrentUser();

  const {filterSettings, setPersonalBlogFilter, setTagFilter, removeTagFilter} = useFilterSettings()
  // While hiding desktop settings is stateful over time, on mobile the filter settings always start out hidden
  // (except that on the EA Forum/FriendlyUI it always starts out hidden)
  const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(isFriendlyUI ? false : !currentUser?.hideFrontpageFilterSettingsDesktop);
  const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);
  const { timezone } = useTimezone();
  const { captureEvent } = useOnMountTracking({
    eventType:"frontpageFilterSettings",
    eventProps: {
      filterSettings,
      filterSettingsVisible: filterSettingsVisibleDesktop,
      pageSectionContext: "latestPosts"
    },
    captureOnMount: true,
  })
  const { query } = location;
  const {
    SingleColumnSection, PostsList2, TagFilterSettings, LWTooltip, SettingsButton,
    CuratedPostsList, SectionTitle, StickiedPosts, PostsListViewToggle,
  } = Components
  const limit = parseInt(query.limit) || defaultLimit;

  const now = useCurrentTime();
  const dateCutoff = moment(now).tz(timezone).subtract(frontpageDaysAgoCutoffSetting.get(), 'days').format("YYYY-MM-DD");

  const recentPostsTerms = {
    ...query,
    filterSettings: applyConstantFilters(filterSettings),
    after: dateCutoff,
    view: "magic",
    forum: true,
    limit:limit
  }
  
  const changeShowTagFilterSettingsDesktop = () => {
    setFilterSettingsVisibleDesktop(!filterSettingsVisibleDesktop)
    if (isLWorAF) {
      void updateCurrentUser({hideFrontpageFilterSettingsDesktop: filterSettingsVisibleDesktop})
    }
    
    captureEvent("filterSettingsClicked", {
      settingsVisible: !filterSettingsVisibleDesktop,
      settings: filterSettings,
    })
  }

  const showCurated = isFriendlyUI || (isLW && reviewIsActive())

  return (
    <AnalyticsContext pageSectionContext="latestPosts">
      <SingleColumnSection>
        <SectionTitle title={latestPostsName} noTopMargin={isFriendlyUI} noBottomPadding>
          <div className={classes.postsListSettings}>
            <LWTooltip
              title={`Use these buttons to increase or decrease the visibility of posts based on ${taggingNameSetting.get()}. Use the "+" button at the end to add additional ${taggingNamePluralSetting.get()} to boost or reduce them.`}
              hideOnTouchScreens
            >
              <SettingsButton
                className={classes.hideOnMobile}
                label={filterSettingsVisibleDesktop ?
                  filterSettingsToggleLabels.desktopVisible :
                  filterSettingsToggleLabels.desktopHidden}
                showIcon={false}
                onClick={changeShowTagFilterSettingsDesktop}
                textShadow={isLWorAF}
              />
              <SettingsButton
                className={classes.hideOnDesktop}
                label={filterSettingsVisibleMobile ?
                  filterSettingsToggleLabels.mobileVisible :
                  filterSettingsToggleLabels.mobileHidden}
                showIcon={false}
                onClick={() => {
                  setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)
                  captureEvent("filterSettingsClicked", {
                    settingsVisible: !filterSettingsVisibleMobile,
                    settings: filterSettings,
                    pageSectionContext: "latestPosts"
                  })
                }} />
            </LWTooltip>
            {isFriendlyUI && <PostsListViewToggle />}
          </div>
        </SectionTitle>

        <AnalyticsContext pageSectionContext="tagFilterSettings">
          <div className={classNames({
            [classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
            [classes.hideOnMobile]: !filterSettingsVisibleMobile,
          })}>
            <TagFilterSettings
              filterSettings={filterSettings} setPersonalBlogFilter={setPersonalBlogFilter} setTagFilter={setTagFilter} removeTagFilter={removeTagFilter}
            />
          </div>
        </AnalyticsContext>
        {isFriendlyUI && <StickiedPosts />}
        <HideRepeatedPostsProvider>
          {showCurated && <CuratedPostsList />}
          <AnalyticsContext listContext={"latestPosts"}>
            {/* Allow hiding posts from the front page*/}
            <AllowHidingFrontPagePostsContext.Provider value={true}>
              <PostsList2
                terms={recentPostsTerms}
                alwaysShowLoadMore
                hideHiddenFrontPagePosts
                viewType="fromContext"
              >
                <Link to={"/allPosts"}>{advancedSortingText}</Link>
              </PostsList2>
            </AllowHidingFrontPagePostsContext.Provider>
          </AnalyticsContext>
        </HideRepeatedPostsProvider>
      </SingleColumnSection>
    </AnalyticsContext>
  )
}

const HomeLatestPostsComponent = registerComponent('HomeLatestPosts', HomeLatestPosts, {styles});

declare global {
  interface ComponentTypes {
    HomeLatestPosts: typeof HomeLatestPostsComponent
  }
}

1	import React, { useState } from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useCurrentUser } from '../common/withUser';	1✔
4	import { Link } from '../../lib/reactRouterWrapper';	1✔
5	import { useLocation } from '../../lib/routeUtil';	1✔
6	import { useTimezone } from './withTimezone';	1✔
7	import { AnalyticsContext, useOnMountTracking } from '../../lib/analyticsEvents';	1✔
8	import { FilterSettings, useFilterSettings } from '../../lib/filterSettings';	1✔
9	import moment from '../../lib/moment-timezone';	1✔
10	import { useCurrentTime } from '../../lib/utils/timeUtil';	1✔
11	import { isEAForum, isLW, isLWorAF, taggingNamePluralSetting, taggingNameSetting} from '../../lib/instanceSettings';	1✔
12	import { sectionTitleStyle } from '../common/SectionTitle';	1✔
13	import { AllowHidingFrontPagePostsContext } from '../dropdowns/posts/PostActions';	1✔
14	import { HideRepeatedPostsProvider } from '../posts/HideRepeatedPostsContext';	1✔
15	import classNames from 'classnames';	1✔
16	import {useUpdateCurrentUser} from "../hooks/useUpdateCurrentUser";	1✔
17	import { reviewIsActive } from '../../lib/reviewUtils';	1✔
18	import { forumSelect } from '../../lib/forumTypeUtils';	1✔
19	import { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';	1✔
20	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
21	import { EA_FORUM_TRANSLATION_TOPIC_ID } from '../../lib/collections/tags/collection';	1✔
22
23	const titleWrapper = isLWorAF ? {	1!
24	marginBottom: 8
25	} : {
26	display: "flex",
27	marginBottom: 8,
28	flexWrap: "wrap",
29	alignItems: "center"
30	};
31
32	const styles = (theme: ThemeType): JssStyles => ({	1✔
33	titleWrapper,
34	title: {
35	...sectionTitleStyle(theme),
36	display: "inline",
37	marginRight: "auto"
38	},
39	toggleFilters: {
40	[theme.breakpoints.up('sm')]: {
41	display: "none"
42	},
43	},
44	hide: {
45	display: "none"
46	},
47	hideOnMobile: {
48	[theme.breakpoints.down('sm')]: {
49	display: "none"
50	},
51	},
52	hideOnDesktop: {
53	[theme.breakpoints.up('md')]: {
54	display: "none"
55	},
56	},
57	postsListSettings: {
58	display: "flex",
59	alignItems: "center",
60	gap: "6px",
61	},
62	});
63
64	const latestPostsName = isFriendlyUI ? 'New & upvoted' : 'Latest Posts'	1!
65
66	export const filterSettingsToggleLabels = forumSelect({	1✔
67	EAForum: {
68	desktopVisible: "Customize feed",
69	desktopHidden: "Customize feed",
70	mobileVisible: "Customize feed",
71	mobileHidden: "Customize feed",
72	},
73	default: {
74	desktopVisible: "Customize (Hide)",
75	desktopHidden: "Customize",
76	mobileVisible: "Customize (Hide)",
77	mobileHidden: "Customize",
78	}
79	})
80
81	const advancedSortingText = isFriendlyUI	1✔
82	? "Advanced sorting & filtering"	1!
83	: "Advanced Sorting/Filtering";
84
85	const defaultLimit = isFriendlyUI ? 11 : 13;	1!
86
87	const applyConstantFilters = (filterSettings: FilterSettings): FilterSettings => {	1✔
88	if (!isEAForum) {	×
89	return filterSettings;	×
90	}
91	const tags = filterSettings.tags.filter(	×
92	({tagId}) => tagId !== EA_FORUM_TRANSLATION_TOPIC_ID,	×
93	);
94	tags.push({	×
95	tagId: EA_FORUM_TRANSLATION_TOPIC_ID,
96	tagName: "Translation",
97	filterMode: "Hidden",
98	});
99	return {	×
100	...filterSettings,
101	tags,
102	};
103	}
104
105	const HomeLatestPosts = ({classes}: {classes: ClassesType}) => {	1✔
106	const location = useLocation();	×
107	const updateCurrentUser = useUpdateCurrentUser();	×
108	const currentUser = useCurrentUser();	×
109
110	const {filterSettings, setPersonalBlogFilter, setTagFilter, removeTagFilter} = useFilterSettings()	×
111	// While hiding desktop settings is stateful over time, on mobile the filter settings always start out hidden
112	// (except that on the EA Forum/FriendlyUI it always starts out hidden)
113	const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(isFriendlyUI ? false : !currentUser?.hideFrontpageFilterSettingsDesktop);	×
114	const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);	×
115	const { timezone } = useTimezone();	×
116	const { captureEvent } = useOnMountTracking({	×
117	eventType:"frontpageFilterSettings",
118	eventProps: {
119	filterSettings,
120	filterSettingsVisible: filterSettingsVisibleDesktop,
121	pageSectionContext: "latestPosts"
122	},
123	captureOnMount: true,
124	})
125	const { query } = location;	×
126	const {
127	SingleColumnSection, PostsList2, TagFilterSettings, LWTooltip, SettingsButton,
128	CuratedPostsList, SectionTitle, StickiedPosts, PostsListViewToggle,
129	} = Components	×
130	const limit = parseInt(query.limit) \|\| defaultLimit;	×
131
132	const now = useCurrentTime();	×
133	const dateCutoff = moment(now).tz(timezone).subtract(frontpageDaysAgoCutoffSetting.get(), 'days').format("YYYY-MM-DD");	×
134
135	const recentPostsTerms = {	×
136	...query,
137	filterSettings: applyConstantFilters(filterSettings),
138	after: dateCutoff,
139	view: "magic",
140	forum: true,
141	limit:limit
142	}
143
144	const changeShowTagFilterSettingsDesktop = () => {	×
145	setFilterSettingsVisibleDesktop(!filterSettingsVisibleDesktop)	×
146	if (isLWorAF) {	×
147	void updateCurrentUser({hideFrontpageFilterSettingsDesktop: filterSettingsVisibleDesktop})	×
148	}
149
150	captureEvent("filterSettingsClicked", {	×
151	settingsVisible: !filterSettingsVisibleDesktop,
152	settings: filterSettings,
153	})
154	}
155
156	const showCurated = isFriendlyUI \|\| (isLW && reviewIsActive())	×
157
158	return (	×
159	<AnalyticsContext pageSectionContext="latestPosts">
160	<SingleColumnSection>
161	<SectionTitle title={latestPostsName} noTopMargin={isFriendlyUI} noBottomPadding>
162	<div className={classes.postsListSettings}>
163	<LWTooltip
164	title={`Use these buttons to increase or decrease the visibility of posts based on ${taggingNameSetting.get()}. Use the "+" button at the end to add additional ${taggingNamePluralSetting.get()} to boost or reduce them.`}
165	hideOnTouchScreens
166	>
167	<SettingsButton
168	className={classes.hideOnMobile}
169	label={filterSettingsVisibleDesktop ?
170	filterSettingsToggleLabels.desktopVisible :	×
171	filterSettingsToggleLabels.desktopHidden}
172	showIcon={false}
173	onClick={changeShowTagFilterSettingsDesktop}
174	textShadow={isLWorAF}
175	/>
176	<SettingsButton
177	className={classes.hideOnDesktop}
178	label={filterSettingsVisibleMobile ?
179	filterSettingsToggleLabels.mobileVisible :	×
180	filterSettingsToggleLabels.mobileHidden}
181	showIcon={false}
182	onClick={() => {
NEW 183	setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)	×
NEW 184	captureEvent("filterSettingsClicked", {	×
185	settingsVisible: !filterSettingsVisibleMobile,
186	settings: filterSettings,
187	pageSectionContext: "latestPosts"
188	})
189	}} />
190	</LWTooltip>
191	{isFriendlyUI && <PostsListViewToggle />}	×
192	</div>
193	</SectionTitle>
194
195	<AnalyticsContext pageSectionContext="tagFilterSettings">
196	<div className={classNames({
197	[classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
198	[classes.hideOnMobile]: !filterSettingsVisibleMobile,
199	})}>
200	<TagFilterSettings
201	filterSettings={filterSettings} setPersonalBlogFilter={setPersonalBlogFilter} setTagFilter={setTagFilter} removeTagFilter={removeTagFilter}
202	/>
203	</div>
204	</AnalyticsContext>
205	{isFriendlyUI && <StickiedPosts />}	×
206	<HideRepeatedPostsProvider>
207	{showCurated && <CuratedPostsList />}	×
208	<AnalyticsContext listContext={"latestPosts"}>
209	{/* Allow hiding posts from the front page*/}
210	<AllowHidingFrontPagePostsContext.Provider value={true}>
211	<PostsList2
212	terms={recentPostsTerms}
213	alwaysShowLoadMore
214	hideHiddenFrontPagePosts
215	viewType="fromContext"
216	>
217	<Link to={"/allPosts"}>{advancedSortingText}</Link>
218	</PostsList2>
219	</AllowHidingFrontPagePostsContext.Provider>
220	</AnalyticsContext>
221	</HideRepeatedPostsProvider>
222	</SingleColumnSection>
223	</AnalyticsContext>
224	)
225	}
226
227	const HomeLatestPostsComponent = registerComponent('HomeLatestPosts', HomeLatestPosts, {styles});	1✔
228
229	declare global {
230	interface ComponentTypes {
231	HomeLatestPosts: typeof HomeLatestPostsComponent
232	}
233	}

ForumMagnum / ForumMagnum / 8908564103

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