From 03310a39cdf2fe599d6f9b8ceaf0600585cd2fc7 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Wed, 29 Jul 2020 16:49:23 -0500
Subject: [PATCH] add posting language user setting

---
 app/soapbox/__fixtures__/intlMessages.json    |  5 ++++-
 app/soapbox/actions/compose.js                |  1 +
 app/soapbox/actions/settings.js               |  1 +
 app/soapbox/features/forms/index.js           |  7 ++++--
 app/soapbox/features/preferences/index.js     | 22 ++++++++++++++-----
 app/styles/application.scss                   |  1 +
 .../components/language-preferences.scss      | 10 +++++++++
 7 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 app/styles/components/language-preferences.scss

diff --git a/app/soapbox/__fixtures__/intlMessages.json b/app/soapbox/__fixtures__/intlMessages.json
index a8217149e..9132feaee 100644
--- a/app/soapbox/__fixtures__/intlMessages.json
+++ b/app/soapbox/__fixtures__/intlMessages.json
@@ -323,7 +323,10 @@
     "preferences.fields.demetricator_label": "Use Demetricator",
     "preferences.fields.dyslexic_font_label": "Dyslexic mode",
     "preferences.fields.expand_spoilers_label": "Always expand posts marked with content warnings",
-    "preferences.fields.language_label": "Language",
+    "preferences.fields.language_label": "Interface language",
+    "preferences.fields.language_hint": "The language of the user interface, e-mails and push notifications",
+    "preferences.fields.post_language_label": "Posting language",
+    "preferences.fields.post_language_hint": "The language of your posts cannot currently be detected automatically",
     "preferences.fields.privacy_label": "Post privacy",
     "preferences.fields.reduce_motion_label": "Reduce motion in animations",
     "preferences.fields.system_font_label": "Use system\"s default font",
diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js
index a2b5c0f85..3d35ea8f6 100644
--- a/app/soapbox/actions/compose.js
+++ b/app/soapbox/actions/compose.js
@@ -178,6 +178,7 @@ export function submitCompose(routerHistory, group) {
       visibility: getState().getIn(['compose', 'privacy']),
       content_type: getState().getIn(['compose', 'content_type']),
       poll: getState().getIn(['compose', 'poll'], null),
+      language: getState().getIn(['settings', 'posting_language'], null),
       group_id: group ? group.get('id') : null,
     }, {
       headers: {
diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js
index 0c2f35a8b..312103517 100644
--- a/app/soapbox/actions/settings.js
+++ b/app/soapbox/actions/settings.js
@@ -22,6 +22,7 @@ const defaultSettings = ImmutableMap({
   defaultPrivacy: 'public',
   themeMode: 'light',
   locale: navigator.language.split(/[-_]/)[0] || 'en',
+  posting_language: navigator.language.split(/[-_]/)[0] || '',
   explanationBox: true,
 
   systemFont: false,
diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js
index 75feac6d4..8928734b6 100644
--- a/app/soapbox/features/forms/index.js
+++ b/app/soapbox/features/forms/index.js
@@ -193,10 +193,11 @@ export class SelectDropdown extends ImmutablePureComponent {
   static propTypes = {
     label: FormPropTypes.label,
     items: PropTypes.object.isRequired,
+    hint: PropTypes.node,
   }
 
   render() {
-    const { label, items, ...props } = this.props;
+    const { label, items, hint, ...props } = this.props;
 
     const optionElems = Object.keys(items).map(item => (
       <option key={item} value={item}>{items[item]}</option>
@@ -205,7 +206,9 @@ export class SelectDropdown extends ImmutablePureComponent {
     const selectElem = <select {...props}>{optionElems}</select>;
 
     return label ? (
-      <LabelInputContainer label={label}>{selectElem}</LabelInputContainer>
+      <LabelInputContainer label={label}>{selectElem}
+        {hint && <span className='hint'>{hint}</span>}
+      </LabelInputContainer>
     ) : selectElem;
   }
 
diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js
index 80a49a7b7..0a9cde4e2 100644
--- a/app/soapbox/features/preferences/index.js
+++ b/app/soapbox/features/preferences/index.js
@@ -113,12 +113,22 @@ class Preferences extends ImmutablePureComponent {
       <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <SimpleForm>
           <FieldsGroup>
-            <SelectDropdown
-              label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Language' />}
-              items={languages}
-              defaultValue={settings.get('locale')}
-              onChange={this.onSelectChange(['locale'])}
-            />
+            <div className='select-languages__container'>
+              <SelectDropdown
+                label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Interface language' />}
+                hint={<FormattedMessage id='preferences.fields.language_hint' defaultMessage='The language of the user interface, e-mails and push notifications' />}
+                items={languages}
+                defaultValue={settings.get('locale')}
+                onChange={this.onSelectChange(['locale'])}
+              />
+              <SelectDropdown
+                label={<FormattedMessage id='preferences.fields.posting_language_label' defaultMessage='Posting language' />}
+                hint={<FormattedMessage id='preferences.fields.posting_language_hint' defaultMessage='The language of your posts cannot currently be detected automatically' />}
+                items={languages}
+                defaultValue={settings.get('posting_language')}
+                onChange={this.onSelectChange(['posting_language'])}
+              />
+            </div>
           </FieldsGroup>
 
           <FieldsGroup>
diff --git a/app/styles/application.scss b/app/styles/application.scss
index bb3d0ca82..8ae479b28 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -71,3 +71,4 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/language-preferences';
diff --git a/app/styles/components/language-preferences.scss b/app/styles/components/language-preferences.scss
new file mode 100644
index 000000000..d3384befb
--- /dev/null
+++ b/app/styles/components/language-preferences.scss
@@ -0,0 +1,10 @@
+.select-languages__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  .label_input {
+    width: 50%;
+    padding-right: 20px;
+  }
+}