8729761091

Committed 17 Apr 2024 11:02PM UTC coverage: 32.035% (-0.02%) from 32.052%

Build # 8729761091

Build Type

push

github

Committed by

darkruby501

Commit Message

started on new component

Run Details

4662 of 37965 branches covered (12.28%)

Branch coverage included in aggregate %.

37 of 106 new or added lines in 5 files covered. (34.91%)

1 existing line in 1 file now uncovered.

27130 of 61276 relevant lines covered (44.28%)

182.89 hits per line

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

19.9

/packages/lesswrong/components/posts/RecombeeLatestPosts.tsx

import React, { useEffect, useState } from 'react';
import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';
import { EA_FORUM_TRANSLATION_TOPIC_ID } from '../../lib/collections/tags/collection';
import { RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
import { FilterSettings, useFilterSettings } from '../../lib/filterSettings';
import { isEAForum, isLW, isLWorAF } from '../../lib/instanceSettings';
import moment from '../../lib/moment-timezone';
import { postFeedsProductionSetting, postFeedsTestingSetting } from '../../lib/publicSettings';
import { Link } from '../../lib/reactRouterWrapper';
import { reviewIsActive } from '../../lib/reviewUtils';
import { useLocation } from '../../lib/routeUtil';
import { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';
import { useCurrentTime } from '../../lib/utils/timeUtil';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { userIsAdmin } from '../../lib/vulcan-users/permissions';
import { isFriendlyUI } from '../../themes/forumTheme';
import { sectionTitleStyle } from '../common/SectionTitle';
import { useTimezone } from '../common/withTimezone';
import { AllowHidingFrontPagePostsContext } from '../dropdowns/posts/PostActions';
import { HideRepeatedPostsProvider } from '../posts/HideRepeatedPostsContext';

import classNames from 'classnames';
import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';
import { RECOMBEE_SETTINGS_COOKIE } from '../../lib/cookies/cookies';
import { filterSettingsToggleLabels } from '../common/HomeLatestPosts';
import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';
import { TabRecord } from '../common/TabPicker';
import { useContinueReading } from '../recommendations/withContinueReading';
import { useMulti } from '../../lib/crud/withMulti';

// Key is the algorithm/scenario name
type RecombeeCookieSettings = [string, RecombeeConfiguration][];

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

const styles = (theme: ThemeType) => ({
  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"
    },
  },
  settingsVisibilityControls: {
    display: "flex",
    gap: "4px",
    marginBottom: "8px",
    justifyContent: "space-between",
    alignItems: "center",
  },
})

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 getDefaultDesktopFilterSettingsVisibility = (currentUser: UsersCurrent | null, selectedAlgorithm?: string) => {
  if (isFriendlyUI) {
    return false;
  }

  return currentUser?.hideFrontpageFilterSettingsDesktop === false;
};

const getDefaultScenario = () => {
  return postFeedsProductionSetting.get()[0].name;
};

const defaultScenarioConfig: RecombeeConfiguration = {
  rotationRate: 0.1,
  rotationTime: 12,
};

function useRecombeeSettings() {
  const [cookies, setCookie] = useCookiesWithConsent();
  const recombeeCookieSettings: RecombeeCookieSettings = cookies[RECOMBEE_SETTINGS_COOKIE] ?? [];
  const [storedActiveScenario, storedActiveScenarioConfig] = recombeeCookieSettings[0] ?? [];
  const [selectedScenario, setSelectedScenario] = useState(storedActiveScenario ?? getDefaultScenario());
  const [scenarioConfig, setScenarioConfig] = useState(storedActiveScenarioConfig ?? defaultScenarioConfig);

  const updateSelectedScenario = (newScenario: string) => {
    // If we don't yet have this cookie, or have this scenario stored in the cookie, add it as the first item
    // Otherwise, reorder the existing scenario + config tuples to have that scenario be first
    const newCookieValue: RecombeeCookieSettings = !recombeeCookieSettings?.find(([scenario]) => newScenario === scenario)
      ? [[newScenario, defaultScenarioConfig], ...(recombeeCookieSettings ?? [])]
      : [...recombeeCookieSettings].sort((a, b) => a[0] === newScenario ? -1 : 0);
    
    setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });

    const [_, newScenarioConfig] = newCookieValue[0];
    setSelectedScenario(newScenario);
    setScenarioConfig(newScenarioConfig);
  };

  const updateScenarioConfig = (newScenarioConfig: RecombeeConfiguration) => {
    const newCookieValue: RecombeeCookieSettings = [...recombeeCookieSettings];
    newCookieValue[0][1] = newScenarioConfig;
    setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });
    setScenarioConfig(newScenarioConfig);
  };

  useEffect(() => {
    if (recombeeCookieSettings.length === 0) {
      setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify([[getDefaultScenario(), defaultScenarioConfig]]), { path: '/' });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return {
    selectedScenario, updateSelectedScenario,
    scenarioConfig, updateScenarioConfig
  };
}

function usingClassicLWAlgorithm(selectedScenario: string) {
  return selectedScenario === 'lesswrong-classic';
}

const RecombeeLatestPosts = ({ currentUser, classes }: {
  currentUser: UsersCurrent
  classes: ClassesType<typeof styles>
}) => {
  const {
    SingleColumnSection, PostsList2, TagFilterSettings,
    StickiedPosts, RecombeePostsList, RecombeePostsListSettings, SettingsButton,
    TabPicker, ResolverPostsList, BookmarksList, ContinueReadingList
  } = Components;
  
  const updateCurrentUser = useUpdateCurrentUser();

  const { selectedScenario, updateSelectedScenario, scenarioConfig, updateScenarioConfig } = useRecombeeSettings();
  
  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 defaultDesktopFilterSettingsVisibility = getDefaultDesktopFilterSettingsVisibility(currentUser, selectedScenario);
  const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(defaultDesktopFilterSettingsVisibility);
  const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);
  const { captureEvent } = useTracking({eventProps: {recombee: true}}) 
  
  const location = useLocation();
  const { query } = location;

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

  const limit = parseInt(query.limit) || defaultLimit;
  const recentPostsTerms = {
    ...query,
    filterSettings: applyConstantFilters(filterSettings),
    after: dateCutoff,
    view: "magic",
    forum: true,
    limit:limit
  };

  const {continueReading} = useContinueReading()

  const { count: countBookmarks } = useMulti({
    collectionName: "Posts",
    terms: {
      view: "myBookmarkedPosts",
    },
    fragmentName: "PostsListWithVotes",
    fetchPolicy: "cache-and-network",
    skip: !currentUser?._id,
  });


  const changeShowTagFilterSettingsDesktop = () => {
    setFilterSettingsVisibleDesktop(!filterSettingsVisibleDesktop)
    if (isLWorAF) {
      void updateCurrentUser({hideFrontpageFilterSettingsDesktop: filterSettingsVisibleDesktop})
    }
    
    captureEvent("filterSettingsClicked", {
      settings: filterSettings,
      filterSettingsVisible: filterSettingsVisibleDesktop,
      pageSectionContext: "latestPosts",
    })
  };

  const showSettingsButton = (userIsAdmin(currentUser) && selectedScenario.includes('recombee')) || usingClassicLWAlgorithm(selectedScenario);

  const settingsButton = (<div>
    <SettingsButton
      className={classes.hideOnMobile}
      label={filterSettingsVisibleDesktop ?
        filterSettingsToggleLabels.desktopVisible :
        filterSettingsToggleLabels.desktopHidden}
      showIcon={false}
      onClick={changeShowTagFilterSettingsDesktop}
    />
    <SettingsButton
      className={classes.hideOnDesktop}
      label={filterSettingsVisibleMobile ?
        filterSettingsToggleLabels.mobileVisible :
        filterSettingsToggleLabels.mobileHidden}
      showIcon={false}
      onClick={() => {
        setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)
        captureEvent("filterSettingsClicked", {
          settingsVisible: !filterSettingsVisibleMobile,
          settings: filterSettings,
          pageSectionContext: "latestPosts",
          mobile: true
        })
      }} />
  </div>);

  const availableAlgorithms: TabRecord[] = postFeedsProductionSetting.get().map(feed => ({ name: feed.name, label: feed.label, description: feed.description, disabled: feed.disabled }));

  if (userIsAdmin(currentUser)) {
    const testingFeeds = postFeedsTestingSetting.get().map(feed => ({ name: feed.name, label: feed.label, description: feed.description, disabled: feed.disabled }));
    availableAlgorithms.push(...testingFeeds);
  }

  const enabledAlgorithms = availableAlgorithms
    .filter(feed => !feed.disabled
      && !(feed.name === 'lesswrong-bookmarks' && (countBookmarks ?? 0) < 1)
      && !(feed.name === 'lesswrong-continue-reading' && continueReading?.length < 1)
    )

  console.log({selectedScenario, availableAlgorithms, enabledAlgorithms, })

  const handleSwitchTab = (tabName: string) => {
    captureEvent("postFeedSwitched", {
      previousTab: selectedScenario,
      newTab: tabName,
    });
    updateSelectedScenario(tabName);
  }

  const algorithmPicker = <TabPicker 
    sortedTabs={enabledAlgorithms} 
    defaultTab={selectedScenario} 
    onTabSelectionUpdate={handleSwitchTab}
    showDescriptionOnHover
  />


  let settings = null;

  if (usingClassicLWAlgorithm(selectedScenario)) { 
    settings = <AnalyticsContext pageSectionContext="tagFilterSettings">
      <div className={classNames({
        [classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
        [classes.hideOnMobile]: !filterSettingsVisibleMobile,
      })}>
        <TagFilterSettings
          filterSettings={filterSettings} setPersonalBlogFilter={setPersonalBlogFilter} setTagFilter={setTagFilter} removeTagFilter={removeTagFilter}
        />
      </div>
    </AnalyticsContext>
  } else if (selectedScenario.includes('recombee')) {
    settings = <div className={classNames({
      [classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
      [classes.hideOnMobile]: !filterSettingsVisibleMobile,
    })}>
      {userIsAdmin(currentUser) && <RecombeePostsListSettings settings={scenarioConfig} updateSettings={updateScenarioConfig} />}
    </div>
  }

  return (
    // TODO: do we need capturePostItemOnMount here?
    <AnalyticsContext pageSectionContext="postsFeed">
      <SingleColumnSection>
        <div className={classes.settingsVisibilityControls}>
          {algorithmPicker}
          {showSettingsButton && settingsButton}
        </div>
        {settings}
        {isFriendlyUI && <StickiedPosts />}
        {/* TODO: reenable, disabled for testing to see how often duplication happens */}
        <HideRepeatedPostsProvider>
          <AnalyticsContext listContext={"latestPosts"}>
            {/* Allow hiding posts from the front page*/}
            <AllowHidingFrontPagePostsContext.Provider value={true}>

              {/* LATEST POSTS (Hacker News Algorithm) */}
              {(selectedScenario === 'lesswrong-classic') && <AnalyticsContext feedType={selectedScenario}>
                <PostsList2 
                  terms={recentPostsTerms} 
                  alwaysShowLoadMore 
                  hideHiddenFrontPagePosts
                >
                  <Link to={"/allPosts"}>{advancedSortingText}</Link>
                </PostsList2> 
              </AnalyticsContext>}
              
              {/* RECOMBEE RECOMMENDATIONS */}
              {selectedScenario.includes('recombee') && <AnalyticsContext feedType={selectedScenario}>
                <RecombeePostsList algorithm={selectedScenario} settings={scenarioConfig} />
              </AnalyticsContext>}

              {/* BOOKMARKS */}
              {(selectedScenario === 'lesswrong-bookmarks') && <AnalyticsContext feedType={selectedScenario}>
                <BookmarksList showMessageIfEmpty={true} limit={13} />
              </AnalyticsContext>}
              
              {/* CONTINUE READING */}
              {(selectedScenario === 'lesswrong-continue-reading') && (continueReading?.length > 0) && <AnalyticsContext feedType={selectedScenario}>
                <ContinueReadingList continueReading={continueReading}/>
              </AnalyticsContext>}

              {/* SUBSCRIBED */}
              {(selectedScenario === 'lesswrong-subscribed-authors') && <AnalyticsContext feedType={selectedScenario}>
                <ResolverPostsList
                  resolverName="PostsBySubscribedAuthors"
                  limit={13}
                  fallbackText="Visits users' profile pages to subscribe to their posts and comments."
                  showLoadMore
                />
               </AnalyticsContext>}

              {/* CHRONOLIGCAL FEED */}
              {(selectedScenario === 'lesswrong-chronological') && <AnalyticsContext feedType={selectedScenario}>
                <PostsList2 
                  terms={{...recentPostsTerms, view: "new"}} 
                  alwaysShowLoadMore 
                  hideHiddenFrontPagePosts
                >
                  <Link to={"/allPosts"}>{advancedSortingText}</Link>
                </PostsList2> 
              </AnalyticsContext>}

            </AllowHidingFrontPagePostsContext.Provider>
          </AnalyticsContext>
        </HideRepeatedPostsProvider>
      </SingleColumnSection>
    </AnalyticsContext>
  )
}

const RecombeeLatestPostsComponent = registerComponent('RecombeeLatestPosts', RecombeeLatestPosts, {styles});

declare global {
  interface ComponentTypes {
    RecombeeLatestPosts: typeof RecombeeLatestPostsComponent
  }
}

1	import React, { useEffect, useState } from 'react';	1✔
2	import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';	1✔
3	import { EA_FORUM_TRANSLATION_TOPIC_ID } from '../../lib/collections/tags/collection';	1✔
4	import { RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
5	import { FilterSettings, useFilterSettings } from '../../lib/filterSettings';	1✔
6	import { isEAForum, isLW, isLWorAF } from '../../lib/instanceSettings';	1✔
7	import moment from '../../lib/moment-timezone';	1✔
8	import { postFeedsProductionSetting, postFeedsTestingSetting } from '../../lib/publicSettings';	1✔
9	import { Link } from '../../lib/reactRouterWrapper';	1✔
10	import { reviewIsActive } from '../../lib/reviewUtils';
11	import { useLocation } from '../../lib/routeUtil';	1✔
12	import { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';	1✔
13	import { useCurrentTime } from '../../lib/utils/timeUtil';	1✔
14	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
15	import { userIsAdmin } from '../../lib/vulcan-users/permissions';	1✔
16	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
17	import { sectionTitleStyle } from '../common/SectionTitle';	1✔
18	import { useTimezone } from '../common/withTimezone';	1✔
19	import { AllowHidingFrontPagePostsContext } from '../dropdowns/posts/PostActions';	1✔
20	import { HideRepeatedPostsProvider } from '../posts/HideRepeatedPostsContext';	1✔
21
22	import classNames from 'classnames';	1✔
23	import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';	1✔
24	import { RECOMBEE_SETTINGS_COOKIE } from '../../lib/cookies/cookies';	1✔
25	import { filterSettingsToggleLabels } from '../common/HomeLatestPosts';	1✔
26	import { useUpdateCurrentUser } from '../hooks/useUpdateCurrentUser';	1✔
27	import { TabRecord } from '../common/TabPicker';
28	import { useContinueReading } from '../recommendations/withContinueReading';	1✔
29	import { useMulti } from '../../lib/crud/withMulti';	1✔
30
31	// Key is the algorithm/scenario name
32	type RecombeeCookieSettings = [string, RecombeeConfiguration][];
33
34	const titleWrapper = isLWorAF ? {	1!
35	marginBottom: 8
36	} : {
37	display: "flex",
38	marginBottom: 8,
39	flexWrap: "wrap",
40	alignItems: "center"
41	};
42
43	const styles = (theme: ThemeType) => ({	1✔
44	titleWrapper,
45	title: {
46	...sectionTitleStyle(theme),
47	display: "inline",
48	marginRight: "auto"
49	},
50	toggleFilters: {
51	[theme.breakpoints.up('sm')]: {
52	display: "none"
53	},
54	},
55	hide: {
56	display: "none"
57	},
58	hideOnMobile: {
59	[theme.breakpoints.down('sm')]: {
60	display: "none"
61	},
62	},
63	hideOnDesktop: {
64	[theme.breakpoints.up('md')]: {
65	display: "none"
66	},
67	},
68	settingsVisibilityControls: {
69	display: "flex",
70	gap: "4px",
71	marginBottom: "8px",
72	justifyContent: "space-between",
73	alignItems: "center",
74	},
75	})
76
77	const advancedSortingText = isFriendlyUI	1✔
78	? "Advanced sorting & filtering"	1!
79	: "Advanced Sorting/Filtering";
80
81	const defaultLimit = isFriendlyUI ? 11 : 13;	1!
82
83	const applyConstantFilters = (filterSettings: FilterSettings): FilterSettings => {	1✔
84	if (!isEAForum) {	×
85	return filterSettings;	×
86	}
87	const tags = filterSettings.tags.filter(	×
88	({tagId}) => tagId !== EA_FORUM_TRANSLATION_TOPIC_ID,	×
89	);
90	tags.push({	×
91	tagId: EA_FORUM_TRANSLATION_TOPIC_ID,
92	tagName: "Translation",
93	filterMode: "Hidden",
94	});
95	return {	×
96	...filterSettings,
97	tags,
98	};
99	}
100
101	const getDefaultDesktopFilterSettingsVisibility = (currentUser: UsersCurrent \| null, selectedAlgorithm?: string) => {	1✔
102	if (isFriendlyUI) {	×
103	return false;	×
104	}
105
106	return currentUser?.hideFrontpageFilterSettingsDesktop === false;	×
107	};
108
109	const getDefaultScenario = () => {	1✔
110	return postFeedsProductionSetting.get()[0].name;	×
111	};
112
113	const defaultScenarioConfig: RecombeeConfiguration = {	1✔
114	rotationRate: 0.1,
115	rotationTime: 12,
116	};
117
118	function useRecombeeSettings() {
119	const [cookies, setCookie] = useCookiesWithConsent();	×
120	const recombeeCookieSettings: RecombeeCookieSettings = cookies[RECOMBEE_SETTINGS_COOKIE] ?? [];	×
121	const [storedActiveScenario, storedActiveScenarioConfig] = recombeeCookieSettings[0] ?? [];	×
122	const [selectedScenario, setSelectedScenario] = useState(storedActiveScenario ?? getDefaultScenario());	×
123	const [scenarioConfig, setScenarioConfig] = useState(storedActiveScenarioConfig ?? defaultScenarioConfig);	×
124
125	const updateSelectedScenario = (newScenario: string) => {	×
126	// If we don't yet have this cookie, or have this scenario stored in the cookie, add it as the first item
127	// Otherwise, reorder the existing scenario + config tuples to have that scenario be first
128	const newCookieValue: RecombeeCookieSettings = !recombeeCookieSettings?.find(([scenario]) => newScenario === scenario)	×
129	? [[newScenario, defaultScenarioConfig], ...(recombeeCookieSettings ?? [])]	×
130	: [...recombeeCookieSettings].sort((a, b) => a[0] === newScenario ? -1 : 0);	×
131
132	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });	×
133
134	const [_, newScenarioConfig] = newCookieValue[0];	×
135	setSelectedScenario(newScenario);	×
136	setScenarioConfig(newScenarioConfig);	×
137	};
138
139	const updateScenarioConfig = (newScenarioConfig: RecombeeConfiguration) => {	×
140	const newCookieValue: RecombeeCookieSettings = [...recombeeCookieSettings];	×
141	newCookieValue[0][1] = newScenarioConfig;	×
142	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });	×
143	setScenarioConfig(newScenarioConfig);	×
144	};
145
146	useEffect(() => {	×
147	if (recombeeCookieSettings.length === 0) {	×
148	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify([[getDefaultScenario(), defaultScenarioConfig]]), { path: '/' });	×
149	}
150	// eslint-disable-next-line react-hooks/exhaustive-deps
151	}, []);
152
153	return {	×
154	selectedScenario, updateSelectedScenario,
155	scenarioConfig, updateScenarioConfig
156	};
157	}
158
159	function usingClassicLWAlgorithm(selectedScenario: string) {
160	return selectedScenario === 'lesswrong-classic';	×
161	}
162
163	const RecombeeLatestPosts = ({ currentUser, classes }: {	1✔
164	currentUser: UsersCurrent
165	classes: ClassesType<typeof styles>
166	}) => {
167	const {
168	SingleColumnSection, PostsList2, TagFilterSettings,
169	StickiedPosts, RecombeePostsList, RecombeePostsListSettings, SettingsButton,
170	TabPicker, ResolverPostsList, BookmarksList, ContinueReadingList
171	} = Components;	×
172
173	const updateCurrentUser = useUpdateCurrentUser();	×
174
175	const { selectedScenario, updateSelectedScenario, scenarioConfig, updateScenarioConfig } = useRecombeeSettings();	×
176
177	const {filterSettings, setPersonalBlogFilter, setTagFilter, removeTagFilter} = useFilterSettings()	×
178	// While hiding desktop settings is stateful over time, on mobile the filter settings always start out hidden
179	// (except that on the EA Forum/FriendlyUI it always starts out hidden)
180	const defaultDesktopFilterSettingsVisibility = getDefaultDesktopFilterSettingsVisibility(currentUser, selectedScenario);	×
181	const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(defaultDesktopFilterSettingsVisibility);	×
182	const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);	×
183	const { captureEvent } = useTracking({eventProps: {recombee: true}})	×
184
185	const location = useLocation();	×
186	const { query } = location;	×
187
188	const { timezone } = useTimezone();	×
189	const now = useCurrentTime();	×
190	const dateCutoff = moment(now).tz(timezone).subtract(frontpageDaysAgoCutoffSetting.get(), 'days').format("YYYY-MM-DD");	×
191
192	const limit = parseInt(query.limit) \|\| defaultLimit;	×
193	const recentPostsTerms = {	×
194	...query,
195	filterSettings: applyConstantFilters(filterSettings),
196	after: dateCutoff,
197	view: "magic",
198	forum: true,
199	limit:limit
200	};
201
202	const {continueReading} = useContinueReading()	×
203
204	const { count: countBookmarks } = useMulti({	×
205	collectionName: "Posts",
206	terms: {
207	view: "myBookmarkedPosts",
208	},
209	fragmentName: "PostsListWithVotes",
210	fetchPolicy: "cache-and-network",
211	skip: !currentUser?._id,	×
212	});
213
214
215	const changeShowTagFilterSettingsDesktop = () => {	×
216	setFilterSettingsVisibleDesktop(!filterSettingsVisibleDesktop)	×
217	if (isLWorAF) {	×
218	void updateCurrentUser({hideFrontpageFilterSettingsDesktop: filterSettingsVisibleDesktop})	×
219	}
220
221	captureEvent("filterSettingsClicked", {	×
222	settings: filterSettings,
223	filterSettingsVisible: filterSettingsVisibleDesktop,
224	pageSectionContext: "latestPosts",
225	})
226	};
227
228	const showSettingsButton = (userIsAdmin(currentUser) && selectedScenario.includes('recombee')) \|\| usingClassicLWAlgorithm(selectedScenario);	×
229
230	const settingsButton = (<div>	×
231	<SettingsButton
232	className={classes.hideOnMobile}
233	label={filterSettingsVisibleDesktop ?
234	filterSettingsToggleLabels.desktopVisible :	×
235	filterSettingsToggleLabels.desktopHidden}
236	showIcon={false}
237	onClick={changeShowTagFilterSettingsDesktop}
238	/>
239	<SettingsButton
240	className={classes.hideOnDesktop}
241	label={filterSettingsVisibleMobile ?
242	filterSettingsToggleLabels.mobileVisible :	×
243	filterSettingsToggleLabels.mobileHidden}
244	showIcon={false}
245	onClick={() => {
246	setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)	×
247	captureEvent("filterSettingsClicked", {	×
248	settingsVisible: !filterSettingsVisibleMobile,
249	settings: filterSettings,
250	pageSectionContext: "latestPosts",
251	mobile: true
252	})
253	}} />
254	</div>);
255
256	const availableAlgorithms: TabRecord[] = postFeedsProductionSetting.get().map(feed => ({ name: feed.name, label: feed.label, description: feed.description, disabled: feed.disabled }));	×
257
258	if (userIsAdmin(currentUser)) {	×
259	const testingFeeds = postFeedsTestingSetting.get().map(feed => ({ name: feed.name, label: feed.label, description: feed.description, disabled: feed.disabled }));	×
260	availableAlgorithms.push(...testingFeeds);	×
261	}
262
263	const enabledAlgorithms = availableAlgorithms	×
NEW 264	.filter(feed => !feed.disabled	×
265	&& !(feed.name === 'lesswrong-bookmarks' && (countBookmarks ?? 0) < 1)	×
266	&& !(feed.name === 'lesswrong-continue-reading' && continueReading?.length < 1)	×
267	)
268
269	console.log({selectedScenario, availableAlgorithms, enabledAlgorithms, })	×
270
271	const handleSwitchTab = (tabName: string) => {	×
272	captureEvent("postFeedSwitched", {	×
273	previousTab: selectedScenario,
274	newTab: tabName,
275	});
276	updateSelectedScenario(tabName);	×
277	}
278
279	const algorithmPicker = <TabPicker	×
280	sortedTabs={enabledAlgorithms}
281	defaultTab={selectedScenario}
282	onTabSelectionUpdate={handleSwitchTab}
283	showDescriptionOnHover
284	/>
285
286
287	let settings = null;	×
288
289	if (usingClassicLWAlgorithm(selectedScenario)) {	×
290	settings = <AnalyticsContext pageSectionContext="tagFilterSettings">	×
291	<div className={classNames({
292	[classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
293	[classes.hideOnMobile]: !filterSettingsVisibleMobile,
294	})}>
295	<TagFilterSettings
296	filterSettings={filterSettings} setPersonalBlogFilter={setPersonalBlogFilter} setTagFilter={setTagFilter} removeTagFilter={removeTagFilter}
297	/>
298	</div>
299	</AnalyticsContext>
300	} else if (selectedScenario.includes('recombee')) {	×
301	settings = <div className={classNames({	×
302	[classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
303	[classes.hideOnMobile]: !filterSettingsVisibleMobile,
304	})}>	×
305	{userIsAdmin(currentUser) && <RecombeePostsListSettings settings={scenarioConfig} updateSettings={updateScenarioConfig} />}
306	</div>
307	}
308
309	return (	×
310	// TODO: do we need capturePostItemOnMount here?
311	<AnalyticsContext pageSectionContext="postsFeed">
312	<SingleColumnSection>
313	<div className={classes.settingsVisibilityControls}>
314	{algorithmPicker}
315	{showSettingsButton && settingsButton}	×
316	</div>
317	{settings}
318	{isFriendlyUI && <StickiedPosts />}	×
319	{/* TODO: reenable, disabled for testing to see how often duplication happens */}
320	<HideRepeatedPostsProvider>
321	<AnalyticsContext listContext={"latestPosts"}>
322	{/* Allow hiding posts from the front page*/}
323	<AllowHidingFrontPagePostsContext.Provider value={true}>
324
325	{/* LATEST POSTS (Hacker News Algorithm) */}
326	{(selectedScenario === 'lesswrong-classic') && <AnalyticsContext feedType={selectedScenario}>	×
327	<PostsList2
328	terms={recentPostsTerms}
329	alwaysShowLoadMore
330	hideHiddenFrontPagePosts
331	>
332	<Link to={"/allPosts"}>{advancedSortingText}</Link>
333	</PostsList2>
334	</AnalyticsContext>}
335
336	{/* RECOMBEE RECOMMENDATIONS */}
337	{selectedScenario.includes('recombee') && <AnalyticsContext feedType={selectedScenario}>	×
338	<RecombeePostsList algorithm={selectedScenario} settings={scenarioConfig} />
339	</AnalyticsContext>}
340
341	{/* BOOKMARKS */}
342	{(selectedScenario === 'lesswrong-bookmarks') && <AnalyticsContext feedType={selectedScenario}>	×
343	<BookmarksList showMessageIfEmpty={true} limit={13} />
344	</AnalyticsContext>}
345
346	{/* CONTINUE READING */}
347	{(selectedScenario === 'lesswrong-continue-reading') && (continueReading?.length > 0) && <AnalyticsContext feedType={selectedScenario}>	×
348	<ContinueReadingList continueReading={continueReading}/>
349	</AnalyticsContext>}
350
351	{/* SUBSCRIBED */}
352	{(selectedScenario === 'lesswrong-subscribed-authors') && <AnalyticsContext feedType={selectedScenario}>	×
353	<ResolverPostsList
354	resolverName="PostsBySubscribedAuthors"
355	limit={13}
356	fallbackText="Visits users' profile pages to subscribe to their posts and comments."
357	showLoadMore
358	/>
359	</AnalyticsContext>}
360
361	{/* CHRONOLIGCAL FEED */}
362	{(selectedScenario === 'lesswrong-chronological') && <AnalyticsContext feedType={selectedScenario}>	×
363	<PostsList2
364	terms={{...recentPostsTerms, view: "new"}}
365	alwaysShowLoadMore
366	hideHiddenFrontPagePosts
367	>
368	<Link to={"/allPosts"}>{advancedSortingText}</Link>
369	</PostsList2>
370	</AnalyticsContext>}
371
372	</AllowHidingFrontPagePostsContext.Provider>
373	</AnalyticsContext>
374	</HideRepeatedPostsProvider>
375	</SingleColumnSection>
376	</AnalyticsContext>
377	)
378	}
379
380	const RecombeeLatestPostsComponent = registerComponent('RecombeeLatestPosts', RecombeeLatestPosts, {styles});	1✔
381
382	declare global {
383	interface ComponentTypes {
384	RecombeeLatestPosts: typeof RecombeeLatestPostsComponent
385	}
386	}

ForumMagnum / ForumMagnum / 8729761091

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