9654713619

Committed 25 Jun 2024 01:04AM UTC coverage: 31.966% (-0.009%) from 31.975%

Build # 9654713619

Build Type

push

github

Committed by

s-cheng

Commit Message

WIP debate week homepage banner

Run Details

4873 of 39621 branches covered (12.3%)

Branch coverage included in aggregate %.

37 of 95 new or added lines in 11 files covered. (38.95%)

2 existing lines in 2 files now uncovered.

28239 of 63963 relevant lines covered (44.15%)

179.78 hits per line

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

15.92

/packages/lesswrong/components/common/Header.tsx

import React, { useContext, useState, useCallback, useEffect, CSSProperties } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { Link, useNavigate } from '../../lib/reactRouterWrapper';
import Headroom from '../../lib/react-headroom'
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import TocIcon from '@material-ui/icons/Toc';
import { useCurrentUser } from '../common/withUser';
import { SidebarsContext } from './SidebarsWrapper';
import withErrorBoundary from '../common/withErrorBoundary';
import classNames from 'classnames';
import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';
import { PublicInstanceSetting, isEAForum } from '../../lib/instanceSettings';
import { useUnreadNotifications } from '../hooks/useUnreadNotifications';
import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';
import { hasProminentLogoSetting } from '../../lib/publicSettings';
import { useLocation } from '../../lib/routeUtil';
import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';
import { makeCloudinaryImageUrl } from './CloudinaryImage2';

export const forumHeaderTitleSetting = new PublicInstanceSetting<string>('forumSettings.headerTitle', "LESSWRONG", "warning")
export const forumShortTitleSetting = new PublicInstanceSetting<string>('forumSettings.shortForumTitle', "LW", "warning")
/** Height of top header. On Book UI sites, this is for desktop only */
export const HEADER_HEIGHT = isBookUI ? 64 : 66;
/** Height of top header on mobile. On Friendly UI sites, this is the same as the HEADER_HEIGHT */
export const MOBILE_HEADER_HEIGHT = isBookUI ? 56 : HEADER_HEIGHT;

export const styles = (theme: ThemeType) => ({
  appBar: {
    boxShadow: theme.palette.boxShadow.appBar,
    color: theme.palette.header.text,
    backgroundColor: theme.palette.header.background,
    position: "static",
    width: "100%",
    display: "flex",
    zIndex: 1100,
    boxSizing: "border-box",
    flexShrink: 0,
    flexDirection: "column",
    ...(isFriendlyUI ? {
      padding: '1px 20px',
      [theme.breakpoints.down('sm')]: {
        padding: '1px 11px',
      },
      [theme.breakpoints.down('xs')]: {
        padding: '9px 11px',
      },
    } : {}),
  },
  // This class is applied when "backgroundColor" is passed in.
  // Currently we assume that the background color is always dark,
  // so all text in the header changes to "alwaysWhite".
  // If that's not the case, you'll need to expand this code.
  appBarDarkBackground: {
    color: theme.palette.text.alwaysWhite,
    boxShadow: 'none',
    "& .Header-titleLink": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .HeaderSubtitle-subtitle": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .SearchBar-searchIcon": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .ais-SearchBox-input": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .ais-SearchBox-input::placeholder": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .KarmaChangeNotifier-starIcon": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .KarmaChangeNotifier-gainedPoints": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .NotificationsMenuButton-badge": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .NotificationsMenuButton-buttonClosed": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .MessagesMenuButton-buttonClosed": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .UsersMenu-arrowIcon": {
      color: theme.palette.text.alwaysWhite,
    },
    "& .EAButton-variantContained": {
      backgroundColor: theme.palette.text.alwaysWhite,
      color: theme.palette.text.alwaysBlack,
      "&:hover": {
        backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 90%, ${theme.palette.text.alwaysBlack})`,
      },
    },
    "& .EAButton-greyContained": {
      backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 15%, ${theme.palette.background.transparent})`,
      color: theme.palette.text.alwaysWhite,
      "&:hover": {
        backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 10%, ${theme.palette.background.transparent}) !important`,
      },
    },
  },
  root: {
    // This height (including the breakpoint at xs/600px) is set by Headroom, and this wrapper (which surrounds
    // Headroom and top-pads the page) has to match.
    height: HEADER_HEIGHT,
    [theme.breakpoints.down('xs')]: {
      height: MOBILE_HEADER_HEIGHT,
    },
    "@media print": {
      display: "none"
    }
  },
  titleSubtitleContainer: {
    display: 'flex',
    alignItems: 'center'
  },
  title: {
    flex: 1,
    position: "relative",
    top: 3,
    paddingRight: theme.spacing.unit,
    color: theme.palette.text.secondary,
  //  maxWidth: 130,
  },
  titleLink: {
    color: theme.palette.header.text,
    fontSize: 19,
    '&:hover, &:active': {
      textDecoration: 'none',
      opacity: 0.7,
    },
    display: 'flex',
    alignItems: 'center',
    fontWeight: isFriendlyUI ? 400 : undefined,
    height: isFriendlyUI ? undefined : '19px'
  },
  menuButton: {
    marginLeft: -theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  siteLogo: {
    marginLeft:  -7,
    marginRight: 6,
    [theme.breakpoints.down('sm')]: {
      marginLeft: -12,
      marginRight: 3
    },
  },
  hideLgUp: {
    [theme.breakpoints.up('lg')]: {
      display:"none !important"
    }
  },
  hideMdDown: {
    [theme.breakpoints.down('md')]: {
      display:"none !important"
    }
  },
  hideSmDown: {
    [theme.breakpoints.down('sm')]: {
      display: "none !important",
    },
  },
  hideXsDown: {
    [theme.breakpoints.down('xs')]: {
      display: "none !important",
    },
  },
  hideMdUp: {
    [theme.breakpoints.up('md')]: {
      display: "none !important",
    },
  },
  rightHeaderItems: {
    marginRight: -theme.spacing.unit,
    marginLeft: "auto",
    display: "flex",
    alignItems: isFriendlyUI ? 'center' : undefined,
  },
  // Prevent rearranging of mobile header when search loads after SSR
  searchSSRStandin: {
    minWidth: 48
  },
  headroom: {
    // Styles for header scrolling, provided by react-headroom
    // https://github.com/KyleAMathews/react-headroom
    "& .headroom": {
      top: "unset",
      left: 0,
      right: 0,
      zIndex: 1300,
    },
    "& .headroom--unfixed": {
      position: "relative",
      transform: "translateY(0)",
    },
    "& .headroom--scrolled": {
      transition: "transform 200ms ease-in-out",
    },
    "& .headroom--unpinned": {
      position: "fixed",
      transform: "translateY(-100%)",
    },
    "& .headroom--pinned": {
      position: "fixed",
      transform: "translateY(0%)",
    },
  },
  headroomPinnedOpen: {
    "& .headroom--unpinned": {
      transform: "none !important",
    },
    "& .headroom--unfixed": {
      position: "fixed !important",
    },
  },
});

const Header = ({
  standaloneNavigationPresent,
  sidebarHidden,
  toggleStandaloneNavigation,
  stayAtTop=false,
  searchResultsArea,
  backgroundColor,
  classes,
}: {
  standaloneNavigationPresent: boolean,
  sidebarHidden: boolean,
  toggleStandaloneNavigation: () => void,
  stayAtTop?: boolean,
  searchResultsArea: React.RefObject<HTMLDivElement>,
  // CSS var corresponding to the background color you want to apply (see also appBarDarkBackground above)
  backgroundColor?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const [navigationOpen, setNavigationOpenState] = useState(false);
  const [notificationOpen, setNotificationOpen] = useState(false);
  const [notificationHasOpened, setNotificationHasOpened] = useState(false);
  const [searchOpen, setSearchOpenState] = useState(false);
  const [unFixed, setUnFixed] = useState(true);
  const currentUser = useCurrentUser();
  const navigate = useNavigate();
  const {toc} = useContext(SidebarsContext)!;
  const { captureEvent } = useTracking()
  const { notificationsOpened } = useUnreadNotifications();
  const { currentRoute, pathname, hash } = useLocation();
  const {currentForumEvent} = useCurrentForumEvent();

  const {
    SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
    NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
    ActiveDialogues, SiteLogo, MessagesMenuButton,
  } = Components;

  useEffect(() => {
    // When we move to a different page we will be positioned at the top of
    // the page (unless the hash is set) but Headroom doesn't run this callback
    // on navigation so we have to do it manually
    if (!hash) {
      setUnFixed(true);
    }
  }, [pathname, hash]);

  const hasNotificationsPage = isFriendlyUI;
  const hasKarmaChangeNotifier = !isFriendlyUI && currentUser && !currentUser.usernameUnset;
  const hasMessagesButton = isFriendlyUI && currentUser && !currentUser.usernameUnset;

  const setNavigationOpen = (open: boolean) => {
    setNavigationOpenState(open);
    captureEvent("navigationBarToggle", {open: open})
  }

  const handleSetNotificationDrawerOpen = async (isOpen: boolean): Promise<void> => {
    if (!currentUser) return;
    if (isOpen) {
      setNotificationOpen(true);
      setNotificationHasOpened(true);
      await notificationsOpened();
    } else {
      setNotificationOpen(false);
    }
  }

  const handleNotificationToggle = () => {
    if (!currentUser) return;
    const { lastNotificationsCheck } = currentUser

    if (hasNotificationsPage) {
      captureEvent("notificationsIconToggle", {
        navigate: true,
        previousCheck: lastNotificationsCheck,
      });
      navigate("/notifications");
    } else {
      captureEvent("notificationsIconToggle", {
        open: !notificationOpen,
        previousCheck: lastNotificationsCheck,
      });
      void handleSetNotificationDrawerOpen(!notificationOpen);
    }
  }

  // We do two things when the search is open:
  //  1) Pin the header open with the Headroom component
  //  2) Hide the username on mobile so users with long usernames can still
  //     enter search queries
  // Called by SearchBar.
  const setSearchOpen = useCallback((isOpen: boolean) => {
    if (isOpen) { captureEvent("searchToggle", {"open": isOpen}) }
    setSearchOpenState(isOpen);
  }, [captureEvent]);

  const navigationMenuButton = (
    // The navigation menu button either toggles a free floating sidebar, opens
    // a drawer with site navigation, or a drawer with table of contents. (This
    // is structured a little oddly because the hideSmDown/hideMdUp filters
    // cause a misalignment if they're in the wrong part of the tree.)
    <React.Fragment>
      {toc?.sectionData?.sections
        ? <>
            <div className={classes.hideSmDown}>
              <IconButton
                className={classNames(
                  classes.menuButton,
                  {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
                )}
                color="inherit"
                aria-label="Menu"
                onClick={()=>setNavigationOpen(true)}
              >
                <ForumIcon icon="Menu" />
              </IconButton>
            </div>
            <div className={classes.hideMdUp}>
              <IconButton
                className={classNames(
                  classes.menuButton,
                  {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
                )}
                color="inherit"
                aria-label="Menu"
                onClick={()=>setNavigationOpen(true)}
              >
                <TocIcon />
              </IconButton>
            </div>
          </>
        : <IconButton
            className={classNames(
              classes.menuButton,
              {[classes.hideLgUp]: standaloneNavigationPresent && unFixed}
            )}
            color="inherit"
            aria-label="Menu"
            onClick={()=>setNavigationOpen(true)}
          >
            <ForumIcon icon="Menu" />
          </IconButton>
      }
      {standaloneNavigationPresent && unFixed && <IconButton
        className={classNames(
          classes.menuButton,
          classes.hideMdDown
        )}
        color="inherit"
        aria-label="Menu"
        onClick={toggleStandaloneNavigation}
      >
        {(isFriendlyUI && !sidebarHidden) ? <ForumIcon icon="CloseMenu" /> : <ForumIcon icon="Menu" />}
      </IconButton>}
    </React.Fragment>
  )

  const usersMenuClass = isFriendlyUI ? classes.hideXsDown : classes.hideMdDown
  const usersMenuNode = currentUser && <div className={searchOpen ? usersMenuClass : undefined}>
    <AnalyticsContext pageSectionContext="usersMenu">
      <UsersMenu />
    </AnalyticsContext>
  </div>

  // the items on the right-hand side (search, notifications, user menu, login/sign up buttons)
  const rightHeaderItemsNode = <div className={classes.rightHeaderItems}>
    <SearchBar onSetIsActive={setSearchOpen} searchResultsArea={searchResultsArea} />
    {!isFriendlyUI && usersMenuNode}
    {!currentUser && <UsersAccountMenu />}
    {hasKarmaChangeNotifier && <KarmaChangeNotifier
      currentUser={currentUser}
      className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
    />}
    {currentUser && !currentUser.usernameUnset && <NotificationsMenuButton
      toggle={handleNotificationToggle}
      open={notificationOpen}
      className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
    />}
    {hasMessagesButton &&
      <MessagesMenuButton
        className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}
      />
    }
    {isFriendlyUI && usersMenuNode}
  </div>

  // the left side nav menu
  const headerNavigationDrawer = <NavigationDrawer
    open={navigationOpen}
    handleOpen={() => setNavigationOpen(true)}
    handleClose={() => setNavigationOpen(false)}
    toc={toc?.sectionData ?? null}
  />

  // the right side notifications menu
  const headerNotificationsMenu = currentUser && !hasNotificationsPage
    && (
      <NotificationsMenu
        open={notificationOpen}
        hasOpened={notificationHasOpened}
        setIsOpen={handleSetNotificationDrawerOpen}
      />
    );

  let headerStyle: CSSProperties = {}
  const bannerImageId = currentForumEvent?.bannerImageId
  // On EAF, forum events with polls also update the home page header background
  if (currentRoute?.name === 'home' && bannerImageId && currentForumEvent.includesPoll && isEAForum) {
    const darkColor = currentForumEvent?.darkColor
    const background = `top / cover no-repeat url(${makeCloudinaryImageUrl(bannerImageId, {
      c: "fill",
      dpr: "auto",
      q: "auto",
      f: "auto",
      g: "north",
    })})${darkColor ? `, ${darkColor}` : ''}`
    headerStyle = {background}
  }
  
  // If we're explicitly given a backgroundColor, that overrides any event header
  if (backgroundColor) {
    headerStyle = {backgroundColor}
  }
  // Make all the text and icons white when we have some sort of color in the header background
  const useWhiteText = Object.keys(headerStyle).length > 0

  return (
    <AnalyticsContext pageSectionContext="header">
      <div className={classes.root}>
        <Headroom
          disableInlineStyles
          downTolerance={10} upTolerance={10}
          height={HEADER_HEIGHT}
          className={classNames(classes.headroom, {
            [classes.headroomPinnedOpen]: searchOpen,
          })}
          onUnfix={() => setUnFixed(true)}
          onUnpin={() => setUnFixed(false)}
          disable={stayAtTop}
        >
          <header
            className={classNames(
              classes.appBar,
              useWhiteText && classes.appBarDarkBackground,
            )}
            style={headerStyle}
          >
            <Toolbar disableGutters={isFriendlyUI}>
              {navigationMenuButton}
              <Typography className={classes.title} variant="title">
                <div className={classes.hideSmDown}>
                  <div className={classes.titleSubtitleContainer}>
                    <Link to="/" className={classes.titleLink}>
                      {hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}
                      {forumHeaderTitleSetting.get()}
                    </Link>
                    <HeaderSubtitle />
                  </div>
                </div>
                <div className={classes.hideMdUp}>
                  <Link to="/" className={classes.titleLink}>
                    {hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}
                    {forumShortTitleSetting.get()}
                  </Link>
                </div>
              </Typography>
              {!isEAForum &&<ActiveDialogues />}
              {rightHeaderItemsNode}
            </Toolbar>
          </header>
          {headerNavigationDrawer}
        </Headroom>
        {headerNotificationsMenu}
      </div>
    </AnalyticsContext>
  )
}

const HeaderComponent = registerComponent('Header', Header, {
  styles,
  hocs: [withErrorBoundary]
});

declare global {
  interface ComponentTypes {
    Header: typeof HeaderComponent
  }
}

1	import React, { useContext, useState, useCallback, useEffect, CSSProperties } from 'react';	66✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	18✔
3	import { Link, useNavigate } from '../../lib/reactRouterWrapper';	18✔
4	import Headroom from '../../lib/react-headroom'	18✔
5	import Toolbar from '@material-ui/core/Toolbar';	18✔
6	import IconButton from '@material-ui/core/IconButton';	18✔
7	import TocIcon from '@material-ui/icons/Toc';	18✔
8	import { useCurrentUser } from '../common/withUser';	18✔
9	import { SidebarsContext } from './SidebarsWrapper';	18✔
10	import withErrorBoundary from '../common/withErrorBoundary';	18✔
11	import classNames from 'classnames';	18✔
12	import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';	18✔
13	import { PublicInstanceSetting, isEAForum } from '../../lib/instanceSettings';	18✔
14	import { useUnreadNotifications } from '../hooks/useUnreadNotifications';	18✔
15	import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';	18✔
16	import { hasProminentLogoSetting } from '../../lib/publicSettings';	18✔
17	import { useLocation } from '../../lib/routeUtil';	18✔
18	import { useCurrentForumEvent } from '../hooks/useCurrentForumEvent';	18✔
19	import { makeCloudinaryImageUrl } from './CloudinaryImage2';	18✔
20
21	export const forumHeaderTitleSetting = new PublicInstanceSetting<string>('forumSettings.headerTitle', "LESSWRONG", "warning")	18✔
22	export const forumShortTitleSetting = new PublicInstanceSetting<string>('forumSettings.shortForumTitle', "LW", "warning")	18✔
23	/** Height of top header. On Book UI sites, this is for desktop only */
24	export const HEADER_HEIGHT = isBookUI ? 64 : 66;	18!
25	/** Height of top header on mobile. On Friendly UI sites, this is the same as the HEADER_HEIGHT */
26	export const MOBILE_HEADER_HEIGHT = isBookUI ? 56 : HEADER_HEIGHT;	18!
27
28	export const styles = (theme: ThemeType) => ({	18✔
29	appBar: {
30	boxShadow: theme.palette.boxShadow.appBar,
31	color: theme.palette.header.text,
32	backgroundColor: theme.palette.header.background,
33	position: "static",
34	width: "100%",
35	display: "flex",
36	zIndex: 1100,
37	boxSizing: "border-box",
38	flexShrink: 0,
39	flexDirection: "column",
40	...(isFriendlyUI ? {	1!
41	padding: '1px 20px',
42	[theme.breakpoints.down('sm')]: {
43	padding: '1px 11px',
44	},
45	[theme.breakpoints.down('xs')]: {
46	padding: '9px 11px',
47	},
48	} : {}),
49	},
50	// This class is applied when "backgroundColor" is passed in.
51	// Currently we assume that the background color is always dark,
52	// so all text in the header changes to "alwaysWhite".
53	// If that's not the case, you'll need to expand this code.
54	appBarDarkBackground: {
55	color: theme.palette.text.alwaysWhite,
56	boxShadow: 'none',
57	"& .Header-titleLink": {
58	color: theme.palette.text.alwaysWhite,
59	},
60	"& .HeaderSubtitle-subtitle": {
61	color: theme.palette.text.alwaysWhite,
62	},
63	"& .SearchBar-searchIcon": {
64	color: theme.palette.text.alwaysWhite,
65	},
66	"& .ais-SearchBox-input": {
67	color: theme.palette.text.alwaysWhite,
68	},
69	"& .ais-SearchBox-input::placeholder": {
70	color: theme.palette.text.alwaysWhite,
71	},
72	"& .KarmaChangeNotifier-starIcon": {
73	color: theme.palette.text.alwaysWhite,
74	},
75	"& .KarmaChangeNotifier-gainedPoints": {
76	color: theme.palette.text.alwaysWhite,
77	},
78	"& .NotificationsMenuButton-badge": {
79	color: theme.palette.text.alwaysWhite,
80	},
81	"& .NotificationsMenuButton-buttonClosed": {
82	color: theme.palette.text.alwaysWhite,
83	},
84	"& .MessagesMenuButton-buttonClosed": {
85	color: theme.palette.text.alwaysWhite,
86	},
87	"& .UsersMenu-arrowIcon": {
88	color: theme.palette.text.alwaysWhite,
89	},
90	"& .EAButton-variantContained": {
91	backgroundColor: theme.palette.text.alwaysWhite,
92	color: theme.palette.text.alwaysBlack,
93	"&:hover": {
94	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 90%, ${theme.palette.text.alwaysBlack})`,
95	},
96	},
97	"& .EAButton-greyContained": {
98	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 15%, ${theme.palette.background.transparent})`,
99	color: theme.palette.text.alwaysWhite,
100	"&:hover": {
101	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 10%, ${theme.palette.background.transparent}) !important`,
102	},
103	},
104	},
105	root: {
106	// This height (including the breakpoint at xs/600px) is set by Headroom, and this wrapper (which surrounds
107	// Headroom and top-pads the page) has to match.
108	height: HEADER_HEIGHT,
109	[theme.breakpoints.down('xs')]: {
110	height: MOBILE_HEADER_HEIGHT,
111	},
112	"@media print": {
113	display: "none"
114	}
115	},
116	titleSubtitleContainer: {
117	display: 'flex',
118	alignItems: 'center'
119	},
120	title: {
121	flex: 1,
122	position: "relative",
123	top: 3,
124	paddingRight: theme.spacing.unit,
125	color: theme.palette.text.secondary,
126	// maxWidth: 130,
127	},
128	titleLink: {
129	color: theme.palette.header.text,
130	fontSize: 19,
131	'&:hover, &:active': {
132	textDecoration: 'none',
133	opacity: 0.7,
134	},
135	display: 'flex',
136	alignItems: 'center',
137	fontWeight: isFriendlyUI ? 400 : undefined,	1!
138	height: isFriendlyUI ? undefined : '19px'	1!
139	},
140	menuButton: {
141	marginLeft: -theme.spacing.unit,
142	marginRight: theme.spacing.unit,
143	},
144	siteLogo: {
145	marginLeft: -7,
146	marginRight: 6,
147	[theme.breakpoints.down('sm')]: {
148	marginLeft: -12,
149	marginRight: 3
150	},
151	},
152	hideLgUp: {
153	[theme.breakpoints.up('lg')]: {
154	display:"none !important"
155	}
156	},
157	hideMdDown: {
158	[theme.breakpoints.down('md')]: {
159	display:"none !important"
160	}
161	},
162	hideSmDown: {
163	[theme.breakpoints.down('sm')]: {
164	display: "none !important",
165	},
166	},
167	hideXsDown: {
168	[theme.breakpoints.down('xs')]: {
169	display: "none !important",
170	},
171	},
172	hideMdUp: {
173	[theme.breakpoints.up('md')]: {
174	display: "none !important",
175	},
176	},
177	rightHeaderItems: {
178	marginRight: -theme.spacing.unit,
179	marginLeft: "auto",
180	display: "flex",
181	alignItems: isFriendlyUI ? 'center' : undefined,	1!
182	},
183	// Prevent rearranging of mobile header when search loads after SSR
184	searchSSRStandin: {
185	minWidth: 48
186	},
187	headroom: {
188	// Styles for header scrolling, provided by react-headroom
189	// https://github.com/KyleAMathews/react-headroom
190	"& .headroom": {
191	top: "unset",
192	left: 0,
193	right: 0,
194	zIndex: 1300,
195	},
196	"& .headroom--unfixed": {
197	position: "relative",
198	transform: "translateY(0)",
199	},
200	"& .headroom--scrolled": {
201	transition: "transform 200ms ease-in-out",
202	},
203	"& .headroom--unpinned": {
204	position: "fixed",
205	transform: "translateY(-100%)",
206	},
207	"& .headroom--pinned": {
208	position: "fixed",
209	transform: "translateY(0%)",
210	},
211	},
212	headroomPinnedOpen: {
213	"& .headroom--unpinned": {
214	transform: "none !important",
215	},
216	"& .headroom--unfixed": {
217	position: "fixed !important",
218	},
219	},
220	});
221
222	const Header = ({	18✔
223	standaloneNavigationPresent,
224	sidebarHidden,
225	toggleStandaloneNavigation,
226	stayAtTop=false,	×
227	searchResultsArea,
228	backgroundColor,
229	classes,
230	}: {
231	standaloneNavigationPresent: boolean,
232	sidebarHidden: boolean,
233	toggleStandaloneNavigation: () => void,
234	stayAtTop?: boolean,
235	searchResultsArea: React.RefObject<HTMLDivElement>,
236	// CSS var corresponding to the background color you want to apply (see also appBarDarkBackground above)
237	backgroundColor?: string,
238	classes: ClassesType<typeof styles>,
239	}) => {
240	const [navigationOpen, setNavigationOpenState] = useState(false);	×
241	const [notificationOpen, setNotificationOpen] = useState(false);	×
242	const [notificationHasOpened, setNotificationHasOpened] = useState(false);	×
243	const [searchOpen, setSearchOpenState] = useState(false);	×
244	const [unFixed, setUnFixed] = useState(true);	×
245	const currentUser = useCurrentUser();	×
246	const navigate = useNavigate();	×
247	const {toc} = useContext(SidebarsContext)!;	×
248	const { captureEvent } = useTracking()	×
249	const { notificationsOpened } = useUnreadNotifications();	×
NEW 250	const { currentRoute, pathname, hash } = useLocation();	×
NEW 251	const {currentForumEvent} = useCurrentForumEvent();	×
252
253	const {
254	SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
255	NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
256	ActiveDialogues, SiteLogo, MessagesMenuButton,
257	} = Components;	×
258
259	useEffect(() => {	×
260	// When we move to a different page we will be positioned at the top of
261	// the page (unless the hash is set) but Headroom doesn't run this callback
262	// on navigation so we have to do it manually
263	if (!hash) {	×
264	setUnFixed(true);	×
265	}
266	}, [pathname, hash]);
267
268	const hasNotificationsPage = isFriendlyUI;	×
269	const hasKarmaChangeNotifier = !isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
270	const hasMessagesButton = isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
271
272	const setNavigationOpen = (open: boolean) => {	×
273	setNavigationOpenState(open);	×
274	captureEvent("navigationBarToggle", {open: open})	×
275	}
276
277	const handleSetNotificationDrawerOpen = async (isOpen: boolean): Promise<void> => {	×
278	if (!currentUser) return;	×
279	if (isOpen) {	×
280	setNotificationOpen(true);	×
281	setNotificationHasOpened(true);	×
282	await notificationsOpened();	×
283	} else {
284	setNotificationOpen(false);	×
285	}
286	}
287
288	const handleNotificationToggle = () => {	×
289	if (!currentUser) return;	×
290	const { lastNotificationsCheck } = currentUser	×
291
292	if (hasNotificationsPage) {	×
293	captureEvent("notificationsIconToggle", {	×
294	navigate: true,
295	previousCheck: lastNotificationsCheck,
296	});
297	navigate("/notifications");	×
298	} else {
299	captureEvent("notificationsIconToggle", {	×
300	open: !notificationOpen,
301	previousCheck: lastNotificationsCheck,
302	});
303	void handleSetNotificationDrawerOpen(!notificationOpen);	×
304	}
305	}
306
307	// We do two things when the search is open:
308	// 1) Pin the header open with the Headroom component
309	// 2) Hide the username on mobile so users with long usernames can still
310	// enter search queries
311	// Called by SearchBar.
312	const setSearchOpen = useCallback((isOpen: boolean) => {	×
313	if (isOpen) { captureEvent("searchToggle", {"open": isOpen}) }	×
314	setSearchOpenState(isOpen);	×
315	}, [captureEvent]);
316
317	const navigationMenuButton = (
318	// The navigation menu button either toggles a free floating sidebar, opens
319	// a drawer with site navigation, or a drawer with table of contents. (This
320	// is structured a little oddly because the hideSmDown/hideMdUp filters
321	// cause a misalignment if they're in the wrong part of the tree.)
322	<React.Fragment>	×
323	{toc?.sectionData?.sections	×
324	? <>	×
325	<div className={classes.hideSmDown}>
326	<IconButton
327	className={classNames(
328	classes.menuButton,
329	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
330	)}
331	color="inherit"
332	aria-label="Menu"
333	onClick={()=>setNavigationOpen(true)}	×
334	>
335	<ForumIcon icon="Menu" />
336	</IconButton>
337	</div>
338	<div className={classes.hideMdUp}>
339	<IconButton
340	className={classNames(
341	classes.menuButton,
342	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
343	)}
344	color="inherit"
345	aria-label="Menu"
346	onClick={()=>setNavigationOpen(true)}	×
347	>
348	<TocIcon />
349	</IconButton>
350	</div>
351	</>
352	: <IconButton
353	className={classNames(
354	classes.menuButton,
355	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
356	)}
357	color="inherit"
358	aria-label="Menu"
359	onClick={()=>setNavigationOpen(true)}	×
360	>
361	<ForumIcon icon="Menu" />
362	</IconButton>
363	}
364	{standaloneNavigationPresent && unFixed && <IconButton	×
365	className={classNames(
366	classes.menuButton,
367	classes.hideMdDown
368	)}
369	color="inherit"
370	aria-label="Menu"
371	onClick={toggleStandaloneNavigation}
372	>
373	{(isFriendlyUI && !sidebarHidden) ? <ForumIcon icon="CloseMenu" /> : <ForumIcon icon="Menu" />}	×
374	</IconButton>}
375	</React.Fragment>
376	)
377
378	const usersMenuClass = isFriendlyUI ? classes.hideXsDown : classes.hideMdDown	×
379	const usersMenuNode = currentUser && <div className={searchOpen ? usersMenuClass : undefined}>	×
380	<AnalyticsContext pageSectionContext="usersMenu">
381	<UsersMenu />
382	</AnalyticsContext>
383	</div>
384
385	// the items on the right-hand side (search, notifications, user menu, login/sign up buttons)
386	const rightHeaderItemsNode = <div className={classes.rightHeaderItems}>	×
387	<SearchBar onSetIsActive={setSearchOpen} searchResultsArea={searchResultsArea} />
388	{!isFriendlyUI && usersMenuNode}	×
389	{!currentUser && <UsersAccountMenu />}	×
390	{hasKarmaChangeNotifier && <KarmaChangeNotifier	×
391	currentUser={currentUser}
392	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
393	/>}
394	{currentUser && !currentUser.usernameUnset && <NotificationsMenuButton	×
395	toggle={handleNotificationToggle}
396	open={notificationOpen}
397	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
398	/>}
399	{hasMessagesButton &&	×
400	<MessagesMenuButton
401	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
402	/>
403	}
404	{isFriendlyUI && usersMenuNode}	×
405	</div>
406
407	// the left side nav menu
408	const headerNavigationDrawer = <NavigationDrawer	×
409	open={navigationOpen}
410	handleOpen={() => setNavigationOpen(true)}	×
411	handleClose={() => setNavigationOpen(false)}	×
412	toc={toc?.sectionData ?? null}	×
413	/>
414
415	// the right side notifications menu
416	const headerNotificationsMenu = currentUser && !hasNotificationsPage	×
417	&& (
418	<NotificationsMenu
419	open={notificationOpen}
420	hasOpened={notificationHasOpened}
421	setIsOpen={handleSetNotificationDrawerOpen}
422	/>
423	);
424
NEW 425	let headerStyle: CSSProperties = {}	×
NEW 426	const bannerImageId = currentForumEvent?.bannerImageId	×
427	// On EAF, forum events with polls also update the home page header background
NEW 428	if (currentRoute?.name === 'home' && bannerImageId && currentForumEvent.includesPoll && isEAForum) {	×
NEW 429	const darkColor = currentForumEvent?.darkColor	×
NEW 430	const background = `top / cover no-repeat url(${makeCloudinaryImageUrl(bannerImageId, {	×
431	c: "fill",
432	dpr: "auto",
433	q: "auto",
434	f: "auto",
435	g: "north",
436	})})${darkColor ? `, ${darkColor}` : ''}`	×
NEW 437	headerStyle = {background}	×
438	}
439
440	// If we're explicitly given a backgroundColor, that overrides any event header
NEW 441	if (backgroundColor) {	×
NEW 442	headerStyle = {backgroundColor}	×
443	}
444	// Make all the text and icons white when we have some sort of color in the header background
NEW 445	const useWhiteText = Object.keys(headerStyle).length > 0	×
446
UNCOV 447	return (	×
448	<AnalyticsContext pageSectionContext="header">
449	<div className={classes.root}>
450	<Headroom
451	disableInlineStyles
452	downTolerance={10} upTolerance={10}
453	height={HEADER_HEIGHT}
454	className={classNames(classes.headroom, {
455	[classes.headroomPinnedOpen]: searchOpen,
456	})}
457	onUnfix={() => setUnFixed(true)}	×
458	onUnpin={() => setUnFixed(false)}	×
459	disable={stayAtTop}
460	>
461	<header
462	className={classNames(
463	classes.appBar,
464	useWhiteText && classes.appBarDarkBackground,	×
465	)}
466	style={headerStyle}
467	>
468	<Toolbar disableGutters={isFriendlyUI}>
469	{navigationMenuButton}
470	<Typography className={classes.title} variant="title">
471	<div className={classes.hideSmDown}>
472	<div className={classes.titleSubtitleContainer}>
473	<Link to="/" className={classes.titleLink}>
474	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}	×
475	{forumHeaderTitleSetting.get()}
476	</Link>
477	<HeaderSubtitle />
478	</div>
479	</div>
480	<div className={classes.hideMdUp}>
481	<Link to="/" className={classes.titleLink}>
482	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={useWhiteText}/></div>}	×
483	{forumShortTitleSetting.get()}
484	</Link>
485	</div>
486	</Typography>
487	{!isEAForum &&<ActiveDialogues />}	×
488	{rightHeaderItemsNode}
489	</Toolbar>
490	</header>
491	{headerNavigationDrawer}
492	</Headroom>
493	{headerNotificationsMenu}
494	</div>
495	</AnalyticsContext>
496	)
497	}
498
499	const HeaderComponent = registerComponent('Header', Header, {	18✔
500	styles,
501	hocs: [withErrorBoundary]
502	});
503
504	declare global {
505	interface ComponentTypes {
506	Header: typeof HeaderComponent
507	}
508	}

ForumMagnum / ForumMagnum / 9654713619

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