passbolt-styleguide/src/react-extension/components/Internationalisation/ChangeLocale/ChangeLocale.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

/**
 * Passbolt ~ Open source password manager for teams
 * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
 *
 * Licensed under GNU Affero General Public License version 3 of the or any later version.
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
 * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
 * @link          https://www.passbolt.com Passbolt(tm)
 * @since         3.2.0
 */
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withAppContext } from "../../../../shared/context/AppContext/AppContext";
import Select from "../../Common/Select/Select";

/**
 * This component allows the user to change the locale
 */
class ChangeLocale extends Component {
  /**
   * Constructor
   * @param {Object} props
   */
  constructor(props) {
    super(props);
    this.state = this.defaultState;
    this.bindHandlers();
  }

  /**
   * Whenever the component is mounted
   */
  componentDidMount() {
    this.initLocale();
  }

  /**
   * Whenever the component has updated in terms of props
   * @param prevProps
   */
  componentDidUpdate(prevProps) {
    this.handleLocaleChange(prevProps.context.locale);
  }

  /**
   * Check if the locale has changed and update
   * @param previousLocale
   */
  handleLocaleChange(previousLocale) {
    const hasLocaleChanged = this.props.context.locale !== previousLocale;
    if (hasLocaleChanged) {
      this.setState({ locale: this.props.context.locale });
    }
  }

  /**
   * Returns the component default state
   */
  get defaultState() {
    return {
      loading: true,
      locale: null,
      processing: false,
    };
  }

  /**
   * Returns true if actions can be performed
   */
  get areActionsAllowed() {
    return !this.state.processing;
  }

  /**
   * Bind  handlers
   */
  bindHandlers() {
    this.handleLocaleInputChange = this.handleLocaleInputChange.bind(this);
  }

  /**
   * Handle locale input changes.
   * @params {ReactEvent} The react event
   * @returns {void}
   */
  async handleLocaleInputChange(event) {
    const target = event.target;
    const locale = target.value;
    this.updateLocale(locale);
  }

  /**
   * Update the locale.
   * @param {string} locale The locale identifier.
   */
  async updateLocale(locale) {
    this.setState({ processing: true });
    await this.props.context.onUpdateLocaleRequested(locale);
    this.setState({ processing: false });
  }

  /**
   * Get th locale
   */
  initLocale() {
    this.setState({ locale: this.props.context.locale, loading: false });
  }

  /**
   * If the component is loading
   * @returns {boolean}
   */
  isLoading() {
    return this.state.loading;
  }

  /**
   * Get the supported locales
   * @returns {array}
   */
  get supportedLocales() {
    if (this.props.context.siteSettings.supportedLocales) {
      return this.props.context.siteSettings.supportedLocales.map((supportedLocale) => ({
        value: supportedLocale.locale,
        label: supportedLocale.label,
      }));
    }
    return [];
  }

  /**
   * Render the component
   */
  render() {
    return (
      <>
        {!this.isLoading() && (
          <div className="select-wrapper input">
            <Select
              id="user-locale-input"
              className="setup-extension"
              name="locale"
              value={this.state.locale}
              disabled={!this.areActionsAllowed}
              items={this.supportedLocales}
              onChange={this.handleLocaleInputChange}
            />
          </div>
        )}
      </>
    );
  }
}

ChangeLocale.propTypes = {
  context: PropTypes.any, // The application context
};

export default withAppContext(ChangeLocale);