<commit_before>import React from 'react';
import ReactDOM from 'react-dom';

var WelcomeBox = React.createClass({
  render: function(){
    return(
      <div>
        <h1 className="index-title">Welcome</h1>
        <div className="div-button">
          <LinkButton className="col-xs-6 col-md-6 index-button" text="Administrateur" url="admin"/>
          <p></p>
          <LinkButton className="col-xs-6 col-md-6 index-button" text="Utilisateur" url="login"/>
        </div>
      </div>
    );
  }
});

var LinkButton = React.createClass({
  gotoPage: function(){
    if(this.props.url)
      window.location.href='./'+this.props.url;
  },
  render: function(){
    return(
        <div>
            <button className={this.props.className} onClick={this.gotoPage}>{this.props.text}</button>
        </div>
    );
  }
});

ReactDOM.render(
  <WelcomeBox/>,
  document.getElementById('interactive-box')
);<commit_msg>Example of component managing with state<commit_after>// Ca c'est les librairies, jusqu'ici tout va bien, Webpack fait les import et tout roule

import React from 'react';
import ReactDOM from 'react-dom';


// Ca, c'est vos composants à vous !! c'est comme ça qu'on compose l'appli, et qu'on a pas mille .html
import AdminView from '../newClient/admin'; // <-------- virez aussi ce dossier newClient qui ne sert à rien, ca fait pas propre. on ne précise pas admin.js, juste admin, Webpack prend .js par défaut
import LoginView from '../newClient/login';

// Des petites constantes des familles pour garder les choses cohérentes

const ADMIN_TYPE = 'ADMIN_TYPE';
const ATTENDEE_TYPE = 'ATTENDEE_TYPE';

var WelcomeBox = React.createClass({
  getInitialState() {
      return {};
  },
  _setUserToAdmin() {
    this.setState({userType: ADMIN_TYPE});
  },
  _setUserToAttendee() {
      this.setState({userType: ATTENDEE_TYPE});
  },
  _renderHomepage() {
      return(
        <div>
          <h1 className="index-title">Welcome</h1>
          <div className="div-button">
            <LinkButton className="col-xs-6 col-md-6 index-button" handleLinkClick={this._setUserToAdmin} text="Administrateur" url="admin"/>
            <p></p>
            <LinkButton className="col-xs-6 col-md-6 index-button" handleLinkClick={this._setUserToAttendee} text="Utilisateur" url="login"/>
          </div>
        </div>
      );
  },
  _renderAdminPage() {
      return <AdminView url='/questionnaries'/>;
  },
  _renderLoginPage() {
      return <LoginView/>;
  },
  render: function(){
    var userType = this.state.userType;
    if (userType === undefined) { // On ne connait pas l'utilisateur, ca veut dire qu'on doit lui demander qui il est
        return this._renderHomepage();
    } else if (userType === ADMIN_TYPE) { // L'utilisateur est un admin, affichons lui sa page
        return this._renderAdminPage();
    } else if (userType === ATTENDEE_TYPE) { // L'utilisateur est quelqu'un de l'assemblée, on lui file donc la page de login
        return this._renderLoginPage();
    } else { // Si on arrive ici c'est qu'on a mal fait le state, donc erreur
        return <p>Fatale erreure, il y a un renard dans la poulailler</p>;
    }
  }
});

var LinkButton = React.createClass({
  render: function(){
    // Au click, le bouton appelle la fonction définie dans sa props "handleLinkClick"
    return(
        <div>
            <button className={this.props.className} onClick={this.props.handleLinkClick}>{this.props.text}</button>
        </div>
    );
  }
});

ReactDOM.render(
  <WelcomeBox/>,
  document.getElementById('interactive-box')
);

{'fraction_non_alphanumeric': 0.1394500561167228, 'fraction_numerical': 0.003367003367003367, 'mean_word_length': 3.046538024971623, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 37, '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': '3471315', 'n_tokens_mistral': 1143, 'n_tokens_neox': 1132, 'n_words': 300}