Merge branch 'develop' into 'develop'

Make promo panel/footer items localizable

See merge request soapbox-pub/soapbox-fe!545
merge-requests/547/head
Alex Gleason 3 years ago
commit 59e47d6e6e

@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
const mapStateToProps = (state, props) => { const mapStateToProps = (state, props) => {
@ -13,6 +14,7 @@ const mapStateToProps = (state, props) => {
return { return {
copyright: soapboxConfig.get('copyright'), copyright: soapboxConfig.get('copyright'),
navlinks: soapboxConfig.getIn(['navlinks', 'homeFooter'], ImmutableList()), navlinks: soapboxConfig.getIn(['navlinks', 'homeFooter'], ImmutableList()),
locale: getSettings(state).get('locale'),
}; };
}; };
@ -21,11 +23,12 @@ class Footer extends ImmutablePureComponent {
static propTypes = { static propTypes = {
copyright: PropTypes.string, copyright: PropTypes.string,
locale: PropTypes.string,
navlinks: ImmutablePropTypes.list, navlinks: ImmutablePropTypes.list,
} }
render() { render() {
const { copyright, navlinks } = this.props; const { copyright, locale, navlinks } = this.props;
return ( return (
<div className='footer'> <div className='footer'>
@ -36,7 +39,9 @@ class Footer extends ImmutablePureComponent {
<ul> <ul>
{navlinks.map((link, i) => ( {navlinks.map((link, i) => (
<li key={i}> <li key={i}>
<Link to={link.get('url')}>{link.get('title')}</Link> <Link to={link.get('url')}>
{link.getIn(['titleLocales', locale]) || link.get('title')}
</Link>
</li> </li>
))} ))}
</ul> </ul>

@ -1,22 +1,26 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
promoItems: getSoapboxConfig(state).getIn(['promoPanel', 'items']), promoItems: getSoapboxConfig(state).getIn(['promoPanel', 'items']),
locale: getSettings(state).get('locale'),
}); });
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
class PromoPanel extends React.PureComponent { class PromoPanel extends React.PureComponent {
static propTypes = { static propTypes = {
locale: PropTypes.string,
promoItems: ImmutablePropTypes.list, promoItems: ImmutablePropTypes.list,
} }
render() { render() {
const { promoItems } = this.props; const { locale, promoItems } = this.props;
if (!promoItems) return null; if (!promoItems) return null;
return ( return (
@ -25,7 +29,7 @@ class PromoPanel extends React.PureComponent {
{promoItems.map((item, i) => {promoItems.map((item, i) =>
(<a className='promo-panel-item' href={item.get('url')} target='_blank' key={i}> (<a className='promo-panel-item' href={item.get('url')} target='_blank' key={i}>
<Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth /> <Icon id={item.get('icon')} className='promo-panel-item__icon' fixedWidth />
{item.get('text')} {item.getIn(['textLocales', locale]) || item.get('text')}
</a>), </a>),
)} )}
</div> </div>

Loading…
Cancel
Save