commentaires et correction

README.md

@@ -1 +1,8 @@
 Projet de quizz
+
+Il est plus simple de raisonner avec un state un peu centralisé et de le faire
+passer dans les props.
+
+Une correction est présente dans le quiz-react.zip
+
+:)

src/App.js

@@ -1,77 +1,96 @@
-import React, { Component } from 'react';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import React, { Component } from "react";
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 // import './App.css';
 
 import quiz from "./exo_quiz_react.json";
 
-import Gabarit from './components/Layout';
+import Gabarit from "./components/Layout";
 import Titre from "./components/titre";
 import Navigation from "./components/navigation";
 import Question from "./components/Question";
-import Valider from './components/Valider';
+import Valider from "./components/Valider";
 
 class App extends Component {
-  constructor(props){
-    super(props)
-    this.current = this.current.bind(this)
-    this.valider = this.valider.bind(this)
+  constructor(props) {
+    super(props);
+    // pour éviter les bind on peut utiliser les fonctions fléchée
+    this.valider = this.valider.bind(this);
   }
+
   state = {
     current: 0,
     validate: false
-  }
-
-  current(c) {
+  };
+
+  // current(c) {
+  //   this.setState({
+  //     current: c,
+  //     validate: false
+  //   });
+  // }
+
+  current = c =>
     this.setState({
       current: c,
       validate: false
-    })
-  }
+    });
 
-  valider(){
-    if (this.display_correction) this.setState({validate: true})
+  valider() {
+    if (this.display_correction) this.setState({ validate: true });
   }
 
   get question() {
     const question = quiz.questions[this.state.current];
     return {
-      ...question, 
-      params: {...quiz.default_params, ...question.params},
-    }
+      ...question,
+      params: { ...quiz.default_params, ...question.params }
+    };
   }
 
   get display_correction() {
-    return this.question.params.display_correction
+    return this.question.params.display_correction;
   }
 
   render() {
-    const title = (
-      <Titre title={quiz.title}/>
-    )
+    // pas vraiment nécessaire de stocker dans des variables.
+    // on peut les passer directement dans les props.
+    // ou en tant qu'enfant de Gabarit
+    const title = <Titre title={quiz.title} />;
     const navigation = (
-      <Navigation 
-      qte={quiz.questions.length}
-      current={this.current}
-      />
-    )
+      <Navigation qte={quiz.questions.length} current={this.current} />
+    );
     const question = (
-      <Question {...this.question} validate={this.state.validate}/>
-    )
+      <Question {...this.question} validate={this.state.validate} />
+    );
     const valider = (
-      <Valider 
-        valider={this.valider} 
+      <Valider
+        valider={this.valider}
         display_correction={this.display_correction}
       />
-    )
+    );
 
     return (
       <MuiThemeProvider>
-        <Gabarit id="App"
-        title={title} 
-        navigation={navigation}
-        question={question}
-        valider={valider}
+        <Gabarit
+          id="App"
+          title={<Titre title={quiz.title} />}
+          navigation={navigation}
+          question={question}
+          valider={valider}
         />
+        {/*
+        <Gabarit
+          id="App"
+        >
+          <Titre title={quiz.title} />
+          <Navigation qte={quiz.questions.length} current={this.current} />
+           <Question {...this.question} validate={this.state.validate} />
+           <Valider
+            valider={this.valider}
+            display_correction={this.display_correction}
+          />
+        </Gabarit>
+        */}
       </MuiThemeProvider>
     );
   }

src/components/Layout.js

@@ -1,26 +1,24 @@
-import React from 'react';
-import Paper from 'material-ui/Paper';
+import React from "react";
+import Paper from "material-ui/Paper";
 
 const styleQuiz = {
   height: 550,
   width: 520,
-  margin: 'auto',
+  margin: "auto",
   padding: 20,
-  display: 'block',
-  textAlign: 'center',
+  display: "block",
+  textAlign: "center"
 };
 
-const Gabarit = (props) => {
-return (
-    <Paper style={styleQuiz} zDepth={1}> 
+const Gabarit = props => {
+  return (
+    <Paper style={styleQuiz} zDepth={1}>
       {props.title}
       {props.navigation}
-      <Paper zDepth={2}> 
-        {props.question}
-      </Paper>
-        {props.valider}
+      <Paper zDepth={2}>{props.question}</Paper>
+      {props.valider}
     </Paper>
-    )
-}
+  );
+};
 
-export default Gabarit;
+export default Gabarit;

src/components/Question/choix-check.js

@@ -1,73 +1,68 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import Checkbox from 'material-ui/Checkbox';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Checkbox from "material-ui/Checkbox";
 
 export default class ChoixCheck extends Component {
-    constructor(props){
-        super(props)
-        this.onChange =  this.onChange.bind(this)
-    }
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+  }
 
-    state = {}
+  state = {};
 
-    componentWillMount() {
-        this.props.answers.forEach( answer => {
-            this.setState ({
-                [answer.text]: {checked: false}
-            })  
-        })
-    }
+  componentWillMount() {
+    this.props.answers.forEach(answer => {
+      this.setState({
+        [answer.text]: { checked: false }
+      });
+    });
+  }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.uuid !== this.props.uuid) {   
-            nextProps.answers.forEach( answer => {
-                this.setState ({
-                    [answer.text]: {checked: false}
-                })  
-            })  
-        }
-    }
-
-    onChange(e) {
-        const val = e.target.id;
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.uuid !== this.props.uuid) {
+      nextProps.answers.forEach(answer => {
         this.setState({
-            [val]: {checked: !this.state[val].checked}
-        })        
-    }
-
-    get answers(){
-        const {validate} = this.props;
-        const answers =  this.props.answers.map( answer => {
-            const {text, is_correct} = answer;
-            const style = validate
-                ? {color: is_correct ? 'green' : 'red'} 
-                : {color: 'inherit'};         
-            const checked = this.state[text] && this.state[text].checked;
-            return ( 
-                <Checkbox  
-                    key={text}
-                    id={text}
-                    checked={checked}
-                    onCheck={this.onChange}
-                    label={text}
-                    labelStyle={style}
-                />  
-                )}
-            );
-        return answers;
-    }
-    render(){
-        return(
-            <div>
-                {this.answers}
-            </div>
-
-        )
+          [answer.text]: { checked: false }
+        });
+      });
     }
-};
+  }
+
+  onChange(e) {
+    const val = e.target.id;
+    this.setState({
+      [val]: { checked: !this.state[val].checked }
+    });
+  }
+
+  get answers() {
+    const { validate } = this.props;
+    const answers = this.props.answers.map(answer => {
+      const { text, is_correct } = answer;
+      const style = validate
+        ? { color: is_correct ? "green" : "red" }
+        : { color: "inherit" };
+      const checked = this.state[text] && this.state[text].checked;
+      return (
+        <Checkbox
+          key={text}
+          id={text}
+          checked={checked}
+          onCheck={this.onChange}
+          label={text}
+          labelStyle={style}
+        />
+      );
+    });
+    return answers;
+  }
+  render() {
+    return <div>{this.answers}</div>;
+  }
+}
 
 ChoixCheck.propTypes = {
-    uuid: PropTypes.string,
-    answers: PropTypes.array,
-    validate: PropTypes.bool,
-  };
+  uuid: PropTypes.string,
+  answers: PropTypes.array,
+  validate: PropTypes.bool
+};