Fix translation failure on the Sidebar

## Issue
The sidebar text stuck in English despite already translated.

I'm guessing the i18n macro only ran once for the global object.

## Change
Run the macro on the label when passing it to the `Button`.
This commit is contained in:
infiinte-persistence 2020-08-13 15:07:53 +08:00 committed by Sean Yesmunt
parent 717de53eb1
commit b49df1fc0a

View file

@ -17,28 +17,28 @@ const TOP_LEVEL_LINKS: Array<{
hideForUnauth?: boolean, hideForUnauth?: boolean,
}> = [ }> = [
{ {
label: __('Home'), label: 'Home',
navigate: `/`, navigate: `/`,
icon: ICONS.HOME, icon: ICONS.HOME,
}, },
{ {
label: __('Following'), label: 'Following',
navigate: `/$/${PAGES.CHANNELS_FOLLOWING}`, navigate: `/$/${PAGES.CHANNELS_FOLLOWING}`,
icon: ICONS.SUBSCRIBE, icon: ICONS.SUBSCRIBE,
}, },
{ {
label: __('Your Tags'), label: 'Your Tags',
navigate: `/$/${PAGES.TAGS_FOLLOWING}`, navigate: `/$/${PAGES.TAGS_FOLLOWING}`,
icon: ICONS.TAG, icon: ICONS.TAG,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Discover'), label: 'Discover',
navigate: `/$/${PAGES.DISCOVER}`, navigate: `/$/${PAGES.DISCOVER}`,
icon: ICONS.DISCOVER, icon: ICONS.DISCOVER,
}, },
{ {
label: __('Purchased'), label: 'Purchased',
navigate: `/$/${PAGES.LIBRARY}`, navigate: `/$/${PAGES.LIBRARY}`,
icon: ICONS.PURCHASED, icon: ICONS.PURCHASED,
hideForUnauth: true, hideForUnauth: true,
@ -53,68 +53,68 @@ const ABSOLUTE_LINKS: Array<{
hideForUnauth?: boolean, hideForUnauth?: boolean,
}> = [ }> = [
{ {
label: __('Upload'), label: 'Upload',
navigate: `/$/${PAGES.UPLOAD}`, navigate: `/$/${PAGES.UPLOAD}`,
icon: ICONS.PUBLISH, icon: ICONS.PUBLISH,
}, },
{ {
label: __('New Channel'), label: 'New Channel',
navigate: `/$/${PAGES.CHANNEL_NEW}`, navigate: `/$/${PAGES.CHANNEL_NEW}`,
icon: ICONS.CHANNEL, icon: ICONS.CHANNEL,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Uploads'), label: 'Uploads',
navigate: `/$/${PAGES.UPLOADS}`, navigate: `/$/${PAGES.UPLOADS}`,
icon: ICONS.PUBLISH, icon: ICONS.PUBLISH,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Channels'), label: 'Channels',
navigate: `/$/${PAGES.CHANNELS}`, navigate: `/$/${PAGES.CHANNELS}`,
icon: ICONS.CHANNEL, icon: ICONS.CHANNEL,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Creator Analytics'), label: 'Creator Analytics',
navigate: `/$/${PAGES.CREATOR_DASHBOARD}`, navigate: `/$/${PAGES.CREATOR_DASHBOARD}`,
icon: ICONS.ANALYTICS, icon: ICONS.ANALYTICS,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Wallet'), label: 'Wallet',
navigate: `/$/${PAGES.WALLET}`, navigate: `/$/${PAGES.WALLET}`,
icon: ICONS.WALLET, icon: ICONS.WALLET,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Notifications'), label: 'Notifications',
navigate: `/$/${PAGES.NOTIFICATIONS}`, navigate: `/$/${PAGES.NOTIFICATIONS}`,
icon: ICONS.NOTIFICATION, icon: ICONS.NOTIFICATION,
extra: <NotificationBubble inline />, extra: <NotificationBubble inline />,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Rewards'), label: 'Rewards',
navigate: `/$/${PAGES.REWARDS}`, navigate: `/$/${PAGES.REWARDS}`,
icon: ICONS.REWARDS, icon: ICONS.REWARDS,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Invites'), label: 'Invites',
navigate: `/$/${PAGES.INVITE}`, navigate: `/$/${PAGES.INVITE}`,
icon: ICONS.INVITE, icon: ICONS.INVITE,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Settings'), label: 'Settings',
navigate: `/$/${PAGES.SETTINGS}`, navigate: `/$/${PAGES.SETTINGS}`,
icon: ICONS.SETTINGS, icon: ICONS.SETTINGS,
hideForUnauth: true, hideForUnauth: true,
}, },
{ {
label: __('Help'), label: 'Help',
navigate: `/$/${PAGES.HELP}`, navigate: `/$/${PAGES.HELP}`,
icon: ICONS.HELP, icon: ICONS.HELP,
hideForUnauth: true, hideForUnauth: true,
@ -129,22 +129,22 @@ const UNAUTH_LINKS: Array<{
hideForUnauth?: boolean, hideForUnauth?: boolean,
}> = [ }> = [
{ {
label: __('Sign In'), label: 'Sign In',
navigate: `/$/${PAGES.AUTH_SIGNIN}`, navigate: `/$/${PAGES.AUTH_SIGNIN}`,
icon: ICONS.SIGN_IN, icon: ICONS.SIGN_IN,
}, },
{ {
label: __('Register'), label: 'Register',
navigate: `/$/${PAGES.AUTH}`, navigate: `/$/${PAGES.AUTH}`,
icon: ICONS.SIGN_UP, icon: ICONS.SIGN_UP,
}, },
{ {
label: __('Settings'), label: 'Settings',
navigate: `/$/${PAGES.SETTINGS}`, navigate: `/$/${PAGES.SETTINGS}`,
icon: ICONS.SETTINGS, icon: ICONS.SETTINGS,
}, },
{ {
label: __('Help'), label: 'Help',
navigate: `/$/${PAGES.HELP}`, navigate: `/$/${PAGES.HELP}`,
icon: ICONS.HELP, icon: ICONS.HELP,
}, },
@ -240,6 +240,7 @@ function SideNavigation(props: Props) {
<li key={linkProps.navigate}> <li key={linkProps.navigate}>
<Button <Button
{...linkProps} {...linkProps}
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', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary, 'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
@ -279,6 +280,7 @@ function SideNavigation(props: Props) {
<li key={linkProps.navigate}> <li key={linkProps.navigate}>
<Button <Button
{...linkProps} {...linkProps}
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', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary, 'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
@ -295,7 +297,12 @@ function SideNavigation(props: Props) {
{subLinks.map(linkProps => {subLinks.map(linkProps =>
!email && linkProps.hideForUnauth && IS_WEB ? null : ( !email && linkProps.hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate} className="mobile-only"> <li key={linkProps.navigate} className="mobile-only">
<Button {...linkProps} className="navigation-link" activeClass="navigation-link--active" /> <Button
{...linkProps}
label={__(linkProps.label)}
className="navigation-link"
activeClass="navigation-link--active"
/>
{linkProps.extra} {linkProps.extra}
</li> </li>
) )