Page MenuHomePhabricator
Differential D7870 Diff 26667 landing/landing.react.js

Changeset View

Standalone View

View Options

landing/landing.react.js

Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines () =>
modalContext.modals.map(([modal, key]) => ( modalContext.modals.map(([modal, key]) => (
<React.Fragment key={key}>{modal}</React.Fragment> <React.Fragment key={key}>{modal}</React.Fragment>
)), )),
[modalContext.modals], [modalContext.modals],
); );
const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false); const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false);
React.useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 848 && showMobileNav) {
ashoatUnsubmitted
Not Done
Inline Actions

This is very brittle and hard to maintain... it's likely something changes with the breakpoint, and nobody will know that this code needs to be updated.

Can this constant be defined somewhere and given a name, along with a comment that explains where it comes from (presumably some CSS file), and a comment in the CSS file indicating that the value must be kept in sync here?

ashoat: This is very brittle and hard to maintain... it's likely something changes with the breakpoint…
setShowMobileNav(false);
}
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [showMobileNav, setShowMobileNav]);
const innerContainerClassName = classNames({ const innerContainerClassName = classNames({
[css.innerContainer]: true, [css.innerContainer]: true,
[css.innerContainerMobileNav]: showMobileNav, [css.innerContainerMobileNav]: showMobileNav,
}); });
useScrollToTopOnNavigate(); useScrollToTopOnNavigate();
const onPrivacy = useRouteMatch({ path: '/privacy' }); const onPrivacy = useRouteMatch({ path: '/privacy' });
const onTerms = useRouteMatch({ path: '/terms' }); const onTerms = useRouteMatch({ path: '/terms' });
▲ Show 20 Lines • Show All 57 Lines • Show Last 20 Lines