<commit_before>import axios from '../lib/axios';
import React from 'react';
import StepZilla from 'react-stepzilla';
import 'react-stepzilla/src/css/main.css';
import qs from 'querystring';

import FormStep from './steps/FormStep';
import ContactStep from './steps/ContactStep';
import LocationStep from './steps/LocationStep';
import ScheduleStep from './steps/ScheduleStep';

import './style.css';

const apiEndpoint = API_ENDPOINT; // defined by webpack

const groupTypes = [
  {
    id: 'G',
    label: 'Une réunion de groupe',
    description: 'Une réunion qui concerne principalement les membres du groupes, et non le public de façon générale. ' +
    'Par exemple, la réunion hebdomadaire du groupe, une réunion de travail, ou l\'audition d\'une association'
  },
  {
    id: 'M',
    label: 'Une réunion publique',
    description: 'Une réunion ouverts à tous les publics, au-delà des membres du groupe d\'action, mais qui aura lieu ' +
    'dans un lieu privé. Par exemple, une réunion publique avec un orateur, une projection ou un concert.'
  },
  {
    id: 'A',
    label: 'Une action publique',
    description: 'Une action qui se déroulera dans un lieu public et qui aura comme objectif principal d\'aller à la' +
    'rencontre ou d\'atteindre des personnes extérieures à la FI'
  },
  {
    id: 'O',
    label: 'Un autre type d\'événement',
    description: 'Tout autre type d\'événement qui ne rentre pas dans les catégories ci-dessus.'
  }
];

class CreateEventForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {fields: {}};
    this.setFields = this.setFields.bind(this);
  }

  async componentDidMount() {
    let subtypes = (await axios.get(apiEndpoint + '/events_subtypes/')).data;
    this.setState({subtypes});
  }

  setFields(fields) {
    this.setState({fields: Object.assign(this.state.fields, fields)});
  }

  render() {
    if (!this.state.subtypes) {
      return null;
    }

    let steps = [
      {
        name: 'Quel type ?',
        component: <EventTypeStep setFields={this.setFields} subtypes={this.state.subtypes} fields={this.state.fields} step={0} />
      },
      {name: 'Qui ?', component: <ContactStep setFields={this.setFields} fields={this.state.fields} step={1} />},
      {name: 'Quand ?', component: <ScheduleStep setFields={this.setFields} fields={this.state.fields} step={2} />},
      {name: 'Où ?', component: <LocationStep setFields={this.setFields} fields={this.state.fields} step={3} />},
      {name: 'Validation et nom', component: <ValidateStep fields={this.state.fields} step={4} />},
    ];

    return (
      <div className="step-progress">
        <StepZilla steps={steps} stepsNavigation={false} showNavigation={false} preventEnterSubmission={true}/>
      </div>
    );
  }
}


class EventTypeStep extends FormStep {
  constructor(props) {
    super(props);
    this.state.fields.subtype = props.fields.subtype;
    this.setFields = this.setFields.bind(this);
    this.confirm = this.confirm.bind(this);
    this.allSubtypes = props.subtypes;
    this.rankedSubtypes = props.subtypes.reduce((acc, s) => {
      (acc[s.type] = acc[s.type] || []).push(s);
      return acc;
    }, {});
  }

  setSubtype(subtype) {
    this.setState({
      fields: Object.assign(this.state.fields, {
        subtype: subtype,
      })
    });
  }

  confirm(e) {
    e.preventDefault();
    this.setFields({subtype: this.state.fields.subtype});
    this.jumpToStep(1);
  }

  render() {
    return (
      <div className="row padtopmore">
        <div className="col-sm-6">
          <h2>Quel type d'événement voulez-vous créer ?</h2>
          <p>
            Chaque insoumis·e peut créer un événement sur la plateforme dès lors
            qu’il respecte le cadre et la démarche de la France insoumise dans un esprit
            d’ouverture, de bienveillance et de volonté de se projeter dans l’action.
          </p>
          <p>
            Afin de mieux identifier les événements que vous créez, et de pouvoir mieux les recommander aux autres
            insoumis⋅es, indiquez le type d'événement que vous organisez :
          </p>
        </div>
        <div className="col-sm-6 padbottom">
          <h3>Je veux créer...</h3>
          <form onSubmit={(e) => this.confirm(e)}>
            {
              groupTypes.map(type => (
                <div key={type.id}>
                  <h4>{type.label}</h4>
                  <ul className="nav nav-pills">
                    {<commit_msg>add link to intervenants on event create<commit_after>import axios from '../lib/axios';
import React from 'react';
import StepZilla from 'react-stepzilla';
import 'react-stepzilla/src/css/main.css';
import qs from 'querystring';

import FormStep from './steps/FormStep';
import ContactStep from './steps/ContactStep';
import LocationStep from './steps/LocationStep';
import ScheduleStep from './steps/ScheduleStep';

import './style.css';

const apiEndpoint = API_ENDPOINT; // defined by webpack

const groupTypes = [
  {
    id: 'G',
    label: 'Une réunion de groupe',
    description: 'Une réunion qui concerne principalement les membres du groupes, et non le public de façon générale. ' +
    'Par exemple, la réunion hebdomadaire du groupe, une réunion de travail, ou l\'audition d\'une association'
  },
  {
    id: 'M',
    label: 'Une réunion publique',
    description: 'Une réunion ouverts à tous les publics, au-delà des membres du groupe d\'action, mais qui aura lieu ' +
    'dans un lieu privé. Par exemple, une réunion publique avec un orateur, une projection ou un concert.'
  },
  {
    id: 'A',
    label: 'Une action publique',
    description: 'Une action qui se déroulera dans un lieu public et qui aura comme objectif principal d\'aller à la' +
    'rencontre ou d\'atteindre des personnes extérieures à la FI'
  },
  {
    id: 'O',
    label: 'Un autre type d\'événement',
    description: 'Tout autre type d\'événement qui ne rentre pas dans les catégories ci-dessus.'
  }
];

class CreateEventForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {fields: {}};
    this.setFields = this.setFields.bind(this);
  }

  async componentDidMount() {
    let subtypes = (await axios.get(apiEndpoint + '/events_subtypes/')).data;
    this.setState({subtypes});
  }

  setFields(fields) {
    this.setState({fields: Object.assign(this.state.fields, fields)});
  }

  render() {
    if (!this.state.subtypes) {
      return null;
    }

    let steps = [
      {
        name: 'Quel type ?',
        component: <EventTypeStep setFields={this.setFields} subtypes={this.state.subtypes} fields={this.state.fields} step={0} />
      },
      {name: 'Qui ?', component: <ContactStep setFields={this.setFields} fields={this.state.fields} step={1} />},
      {name: 'Quand ?', component: <ScheduleStep setFields={this.setFields} fields={this.state.fields} step={2} />},
      {name: 'Où ?', component: <LocationStep setFields={this.setFields} fields={this.state.fields} step={3} />},
      {name: 'Validation et nom', component: <ValidateStep fields={this.state.fields} step={4} />},
    ];

    return (
      <div className="step-progress">
        <StepZilla steps={steps} stepsNavigation={false} showNavigation={false} preventEnterSubmission={true}/>
      </div>
    );
  }
}


class EventTypeStep extends FormStep {
  constructor(props) {
    super(props);
    this.state.fields.subtype = props.fields.subtype;
    this.setFields = this.setFields.bind(this);
    this.confirm = this.confirm.bind(this);
    this.allSubtypes = props.subtypes;
    this.rankedSubtypes = props.subtypes.reduce((acc, s) => {
      (acc[s.type] = acc[s.type] || []).push(s);
      return acc;
    }, {});
  }

  setSubtype(subtype) {
    this.setState({
      fields: Object.assign(this.state.fields, {
        subtype: subtype,
      })
    });
  }

  confirm(e) {
    e.preventDefault();
    this.setFields({subtype: this.state.fields.subtype});
    this.jumpToStep(1);
  }

  render() {
    return (
      <div className="row padtopmore">
        <div className="col-sm-6">
          <h2>Quel type d'événement voulez-vous créer ?</h2>
          <p>
            Chaque insoumis·e peut créer un événement sur la plateforme dès lors
            qu’il respecte le cadre et la démarche de la France insoumise dans un esprit
            d’ouverture, de bienveillance et de volonté de se projeter dans l’action.
          </p>
          <p>
            Afin de mieux identifier les événements que vous créez, et de pouvoir mieux les recommander aux autres
            insoumis⋅es, indiquez le type d'événement que vous organisez.
          </p>
          <p>
            Vous souhaitez inviter une oratrice ou un orateur national&nbsp;?
            <a href="https://lafranceinsoumise.fr/groupes-appui/inviter-des-intervenants/">Suivez le mode d'emploi.</a>
          </p>
        </div>
        <div className="col-sm-6 padbottom">
          <h3>Je veux créer...</h3>
          <form onSubmit={(e) => this.confirm(e)}>
            {
              groupTypes.map(type => (
                <div key={type.id}>
                  <h4>{type.label}</h4>
                  <ul className="nav nav-pills">
                    {
{'fraction_non_alphanumeric': 0.13284212807454762, 'fraction_numerical': 0.0030339148336764547, 'mean_word_length': 2.787443578169881, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 63, 'https://': 1, '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': '3137218', 'n_tokens_mistral': 2950, 'n_tokens_neox': 2949, 'n_words': 786}