import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import isEmpty from 'lodash/isEmpty';

// Components
import NexGDDPTool from 'components/nexgddp-tool/NexGDDPTool';

class NexGDDPEmbedPage extends PureComponent {
  componentDidMount() {
    if (isEmpty(this.props.dataset)) {
      this.props.getDatasetByIdOrSlug(
        this.props.datasetSlug,
        ['metadata', 'widget', 'layer']
      );
    }
  }

  componentWillUnmount() {
    if (!isEmpty(this.props.dataset)) this.setState({ data: {} });
  }

  render() {
    const { dataset, embed } = this.props;

    return (
      <div className="-theme-2">
        <h2>{dataset.name}</h2>

        {!isEmpty(dataset) &&
          <NexGDDPTool
            embed={embed}
            dataset={dataset}
          />
        }
      </div>
    );
  }
}

NexGDDPEmbedPage.propTypes = {
  embed: PropTypes.bool,
  datasetSlug: PropTypes.string,
  dataset: PropTypes.object,
  getDatasetByIdOrSlug: PropTypes.func
};

NexGDDPEmbedPage.defaultProps = {
  datasetSlug: '',
  dataset: {}
};

export default NexGDDPEmbedPage;

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import isEmpty from 'lodash/isEmpty';

// Components
import NexGDDPTool from 'components/nexgddp-tool/NexGDDPTool';

class NexGDDPEmbedPage extends PureComponent {
  componentDidMount() {
    if (isEmpty(this.props.dataset)) {
      this.props.getDatasetByIdOrSlug(
        this.props.datasetSlug,
        ['metadata', 'widget', 'layer']
      );
    }
  }

  componentWillUnmount() {
    if (!isEmpty(this.props.dataset)) this.setState({ data: {} });
  }

  render() {
    const { dataset, embed } = this.props;

    const title = dataset.metadata && dataset.metadata.length && dataset.metadata[0].attributes.name
      ? dataset.metadata[0].attributes.name
      : dataset.name;

    return (
      <div className="-theme-2">
        <h2>{title}</h2>

        {!isEmpty(dataset) &&
          <NexGDDPTool
            embed={embed}
            dataset={dataset}
          />
        }
      </div>
    );
  }
}

NexGDDPEmbedPage.propTypes = {
  embed: PropTypes.bool,
  datasetSlug: PropTypes.string,
  dataset: PropTypes.object,
  getDatasetByIdOrSlug: PropTypes.func
};

NexGDDPEmbedPage.defaultProps = {
  datasetSlug: '',
  dataset: {}
};

export default NexGDDPEmbedPage;

Use the dataset's metadata name for the NexGDDP's embeds
Use the dataset's metadata name for the NexGDDP's embeds

Because the NexGDDP dataset are actually spread into several datasets in the API, when sharing an embed of a NexGDDP visualisation, we would display the name of a specific dataset instead of the one of the "group". By using the metadata's title, we avoid this problem.
