fix react dom warning passing hideForUnauth

This commit is contained in:
jessop 2020-08-25 18:00:47 -04:00 committed by Sean Yesmunt
parent bae146205c
commit 4a86d25891

View file

@ -171,6 +171,7 @@ function SideNavigation(props: Props) {
navigate: string, navigate: string,
icon: string, icon: string,
extra?: Node, extra?: Node,
hideForUnauth?: boolean,
}> = [ }> = [
{ {
label: 'Sign In', label: 'Sign In',
@ -257,11 +258,12 @@ function SideNavigation(props: Props) {
})} })}
> >
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}> <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{TOP_LEVEL_LINKS.map(linkProps => {TOP_LEVEL_LINKS.map(linkProps => {
!email && linkProps.hideForUnauth && IS_WEB ? null : ( const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate}> <li key={linkProps.navigate}>
<Button <Button
{...linkProps} {...passedProps}
label={__(linkProps.label)} label={__(linkProps.label)}
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon} icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', { className={classnames('navigation-link', {
@ -272,8 +274,8 @@ function SideNavigation(props: Props) {
/> />
{linkProps.extra} {linkProps.extra}
</li> </li>
) );
)} })}
</ul> </ul>
{sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && ( {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
@ -303,11 +305,13 @@ function SideNavigation(props: Props) {
})} })}
> >
<ul className="navigation-links--absolute"> <ul className="navigation-links--absolute">
{TOP_LEVEL_LINKS.map(linkProps => {TOP_LEVEL_LINKS.map(linkProps => {
!email && linkProps.hideForUnauth && IS_WEB ? null : ( const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate}> <li key={linkProps.navigate}>
<Button <Button
{...linkProps} {...passedProps}
label={__(linkProps.label)} label={__(linkProps.label)}
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon} icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', { className={classnames('navigation-link', {
@ -318,23 +322,25 @@ function SideNavigation(props: Props) {
/> />
{linkProps.extra} {linkProps.extra}
</li> </li>
) );
)} })}
</ul> </ul>
<ul className="navigation-links--absolute"> <ul className="navigation-links--absolute">
{subLinks.map(linkProps => {subLinks.map(linkProps => {
!email && linkProps.hideForUnauth && IS_WEB ? null : ( const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate} className="mobile-only"> <li key={linkProps.navigate} className="mobile-only">
<Button <Button
{...linkProps} {...passedProps}
label={__(linkProps.label)} label={__(linkProps.label)}
className="navigation-link" className="navigation-link"
activeClass="navigation-link--active" activeClass="navigation-link--active"
/> />
{linkProps.extra} {linkProps.extra}
</li> </li>
) );
)} })}
</ul> </ul>
{isPersonalized && subscriptions && subscriptions.length > 0 && ( {isPersonalized && subscriptions && subscriptions.length > 0 && (
<ul className="navigation__secondary navigation-links--small"> <ul className="navigation__secondary navigation-links--small">