set up i18n

src/components/UserProfile/Bio.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { Input } from 'reactstrap';
 
 import EditControls from './elements/EditControls';
@@ -54,7 +55,13 @@ function Bio({
           </React.Fragment>
         ),
         empty: (
-          <EmptyContent onClick={() => onEdit('bio')}>Add a short bio</EmptyContent>
+          <EmptyContent onClick={() => onEdit('bio')}>
+            <FormattedMessage
+              id="profile.bio.empty"
+              defaultMessage="Add a short bio"
+              description="instructions when the user hasn't written an About Me"
+            />
+          </EmptyContent>
         ),
         static: (
           <React.Fragment>

src/components/UserProfile/MyCertificates.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { Row, Col, Card, CardBody, CardTitle } from 'reactstrap';
 
 import EditControls from './elements/EditControls';
@@ -65,7 +66,11 @@ function MyCertificates({
         ),
         empty: (
           <div>
-            You don’t have any certificates yet. Find a course.
+            <FormattedMessage
+              id="profile.no.certificates"
+              defaultMessage="You don't have any certificates yet."
+              description="displays when user has no course completion certificates"
+            />
           </div>
         ),
         static: (

src/i18n/i18n-loader.js

@@ -0,0 +1,29 @@
+/**
+ * For each locale we want to support, react-intl needs 1) the locale-data, which includes
+ * information about how to format numbers, handle plurals, etc., and 2) the translations, as an
+ * object holding message id / translated string pairs.  A locale string and the messages object are
+ * passed into the IntlProvider element that wraps your element hierarchy.
+ *
+ * Note that react-intl has no way of checking if the translations you give it actually have
+ * anything to do with the locale you pass it; it will happily use whatever messages object you pass
+ * in.  However, if the locale data for the locale you passed into the IntlProvider was not
+ * correctly installed with addLocaleData, all of your translations will fall back to the default
+ * (in our case English), *even if you gave IntlProvider the correct messages object for that
+ * locale*.
+ */
+
+import { addLocaleData } from 'react-intl';
+
+import enLocale from 'react-intl/locale-data/en';
+
+import esLocale from 'react-intl/locale-data/es';
+import esMessages from './messages/es.json';
+
+addLocaleData([...enLocale, ...esLocale]);
+
+// temporary; set your browser language to Spanish to see es
+const getLocale = (localeStr = window.navigator.language) => localeStr.substr(0, 2);
+
+const getMessages = (locale = getLocale()) => (locale === 'es' ? esMessages : {});
+
+export { getLocale, getMessages };

src/i18n/messages/es.json

@@ -0,0 +1,4 @@
+{
+  "profile.no.certificates": "Aún no tienes ningún certificado.",
+  "profile.bio.empty": "Añada una breve biografía"
+}

src/index.jsx

@@ -1,11 +1,14 @@
 import 'babel-polyfill';
+
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import SiteFooter from '@edx/frontend-component-footer';
 import { fetchUserAccount, UserAccountApiService } from '@edx/frontend-auth';
 
+import { getLocale, getMessages } from './i18n/i18n-loader';
 import apiClient from './data/apiClient';
 import { handleTrackEvents, identifyUser } from './analytics';
 import SiteHeader from './containers/SiteHeader';
@@ -24,41 +27,43 @@ class App extends Component {
 
   render() {
     return (
-      <Provider store={store}>
-        <Router>
-          <div>
-            <SiteHeader
-              logo={HeaderLogo}
-              logoDestination={process.env.MARKETING_SITE_BASE_URL}
-              logoAltText={process.env.SITE_NAME}
-            />
-            <main>
-              <Switch>
-                <Route exact path="/" component={UserProfile} />
-              </Switch>
-            </main>
-            <SiteFooter
-              siteName={process.env.SITE_NAME}
-              siteLogo={FooterLogo}
-              marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
-              supportUrl={process.env.SUPPORT_URL}
-              contactUrl={process.env.CONTACT_URL}
-              openSourceUrl={process.env.OPEN_SOURCE_URL}
-              termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
-              privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
-              facebookUrl={process.env.FACEBOOK_URL}
-              twitterUrl={process.env.TWITTER_URL}
-              youTubeUrl={process.env.YOU_TUBE_URL}
-              linkedInUrl={process.env.LINKED_IN_URL}
-              googlePlusUrl={process.env.GOOGLE_PLUS_URL}
-              redditUrl={process.env.REDDIT_URL}
-              appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
-              googlePlayUrl={process.env.GOOGLE_PLAY_URL}
-              handleAllTrackEvents={handleTrackEvents}
-            />
-          </div>
-        </Router>
-      </Provider>
+      <IntlProvider locale={getLocale()} messages={getMessages()}>
+        <Provider store={store}>
+          <Router>
+            <div>
+              <SiteHeader
+                logo={HeaderLogo}
+                logoDestination={process.env.MARKETING_SITE_BASE_URL}
+                logoAltText={process.env.SITE_NAME}
+              />
+              <main>
+                <Switch>
+                  <Route exact path="/" component={UserProfile} />
+                </Switch>
+              </main>
+              <SiteFooter
+                siteName={process.env.SITE_NAME}
+                siteLogo={FooterLogo}
+                marketingSiteBaseUrl={process.env.MARKETING_SITE_BASE_URL}
+                supportUrl={process.env.SUPPORT_URL}
+                contactUrl={process.env.CONTACT_URL}
+                openSourceUrl={process.env.OPEN_SOURCE_URL}
+                termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
+                privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
+                facebookUrl={process.env.FACEBOOK_URL}
+                twitterUrl={process.env.TWITTER_URL}
+                youTubeUrl={process.env.YOU_TUBE_URL}
+                linkedInUrl={process.env.LINKED_IN_URL}
+                googlePlusUrl={process.env.GOOGLE_PLUS_URL}
+                redditUrl={process.env.REDDIT_URL}
+                appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
+                googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+                handleAllTrackEvents={handleTrackEvents}
+              />
+            </div>
+          </Router>
+        </Provider>
+      </IntlProvider>
     );
   }
 }