bigbuffet-rw/app/soapbox/features/configuration/index.js

import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column';
import {
  SimpleForm,
  FieldsGroup,
  TextInput,
  Checkbox,
  FileChooser,
  ColorWithPicker,
  FileChooserLogo,
} from 'soapbox/features/forms';
import StillImage from 'soapbox/components/still_image';
import {
  Map as ImmutableMap,
  List as ImmutableList,
} from 'immutable';
import { postSoapbox } from 'soapbox/actions/soapbox';

const messages = defineMessages({
  heading: { id: 'column.soapbox_settings', defaultMessage: 'Soapbox settings' },
  copyrightFooterLabel: { id: 'soapbox_settings.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
  promoItemIcon: { id: 'soapbox_settings.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
  promoItemLabel: { id: 'soapbox_settings.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
  promoItemURL: { id: 'soapbox_settings.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
  homeFooterItemLabel: { id: 'soapbox_settings.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
  homeFooterItemURL: { id: 'soapbox_settings.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
  customCssLabel: { id: 'soapbox_settings.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
});

const mapStateToProps = state => {
  // const soapbox = state.get('soapbox');
  return {
    soapbox: state.get('soapbox'),
  };
};

export default @connect(mapStateToProps)
@injectIntl
class ConfigSoapbox extends ImmutablePureComponent {

  static propTypes = {
    soapbox: ImmutablePropTypes.map,
    dispatch: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
  };

  state = {
    isLoading: false,
  }

  constructor(props) {
    super(props);
    const initialState = props.soapbox.withMutations(map => {
    });
    this.state = initialState.toObject();
    // this.state = ImmutableMap(props.soapbox);
    // console.log(this.state);
    // console.log(JSON.stringify(this.state, null, 2));
    if (!this.state.logo) {
      this.state.logo = '';
    }
    if (!this.state.banner) {
      this.state.banner = '';
    }
    if (!this.state.defaultSettings.autoPlayGif) {
      this.state.defaultSettings.autoPlayGif = false;
      // console.log(this.state.defaultSettings.autoPlayGif);
    };
    if (!this.state.extensions.patron) {
      this.state.extensions.patron = false;
      // console.log(this.state.extensions.patron);
    };
    if (!this.state.promoPanel.items) {
      this.state.promoPanel.items = ImmutableList([
        ImmutableMap({
          icon: '',
          text: '',
          url: '',
        }),
      ]);
    };
    if (!this.state.navlinks.homeFooter) {
      this.state.navlinks.homeFooter = ImmutableList([
        ImmutableMap({
          title: '',
          url: '',
        }),
      ]);
    };
    if (!this.state.customCssItems) {
      this.state.customCssItems = ImmutableList([' ']);
    };
    this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this);
    this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this);
    this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this);
    this.handleAddCssItem = this.handleAddCssItem.bind(this);
    this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this);
    this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this);
    this.handleBrandColorChange = this.handleBrandColorChange.bind(this);
    this.getParams = this.getParams.bind(this);
  }

  getParams = () => {
    const { state } = this;
    var obj = {
      configs: [{
        group: ':pleroma',
        key: ':frontend_configurations',
        value: [{
          tuple: [':soapbox_fe',
            {
              logo: '',
              banner: '',
              brandColor: '',
              customCss: [],
              promoPanel: {
                items: [],
              },
              extensions: {
                patron: false,
              },
              defaultSettings: {
                autoPlayGif: false,
              },
              copyright: '',
              navlinks: {
                homeFooter: [],
              },
            },
          ],
        }],
      }],
    };
    obj.configs[0].value[0].tuple[1].logo = state.logo;
    obj.configs[0].value[0].tuple[1].banner = state.banner;
    obj.configs[0].value[0].tuple[1].brandColor = state.brandColor;
    obj.configs[0].value[0].tuple[1].extensions.patron = state.extensions.patron;
    obj.configs[0].value[0].tuple[1].defaultSettings.autoPlayGif = state.defaultSettings.autoPlayGif;
    obj.configs[0].value[0].tuple[1].copyright = state.copyright;
    this.state.navlinks.homeFooter.forEach((f) =>
      obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') })
    );
    this.state.promoPanel.items.forEach((f) =>
      obj.configs[0].value[0].tuple[1].promoPanel.items.push({ icon: f.get('icon'), text: f.get('text'), url: f.get('url') })
    );
    this.state.customCss.forEach((f) =>
      obj.configs[0].value[0].tuple[1].customCss.push(f)
    );
    return obj;
  }

  handleSubmit = (event) => {
    const { dispatch } = this.props;
    dispatch(postSoapbox(this.getParams())).then(() => {
      this.setState({ isLoading: false });
    }).catch((error) => {
      this.setState({ isLoading: false });
    });
    this.setState({ isLoading: true });
    event.preventDefault();
  }

  handleExtensionsCheckboxChange = e => {
    var extensions = { ...this.state.extensions };
    if (e.target.name === 'patron') {
      extensions.patron = e.target.value;
    }
    this.setState({ extensions });
    // this.setState({
    //   extensions: this.state.setIn(['extensions', e.target.name], e.target.value),
    // });
  }

  handleDefaultSettingsCheckboxChange = e => {
    var defaultSettings = { ...this.state.defaultSettings };
    if (e.target.name === 'autoPlayGif') {
      defaultSettings.autoPlayGif = e.target.value;
    }
    this.setState({ defaultSettings });
    // this.setState({
    //   defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value),
    // });
  }

  handleBrandColorChange = e => {
    this.setState({
      brandColor: e.hex,
    });
    // this.state.setIn(['brandColor'], e.hex);
  }

  handleTextChange = e => {
    // this.state.soapbox.setIn(['{e.target.name}'], e.target.value);
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  handlePromoItemsChange = (i, key) => {
    return (e) => {
      // this.state.soapbox.promoItems.setIn([i, key], e.target.value);
      this.setState({
        promoPanel: {
          items: this.state.promoPanel.items.setIn([i, key], e.target.value),
        },
      });
    };
  }

  handleHomeFooterItemsChange = (i, key) => {
    return (e) => {
      // this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value);
      this.setState({
        navlinks: {
          homeFooter: this.state.navlinks.homeFooter.setIn([i, key], e.target.value),
        },
      });
    };
  }

  handleCustomCSSChange = i => {
    return (e) => {
      // this.state.soapbox.customCssItems.setIn([i], e.target.value);
      this.setState({
        customCss: this.state.customCss.setIn([i], e.target.value),
      });
    };
  }

  handleFileChange = e => {
    const { name } = e.target;
    const [file] = e.target.files || [];
    const url = file ? URL.createObjectURL(file) : this.state[name];
    // this.state.soapbox.setIn([name], url);
    // this.state.soapbox.setIn([`${name}_file`], file);

    this.setState({
      [name]: url,
      [`${name}_file`]: file,
    });
  }

  handleAddPromoPanelItem = () => {
    this.setState({
      Items: this.state.promoPanel.items.concat([
        ImmutableMap({
          icon: '',
          text: '',
          url: '',
        }),
      ]),
    });
  }

  handleAddHomeFooterItem = () => {
    this.setState({
      homeFooter: this.state.navlinks.homeFooter.concat([
        ImmutableMap({
          title: '',
          url: '',
        }),
      ]),
    });
  }

  handleAddCssItem = () => {
    this.setState({
      customCss: this.state.customCss.concat(['']),
    });
  }

  render() {
    const { intl } = this.props;
    const { logo, banner, brandColor, extensions, defaultSettings, copyright,
      promoPanel, navlinks, customCss } = this.state;
    const patron = (extensions.patron === 'true');
    const autoPlayGif = (defaultSettings.autoPlayGif === 'true');
    // console.log(navlinks.homeFooter);
    // console.log(promoPanel.items);

    return (
      <Column icon='shield' heading={intl.formatMessage(messages.heading)} backBtnSlim>
        <SimpleForm onSubmit={this.handleSubmit}>
          <fieldset disabled={this.state.isLoading}>
            <FieldsGroup>
              <div className='fields-row'>
                <div className='fields-row__column fields-row__column-6'>
                  {logo ? (<StillImage src={logo || ''} />) : (<StillImage src={this.props.soapbox.logo || ''} />)}
                </div>
                <div className='fields-row__column fields-group fields-row__column-6'>
                  <FileChooserLogo
                    label={<FormattedMessage id='soapbox_settings.fields.logo_label' defaultMessage='Logo' />}
                    name='logo'
                    hint={<FormattedMessage id='soapbox_settings.hints.logo' defaultMessage='SVG. At most 2 MB. Will be downscaled to 50px height, maintaining aspect ratio' />}
                    onChange={this.handleFileChange}
                  />
                </div>
              </div>
              <div className='fields-row'>
                <div className='fields-row__column fields-row__column-6'>
                  {banner ? (<StillImage src={banner || ''} />) : (<StillImage src={this.props.soapbox.banner || ''} />)}
                </div>
                <div className='fields-row__column fields-group fields-row__column-6'>
                  <FileChooser
                    label={<FormattedMessage id='soapbox_settings.fields.banner_label' defaultMessage='Banner' />}
                    name='banner'
                    hint={<FormattedMessage id='soapbox_settings.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px' />}
                    onChange={this.handleFileChange}
                  />
                </div>
              </div>
            </FieldsGroup>
            <FieldsGroup>
              <div className='fields-row__column fields-group'>
                <ColorWithPicker
                  buttonId='brand_color'
                  label={<FormattedMessage id='soapbox_settings.fields.brand_color_label' defaultMessage='Brand color' />}
                  value={brandColor || '#0482d8'}
                  onChange={this.handleBrandColorChange}
                />
              </div>
            </FieldsGroup>
            <FieldsGroup>
              <Checkbox
                label={<FormattedMessage id='soapbox_settings.fields.patron_enabled_label' defaultMessage='Patron module' />}
                hint={<FormattedMessage id='soapbox_settings.hints.patron_enabled' defaultMessage='Enables display of Patron module.  Requires installation of Patron module.' />}
                name='patron'
                checked={patron ? patron : false}
                onChange={this.handleExtensionsCheckboxChange}
              />
              <Checkbox
                label={<FormattedMessage id='soapbox_settings.fields.auto_play_gif_label' defaultMessage='Auto-play GIFs' />}
                hint={<FormattedMessage id='soapbox_settings.hints.auto_play_gif' defaultMessage='Enable auto-playing of GIF files in timeline' />}
                name='autoPlayGif'
                checked={autoPlayGif ? autoPlayGif : false}
                onChange={this.handleDefaultSettingsCheckboxChange}
              />
            </FieldsGroup>
            <FieldsGroup>
              <TextInput
                name='copyright'
                label={intl.formatMessage(messages.copyrightFooterLabel)}
                placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
                value={copyright ? copyright : this.props.soapbox.copyright || ''}
                onChange={this.handleTextChange}
              />
            </FieldsGroup>
            <FieldsGroup>
              <div className='fields-row__column fields-group'>
                <div className='input with_block_label'>
                  <label><FormattedMessage id='soapbox_settings.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
                  <span className='hint'>
                    <FormattedMessage id='soapbox_settings.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
                  </span>
                  <span className='hint'>
                    <FormattedMessage id='soapbox_settings.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
                  </span>
                  {
                    promoPanel.items.map((field, i) => (
                      <div className='row' key={i}>
                        <TextInput
                          label={intl.formatMessage(messages.promoItemIcon)}
                          placeholder={intl.formatMessage(messages.promoItemIcon)}
                          value={field.get('icon')}
                          onChange={this.handlePromoItemsChange(i, 'icon')}
                        />
                        <TextInput
                          label={intl.formatMessage(messages.promoItemLabel)}
                          placeholder={intl.formatMessage(messages.promoItemLabel)}
                          value={field.get('text')}
                          onChange={this.handlePromoItemsChange(i, 'text')}
                        />
                        <TextInput
                          label={intl.formatMessage(messages.promoItemURL)}
                          placeholder={intl.formatMessage(messages.promoItemURL)}
                          value={field.get('url')}
                          onChange={this.handlePromoItemsChange(i, 'url')}
                        />
                      </div>
                    ))
                  }
                  <div className='actions'>
                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddPromoPanelItem}>
                      <FormattedMessage id='soapbox_settings.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
                    </div>
                  </div>
                </div>
                <div className='input with_block_label'>
                  <label><FormattedMessage id='soapbox_settings.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
                  <span className='hint'>
                    <FormattedMessage id='soapbox_settings.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
                  </span>
                  {
                    navlinks.homeFooter.map((field, i) => (
                      <div className='row' key={i}>
                        <TextInput
                          label={intl.formatMessage(messages.homeFooterItemLabel)}
                          placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
                          value={field.get('title')}
                          onChange={this.handleHomeFooterItemsChange(i, 'title')}
                        />
                        <TextInput
                          label={intl.formatMessage(messages.homeFooterItemURL)}
                          placeholder={intl.formatMessage(messages.homeFooterItemURL)}
                          value={field.get('url')}
                          onChange={this.handleHomeFooterItemsChange(i, 'url')}
                        />
                      </div>
                    ))
                  }
                  <div className='actions'>
                    <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddHomeFooterItem}>
                      <FormattedMessage id='soapbox_settings.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
                    </div>
                  </div>
                </div>
              </div>
              <div className='input with_block_label'>
                <label><FormattedMessage id='soapbox_settings.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
                <span className='hint'>
                  <FormattedMessage id='soapbox_settings.hints.custom_css_fields' defaultMessage='You can have custom CSS definitions' />
                </span>
                {
                  customCss.map((field, i) => (
                    <div className='row' key={i}>
                      <TextInput
                        label={intl.formatMessage(messages.customCssLabel)}
                        placeholder={intl.formatMessage(messages.customCssLabel)}
                        value={field}
                        onChange={this.handlecustomCSSChange(i)}
                      />
                    </div>
                  ))
                }
                <div className='actions'>
                  <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddCssItem}>
                    <FormattedMessage id='soapbox_settings.fields.custom_css.add' defaultMessage='Add new Custom CSS item' />
                  </div>
                </div>
              </div>
            </FieldsGroup>
          </fieldset>
          <div className='actions'>
            <button name='button' type='submit' className='btn button button-primary'>
              <FormattedMessage id='soapbox_settings.save' defaultMessage='Save' />
            </button>
          </div>
        </SimpleForm>
      </Column>
    );
  }

}