From ff89b42de04768cb2353feb477eb8eb7afe25970 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 28 Feb 2019 18:29:21 +0100
Subject: [PATCH] Returns just the translate function from the hook (not array)
 and expose translate.localeSlug property

---
 client/blocks/post-share/no-connections-notice.jsx |  2 +-
 packages/i18n-calypso/README.md                    | 11 ++++++-----
 packages/i18n-calypso/src/use-translate.js         |  7 ++++---
 packages/i18n-calypso/test/use-translate.js        |  4 ++--
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/blocks/post-share/no-connections-notice.jsx b/client/blocks/post-share/no-connections-notice.jsx
index 533d60f5ddaf3..8c8dee09f9451 100644
--- a/client/blocks/post-share/no-connections-notice.jsx
+++ b/client/blocks/post-share/no-connections-notice.jsx
@@ -11,7 +11,7 @@ import Notice from 'components/notice';
 import NoticeAction from 'components/notice/notice-action';
 
 const NoConnectionsNotice = ( { siteSlug } ) => {
-	const [ translate ] = useTranslate();
+	const translate = useTranslate();
 
 	return (
 		<Notice
diff --git a/packages/i18n-calypso/README.md b/packages/i18n-calypso/README.md
index 242da46803a7b..30a149c76f512 100644
--- a/packages/i18n-calypso/README.md
+++ b/packages/i18n-calypso/README.md
@@ -308,12 +308,12 @@ exposes the `translate` method to React components as a return value of a React
 resulting component is also reactive, i.e., it gets rerendered when the `i18n` locale changes
 and the state emitter emits a `change` event.
 
-The `useTranslate` function returns an array of two values:
+The `useTranslate` hook returns the `translate` function:
 ```jsx
-const [ translate, localeSlug ] = useTranslate();
+const translate = useTranslate();
 ```
-The `translate` value is the translation function, and `localeSlug` is a string with the current
-locale slug.
+The function can be called to return a localized value of a string, and it also exposes a
+`localeSlug` property whose value is a string with the current locale slug.
 
 ### Usage
 
@@ -322,7 +322,8 @@ import React from 'react';
 import { useTranslate } from 'i18n-calypso';
 
 function Greeting( { className } ) {
-  const [ translate ] = useTranslate();
+  const translate = useTranslate();
+  debug( 'using translate with locale:', translate.localeSlug );
 	return (
 		<h1 className={ className }>
 			{ translate( 'Hello!' ) }
diff --git a/packages/i18n-calypso/src/use-translate.js b/packages/i18n-calypso/src/use-translate.js
index a7dc649015bc7..9af61f16dfc13 100644
--- a/packages/i18n-calypso/src/use-translate.js
+++ b/packages/i18n-calypso/src/use-translate.js
@@ -4,11 +4,12 @@
 import React from 'react';
 
 export default function( i18n ) {
-	const translate = i18n.translate.bind( i18n );
 	const getLocaleSlug = i18n.getLocaleSlug.bind( i18n );
+	const translate = i18n.translate.bind( i18n );
+	Object.defineProperty( translate, 'localeSlug', { get: getLocaleSlug } );
 
 	return function useTranslate() {
-		const [ localeSlug, setLocaleSlug ] = React.useState( getLocaleSlug );
+		const [ , setLocaleSlug ] = React.useState( getLocaleSlug );
 
 		React.useEffect(() => {
 			const onChange = () => setLocaleSlug( getLocaleSlug() );
@@ -16,6 +17,6 @@ export default function( i18n ) {
 			return () => i18n.off( 'change', onChange );
 		}, []);
 
-		return [ translate, localeSlug ];
+		return translate;
 	};
 }
diff --git a/packages/i18n-calypso/test/use-translate.js b/packages/i18n-calypso/test/use-translate.js
index 38a6c9fa55f5a..7952df82553d9 100644
--- a/packages/i18n-calypso/test/use-translate.js
+++ b/packages/i18n-calypso/test/use-translate.js
@@ -10,8 +10,8 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import i18n, { useTranslate } from '../src';
 
 function Label() {
-	const [ translate, lang ] = useTranslate();
-	return translate( 'hook (%(lang)s)', { args: { lang } } );
+	const translate = useTranslate();
+	return translate( 'hook (%(lang)s)', { args: { lang: translate.localeSlug } } );
 }
 
 describe( 'useTranslate()', () => {