Initial commit

frontend/src/components/__snapshots__/counter.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Counter snapshot 1`] = `
+<div>
+  Count: 
+  <span>
+    0
+  </span>
+   
+  <button
+    onClick={[Function]}
+  >
+    +1
+  </button>
+  <button
+    onClick={[Function]}
+  >
+    -1
+  </button>
+</div>
+`;

frontend/src/components/clock.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+export default class Clock extends React.Component {
+
+  constructor(props) {
+    super(props)
+    // Initialisation du "state" du composant
+    this.state = {
+      time: new Date(),
+      foo: "bar"
+    }
+    
+	  this.tick = this.tick.bind(this);
+    // On appelle la méthode tick() du composant
+    // toutes les secondes
+    setInterval(this.tick, this.props.interval);
+  }
+	
+  // Méthode de rendu du composant
+  render() {
+    return (
+      <div>Time: { this.state.time.toString() }</div>
+    )
+  }
+  
+  // La méthode tick() met à jour le state du composant avec
+  // la date courante
+  tick() {
+    this.setState({ time: new Date() });
+  }
+
+}

frontend/src/components/counter.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+export default class Counter extends React.Component {
+  constructor(props) {
+    super(props)
+    // Initialisation du "state" du composant
+    this.state = {
+      count: 0
+    }
+    // On "lie" les méthodes de la classe à l'instance
+    this.increment = this.increment.bind(this)
+    this.decrement = this.decrement.bind(this)
+  }
+  // Méthode de rendu du composant
+  render() {
+    console.log(this.props.match);
+    return (
+      <div>
+      	Count: <span>{ this.state.count }</span>&nbsp;
+        <button onClick={ this.increment }>+1</button>
+        <button onClick={ this.decrement }>-1</button>
+      </div>
+    )
+  }
+  // La méthode increment() incrémente la valeur du compteur de 1
+  increment() {
+    this.setState(prevState => ({ count: prevState.count+1 }))
+  }
+  // La méthode decrement() décrémente la valeur du compteur de 1
+  decrement() {
+    this.setState(prevState => ({ count: prevState.count-1 }))
+  }
+}

frontend/src/components/counter.test.js

@@ -0,0 +1,26 @@
+/* globals test, expect */
+import React from 'react';
+import Counter from './counter'
+import renderer from 'react-test-renderer'
+
+test('Counter snapshot', () => {
+
+  const component = renderer.create(<Counter />)
+  
+  let tree = component.toJSON()
+  
+  // Vérifier que le composant n'a pas changé depuis le dernier
+  // snapshot.
+  // Voir https://facebook.github.io/jest/docs/en/snapshot-testing.html
+  // pour plus d'informations
+  expect(tree).toMatchSnapshot()
+  
+  // L'API expect() de Jest est disponible à l'adresse
+  // https://facebook.github.io/jest/docs/en/expect.html
+  
+  // Il est possible d'effectuer des vérifications plus avancées
+  // grâce au projet Enzyme (vérification du DOM, etc)
+  // Voir http://airbnb.io/enzyme/ et
+  // https://facebook.github.io/jest/docs/en/tutorial-react.html#dom-testing
+
+})

frontend/src/components/myform.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { addProduct } from '../actions/products'
+
+
+class MyForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {name: ''};
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(evt) {
+    this.setState({ name: evt.target.value });
+  }
+
+  handleSubmit(evt) {
+    console.log(`Votre nom est ${this.state.name}`);
+    evt.preventDefault();
+  }
+
+  componentDidMount() {
+    this.props.dispatch(addProduct('pomme', 10));
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Nom:
+          <input type="text" value={this.state.name} onChange={this.handleChange} />
+        </label>
+        <input type="submit" value="Soumettre" />
+      </form>
+    );
+  }
+}
+
+export default connect()(MyForm)