Merge branch 'develop' into 'develop'

Localizable about pages

See merge request soapbox-pub/soapbox-fe!546

app/soapbox/actions/about.js

@@ -4,14 +4,14 @@ export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
 export const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
 export const FETCH_ABOUT_PAGE_FAIL    = 'FETCH_ABOUT_PAGE_FAIL';
 
-export function fetchAboutPage(slug = 'index') {
+export function fetchAboutPage(slug = 'index', locale) {
   return (dispatch, getState) => {
-    dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug });
-    return api(getState).get(`/instance/about/${slug}.html`).then(response => {
-      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, html: response.data });
+    dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale });
+    return api(getState).get(`/instance/about/${slug}${locale ? `.${locale}` : ''}.html`).then(response => {
+      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html: response.data });
       return response.data;
     }).catch(error => {
-      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, error });
+      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, locale, error });
       throw error;
     });
   };

app/soapbox/actions/soapbox.js

@@ -47,6 +47,7 @@ export const defaultConfig = ImmutableMap({
   cryptoDonatePanel: ImmutableMap({
     limit: 1,
   }),
+  aboutPages: ImmutableMap(),
 });
 
 export function getSoapboxConfig(state) {

app/soapbox/features/about/index.js

@@ -1,18 +1,33 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { fetchAboutPage } from 'soapbox/actions/about';
+import { getSettings } from 'soapbox/actions/settings';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { languages } from '../preferences';
 
+const mapStateToProps = state => ({
+  locale: getSettings(state).get('locale'),
+  aboutPages: getSoapboxConfig(state).get('aboutPages'),
+});
+
+@connect(mapStateToProps)
+@injectIntl
 class AboutPage extends ImmutablePureComponent {
 
   state = {
     pageHtml: '',
+    locale: this.props.locale,
   }
 
   loadPageHtml = () => {
-    const { dispatch, match } = this.props;
+    const { dispatch, match, aboutPages } = this.props;
+    const { locale } = this.state;
     const { slug } = match.params;
-    dispatch(fetchAboutPage(slug)).then(html => {
+    const page = aboutPages.get(slug || 'about');
+    const fetchLocale = page && locale !== page.get('default') && page.get('locales').includes(locale);
+    dispatch(fetchAboutPage(slug, fetchLocale && locale)).then(html => {
       this.setState({ pageHtml: html });
     }).catch(error => {
       // TODO: Better error handling. 404 page?
@@ -20,17 +35,62 @@ class AboutPage extends ImmutablePureComponent {
     });
   }
 
+  setLocale = (locale) => () => {
+    this.setState({ locale });
+  };
+
   componentDidMount() {
     this.loadPageHtml();
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { slug } = this.props.match.params;
+    const { locale, match, aboutPages } = this.props;
+    const { locale: prevLocale, aboutPages: prevAboutPages } = prevProps;
+    const { locale: stateLocale } = this.state;
+    const { locale: prevStateLocale } = prevState;
+
+    const { slug } = match.params;
     const { slug: prevSlug } = prevProps.match.params;
-    if (slug !== prevSlug) this.loadPageHtml();
+
+    if (locale !== prevLocale) this.setState({ locale });
+
+    if (
+      slug !== prevSlug ||
+      stateLocale !== prevStateLocale ||
+      (!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))
+    )
+      this.loadPageHtml();
   }
 
   render() {
+    const { match, aboutPages } = this.props;
+    const { slug } = match.params;
+
+    const page = aboutPages.get(slug || 'about');
+    const defaultLocale = page && page.get('default');
+    const alsoAvailable = page && (
+      <div className='rich-formatting also-available'>
+        <FormattedMessage id='about.also_available' defaultMessage='Available in:' />
+        {' '}
+        <ul>
+          <li>
+            <a href='#' onClick={this.setLocale(defaultLocale)}>
+              {languages[defaultLocale] || defaultLocale}
+            </a>
+          </li>
+          {
+            page.get('locales').map(locale => (
+              <li key={locale}>
+                <a href='#' onClick={this.setLocale(locale)}>
+                  {languages[locale] || locale}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    );
+
     return (
       <div className='content'>
         <div className='about-page'>
@@ -38,6 +98,7 @@ class AboutPage extends ImmutablePureComponent {
             className='rich-formatting'
             dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}
           />
+          {alsoAvailable}
         </div>
       </div>
     );
@@ -45,4 +106,4 @@ class AboutPage extends ImmutablePureComponent {
 
 }
 
-export default connect()(AboutPage);
+export default AboutPage;

app/soapbox/features/preferences/index.js

@@ -15,7 +15,7 @@ import {
 } from 'soapbox/features/forms';
 import SettingsCheckbox from 'soapbox/components/settings_checkbox';
 
-const languages = {
+export const languages = {
   en: 'English',
   ar: 'العربية',
   ast: 'Asturianu',

app/soapbox/locales/pl.json

@@ -1,4 +1,5 @@
 {
+  "about.also_available": "Strona dostępna w językach:",
   "accordion.collapse": "Zwiń",
   "accordion.expand": "Rozwiń",
   "account.add_or_remove_from_list": "Dodaj lub usuń z list",

app/styles/about.scss

@@ -359,6 +359,28 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 }
 
+.also-available {
+  padding-top: 0;
+
+  ul {
+    display: inline;
+    padding-left: 0;
+    list-style: none;
+
+    li {
+      display: inline;
+
+      &::after {
+        content: ' · ';
+      }
+    }
+
+    li:last-child::after {
+      content: '';
+    }
+  }
+}
+
 .public-layout {
   position: relative;
   background-color: var(--brand-color);