9003196160

Committed 08 May 2024 02:03PM UTC coverage: 31.879% (-0.05%) from 31.93%

Build # 9003196160

Build Type

Pull #9244

github

Committed by

oetherington

Commit Message

Better emoji detection

This fixed the problem, but I don't want to talk about the solution...

Pull Request Pull Request #9244: [EA] Emoji Banner May '24

Run Details

4768 of 38957 branches covered (12.24%)

Branch coverage included in aggregate %.

52 of 215 new or added lines in 11 files covered. (24.19%)

2 existing lines in 2 files now uncovered.

27688 of 62852 relevant lines covered (44.05%)

177.26 hits per line

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

16.58

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

import React, { useContext, useState, useCallback, useEffect } 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';

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 EMOJIS_HEADER_HEIGHT = 196;

const emojisInfoLink = "#"; // TODO

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,
    },
    "& .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",
    },
  },
  emojisRoot: {
    marginBottom: EMOJIS_HEADER_HEIGHT - 70,
    [theme.breakpoints.down("sm")]: {
      marginBottom: 0,
    },
  },
  emojisAppBar: {
    boxShadow: "none",
    color: theme.palette.emojiHeader.foreground,
    backgroundColor: theme.palette.emojiHeader.background,
    height: EMOJIS_HEADER_HEIGHT,
    "& .MuiToolbar-root > *": {
      zIndex: 2,
    },
    "& .EAButton-greyContained": {
      backgroundColor: `${theme.palette.grey[320]} !important`,
      "&:hover": {
        backgroundColor: `${theme.palette.grey[340]} !important`,
      }
    },
    "& .Header-titleLink": {
      color: theme.palette.emojiHeader.foreground,
    },
    "& .ForumIcon-root": {
      color: theme.palette.emojiHeader.foreground,
    },
    [theme.breakpoints.down("sm")]: {
      height: HEADER_HEIGHT,
    },
  },
  emojisContent: {
    zIndex: 2,
    maxWidth: 300,
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 13,
    fontWeight: 500,
    lineHeight: "140%",
    marginLeft: 46,
    "& a": {
      textDecoration: "underline",
      "&:hover": {
        textDecoration: "none",
        opacity: 1,
      },
    },
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
  emojisTitle: {
    fontSize: 30,
    fontWeight: 700,
    lineHeight: "120%",
    letterSpacing: "-0.3px",
    marginBottom: 10,
    marginTop: 2,
  },
});

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 { pathname, hash } = useLocation();

  const showEmojisHeader =
    isEAForum &&
    pathname === "/" &&
    !currentUser?.usernameUnset;

  const {
    SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
    NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
    ActiveDialogues, SiteLogo, MessagesMenuButton, EAEmojisHeader,
  } = 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}
      />
    );

  return (
    <AnalyticsContext pageSectionContext="header">
      <div className={classNames(classes.root, showEmojisHeader && classes.emojisRoot)}>
        <Headroom
          disableInlineStyles
          downTolerance={10} upTolerance={10}
          height={HEADER_HEIGHT}
          className={classNames(classes.headroom, {
            [classes.headroomPinnedOpen]: searchOpen,
          })}
          onUnfix={() => setUnFixed(true)}
          onUnpin={() => setUnFixed(false)}
          disable={stayAtTop || showEmojisHeader}
        >
          <header
            className={classNames(
              classes.appBar,
              showEmojisHeader && classes.emojisAppBar,
              !!backgroundColor && classes.appBarDarkBackground,
            )}
            style={backgroundColor ? {backgroundColor} : {}}
          >
            <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={!!backgroundColor}/></div>}
                      {forumHeaderTitleSetting.get()}
                    </Link>
                    <HeaderSubtitle />
                  </div>
                </div>
                <div className={classes.hideMdUp}>
                  <Link to="/" className={classes.titleLink}>
                    {hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={!!backgroundColor}/></div>}
                    {forumShortTitleSetting.get()}
                  </Link>
                </div>
              </Typography>
              {showEmojisHeader && <div style={{flexGrow: 2}} />}
              {!isEAForum &&<ActiveDialogues />}
              {rightHeaderItemsNode}
            </Toolbar>
            {showEmojisHeader &&
              <>
                <div className={classes.emojisContent}>
                  <div className={classes.emojisTitle}>
                    Ways the world is getting better
                  </div>
                  <div>
                    Click the banner to add a piece of{" "}
                    <Link to={emojisInfoLink}>good news</Link>
                  </div>
                </div>
                <EAEmojisHeader />
              </>
            }
          </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 } from 'react';	65✔
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
19	export const forumHeaderTitleSetting = new PublicInstanceSetting<string>('forumSettings.headerTitle', "LESSWRONG", "warning")	18✔
20	export const forumShortTitleSetting = new PublicInstanceSetting<string>('forumSettings.shortForumTitle', "LW", "warning")	18✔
21	/** Height of top header. On Book UI sites, this is for desktop only */
22	export const HEADER_HEIGHT = isBookUI ? 64 : 66;	18!
23	/** Height of top header on mobile. On Friendly UI sites, this is the same as the HEADER_HEIGHT */
24	export const MOBILE_HEADER_HEIGHT = isBookUI ? 56 : HEADER_HEIGHT;	18!
25	export const EMOJIS_HEADER_HEIGHT = 196;	18✔
26
27	const emojisInfoLink = "#"; // TODO	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	"& .UsersMenu-arrowIcon": {
86	color: theme.palette.text.alwaysWhite,
87	},
88	"& .EAButton-variantContained": {
89	backgroundColor: theme.palette.text.alwaysWhite,
90	color: theme.palette.text.alwaysBlack,
91	"&:hover": {
92	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 90%, ${theme.palette.text.alwaysBlack})`,
93	},
94	},
95	"& .EAButton-greyContained": {
96	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 15%, ${theme.palette.background.transparent})`,
97	color: theme.palette.text.alwaysWhite,
98	"&:hover": {
99	backgroundColor: `color-mix(in oklab, ${theme.palette.text.alwaysWhite} 10%, ${theme.palette.background.transparent}) !important`,
100	},
101	},
102	},
103	root: {
104	// This height (including the breakpoint at xs/600px) is set by Headroom, and this wrapper (which surrounds
105	// Headroom and top-pads the page) has to match.
106	height: HEADER_HEIGHT,
107	[theme.breakpoints.down('xs')]: {
108	height: MOBILE_HEADER_HEIGHT,
109	},
110	"@media print": {
111	display: "none"
112	}
113	},
114	titleSubtitleContainer: {
115	display: 'flex',
116	alignItems: 'center'
117	},
118	title: {
119	flex: 1,
120	position: "relative",
121	top: 3,
122	paddingRight: theme.spacing.unit,
123	color: theme.palette.text.secondary,
124	// maxWidth: 130,
125	},
126	titleLink: {
127	color: theme.palette.header.text,
128	fontSize: 19,
129	'&:hover, &:active': {
130	textDecoration: 'none',
131	opacity: 0.7,
132	},
133	display: 'flex',
134	alignItems: 'center',
135	fontWeight: isFriendlyUI ? 400 : undefined,	1!
136	height: isFriendlyUI ? undefined : '19px'	1!
137	},
138	menuButton: {
139	marginLeft: -theme.spacing.unit,
140	marginRight: theme.spacing.unit,
141	},
142	siteLogo: {
143	marginLeft: -7,
144	marginRight: 6,
145	[theme.breakpoints.down('sm')]: {
146	marginLeft: -12,
147	marginRight: 3
148	},
149	},
150	hideLgUp: {
151	[theme.breakpoints.up('lg')]: {
152	display:"none !important"
153	}
154	},
155	hideMdDown: {
156	[theme.breakpoints.down('md')]: {
157	display:"none !important"
158	}
159	},
160	hideSmDown: {
161	[theme.breakpoints.down('sm')]: {
162	display: "none !important",
163	},
164	},
165	hideXsDown: {
166	[theme.breakpoints.down('xs')]: {
167	display: "none !important",
168	},
169	},
170	hideMdUp: {
171	[theme.breakpoints.up('md')]: {
172	display: "none !important",
173	},
174	},
175	rightHeaderItems: {
176	marginRight: -theme.spacing.unit,
177	marginLeft: "auto",
178	display: "flex",
179	alignItems: isFriendlyUI ? 'center' : undefined,	1!
180	},
181	// Prevent rearranging of mobile header when search loads after SSR
182	searchSSRStandin: {
183	minWidth: 48
184	},
185	headroom: {
186	// Styles for header scrolling, provided by react-headroom
187	// https://github.com/KyleAMathews/react-headroom
188	"& .headroom": {
189	top: "unset",
190	left: 0,
191	right: 0,
192	zIndex: 1300,
193	},
194	"& .headroom--unfixed": {
195	position: "relative",
196	transform: "translateY(0)",
197	},
198	"& .headroom--scrolled": {
199	transition: "transform 200ms ease-in-out",
200	},
201	"& .headroom--unpinned": {
202	position: "fixed",
203	transform: "translateY(-100%)",
204	},
205	"& .headroom--pinned": {
206	position: "fixed",
207	transform: "translateY(0%)",
208	},
209	},
210	headroomPinnedOpen: {
211	"& .headroom--unpinned": {
212	transform: "none !important",
213	},
214	"& .headroom--unfixed": {
215	position: "fixed !important",
216	},
217	},
218	emojisRoot: {
219	marginBottom: EMOJIS_HEADER_HEIGHT - 70,
220	[theme.breakpoints.down("sm")]: {
221	marginBottom: 0,
222	},
223	},
224	emojisAppBar: {
225	boxShadow: "none",
226	color: theme.palette.emojiHeader.foreground,
227	backgroundColor: theme.palette.emojiHeader.background,
228	height: EMOJIS_HEADER_HEIGHT,
229	"& .MuiToolbar-root > *": {
230	zIndex: 2,
231	},
232	"& .EAButton-greyContained": {
233	backgroundColor: `${theme.palette.grey[320]} !important`,
234	"&:hover": {
235	backgroundColor: `${theme.palette.grey[340]} !important`,
236	}
237	},
238	"& .Header-titleLink": {
239	color: theme.palette.emojiHeader.foreground,
240	},
241	"& .ForumIcon-root": {
242	color: theme.palette.emojiHeader.foreground,
243	},
244	[theme.breakpoints.down("sm")]: {
245	height: HEADER_HEIGHT,
246	},
247	},
248	emojisContent: {
249	zIndex: 2,
250	maxWidth: 300,
251	fontFamily: theme.palette.fonts.sansSerifStack,
252	fontSize: 13,
253	fontWeight: 500,
254	lineHeight: "140%",
255	marginLeft: 46,
256	"& a": {
257	textDecoration: "underline",
258	"&:hover": {
259	textDecoration: "none",
260	opacity: 1,
261	},
262	},
263	[theme.breakpoints.down("sm")]: {
264	display: "none",
265	},
266	},
267	emojisTitle: {
268	fontSize: 30,
269	fontWeight: 700,
270	lineHeight: "120%",
271	letterSpacing: "-0.3px",
272	marginBottom: 10,
273	marginTop: 2,
274	},
275	});
276
277	const Header = ({	18✔
278	standaloneNavigationPresent,
279	sidebarHidden,
280	toggleStandaloneNavigation,
281	stayAtTop=false,	×
282	searchResultsArea,
283	backgroundColor,
284	classes,
285	}: {
286	standaloneNavigationPresent: boolean,
287	sidebarHidden: boolean,
288	toggleStandaloneNavigation: () => void,
289	stayAtTop?: boolean,
290	searchResultsArea: React.RefObject<HTMLDivElement>,
291	// CSS var corresponding to the background color you want to apply (see also appBarDarkBackground above)
292	backgroundColor?: string,
293	classes: ClassesType<typeof styles>,
294	}) => {
295	const [navigationOpen, setNavigationOpenState] = useState(false);	×
296	const [notificationOpen, setNotificationOpen] = useState(false);	×
297	const [notificationHasOpened, setNotificationHasOpened] = useState(false);	×
298	const [searchOpen, setSearchOpenState] = useState(false);	×
299	const [unFixed, setUnFixed] = useState(true);	×
300	const currentUser = useCurrentUser();	×
301	const navigate = useNavigate();	×
302	const {toc} = useContext(SidebarsContext)!;	×
303	const { captureEvent } = useTracking()	×
304	const { notificationsOpened } = useUnreadNotifications();	×
305	const { pathname, hash } = useLocation();	×
306
307	const showEmojisHeader =
NEW 308	isEAForum &&	×
309	pathname === "/" &&
310	!currentUser?.usernameUnset;	×
311
312	const {
313	SearchBar, UsersMenu, UsersAccountMenu, NotificationsMenuButton, NavigationDrawer,
314	NotificationsMenu, KarmaChangeNotifier, HeaderSubtitle, Typography, ForumIcon,
315	ActiveDialogues, SiteLogo, MessagesMenuButton, EAEmojisHeader,
316	} = Components;	×
317
318	useEffect(() => {	×
319	// When we move to a different page we will be positioned at the top of
320	// the page (unless the hash is set) but Headroom doesn't run this callback
321	// on navigation so we have to do it manually
322	if (!hash) {	×
323	setUnFixed(true);	×
324	}
325	}, [pathname, hash]);
326
327	const hasNotificationsPage = isFriendlyUI;	×
328	const hasKarmaChangeNotifier = !isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
329	const hasMessagesButton = isFriendlyUI && currentUser && !currentUser.usernameUnset;	×
330
331	const setNavigationOpen = (open: boolean) => {	×
332	setNavigationOpenState(open);	×
333	captureEvent("navigationBarToggle", {open: open})	×
334	}
335
336	const handleSetNotificationDrawerOpen = async (isOpen: boolean): Promise<void> => {	×
337	if (!currentUser) return;	×
338	if (isOpen) {	×
339	setNotificationOpen(true);	×
340	setNotificationHasOpened(true);	×
341	await notificationsOpened();	×
342	} else {
343	setNotificationOpen(false);	×
344	}
345	}
346
347	const handleNotificationToggle = () => {	×
348	if (!currentUser) return;	×
349	const { lastNotificationsCheck } = currentUser	×
350
351	if (hasNotificationsPage) {	×
352	captureEvent("notificationsIconToggle", {	×
353	navigate: true,
354	previousCheck: lastNotificationsCheck,
355	});
356	navigate("/notifications");	×
357	} else {
358	captureEvent("notificationsIconToggle", {	×
359	open: !notificationOpen,
360	previousCheck: lastNotificationsCheck,
361	});
362	void handleSetNotificationDrawerOpen(!notificationOpen);	×
363	}
364	}
365
366	// We do two things when the search is open:
367	// 1) Pin the header open with the Headroom component
368	// 2) Hide the username on mobile so users with long usernames can still
369	// enter search queries
370	// Called by SearchBar.
371	const setSearchOpen = useCallback((isOpen: boolean) => {	×
372	if (isOpen) { captureEvent("searchToggle", {"open": isOpen}) }	×
373	setSearchOpenState(isOpen);	×
374	}, [captureEvent]);
375
376	const navigationMenuButton = (
377	// The navigation menu button either toggles a free floating sidebar, opens
378	// a drawer with site navigation, or a drawer with table of contents. (This
379	// is structured a little oddly because the hideSmDown/hideMdUp filters
380	// cause a misalignment if they're in the wrong part of the tree.)
381	<React.Fragment>	×
382	{toc?.sectionData?.sections	×
383	? <>	×
384	<div className={classes.hideSmDown}>
385	<IconButton
386	className={classNames(
387	classes.menuButton,
388	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
389	)}
390	color="inherit"
391	aria-label="Menu"
392	onClick={()=>setNavigationOpen(true)}	×
393	>
394	<ForumIcon icon="Menu" />
395	</IconButton>
396	</div>
397	<div className={classes.hideMdUp}>
398	<IconButton
399	className={classNames(
400	classes.menuButton,
401	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
402	)}
403	color="inherit"
404	aria-label="Menu"
405	onClick={()=>setNavigationOpen(true)}	×
406	>
407	<TocIcon />
408	</IconButton>
409	</div>
410	</>
411	: <IconButton
412	className={classNames(
413	classes.menuButton,
414	{[classes.hideLgUp]: standaloneNavigationPresent && unFixed}	×
415	)}
416	color="inherit"
417	aria-label="Menu"
418	onClick={()=>setNavigationOpen(true)}	×
419	>
420	<ForumIcon icon="Menu" />
421	</IconButton>
422	}
423	{standaloneNavigationPresent && unFixed && <IconButton	×
424	className={classNames(
425	classes.menuButton,
426	classes.hideMdDown
427	)}
428	color="inherit"
429	aria-label="Menu"
430	onClick={toggleStandaloneNavigation}
431	>
432	{(isFriendlyUI && !sidebarHidden) ? <ForumIcon icon="CloseMenu" /> : <ForumIcon icon="Menu" />}	×
433	</IconButton>}
434	</React.Fragment>
435	)
436
437	const usersMenuClass = isFriendlyUI ? classes.hideXsDown : classes.hideMdDown	×
438	const usersMenuNode = currentUser && <div className={searchOpen ? usersMenuClass : undefined}>	×
439	<AnalyticsContext pageSectionContext="usersMenu">
440	<UsersMenu />
441	</AnalyticsContext>
442	</div>
443
444	// the items on the right-hand side (search, notifications, user menu, login/sign up buttons)
445	const rightHeaderItemsNode = <div className={classes.rightHeaderItems}>	×
446	<SearchBar onSetIsActive={setSearchOpen} searchResultsArea={searchResultsArea} />
447	{!isFriendlyUI && usersMenuNode}	×
448	{!currentUser && <UsersAccountMenu />}	×
449	{hasKarmaChangeNotifier && <KarmaChangeNotifier	×
450	currentUser={currentUser}
451	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
452	/>}
453	{currentUser && !currentUser.usernameUnset && <NotificationsMenuButton	×
454	toggle={handleNotificationToggle}
455	open={notificationOpen}
456	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
457	/>}
458	{hasMessagesButton &&	×
459	<MessagesMenuButton
460	className={(isFriendlyUI && searchOpen) ? classes.hideXsDown : undefined}	×
461	/>
462	}
463	{isFriendlyUI && usersMenuNode}	×
464	</div>
465
466	// the left side nav menu
467	const headerNavigationDrawer = <NavigationDrawer	×
468	open={navigationOpen}
469	handleOpen={() => setNavigationOpen(true)}	×
470	handleClose={() => setNavigationOpen(false)}	×
471	toc={toc?.sectionData ?? null}	×
472	/>
473
474	// the right side notifications menu
475	const headerNotificationsMenu = currentUser && !hasNotificationsPage	×
476	&& (
477	<NotificationsMenu
478	open={notificationOpen}
479	hasOpened={notificationHasOpened}
480	setIsOpen={handleSetNotificationDrawerOpen}
481	/>
482	);
483
484	return (	×
485	<AnalyticsContext pageSectionContext="header">
486	<div className={classNames(classes.root, showEmojisHeader && classes.emojisRoot)}>	×
487	<Headroom
488	disableInlineStyles
489	downTolerance={10} upTolerance={10}
490	height={HEADER_HEIGHT}
491	className={classNames(classes.headroom, {
492	[classes.headroomPinnedOpen]: searchOpen,
493	})}
494	onUnfix={() => setUnFixed(true)}	×
495	onUnpin={() => setUnFixed(false)}	×
496	disable={stayAtTop \|\| showEmojisHeader}	×
497	>
498	<header
499	className={classNames(
500	classes.appBar,
501	showEmojisHeader && classes.emojisAppBar,	×
502	!!backgroundColor && classes.appBarDarkBackground,	×
503	)}
504	style={backgroundColor ? {backgroundColor} : {}}	×
505	>
506	<Toolbar disableGutters={isFriendlyUI}>
507	{navigationMenuButton}
508	<Typography className={classes.title} variant="title">
509	<div className={classes.hideSmDown}>
510	<div className={classes.titleSubtitleContainer}>
511	<Link to="/" className={classes.titleLink}>
512	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={!!backgroundColor}/></div>}	×
513	{forumHeaderTitleSetting.get()}
514	</Link>
515	<HeaderSubtitle />
516	</div>
517	</div>
518	<div className={classes.hideMdUp}>
519	<Link to="/" className={classes.titleLink}>
520	{hasProminentLogoSetting.get() && <div className={classes.siteLogo}><SiteLogo eaWhite={!!backgroundColor}/></div>}	×
521	{forumShortTitleSetting.get()}
522	</Link>
523	</div>
524	</Typography>
525	{showEmojisHeader && <div style={{flexGrow: 2}} />}	×
526	{!isEAForum &&<ActiveDialogues />}	×
527	{rightHeaderItemsNode}
528	</Toolbar>
529	{showEmojisHeader &&	×
530	<>
531	<div className={classes.emojisContent}>
532	<div className={classes.emojisTitle}>
533	Ways the world is getting better
534	</div>
535	<div>
536	Click the banner to add a piece of{" "}
537	<Link to={emojisInfoLink}>good news</Link>
538	</div>
539	</div>
540	<EAEmojisHeader />
541	</>
542	}
543	</header>
544	{headerNavigationDrawer}
545	</Headroom>
546	{headerNotificationsMenu}
547	</div>
548	</AnalyticsContext>
549	)
550	}
551
552	const HeaderComponent = registerComponent('Header', Header, {	18✔
553	styles,
554	hocs: [withErrorBoundary]
555	});
556
557	declare global {
558	interface ComponentTypes {
559	Header: typeof HeaderComponent
560	}
561	}

ForumMagnum / ForumMagnum / 9003196160

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