9107887036

Committed 16 May 2024 06:59AM UTC coverage: 31.856% (-0.05%) from 31.909%

Build # 9107887036

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9288 from ForumMagnum/fix-dst-latestposts-flash

Fix SSR mismatch/rerender if 90-days-ago crosses a DST boundary

Run Details

4784 of 39140 branches covered (12.22%)

Branch coverage included in aggregate %.

2 of 13 new or added lines in 9 files covered. (15.38%)

1 existing line in 1 file now uncovered.

27831 of 63244 relevant lines covered (44.01%)

179.39 hits per line

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

16.33

/packages/lesswrong/components/common/LWHomePosts.tsx

import React, { useEffect, 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 { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';
import { useFilterSettings } from '../../lib/filterSettings';
import moment from '../../lib/moment-timezone';
import { useCurrentTime } from '../../lib/utils/timeUtil';
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 { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';
import { useMulti } from '../../lib/crud/withMulti';
import { useContinueReading } from '../recommendations/withContinueReading';
import { userIsAdmin } from '../../lib/vulcan-users/permissions';
import { TabRecord } from './TabPicker';
import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';
import { RECOMBEE_SETTINGS_COOKIE } from '../../lib/cookies/cookies';
import { RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
import { PostFeedDetails, homepagePostFeedsSetting } from '../../lib/instanceSettings';
import { gql, useMutation } from '@apollo/client';
import { vertexEnabledSetting } from '../../lib/publicSettings';

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

const styles = (theme: ThemeType) => ({
  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"
    },
  },
  titleWrapper: {
    marginBottom: 8
  },
  settingsVisibilityControls: {
    display: "flex",
    marginBottom: "8px",
    justifyContent: "space-between",
    alignItems: "center",
  },
  loggedOutTagFilterSettingsAlignment: {
    flexDirection: "column",
  },
  tabPicker: {
    minWidth: 0,
    marginRight: 10,
  },
  tagFilterSettingsButtonContainerDesktop: {
    [theme.breakpoints.up('md')]: {
      alignSelf: "end",
      opacity: 0.8,
      display: "flex",
      border: theme.palette.greyBorder("1px", 0.07),
      borderRadius: 3,
      background: theme.palette.panelBackground.default,
      padding: "5.5px",
      [theme.breakpoints.down('xs')]: {
        padding: "4.5px",
      },  
    },
    [theme.breakpoints.down('sm')]: {
      display: "none",
    },
  },
  tagFilterSettingsButtonContainerMobile: {
    [theme.breakpoints.down('sm')]: {
      alignSelf: "end",
      opacity: 0.8,
    },
    [theme.breakpoints.up('md')]: {
      display: "none",
    },
  },
  tagFilterSettingsButtonContainerMobileBackground: {
    [theme.breakpoints.down('sm')]: {
      display: "flex",
      border: theme.palette.greyBorder("1px", 0.07),
      borderRadius: 3,
      background: theme.palette.panelBackground.default,
      padding: "5.5px",
      [theme.breakpoints.down('xs')]: {
        padding: "4.5px",
      },
    },
    [theme.breakpoints.up('md')]: {
      display: "none",
    },
  },
  tagFilterSettingsButton: {
  },
})

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

const advancedSortingText = "Advanced Sorting/Filtering";

const defaultLimit = 13;

const getDefaultDesktopFilterSettingsVisibility = (currentUser: UsersCurrent | null, selectedAlgorithm?: string) => {
  if (!currentUser) {
    return true
  }

  // Hide unless user has explicitly set it to visible
  return currentUser?.hideFrontpageFilterSettingsDesktop === false;
};

const getDefaultTab = (currentUser: UsersCurrent|null, enabledTabs: TabRecord[]) => {
  const defaultTab = homepagePostFeedsSetting.get()[0].name;

  // If the user has a selected tab that is not in the list of enabled tabs, default to the first enabled tab
  if (!!currentUser?.frontpageSelectedTab && !enabledTabs.map(tab => tab.name).includes(currentUser.frontpageSelectedTab)) {
    return defaultTab;
  }

  return currentUser?.frontpageSelectedTab ?? defaultTab;
};

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


function useRecombeeSettings(currentUser: UsersCurrent|null, enabledTabs: TabRecord[]) {
  const [cookies, setCookie] = useCookiesWithConsent();
  const recombeeCookieSettings: RecombeeCookieSettings = cookies[RECOMBEE_SETTINGS_COOKIE] ?? [];
  const [storedActiveScenario, storedActiveScenarioConfig] = recombeeCookieSettings[0] ?? [];
  const [selectedScenario, setSelectedScenario] = useState(storedActiveScenario ?? getDefaultTab(currentUser, enabledTabs));
  const [scenarioConfig, setScenarioConfig] = useState(storedActiveScenarioConfig ?? defaultRecombeeConfig);

  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, defaultRecombeeConfig], ...(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([[getDefaultTab(currentUser, enabledTabs), defaultRecombeeConfig]]), { path: '/' });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

const LWHomePosts = ({children, classes}: {
  children: React.ReactNode,
  classes: ClassesType<typeof styles>}
) => {
  const { SingleColumnSection, PostsList2, TagFilterSettings, RecombeePostsList, CuratedPostsList,
    RecombeePostsListSettings, SettingsButton, TabPicker, BookmarksList, ContinueReadingList,
    VertexPostsList, WelcomePostItem, SubscribedUsersFeed } = Components;

  const { captureEvent } = useTracking() 

  const currentUser = useCurrentUser();
  const updateCurrentUser = useUpdateCurrentUser();
  const { query } = useLocation();
  const now = useCurrentTime();
  const { continueReading } = useContinueReading()

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

  const [sendVertexViewHomePageEvent] = useMutation(gql`
    mutation sendVertexViewHomePageEventMutation {
      sendVertexViewHomePageEvent
    }
  `, {
    ignoreResults: true
  });

  const availableTabs: PostFeedDetails[] = homepagePostFeedsSetting.get()
  const enabledTabs = availableTabs
    .filter(feed => !feed.disabled
      && (!feed.adminOnly || (userIsAdmin(currentUser) || query.experimentalTabs === 'true')) 
      && !(feed.name === 'forum-bookmarks' && (countBookmarks ?? 0) < 1)
      && !(feed.name === 'forum-continue-reading' && continueReading?.length < 1)
    )

  const [selectedTab, setSelectedTab] = useState(getDefaultTab(currentUser, enabledTabs));
  const selectedTabSettings = availableTabs.find(t=>t.name===selectedTab)!;

  const { scenarioConfig, updateScenarioConfig } = useRecombeeSettings(currentUser, enabledTabs);

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

    setSelectedTab(tabName);  
    void updateCurrentUser({frontpageSelectedTab: tabName}) // updates persistent user setting
  }

  // While hiding desktop settings is stateful over time, on mobile the filter settings always start out hidden
  const {filterSettings, setPersonalBlogFilter, setTagFilter, removeTagFilter} = useFilterSettings()
  const defaultDesktopFilterSettingsVisibility = getDefaultDesktopFilterSettingsVisibility(currentUser, selectedTab);
  const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(defaultDesktopFilterSettingsVisibility);
  const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);

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


  /* Intended behavior for filter settings button visibility:
  - DESKTOP
  -- logged-out: no (default open)
  -- logged-in: yes (default closed)

  - MOBILE
  -- logged-out: yes (default closed)
  -- logged-in: yes (default closed)
  */


  const showSettingsButton = (selectedTab === 'forum-classic') || (userIsAdmin(currentUser) && selectedTab.includes('recombee'));
  const desktopSettingsButtonLabel = filterSettingsVisibleMobile ? 'Hide' : 'Customize'

  const settingsButton = (<>
    {/* Desktop button */}
    <div className={classNames({ [classes.hide]: !currentUser, [classes.tagFilterSettingsButtonContainerDesktop]: !!currentUser })}>
      <SettingsButton
        showIcon={!!currentUser}
        onClick={changeShowTagFilterSettingsDesktop}
      />
    </div>
    {/* Mobile button */}
    <div className={classNames(classes.tagFilterSettingsButtonContainerMobile, { [classes.tagFilterSettingsButtonContainerMobileBackground]: !!currentUser })}>
      <SettingsButton
        label={!currentUser ? desktopSettingsButtonLabel : undefined}
        showIcon={!!currentUser}
        onClick={() => {
          setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)
          captureEvent("filterSettingsClicked", {
            settingsVisible: !filterSettingsVisibleMobile,
            settings: filterSettings,
            pageSectionContext: "latestPosts",
            mobile: true
          })
        }} />
      </div>
  </>);


  let settings = null;

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

  const limit = parseInt(query.limit) || defaultLimit;
  const dateCutoff = moment(now).subtract(frontpageDaysAgoCutoffSetting.get()*24, 'hours').startOf('hour').toISOString();

  const recentPostsTerms = {
    ...query,
    filterSettings,
    after: dateCutoff,
    view: "magic",
    forum: true,
    limit:limit
  };

  useEffect(() => {
    if (currentUser && vertexEnabledSetting.get()) {
      void sendVertexViewHomePageEvent();
    }
    // We explicitly only want to send it once on page load, no matter what changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    // TODO: do we need capturePostItemOnMount here?
    <AnalyticsContext pageSectionContext="postsFeed">
      <SingleColumnSection>
        <div className={classNames(classes.settingsVisibilityControls, {[classes.loggedOutTagFilterSettingsAlignment]: !currentUser})}>
          {!!currentUser && <div className={classes.tabPicker}>
            <TabPicker 
              sortedTabs={enabledTabs} 
              defaultTab={selectedTab} 
              onTabSelectionUpdate={handleSwitchTab}
              showDescriptionOnHover
            />
          </div>}
          {showSettingsButton && settingsButton}
        </div>
        {settings}
        {/* TODO: reenable, disabled for testing to see how often duplication happens */}
        <HideRepeatedPostsProvider>
            {/* Allow hiding posts from the front page*/}
            <AllowHidingFrontPagePostsContext.Provider value={true}>

              {/* LATEST POSTS (Hacker News Algorithm) */}
              {/* Frustratingly, the AnalyticsContext update doesn't update upon switching tab so it's necessary to have a wrapper around each section individually, could be investigated further */}
              {(selectedTab === 'forum-classic') && <AnalyticsContext feedType={selectedTab}>
                <WelcomePostItem />
                <CuratedPostsList overrideLimit={2}/>
                <PostsList2 
                  terms={recentPostsTerms} 
                  alwaysShowLoadMore 
                  hideHiddenFrontPagePosts
                >
                  <Link to={"/allPosts"}>{advancedSortingText}</Link>
                </PostsList2> 
              </AnalyticsContext>}
              
              {/* ENRICHED LATEST POSTS */}
              {selectedTab === 'recombee-hybrid' && <AnalyticsContext feedType={selectedTab}>
                <RecombeePostsList 
                  showRecommendationIcon
                  algorithm={'recombee-hybrid'} 
                  settings={{
                    ...scenarioConfig,
                    hybridScenarios: {
                      fixed: 'forum-classic', 
                      configurable: 'recombee-lesswrong-custom'
                    }
                  }} 
                />
              </AnalyticsContext>}

              {/* JUST RECOMMENDATIONS */}
              {selectedTab === 'recombee-lesswrong-custom' && <AnalyticsContext feedType={selectedTab}>
                <RecombeePostsList algorithm={'recombee-lesswrong-custom'} settings={scenarioConfig} showRecommendationIcon />
              </AnalyticsContext>}

              {/* VERTEX RECOMMENDATIONS */}
              {selectedTab.startsWith('vertex-') && <AnalyticsContext feedType={selectedTab}>
                <VertexPostsList />  
              </AnalyticsContext>}

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

              {/* SUBSCRIBED */}
              {(selectedTab === 'forum-subscribed-authors') && <AnalyticsContext feedType={selectedTab}>
                <SubscribedUsersFeed />
               </AnalyticsContext>}

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

            </AllowHidingFrontPagePostsContext.Provider>
        </HideRepeatedPostsProvider>
        
        {!selectedTabSettings.isInfiniteScroll && <>
          {children}
        </>}
      </SingleColumnSection>
    </AnalyticsContext>
  )


}

const LWHomePostsComponent = registerComponent('LWHomePosts', LWHomePosts, {styles});

declare global {
  interface ComponentTypes {
    LWHomePosts: typeof LWHomePostsComponent
  }
}

1	import React, { useEffect, 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 { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';	1✔
7	import { useFilterSettings } from '../../lib/filterSettings';	1✔
8	import moment from '../../lib/moment-timezone';	1✔
9	import { useCurrentTime } from '../../lib/utils/timeUtil';	1✔
10	import { sectionTitleStyle } from '../common/SectionTitle';	1✔
11	import { AllowHidingFrontPagePostsContext } from '../dropdowns/posts/PostActions';	1✔
12	import { HideRepeatedPostsProvider } from '../posts/HideRepeatedPostsContext';	1✔
13	import classNames from 'classnames';	1✔
14	import {useUpdateCurrentUser} from "../hooks/useUpdateCurrentUser";	1✔
15	import { frontpageDaysAgoCutoffSetting } from '../../lib/scoring';	1✔
16	import { useMulti } from '../../lib/crud/withMulti';	1✔
17	import { useContinueReading } from '../recommendations/withContinueReading';	1✔
18	import { userIsAdmin } from '../../lib/vulcan-users/permissions';	1✔
19	import { TabRecord } from './TabPicker';
20	import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';	1✔
21	import { RECOMBEE_SETTINGS_COOKIE } from '../../lib/cookies/cookies';	1✔
22	import { RecombeeConfiguration } from '../../lib/collections/users/recommendationSettings';
23	import { PostFeedDetails, homepagePostFeedsSetting } from '../../lib/instanceSettings';	1✔
24	import { gql, useMutation } from '@apollo/client';	1✔
25	import { vertexEnabledSetting } from '../../lib/publicSettings';	1✔
26
27	// Key is the algorithm/tab name
28	type RecombeeCookieSettings = [string, RecombeeConfiguration][];
29
30	const styles = (theme: ThemeType) => ({	1✔
31	title: {
32	...sectionTitleStyle(theme),
33	display: "inline",
34	marginRight: "auto"
35	},
36	toggleFilters: {
37	[theme.breakpoints.up('sm')]: {
38	display: "none"
39	},
40	},
41	hide: {
42	display: "none"
43	},
44	hideOnMobile: {
45	[theme.breakpoints.down('sm')]: {
46	display: "none"
47	},
48	},
49	hideOnDesktop: {
50	[theme.breakpoints.up('md')]: {
51	display: "none"
52	},
53	},
54	titleWrapper: {
55	marginBottom: 8
56	},
57	settingsVisibilityControls: {
58	display: "flex",
59	marginBottom: "8px",
60	justifyContent: "space-between",
61	alignItems: "center",
62	},
63	loggedOutTagFilterSettingsAlignment: {
64	flexDirection: "column",
65	},
66	tabPicker: {
67	minWidth: 0,
68	marginRight: 10,
69	},
70	tagFilterSettingsButtonContainerDesktop: {
71	[theme.breakpoints.up('md')]: {
72	alignSelf: "end",
73	opacity: 0.8,
74	display: "flex",
75	border: theme.palette.greyBorder("1px", 0.07),
76	borderRadius: 3,
77	background: theme.palette.panelBackground.default,
78	padding: "5.5px",
79	[theme.breakpoints.down('xs')]: {
80	padding: "4.5px",
81	},
82	},
83	[theme.breakpoints.down('sm')]: {
84	display: "none",
85	},
86	},
87	tagFilterSettingsButtonContainerMobile: {
88	[theme.breakpoints.down('sm')]: {
89	alignSelf: "end",
90	opacity: 0.8,
91	},
92	[theme.breakpoints.up('md')]: {
93	display: "none",
94	},
95	},
96	tagFilterSettingsButtonContainerMobileBackground: {
97	[theme.breakpoints.down('sm')]: {
98	display: "flex",
99	border: theme.palette.greyBorder("1px", 0.07),
100	borderRadius: 3,
101	background: theme.palette.panelBackground.default,
102	padding: "5.5px",
103	[theme.breakpoints.down('xs')]: {
104	padding: "4.5px",
105	},
106	},
107	[theme.breakpoints.up('md')]: {
108	display: "none",
109	},
110	},
111	tagFilterSettingsButton: {
112	},
113	})
114
115	export const filterSettingsToggleLabels = {	1✔
116	desktopVisible: "Customize (Hide)",
117	desktopHidden: "Customize",
118	mobileVisible: "Customize (Hide)",
119	mobileHidden: "Customize",
120	}
121
122	const advancedSortingText = "Advanced Sorting/Filtering";	1✔
123
124	const defaultLimit = 13;	1✔
125
126	const getDefaultDesktopFilterSettingsVisibility = (currentUser: UsersCurrent \| null, selectedAlgorithm?: string) => {	1✔
127	if (!currentUser) {	×
128	return true	×
129	}
130
131	// Hide unless user has explicitly set it to visible
132	return currentUser?.hideFrontpageFilterSettingsDesktop === false;	×
133	};
134
135	const getDefaultTab = (currentUser: UsersCurrent\|null, enabledTabs: TabRecord[]) => {	1✔
136	const defaultTab = homepagePostFeedsSetting.get()[0].name;	×
137
138	// If the user has a selected tab that is not in the list of enabled tabs, default to the first enabled tab
139	if (!!currentUser?.frontpageSelectedTab && !enabledTabs.map(tab => tab.name).includes(currentUser.frontpageSelectedTab)) {	×
140	return defaultTab;	×
141	}
142
143	return currentUser?.frontpageSelectedTab ?? defaultTab;	×
144	};
145
146	const defaultRecombeeConfig: RecombeeConfiguration = {	1✔
147	rotationRate: 0.1,
148	rotationTime: 12,
149	};
150
151
152	function useRecombeeSettings(currentUser: UsersCurrent\|null, enabledTabs: TabRecord[]) {
153	const [cookies, setCookie] = useCookiesWithConsent();	×
154	const recombeeCookieSettings: RecombeeCookieSettings = cookies[RECOMBEE_SETTINGS_COOKIE] ?? [];	×
155	const [storedActiveScenario, storedActiveScenarioConfig] = recombeeCookieSettings[0] ?? [];	×
156	const [selectedScenario, setSelectedScenario] = useState(storedActiveScenario ?? getDefaultTab(currentUser, enabledTabs));	×
157	const [scenarioConfig, setScenarioConfig] = useState(storedActiveScenarioConfig ?? defaultRecombeeConfig);	×
158
159	const updateSelectedScenario = (newScenario: string) => {	×
160	// If we don't yet have this cookie, or have this scenario stored in the cookie, add it as the first item
161	// Otherwise, reorder the existing scenario + config tuples to have that scenario be first
162	const newCookieValue: RecombeeCookieSettings = !recombeeCookieSettings?.find(([scenario]) => newScenario === scenario)	×
163	? [[newScenario, defaultRecombeeConfig], ...(recombeeCookieSettings ?? [])]	×
164	: [...recombeeCookieSettings].sort((a, b) => a[0] === newScenario ? -1 : 0);	×
165
166	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });	×
167
168	const [_, newScenarioConfig] = newCookieValue[0];	×
169	setSelectedScenario(newScenario);	×
170	setScenarioConfig(newScenarioConfig);	×
171	};
172
173	const updateScenarioConfig = (newScenarioConfig: RecombeeConfiguration) => {	×
174	const newCookieValue: RecombeeCookieSettings = [...recombeeCookieSettings];	×
175	newCookieValue[0][1] = newScenarioConfig;	×
176	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify(newCookieValue), { path: '/' });	×
177	setScenarioConfig(newScenarioConfig);	×
178	};
179
180	useEffect(() => {	×
181	if (recombeeCookieSettings.length === 0) {	×
182	setCookie(RECOMBEE_SETTINGS_COOKIE, JSON.stringify([[getDefaultTab(currentUser, enabledTabs), defaultRecombeeConfig]]), { path: '/' });	×
183	}
184	// eslint-disable-next-line react-hooks/exhaustive-deps
185	}, []);
186
187	return {	×
188	selectedScenario, updateSelectedScenario,
189	scenarioConfig, updateScenarioConfig
190	};
191	}
192
193	const LWHomePosts = ({children, classes}: {	1✔
194	children: React.ReactNode,
195	classes: ClassesType<typeof styles>}
196	) => {
197	const { SingleColumnSection, PostsList2, TagFilterSettings, RecombeePostsList, CuratedPostsList,
198	RecombeePostsListSettings, SettingsButton, TabPicker, BookmarksList, ContinueReadingList,
199	VertexPostsList, WelcomePostItem, SubscribedUsersFeed } = Components;	×
200
201	const { captureEvent } = useTracking()	×
202
203	const currentUser = useCurrentUser();	×
204	const updateCurrentUser = useUpdateCurrentUser();	×
205	const { query } = useLocation();	×
206	const now = useCurrentTime();	×
207	const { continueReading } = useContinueReading()	×
208
209	const { count: countBookmarks } = useMulti({	×
210	collectionName: "Posts",
211	terms: {
212	view: "myBookmarkedPosts",
213	},
214	fragmentName: "PostsListWithVotes",
215	fetchPolicy: "cache-and-network",
216	skip: !currentUser?._id,	×
217	});
218
219	const [sendVertexViewHomePageEvent] = useMutation(gql`	×
220	mutation sendVertexViewHomePageEventMutation {
221	sendVertexViewHomePageEvent
222	}
223	`, {
224	ignoreResults: true
225	});
226
227	const availableTabs: PostFeedDetails[] = homepagePostFeedsSetting.get()	×
228	const enabledTabs = availableTabs	×
229	.filter(feed => !feed.disabled	×
230	&& (!feed.adminOnly \|\| (userIsAdmin(currentUser) \|\| query.experimentalTabs === 'true'))
231	&& !(feed.name === 'forum-bookmarks' && (countBookmarks ?? 0) < 1)	×
232	&& !(feed.name === 'forum-continue-reading' && continueReading?.length < 1)	×
233	)
234
235	const [selectedTab, setSelectedTab] = useState(getDefaultTab(currentUser, enabledTabs));	×
236	const selectedTabSettings = availableTabs.find(t=>t.name===selectedTab)!;	×
237
238	const { scenarioConfig, updateScenarioConfig } = useRecombeeSettings(currentUser, enabledTabs);	×
239
240	const handleSwitchTab = (tabName: string) => {	×
241	captureEvent("postFeedSwitched", {	×
242	previousTab: selectedTab,
243	newTab: tabName,
244	});
245
246	setSelectedTab(tabName);	×
247	void updateCurrentUser({frontpageSelectedTab: tabName}) // updates persistent user setting	×
248	}
249
250	// While hiding desktop settings is stateful over time, on mobile the filter settings always start out hidden
251	const {filterSettings, setPersonalBlogFilter, setTagFilter, removeTagFilter} = useFilterSettings()	×
252	const defaultDesktopFilterSettingsVisibility = getDefaultDesktopFilterSettingsVisibility(currentUser, selectedTab);	×
253	const [filterSettingsVisibleDesktop, setFilterSettingsVisibleDesktop] = useState(defaultDesktopFilterSettingsVisibility);	×
254	const [filterSettingsVisibleMobile, setFilterSettingsVisibleMobile] = useState(false);	×
255
256	const changeShowTagFilterSettingsDesktop = () => {	×
257	setFilterSettingsVisibleDesktop(!filterSettingsVisibleDesktop)	×
258	void updateCurrentUser({hideFrontpageFilterSettingsDesktop: filterSettingsVisibleDesktop})	×
259
260	captureEvent("filterSettingsClicked", {	×
261	settings: filterSettings,
262	filterSettingsVisible: filterSettingsVisibleDesktop,
263	pageSectionContext: "HomePosts",
264	})
265	};
266
267
268	/* Intended behavior for filter settings button visibility:
269	- DESKTOP
270	-- logged-out: no (default open)
271	-- logged-in: yes (default closed)
272
273	- MOBILE
274	-- logged-out: yes (default closed)
275	-- logged-in: yes (default closed)
276	*/
277
278
279	const showSettingsButton = (selectedTab === 'forum-classic') \|\| (userIsAdmin(currentUser) && selectedTab.includes('recombee'));	×
280	const desktopSettingsButtonLabel = filterSettingsVisibleMobile ? 'Hide' : 'Customize'	×
281
282	const settingsButton = (<>	×
283	{/* Desktop button */}
284	<div className={classNames({ [classes.hide]: !currentUser, [classes.tagFilterSettingsButtonContainerDesktop]: !!currentUser })}>
285	<SettingsButton
286	showIcon={!!currentUser}
287	onClick={changeShowTagFilterSettingsDesktop}
288	/>
289	</div>
290	{/* Mobile button */}
291	<div className={classNames(classes.tagFilterSettingsButtonContainerMobile, { [classes.tagFilterSettingsButtonContainerMobileBackground]: !!currentUser })}>
292	<SettingsButton
293	label={!currentUser ? desktopSettingsButtonLabel : undefined}	×
294	showIcon={!!currentUser}
295	onClick={() => {
296	setFilterSettingsVisibleMobile(!filterSettingsVisibleMobile)	×
297	captureEvent("filterSettingsClicked", {	×
298	settingsVisible: !filterSettingsVisibleMobile,
299	settings: filterSettings,
300	pageSectionContext: "latestPosts",
301	mobile: true
302	})
303	}} />
304	</div>
305	</>);
306
307
308	let settings = null;	×
309
310	if (selectedTab === 'forum-classic') {	×
311	settings = <AnalyticsContext pageSectionContext="tagFilterSettings">	×
312	<div className={classNames({
313	[classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
314	[classes.hideOnMobile]: !filterSettingsVisibleMobile,
315	})}>
316	<TagFilterSettings
317	filterSettings={filterSettings}
318	setPersonalBlogFilter={setPersonalBlogFilter}
319	setTagFilter={setTagFilter}
320	removeTagFilter={removeTagFilter}
321	flexWrapEndGrow={false}
322	/>
323	</div>
324	</AnalyticsContext>
325	} else if (selectedTab.includes('recombee')) {	×
326	settings = <div className={classNames({	×
327	[classes.hideOnDesktop]: !filterSettingsVisibleDesktop,
328	[classes.hideOnMobile]: !filterSettingsVisibleMobile,
329	})}>	×
330	{userIsAdmin(currentUser) && <RecombeePostsListSettings settings={scenarioConfig} updateSettings={updateScenarioConfig} />}
331	</div>
332	}
333
334	const limit = parseInt(query.limit) \|\| defaultLimit;	×
NEW 335	const dateCutoff = moment(now).subtract(frontpageDaysAgoCutoffSetting.get()*24, 'hours').startOf('hour').toISOString();	×
336
337	const recentPostsTerms = {	×
338	...query,
339	filterSettings,
340	after: dateCutoff,
341	view: "magic",
342	forum: true,
343	limit:limit
344	};
345
346	useEffect(() => {	×
347	if (currentUser && vertexEnabledSetting.get()) {	×
348	void sendVertexViewHomePageEvent();	×
349	}
350	// We explicitly only want to send it once on page load, no matter what changes
351	// eslint-disable-next-line react-hooks/exhaustive-deps
352	}, []);
353
354	return (	×
355	// TODO: do we need capturePostItemOnMount here?
356	<AnalyticsContext pageSectionContext="postsFeed">
357	<SingleColumnSection>
358	<div className={classNames(classes.settingsVisibilityControls, {[classes.loggedOutTagFilterSettingsAlignment]: !currentUser})}>
359	{!!currentUser && <div className={classes.tabPicker}>	×
360	<TabPicker
361	sortedTabs={enabledTabs}
362	defaultTab={selectedTab}
363	onTabSelectionUpdate={handleSwitchTab}
364	showDescriptionOnHover
365	/>
366	</div>}
367	{showSettingsButton && settingsButton}	×
368	</div>
369	{settings}
370	{/* TODO: reenable, disabled for testing to see how often duplication happens */}
371	<HideRepeatedPostsProvider>
372	{/* Allow hiding posts from the front page*/}
373	<AllowHidingFrontPagePostsContext.Provider value={true}>
374
375	{/* LATEST POSTS (Hacker News Algorithm) */}
376	{/* Frustratingly, the AnalyticsContext update doesn't update upon switching tab so it's necessary to have a wrapper around each section individually, could be investigated further */}
377	{(selectedTab === 'forum-classic') && <AnalyticsContext feedType={selectedTab}>	×
378	<WelcomePostItem />
379	<CuratedPostsList overrideLimit={2}/>
380	<PostsList2
381	terms={recentPostsTerms}
382	alwaysShowLoadMore
383	hideHiddenFrontPagePosts
384	>
385	<Link to={"/allPosts"}>{advancedSortingText}</Link>
386	</PostsList2>
387	</AnalyticsContext>}
388
389	{/* ENRICHED LATEST POSTS */}
390	{selectedTab === 'recombee-hybrid' && <AnalyticsContext feedType={selectedTab}>	×
391	<RecombeePostsList
392	showRecommendationIcon
393	algorithm={'recombee-hybrid'}
394	settings={{
395	...scenarioConfig,
396	hybridScenarios: {
397	fixed: 'forum-classic',
398	configurable: 'recombee-lesswrong-custom'
399	}
400	}}
401	/>
402	</AnalyticsContext>}
403
404	{/* JUST RECOMMENDATIONS */}
405	{selectedTab === 'recombee-lesswrong-custom' && <AnalyticsContext feedType={selectedTab}>	×
406	<RecombeePostsList algorithm={'recombee-lesswrong-custom'} settings={scenarioConfig} showRecommendationIcon />
407	</AnalyticsContext>}
408
409	{/* VERTEX RECOMMENDATIONS */}
410	{selectedTab.startsWith('vertex-') && <AnalyticsContext feedType={selectedTab}>	×
411	<VertexPostsList />
412	</AnalyticsContext>}
413
414	{/* BOOKMARKS */}
415	{(selectedTab === 'forum-bookmarks') && <AnalyticsContext feedType={selectedTab}>	×
416	<BookmarksList showMessageIfEmpty={true} limit={13} />
417	</AnalyticsContext>}
418
419	{/* CONTINUE READING */}
420	{(selectedTab === 'forum-continue-reading') && (continueReading?.length > 0) && <AnalyticsContext feedType={selectedTab}>	×
421	<ContinueReadingList continueReading={continueReading} limit={6} shuffle />
422	</AnalyticsContext>}
423
424	{/* SUBSCRIBED */}
425	{(selectedTab === 'forum-subscribed-authors') && <AnalyticsContext feedType={selectedTab}>	×
426	<SubscribedUsersFeed />
427	</AnalyticsContext>}
428
429	{/* CHRONOLIGCAL FEED */}
430	{(selectedTab === 'forum-chronological') && <AnalyticsContext feedType={selectedTab}>	×
431	<PostsList2
432	terms={{...recentPostsTerms, view: "new"}}
433	alwaysShowLoadMore
434	hideHiddenFrontPagePosts
435	>
436	<Link to={"/allPosts"}>{advancedSortingText}</Link>
437	</PostsList2>
438	</AnalyticsContext>}
439
440	</AllowHidingFrontPagePostsContext.Provider>
441	</HideRepeatedPostsProvider>
442
443	{!selectedTabSettings.isInfiniteScroll && <>	×
444	{children}
445	</>}
446	</SingleColumnSection>
447	</AnalyticsContext>
448	)
449
450
451	}
452
453	const LWHomePostsComponent = registerComponent('LWHomePosts', LWHomePosts, {styles});	1✔
454
455	declare global {
456	interface ComponentTypes {
457	LWHomePosts: typeof LWHomePostsComponent
458	}
459	}

ForumMagnum / ForumMagnum / 9107887036

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