How to use the i18n.translate function in i18n

indent: '  ',
  api: {
    __: 't',
    __n: 'tn',
    __l: 'tl',
    __h: 'th',
    __mf: 'tmf'
  },
  register: i18n.api,
  defaultLocale: config.defaultLocale,
  syncFiles: config.i18nSyncFiles,
  autoReload: config.i18nAutoReload,
  updateFiles: config.i18nUpdateFiles
});

i18n.translate = function(key, locale) {
  let args = _.values(arguments).slice(2);
  if (_.isUndefined(args)) args = [];
  const phrase = config.i18n[key];
  if (!_.isString(phrase)) {
    logger.warn(`translation key missing: ${key}`);
    return;
  }
  args = [{ phrase, locale }, ...args];
  return i18n.api.t(...args);
};

i18n.middleware = function(ctx, next) {
  // expose api methods to `ctx.req` and `ctx.state`
  i18n.init(ctx.req, ctx.state);

  // override the existing locale detection with our own

<map height="{200}" width="{380}" coords="{user.coords}">
				
			);
		}

		return (
			<div id="profile">
				
				<div>
					{user.isProtected // @todo move to ul
						&amp;&amp; <i title="{i18n.translate('pages.user.protected')}">
					}
					{user.isVerified
						&amp;&amp; <i title="{i18n.translate('pages.user.verified')}">
					}
				</i></i></div><i title="{i18n.translate('pages.user.protected')}"><i title="{i18n.translate('pages.user.verified')}">

				<ul id="info">
					{name}
					{url}
					{description}
					{location}
					{map}
				</ul>
			</i></i></div><i title="{i18n.translate('pages.user.protected')}"><i title="{i18n.translate('pages.user.verified')}">
		);</i></i></map>

render() {
		var title = this.state.disabled
			? i18n.translate('pages.accounts.errors.connection')
			: i18n.translate('pages.accounts.add');

		return (
			<a title="{title}">
				{i18n.translate('pages.accounts.add')}
			</a>
		);
	}
}

render() {
		return (
			<div id="profile-none">{i18n.translate('pages.user.not_found')}</div>
		);
	}
}

updateToolbar() {
		const imagePrefix = 'images/toolbar' + (connection.connected ? '' : '.disconnected');
		const nameParts = [chrome.runtime.getManifest().name];

		if (!connection.connected) {
			nameParts.push(i18n.translate('toolbar.disconnected'));
		}

		chrome.browserAction.setIcon({
			path: {
				19: [imagePrefix, '.png'].join(''),
				38: [imagePrefix, '@2x', '.png'].join('')
			}
		});

		chrome.browserAction.setTitle({
			title: nameParts.join(' - ')
		});
	}

render() {
		const Page = this.state && this.state.page ? this.state.page : null;

		return (
			
				<div>
					
						
						
					

					{Page
						? 
						: ''
					}
				</div>
			
		);
	}

render() {
		const user = this.props.user;
		const url = ['#timeline', user.id].join('/');
		const classes = ['account'];
		let title;

		if (this.props.modifierPressed) {
			classes.push('account-remove-candidate');
		}

		if (!user.isAuthorized) {
			classes.push('account-need-auth');
			title = i18n.translate('pages.accounts.authenticate');
		}

		return (
			<li>
				<a title="{title}" href="{url}">
					
					<span>+</span>
					<span>
						{user.screenName ? user.screenName : user.name}
					</span>
				</a>
			</li>
		);
	}

render() {
		var hintTranslation;

		if (!this.state.modifierKeyPressed) {
			hintTranslation = i18n.translate('pages.accounts.hint.' + HINT_KEY);
		} else {
			hintTranslation = i18n.translate('pages.accounts.remove_hint');
		}

		return (
			<div>
				
				
					{hintTranslation}
				
			</div>
		);
	}

render() {
		if (this.state.loading) {
			return ;
		} else
		if (!this.state.data) {
			return ;
		} else {
			return ;
		}
	}

render() {
		var title = this.state.disabled
			? i18n.translate('pages.accounts.errors.connection')
			: i18n.translate('pages.accounts.add');

		return (
			<a title="{title}">
				{i18n.translate('pages.accounts.add')}
			</a>
		);
	}
}