<commit_before>import {bindActionCreators} from 'redux';
import * as React from 'react';
import {Item, MultiChoice} from 'components/MultiChoice';
import {IURLConnector, setURL} from 'redux/modules/url';
import {PageWrapperHoC} from 'components/PageWrapperHoC';
import { Segment } from 'semantic-ui-react';
import {ICatalogueImport, importQuestionnaire} from '../../apollo/modules/catalogue';
import {allOutcomeSets, IOutcomeResult} from '../../apollo/modules/outcomeSets';
const RocketIcon = require('./rocket.inline.svg');
const { connect } = require('react-redux');

interface IProps extends ICatalogueImport, IURLConnector {
  data?: IOutcomeResult;
}
interface IState {
  error: boolean;
  importing: boolean;
}

@connect(undefined, (dispatch) => ({
  setURL: bindActionCreators(setURL, dispatch),
}))
class NewQuestionnaireTypSelectionInner extends React.Component<IProps, IState> {

  constructor(props) {
    super(props);
    this.goToCatalogue = this.goToCatalogue.bind(this);
    this.goToCustom = this.goToCustom.bind(this);
    this.quickStart = this.quickStart.bind(this);
    this.state = {
      importing: false,
      error: false,
    };
  }

  private goToCatalogue() {
    this.props.setURL(`/catalogue`);
  }

  private goToCustom() {
    this.props.setURL(`/questions/new/custom`);
  }

  private quickStart() {
    this.setState({
      importing: true,
      error: false,
    });
    this.props.importQuestionnaire('eac0c7b4-c9af-4475-94b8-72c548ea9588')
    .then(() => {
      this.props.setURL('/questions');
    })
    .catch(() => {
      this.setState({
        importing: false,
        error: true,
      });
    });
  }

  private renderQuickStart(data: IOutcomeResult) {
    if(data.loading !== false || (data.allOutcomeSets && data.allOutcomeSets.length > 0)) {
      return <div key="noQuickStart" />;
    }
    return (
      <Segment key="quickStart" id="quick-start" raised={true} compact={true} style={{marginLeft:'auto',marginRight:'auto'}}>
        <h3>
          <RocketIcon style={{width:'1rem', marginRight:'.3rem'}}/>
          Quick start
        </h3>
        <p><a onClick={this.quickStart}>Click here to add the ONS Wellbeing questionnaire</a> which is perfect for trying out Impactasaurus</p>
      </Segment>
    );
  }

  public render() {
    const items: Item[] = [{
      title: 'Custom',
      subtitle: 'Create your own questionnaire',<commit_msg>#544 adding error and loading handling<commit_after>import {bindActionCreators} from 'redux';
import * as React from 'react';
import {Item, MultiChoice} from 'components/MultiChoice';
import {IURLConnector, setURL} from 'redux/modules/url';
import {PageWrapperHoC} from 'components/PageWrapperHoC';
import { Segment, Loader } from 'semantic-ui-react';
import {ICatalogueImport, importQuestionnaire} from '../../apollo/modules/catalogue';
import {allOutcomeSets, IOutcomeResult} from '../../apollo/modules/outcomeSets';
const RocketIcon = require('./rocket.inline.svg');
const { connect } = require('react-redux');
const strings = require('./../../../strings.json');

interface IProps extends ICatalogueImport, IURLConnector {
  data?: IOutcomeResult;
}
interface IState {
  error: boolean;
  importing: boolean;
}

@connect(undefined, (dispatch) => ({
  setURL: bindActionCreators(setURL, dispatch),
}))
class NewQuestionnaireTypSelectionInner extends React.Component<IProps, IState> {

  constructor(props) {
    super(props);
    this.goToCatalogue = this.goToCatalogue.bind(this);
    this.goToCustom = this.goToCustom.bind(this);
    this.quickStart = this.quickStart.bind(this);
    this.state = {
      importing: false,
      error: false,
    };
  }

  private goToCatalogue() {
    this.props.setURL(`/catalogue`);
  }

  private goToCustom() {
    this.props.setURL(`/questions/new/custom`);
  }

  private quickStart() {
    this.setState({
      importing: true,
      error: false,
    });
    this.props.importQuestionnaire('eac0c7b4-c9af-4475-94b8-72c548ea9588')
    .then(() => {
      this.props.setURL('/questions');
    })
    .catch(() => {
      this.setState({
        importing: false,
        error: true,
      });
    });
  }

  private renderQuickStart(data: IOutcomeResult) {
    if(data.loading !== false || (data.allOutcomeSets && data.allOutcomeSets.length > 0)) {
      return <div key="noQuickStart" />;
    }
    let body: JSX.Element|JSX.Element[] = <p><a onClick={this.quickStart}>Click here to add the ONS Wellbeing questionnaire</a> which is perfect for trying out Impactasaurus</p>;
    if(this.state.importing) {
      body = <Loader active={true} inline={true} size="mini" />;
    }
    if(this.state.error) {
      body = [
        <p key="whoops">Whoops, something went wrong.</p>,
        <p key="advice">{strings.failureGeneric}</p>,
      ];
    }
    return (
      <Segment key="quickStart" id="quick-start" raised={true} compact={true} style={{marginLeft:'auto',marginRight:'auto'}}>
        <h3>
          <RocketIcon style={{width:'1rem', marginRight:'.3rem'}}/>
          Quick start
        </h3>
        {body}
      </Segment>
    );
  }

  public render() {
    const items: Item[] = [{
      title: 'Custom',
      subtitle: 'Create your own questionnaire',
{'fraction_non_alphanumeric': 0.1538019536487263, 'fraction_numerical': 0.010151312009193642, 'mean_word_length': 3.4594363791631086, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2357613', 'n_tokens_mistral': 1678, 'n_tokens_neox': 1656, 'n_words': 337}