From a3fd3ec5f82213d057f131f2b306a4e5eb0e9727 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Fri, 1 Mar 2019 11:36:38 -0500
Subject: [PATCH] Adding i18n

---
 .../ProfilePage/PreferredLanguage.jsx         | 38 ++++++++++++++++---
 .../elements/EditableItemHeader.jsx           |  2 +-
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/ProfilePage/PreferredLanguage.jsx b/src/components/ProfilePage/PreferredLanguage.jsx
index e92f86b..acc4575 100644
--- a/src/components/ProfilePage/PreferredLanguage.jsx
+++ b/src/components/ProfilePage/PreferredLanguage.jsx
@@ -31,10 +31,13 @@ class PreferredLanguage extends React.Component {
       name,
       value: rawValue,
     } = e.target;
+    let value = rawValue;
     // Restructure the data.
     // We deconstruct our value prop in render() so this
     // changes our data's shape back to match what came in
-    const value = [{ code: rawValue }];
+    if (name === this.props.formId) {
+      value = [{ code: rawValue }];
+    }
 
     this.props.changeHandler(this.props.formId, name, value);
   }
@@ -67,7 +70,13 @@ class PreferredLanguage extends React.Component {
           editing: (
             <Form onSubmit={this.handleSubmit}>
               <FormGroup>
-                <Label for="language">Preferred Language</Label>
+                <Label for="language">
+                  <FormattedMessage
+                    id="profile.preferredlanguage.label"
+                    defaultMessage="Language"
+                    description="Preferred language label"
+                  />
+                </Label>
                 <Input
                   type="select"
                   name={formId}
@@ -94,7 +103,13 @@ class PreferredLanguage extends React.Component {
           editable: (
             <React.Fragment>
               <EditableItemHeader
-                content="Preferred Language"
+                content={(
+                  <FormattedMessage
+                    id="profile.preferredlanguage.label"
+                    defaultMessage="Language"
+                    description="Preferred language label"
+                  />
+                )}
                 showEditButton
                 onClickEdit={this.handleOpen}
                 showVisibility={visibility !== null}
@@ -114,7 +129,15 @@ class PreferredLanguage extends React.Component {
           ),
           static: (
             <React.Fragment>
-              <EditableItemHeader content="Location" />
+              <EditableItemHeader
+                content={(
+                  <FormattedMessage
+                    id="profile.preferredlanguage.label"
+                    defaultMessage="Language"
+                    description="Preferred language label"
+                  />
+                )}
+              />
               <h5>{ALL_LANGUAGES[value]}</h5>
             </React.Fragment>
           ),
@@ -132,7 +155,12 @@ PreferredLanguage.propTypes = {
   formId: PropTypes.string.isRequired,
 
   // From Selector
-  value: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string })),
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string })),
+    // TODO: ProfilePageSelector should supply null values
+    // instead of empty strings when no value exists
+    PropTypes.oneOf(['']),
+  ]),
   visibility: PropTypes.oneOf(['private', 'all_users']),
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
diff --git a/src/components/ProfilePage/elements/EditableItemHeader.jsx b/src/components/ProfilePage/elements/EditableItemHeader.jsx
index c2d9425..85eccc8 100644
--- a/src/components/ProfilePage/elements/EditableItemHeader.jsx
+++ b/src/components/ProfilePage/elements/EditableItemHeader.jsx
@@ -31,7 +31,7 @@ EditableItemHeader.propTypes = {
   onClickEdit: PropTypes.func,
   showVisibility: PropTypes.bool,
   showEditButton: PropTypes.bool,
-  content: PropTypes.string,
+  content: PropTypes.node,
   visibility: PropTypes.oneOf(['private', 'all_users']),
 };