8760275898

Committed 19 Apr 2024 10:24PM UTC coverage: 32.053% (-0.03%) from 32.08%

Build # 8760275898

Build Type

Pull #9130

github

Committed by

b0b3rt

Commit Message

fix tag filter settings styling across platforms and logged in states

Pull Request Pull Request #9130: [LW] Frontpage Tabs for the masses (including a recommendations one)

Run Details

4686 of 38026 branches covered (12.32%)

Branch coverage included in aggregate %.

57 of 208 new or added lines in 15 files covered. (27.4%)

3 existing lines in 3 files now uncovered.

27184 of 61404 relevant lines covered (44.27%)

182.03 hits per line

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

17.13

/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 { useTimezone } from './withTimezone';
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 { homepagePostFeedsSetting } from '../../lib/instanceSettings';

// 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 = ({classes}: {classes: ClassesType<typeof styles>}) => {
  const { SingleColumnSection, PostsList2, TagFilterSettings, StickiedPosts, RecombeePostsList, CuratedPostsList,
    RecombeePostsListSettings, SettingsButton, TabPicker, ResolverPostsList, BookmarksList, ContinueReadingList,
    WelcomePostItem } = Components;

  const { captureEvent } = useTracking() 

  const currentUser = useCurrentUser();
  const updateCurrentUser = useUpdateCurrentUser();
  const { query } = useLocation();
  const { timezone } = useTimezone();
  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 availableTabs: TabRecord[] = homepagePostFeedsSetting.get().map(feed => ({ name: feed.name, label: feed.label, description: feed.description, disabled: feed.disabled }));

  const enabledTabs = availableTabs
    .filter(feed => !feed.disabled
      && !(feed.name.includes('recombee') && !currentUser)
      && !(feed.name === 'forum-bookmarks' && (countBookmarks ?? 0) < 1)
      && !(feed.name === 'forum-continue-reading' && continueReading?.length < 1)
    )
  const [selectedTab, setSelectedTab] = useState(getDefaultTab(currentUser, enabledTabs));

  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).tz(timezone).subtract(frontpageDaysAgoCutoffSetting.get(), 'days').format("YYYY-MM-DD");

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

  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>}
              
              {/* RECOMBEE RECOMMENDATIONS */}
              {selectedTab.includes('recombee') && <AnalyticsContext feedType={selectedTab}>
                <RecombeePostsList algorithm={selectedTab} settings={scenarioConfig} />
              </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}/>
              </AnalyticsContext>}

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

ForumMagnum / ForumMagnum / 8760275898

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