8724588177

Committed 17 Apr 2024 03:25PM UTC coverage: 32.052% (-0.005%) from 32.057%

Build # 8724588177

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9120 from ForumMagnum/friendly-post-item-ghost-in-more-places

[FriendlyUI only] post item ghost loading state in more places

Run Details

4664 of 37915 branches covered (12.3%)

Branch coverage included in aggregate %.

2 of 9 new or added lines in 4 files covered. (22.22%)

1 existing line in 1 file now uncovered.

27102 of 61193 relevant lines covered (44.29%)

182.68 hits per line

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

12.64

/packages/lesswrong/components/common/HomeTagBar.tsx

import React, {CSSProperties, useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {Components, registerComponent} from '../../lib/vulcan-lib'
import {AnalyticsContext, useTracking} from '../../lib/analyticsEvents.tsx'
import classNames from 'classnames'
import {useMulti} from '../../lib/crud/withMulti.ts'
import debounce from 'lodash/debounce'
import {useNavigate} from '../../lib/reactRouterWrapper.tsx'
import {useLocation} from '../../lib/routeUtil.tsx'
import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent.tsx'
import qs from 'qs'
import range from 'lodash/range'

const eventTabStyles = (invertColors: boolean) => ({
  backgroundColor: invertColors
    ? "var(--tag-bar-event-foreground)"
    : "var(--tag-bar-event-background)",
  color: invertColors
    ? "var(--tag-bar-event-background)"
    : "var(--tag-bar-event-foreground)",
  "&:hover": {
    backgroundColor: invertColors
      ? "var(--tag-bar-event-foreground)"
      : "var(--tag-bar-event-background)",
    color: invertColors
      ? "var(--tag-bar-event-background)"
      : "var(--tag-bar-event-foreground)",
    opacity: 0.9,
  },
});

const styles = (theme: ThemeType) => ({
  tabsSection: {
    marginTop: 10,
    marginBottom: 26,
    [theme.breakpoints.down('sm')]: {
      marginTop: 20,
    },
  },
  tabsRow: {
    position: 'relative',
  },
  tabsWindowContainer: {
    position: 'relative',
  },
  tabsWindow: {
    position: 'relative',
    overflowX: 'scroll',
    scrollbarWidth: 'none',
    '&::-webkit-scrollbar': {
      height: 0,
    },
  },
  leftFade: {
    '&:before': {
      position: 'absolute',
      top: 0,
      left: -1,
      height: '100%',
      width: 50,
      content: '\'\'',
      background: `linear-gradient(to right, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
      pointerEvents: 'none',
      zIndex: 1,
    },
  },
  rightFade: {
    '&:after': {
      position: 'absolute',
      top: 0,
      right: -1,
      height: '100%',
      width: 50,
      content: '\'\'',
      background: `linear-gradient(to left, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
      pointerEvents: 'none',
    },
  },
  arrow: {
    position: 'absolute',
    top: 0,
    height: 30,
    width: 28,
    color: theme.palette.grey[500],
    paddingTop: 7,
    paddingLeft: 6,
    cursor: 'pointer',
    '&:hover': {
      color: theme.palette.grey[700],
    },
    '@media (max-width: 840px)': {
      display: 'none',
    },
  },
  arrowIcon: {
    fontSize: 18,
  },
  leftArrow: {
    left: -30,
  },
  rightArrow: {
    right: -30,
  },
  topicsBar: {
    display: 'flex',
    columnGap: 8,
    whiteSpace: 'nowrap',
    transition: 'transform 0.2s ease',
    '@media (max-width: 840px)': {
      columnGap: 6,
    },
  },
  tab: {
    backgroundColor: theme.palette.grey[200],
    color: theme.palette.grey[900],
    fontFamily: theme.typography.fontFamily,
    fontSize: 14,
    lineHeight: '23px',
    fontWeight: '500',
    padding: '4px 8px',
    borderRadius: 6,
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: theme.palette.grey[300],
    },
    '@media (max-width: 840px)': {
      fontSize: 12,
      lineHeight: '18px',
      padding: '4px 6px',
    },
  },
  activeTab: {
    backgroundColor: theme.palette.grey[1000],
    color: theme.palette.grey[0],
    '&:hover': {
      backgroundColor: theme.palette.grey[1000],
    },
  },
  eventTab: {
    ...eventTabStyles(theme.themeOptions.name === "dark"),
  },
  activeEventTab: {
    ...eventTabStyles(theme.themeOptions.name !== "dark"),
  },
  placeholderTab: {
    flex: 'none',
    height: 31,
    width: 110,
    background: theme.palette.panelBackground.placeholderGradient,
    backgroundSize: "300% 100%",
    animation: "profile-image-loader 1.8s infinite",
    cursor: 'default',
    '&:hover': {
      background: theme.palette.panelBackground.placeholderGradient,
      backgroundSize: "300% 100%",
    },
    '@media (max-width: 840px)': {
      height: 26,
      width: 100,
    },
  },
  tagDescriptionTooltip: {
    margin: 8,
  }
})

export type TopicsBarTab = {
  _id: string,
  name: string,
  shortName?: string | null,
  slug?: string,
  description?: TagFragment_description | null,
}

/**
 * A horizontal bar of clickable tabs that can be used to filter content by tag. 
 * By default - displays core tags in order defined by defaultOrder. Used on EA and WakingUP home pages.
 * 
 * @param frontpageTab - Description for "show everything" tab
 * @param sortTopics - you can define custom ordering/additional filtering for the tabs
 */
const HomeTagBar = (
  {
    classes,
    onTagSelectionUpdated,
    frontpageTab,
    sortTopics = (topics: Array<TopicsBarTab>) => topics,
    showDescriptionOnHover = false,
  }: {
    classes: ClassesType<typeof styles>,
    onTagSelectionUpdated: (tab: TopicsBarTab) => void,
    frontpageTab: TopicsBarTab,
    sortTopics?: (topics: Array<TopicsBarTab>) => Array<TopicsBarTab>,
    showDescriptionOnHover?: boolean,
  },
) => {
  const {currentForumEvent} = useCurrentForumEvent();

  // we use the widths of the tabs window and the underlying topics bar
  // when calculating how far to scroll left and right
  const tabsWindowRef = useRef<HTMLDivElement | null>(null)
  const topicsBarRef = useRef<HTMLDivElement | null>(null)

  // we store the topic bar scrollLeft offsets that correspond to displaying each "set" of topics
  const offsets = useRef<Array<number>>([0])

  const {results: coreTopics, loading: coreTopicsLoading} = useMulti({
    terms: {view: 'coreTags'},
    collectionName: 'Tags',
    fragmentName: 'TagFragment',
    limit: 40,
  })

  useEffect(() => {
    if (!tabsWindowRef.current || !topicsBarRef.current) return
    offsets.current = [0]
    Array.from(topicsBarRef.current.children).forEach((topic: HTMLElement) => {
      if (!tabsWindowRef.current || !topicsBarRef.current) return
      // we are looking for the topic that would get cut off at the end of each "set",
      // by checking if the right edge would be past the window
      // - if so, this will be the first in the next "set"
      if (topic.offsetLeft + topic.offsetWidth - offsets.current[offsets.current.length - 1] > tabsWindowRef.current.offsetWidth) {
        // subtract 30px to account for the fade on the left side of the tabs window
        offsets.current.push(topic.offsetLeft - 30)
      }
    })
    // coreTopics is a dependency here because we want to recalculate the offsets 
    // when topics are finished fetching (and rendered)
  }, [tabsWindowRef, topicsBarRef, coreTopics])

  const allTabs: TopicsBarTab[] = useMemo(() => {
    const mainTabs = [frontpageTab];
    if (currentForumEvent?.tag) {
      mainTabs.push(currentForumEvent?.tag);
    }
    return [...mainTabs, ...(sortTopics(coreTopics ?? []))];
  }, [coreTopics, sortTopics, frontpageTab, currentForumEvent?.tag]);

  const [activeTab, setActiveTab] = useState<TopicsBarTab>(frontpageTab)
  const [leftArrowVisible, setLeftArrowVisible] = useState(false)
  const [rightArrowVisible, setRightArrowVisible] = useState(true)
  const navigate = useNavigate()
  const {location, query} = useLocation()
  const {captureEvent} = useTracking()

  const updateActiveTab = useCallback((activeTab: TopicsBarTab) => {
    setActiveTab(activeTab)
    onTagSelectionUpdated(activeTab)
  }, [onTagSelectionUpdated])

  useEffect(() => {
    if (coreTopics) {
      // set the initial active tab based on the query,
      // and update the tab if the user clicks on a new one
      const activeTab = coreTopics.find(topic => topic.slug === query.tab)
      if (activeTab) {
        updateActiveTab(activeTab)
      } else if (currentForumEvent?.tag && query.tab === currentForumEvent?.tag?.slug) {
        updateActiveTab(currentForumEvent?.tag);
      } else {
        updateActiveTab(frontpageTab)
      }
    }
  }, [coreTopics, query, updateActiveTab, frontpageTab, currentForumEvent?.tag])

  /**
   * When the topics bar is scrolled, hide/show the left/right arrows as necessary.
   */
  const updateArrows = debounce(() => {
    if (!tabsWindowRef.current || !topicsBarRef.current) return

    const currentScrollLeft = tabsWindowRef.current.scrollLeft
    // max amount we can scroll to the right, reduced a bit to make sure that
    // we hide the right arrow when scrolled all the way to the right
    const maxScrollLeft = topicsBarRef.current.scrollWidth - tabsWindowRef.current.clientWidth - 10

    setLeftArrowVisible(currentScrollLeft > 0)
    setRightArrowVisible(currentScrollLeft < maxScrollLeft)
  }, 80)

  /**
   * Clicking the left arrow smooth scrolls us to the previous offset (or defaults to 0).
   */
  const scrollLeft = () => {
    if (!tabsWindowRef.current || !topicsBarRef.current) return
    // look for the offset that is to the left of us
    const nextOffset = Array.from(offsets.current).reverse().find(os => {
      if (!tabsWindowRef.current || !topicsBarRef.current) return false
      return os < (tabsWindowRef.current.scrollLeft - 2)
    }) || 0
    tabsWindowRef.current.scrollTo({
      left: nextOffset,
      behavior: 'smooth',
    })
    setRightArrowVisible(true)
  }

  /**
   * Clicking the right arrow smooth scrolls us to the next offset (if one exists).
   */
  const scrollRight = () => {
    if (!tabsWindowRef.current || !topicsBarRef.current) return
    // look for the offset that is to the right of us
    const nextOffset = offsets.current.find(os => {
      if (!tabsWindowRef.current || !topicsBarRef.current) return false
      return os > tabsWindowRef.current.scrollLeft
    })
    if (!nextOffset) return
    tabsWindowRef.current.scrollTo({
      left: nextOffset,
      behavior: 'smooth',
    })
    setLeftArrowVisible(true)
  }

  const handleTabClick = (tab: TopicsBarTab) => {
    navigate({
      ...location,
      search: qs.stringify({...query, tab: tab.slug}),
    }, {replace: true})
    captureEvent('topicsBarTabClicked', {topicsBarTabId: tab._id, topicsBarTabName: tab.shortName || tab.name})
  }

  const {SingleColumnSection, ForumIcon, LWTooltip} = Components

  return (
    <>
      <AnalyticsContext pageSectionContext="topicsBar">
        <SingleColumnSection className={classes.tabsSection}>
          <div className={classes.tabsRow}>
            {leftArrowVisible && <div onClick={scrollLeft} className={classNames(classes.arrow, classes.leftArrow)}>
              <ForumIcon icon="ThickChevronLeft" className={classes.arrowIcon}/>
            </div>}
            <div className={classNames(classes.tabsWindowContainer, {
              [classes.leftFade]: leftArrowVisible,
              [classes.rightFade]: rightArrowVisible,
            })}>
              <div ref={tabsWindowRef} className={classes.tabsWindow} onScroll={() => updateArrows()}>
                <div ref={topicsBarRef} className={classes.topicsBar}>
                  {allTabs.map(tab => {
                    const tabName = tab.shortName || tab.name
                    const isActive = tab._id === activeTab._id;
                    const isEventTab = tab._id === currentForumEvent?.tag?._id;
                    return <LWTooltip
                      title={showDescriptionOnHover ? tab.description?.plaintextDescription : null}
                      popperClassName={classes.tagDescriptionTooltip}
                      key={tabName}
                    >
                      <button
                        onClick={() => handleTabClick(tab)}
                        className={classNames(classes.tab, {
                          [classes.activeTab]: isActive && !isEventTab,
                          [classes.eventTab]: isEventTab,
                          [classes.activeEventTab]: isActive && isEventTab,
                        })}
                        style={
                          isEventTab
                            ? {
                              "--tag-bar-event-background": currentForumEvent.lightColor,
                              "--tag-bar-event-foreground": currentForumEvent.darkColor,
                            } as CSSProperties
                            : undefined
                        }
                      >
                        {tabName}
                      </button>
                    </LWTooltip>
                  })}
                  {!coreTopics?.length && coreTopicsLoading && range(0, 6).map(i => {
                    return <div key={i} className={classNames(classes.tab, classes.placeholderTab)}></div>
                  })}
                </div>
              </div>
            </div>
            {rightArrowVisible && <div onClick={scrollRight} className={classNames(classes.arrow, classes.rightArrow)}>
              <ForumIcon icon="ThickChevronRight" className={classes.arrowIcon}/>
            </div>}
          </div>
        </SingleColumnSection>
      </AnalyticsContext>
    </>
  )
}

const HomeTagBarComponent = registerComponent('HomeTagBar', HomeTagBar, {styles})

declare global {
  interface ComponentTypes {
    HomeTagBar: typeof HomeTagBarComponent
  }
}

1	import React, {CSSProperties, useCallback, useEffect, useMemo, useRef, useState} from 'react'	2✔
2	import {Components, registerComponent} from '../../lib/vulcan-lib'	1✔
3	import {AnalyticsContext, useTracking} from '../../lib/analyticsEvents.tsx'	1✔
4	import classNames from 'classnames'	1✔
5	import {useMulti} from '../../lib/crud/withMulti.ts'	1✔
6	import debounce from 'lodash/debounce'	1✔
7	import {useNavigate} from '../../lib/reactRouterWrapper.tsx'	1✔
8	import {useLocation} from '../../lib/routeUtil.tsx'	1✔
9	import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent.tsx'	1✔
10	import qs from 'qs'	1✔
11	import range from 'lodash/range'	1✔
12
13	const eventTabStyles = (invertColors: boolean) => ({	2✔
14	backgroundColor: invertColors
15	? "var(--tag-bar-event-foreground)"	2✔
16	: "var(--tag-bar-event-background)",
17	color: invertColors
18	? "var(--tag-bar-event-background)"	2✔
19	: "var(--tag-bar-event-foreground)",
20	"&:hover": {
21	backgroundColor: invertColors
22	? "var(--tag-bar-event-foreground)"	2✔
23	: "var(--tag-bar-event-background)",
24	color: invertColors
25	? "var(--tag-bar-event-background)"	2✔
26	: "var(--tag-bar-event-foreground)",
27	opacity: 0.9,
28	},
29	});
30
31	const styles = (theme: ThemeType) => ({	1✔
32	tabsSection: {
33	marginTop: 10,
34	marginBottom: 26,
35	[theme.breakpoints.down('sm')]: {
36	marginTop: 20,
37	},
38	},
39	tabsRow: {
40	position: 'relative',
41	},
42	tabsWindowContainer: {
43	position: 'relative',
44	},
45	tabsWindow: {
46	position: 'relative',
47	overflowX: 'scroll',
48	scrollbarWidth: 'none',
49	'&::-webkit-scrollbar': {
50	height: 0,
51	},
52	},
53	leftFade: {
54	'&:before': {
55	position: 'absolute',
56	top: 0,
57	left: -1,
58	height: '100%',
59	width: 50,
60	content: '\'\'',
61	background: `linear-gradient(to right, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
62	pointerEvents: 'none',
63	zIndex: 1,
64	},
65	},
66	rightFade: {
67	'&:after': {
68	position: 'absolute',
69	top: 0,
70	right: -1,
71	height: '100%',
72	width: 50,
73	content: '\'\'',
74	background: `linear-gradient(to left, ${theme.palette.background.default}, ${theme.palette.background.transparent})`,
75	pointerEvents: 'none',
76	},
77	},
78	arrow: {
79	position: 'absolute',
80	top: 0,
81	height: 30,
82	width: 28,
83	color: theme.palette.grey[500],
84	paddingTop: 7,
85	paddingLeft: 6,
86	cursor: 'pointer',
87	'&:hover': {
88	color: theme.palette.grey[700],
89	},
90	'@media (max-width: 840px)': {
91	display: 'none',
92	},
93	},
94	arrowIcon: {
95	fontSize: 18,
96	},
97	leftArrow: {
98	left: -30,
99	},
100	rightArrow: {
101	right: -30,
102	},
103	topicsBar: {
104	display: 'flex',
105	columnGap: 8,
106	whiteSpace: 'nowrap',
107	transition: 'transform 0.2s ease',
108	'@media (max-width: 840px)': {
109	columnGap: 6,
110	},
111	},
112	tab: {
113	backgroundColor: theme.palette.grey[200],
114	color: theme.palette.grey[900],
115	fontFamily: theme.typography.fontFamily,
116	fontSize: 14,
117	lineHeight: '23px',
118	fontWeight: '500',
119	padding: '4px 8px',
120	borderRadius: 6,
121	cursor: 'pointer',
122	'&:hover': {
123	backgroundColor: theme.palette.grey[300],
124	},
125	'@media (max-width: 840px)': {
126	fontSize: 12,
127	lineHeight: '18px',
128	padding: '4px 6px',
129	},
130	},
131	activeTab: {
132	backgroundColor: theme.palette.grey[1000],
133	color: theme.palette.grey[0],
134	'&:hover': {
135	backgroundColor: theme.palette.grey[1000],
136	},
137	},
138	eventTab: {
139	...eventTabStyles(theme.themeOptions.name === "dark"),
140	},
141	activeEventTab: {
142	...eventTabStyles(theme.themeOptions.name !== "dark"),
143	},
144	placeholderTab: {
145	flex: 'none',
146	height: 31,
147	width: 110,
148	background: theme.palette.panelBackground.placeholderGradient,
149	backgroundSize: "300% 100%",
150	animation: "profile-image-loader 1.8s infinite",
151	cursor: 'default',
152	'&:hover': {
153	background: theme.palette.panelBackground.placeholderGradient,
154	backgroundSize: "300% 100%",
155	},
156	'@media (max-width: 840px)': {
157	height: 26,
158	width: 100,
159	},
160	},
161	tagDescriptionTooltip: {
162	margin: 8,
163	}
164	})
165
166	export type TopicsBarTab = {
167	_id: string,
168	name: string,
169	shortName?: string \| null,
170	slug?: string,
171	description?: TagFragment_description \| null,
172	}
173
174	/**
175	* A horizontal bar of clickable tabs that can be used to filter content by tag.
176	* By default - displays core tags in order defined by defaultOrder. Used on EA and WakingUP home pages.
177	*
178	* @param frontpageTab - Description for "show everything" tab
179	* @param sortTopics - you can define custom ordering/additional filtering for the tabs
180	*/
181	const HomeTagBar = (	1✔
182	{
183	classes,
184	onTagSelectionUpdated,
185	frontpageTab,
186	sortTopics = (topics: Array<TopicsBarTab>) => topics,	×
187	showDescriptionOnHover = false,	×
188	}: {
189	classes: ClassesType<typeof styles>,
190	onTagSelectionUpdated: (tab: TopicsBarTab) => void,
191	frontpageTab: TopicsBarTab,
192	sortTopics?: (topics: Array<TopicsBarTab>) => Array<TopicsBarTab>,
193	showDescriptionOnHover?: boolean,
194	},
195	) => {
196	const {currentForumEvent} = useCurrentForumEvent();	×
197
198	// we use the widths of the tabs window and the underlying topics bar
199	// when calculating how far to scroll left and right
200	const tabsWindowRef = useRef<HTMLDivElement \| null>(null)	×
201	const topicsBarRef = useRef<HTMLDivElement \| null>(null)	×
202
203	// we store the topic bar scrollLeft offsets that correspond to displaying each "set" of topics
204	const offsets = useRef<Array<number>>([0])	×
205
NEW 206	const {results: coreTopics, loading: coreTopicsLoading} = useMulti({	×
207	terms: {view: 'coreTags'},
208	collectionName: 'Tags',
209	fragmentName: 'TagFragment',
210	limit: 40,
211	})
212
213	useEffect(() => {	×
214	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return	×
215	offsets.current = [0]	×
216	Array.from(topicsBarRef.current.children).forEach((topic: HTMLElement) => {	×
217	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return	×
218	// we are looking for the topic that would get cut off at the end of each "set",
219	// by checking if the right edge would be past the window
220	// - if so, this will be the first in the next "set"
221	if (topic.offsetLeft + topic.offsetWidth - offsets.current[offsets.current.length - 1] > tabsWindowRef.current.offsetWidth) {	×
222	// subtract 30px to account for the fade on the left side of the tabs window
223	offsets.current.push(topic.offsetLeft - 30)	×
224	}
225	})
226	// coreTopics is a dependency here because we want to recalculate the offsets
227	// when topics are finished fetching (and rendered)
228	}, [tabsWindowRef, topicsBarRef, coreTopics])
229
230	const allTabs: TopicsBarTab[] = useMemo(() => {	×
231	const mainTabs = [frontpageTab];	×
232	if (currentForumEvent?.tag) {	×
233	mainTabs.push(currentForumEvent?.tag);	×
234	}
235	return [...mainTabs, ...(sortTopics(coreTopics ?? []))];	×
236	}, [coreTopics, sortTopics, frontpageTab, currentForumEvent?.tag]);	×
237
238	const [activeTab, setActiveTab] = useState<TopicsBarTab>(frontpageTab)	×
239	const [leftArrowVisible, setLeftArrowVisible] = useState(false)	×
240	const [rightArrowVisible, setRightArrowVisible] = useState(true)	×
241	const navigate = useNavigate()	×
242	const {location, query} = useLocation()	×
243	const {captureEvent} = useTracking()	×
244
245	const updateActiveTab = useCallback((activeTab: TopicsBarTab) => {	×
246	setActiveTab(activeTab)	×
247	onTagSelectionUpdated(activeTab)	×
248	}, [onTagSelectionUpdated])
249
250	useEffect(() => {	×
251	if (coreTopics) {	×
252	// set the initial active tab based on the query,
253	// and update the tab if the user clicks on a new one
254	const activeTab = coreTopics.find(topic => topic.slug === query.tab)	×
255	if (activeTab) {	×
256	updateActiveTab(activeTab)	×
257	} else if (currentForumEvent?.tag && query.tab === currentForumEvent?.tag?.slug) {	×
258	updateActiveTab(currentForumEvent?.tag);	×
259	} else {
260	updateActiveTab(frontpageTab)	×
261	}
262	}
263	}, [coreTopics, query, updateActiveTab, frontpageTab, currentForumEvent?.tag])	×
264
265	/**
266	* When the topics bar is scrolled, hide/show the left/right arrows as necessary.
267	*/
268	const updateArrows = debounce(() => {	×
269	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return	×
270
271	const currentScrollLeft = tabsWindowRef.current.scrollLeft	×
272	// max amount we can scroll to the right, reduced a bit to make sure that
273	// we hide the right arrow when scrolled all the way to the right
274	const maxScrollLeft = topicsBarRef.current.scrollWidth - tabsWindowRef.current.clientWidth - 10	×
275
276	setLeftArrowVisible(currentScrollLeft > 0)	×
277	setRightArrowVisible(currentScrollLeft < maxScrollLeft)	×
278	}, 80)
279
280	/**
281	* Clicking the left arrow smooth scrolls us to the previous offset (or defaults to 0).
282	*/
283	const scrollLeft = () => {	×
284	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return	×
285	// look for the offset that is to the left of us
286	const nextOffset = Array.from(offsets.current).reverse().find(os => {	×
287	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return false	×
288	return os < (tabsWindowRef.current.scrollLeft - 2)	×
289	}) \|\| 0
290	tabsWindowRef.current.scrollTo({	×
291	left: nextOffset,
292	behavior: 'smooth',
293	})
294	setRightArrowVisible(true)	×
295	}
296
297	/**
298	* Clicking the right arrow smooth scrolls us to the next offset (if one exists).
299	*/
300	const scrollRight = () => {	×
301	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return	×
302	// look for the offset that is to the right of us
303	const nextOffset = offsets.current.find(os => {	×
304	if (!tabsWindowRef.current \|\| !topicsBarRef.current) return false	×
305	return os > tabsWindowRef.current.scrollLeft	×
306	})
307	if (!nextOffset) return	×
308	tabsWindowRef.current.scrollTo({	×
309	left: nextOffset,
310	behavior: 'smooth',
311	})
312	setLeftArrowVisible(true)	×
313	}
314
315	const handleTabClick = (tab: TopicsBarTab) => {	×
316	navigate({	×
317	...location,
318	search: qs.stringify({...query, tab: tab.slug}),
319	}, {replace: true})
320	captureEvent('topicsBarTabClicked', {topicsBarTabId: tab._id, topicsBarTabName: tab.shortName \|\| tab.name})	×
321	}
322
323	const {SingleColumnSection, ForumIcon, LWTooltip} = Components	×
324
325	return (	×
326	<>
327	<AnalyticsContext pageSectionContext="topicsBar">
328	<SingleColumnSection className={classes.tabsSection}>
329	<div className={classes.tabsRow}>
330	{leftArrowVisible && <div onClick={scrollLeft} className={classNames(classes.arrow, classes.leftArrow)}>	×
331	<ForumIcon icon="ThickChevronLeft" className={classes.arrowIcon}/>
332	</div>}
333	<div className={classNames(classes.tabsWindowContainer, {
334	[classes.leftFade]: leftArrowVisible,
335	[classes.rightFade]: rightArrowVisible,
336	})}>
337	<div ref={tabsWindowRef} className={classes.tabsWindow} onScroll={() => updateArrows()}>	×
338	<div ref={topicsBarRef} className={classes.topicsBar}>
339	{allTabs.map(tab => {
340	const tabName = tab.shortName \|\| tab.name	×
341	const isActive = tab._id === activeTab._id;	×
342	const isEventTab = tab._id === currentForumEvent?.tag?._id;	×
343	return <LWTooltip	×
344	title={showDescriptionOnHover ? tab.description?.plaintextDescription : null}	×
345	popperClassName={classes.tagDescriptionTooltip}
346	key={tabName}
347	>
348	<button
349	onClick={() => handleTabClick(tab)}	×
350	className={classNames(classes.tab, {
351	[classes.activeTab]: isActive && !isEventTab,	×
352	[classes.eventTab]: isEventTab,
353	[classes.activeEventTab]: isActive && isEventTab,	×
354	})}
355	style={
356	isEventTab
357	? {	×
358	"--tag-bar-event-background": currentForumEvent.lightColor,
359	"--tag-bar-event-foreground": currentForumEvent.darkColor,
360	} as CSSProperties
361	: undefined
362	}
363	>
364	{tabName}
365	</button>
366	</LWTooltip>
367	})}
368	{!coreTopics?.length && coreTopicsLoading && range(0, 6).map(i => {	×
NEW 369	return <div key={i} className={classNames(classes.tab, classes.placeholderTab)}></div>	×
370	})}
371	</div>
372	</div>
373	</div>
374	{rightArrowVisible && <div onClick={scrollRight} className={classNames(classes.arrow, classes.rightArrow)}>	×
375	<ForumIcon icon="ThickChevronRight" className={classes.arrowIcon}/>
376	</div>}
377	</div>
378	</SingleColumnSection>
379	</AnalyticsContext>
380	</>
381	)
382	}
383
384	const HomeTagBarComponent = registerComponent('HomeTagBar', HomeTagBar, {styles})	1✔
385
386	declare global {
387	interface ComponentTypes {
388	HomeTagBar: typeof HomeTagBarComponent
389	}
390	}

ForumMagnum / ForumMagnum / 8724588177

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