10197714656

Committed 01 Aug 2024 11:49AM UTC coverage: 32.059% (-0.02%) from 32.082%

Build # 10197714656

Build Type

Pull #9554

github

Committed by

oetherington

Commit Message

Clear unread bubble when opening notification popover

Pull Request Pull Request #9554: EA Notifications redesign

Run Details

4936 of 40123 branches covered (12.3%)

Branch coverage included in aggregate %.

52 of 128 new or added lines in 13 files covered. (40.63%)

3 existing lines in 2 files now uncovered.

28755 of 64969 relevant lines covered (44.26%)

180.64 hits per line

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

16.5

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

import React, { useContext, useState, useCallback, useEffect, CSSProperties } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { Link } 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';
import { hasForumEvents } from '@/lib/betas';

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 {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", {
        previousCheck: lastNotificationsCheck,
      });
    } 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}
      />
    );

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

ForumMagnum / ForumMagnum / 10197714656

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