Clean up survey choice props in render()

zooniverse · Oct 11, 2017 · 7b07d49 · 7b07d49
1 parent 19725e0
commit 7b07d49
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/app/classifier/tasks/survey/choice.jsx b/app/classifier/tasks/survey/choice.jsx
@@ -73,18 +73,19 @@ class Choice extends React.Component {
   }
 
   render() {
-    const choice = this.props.task.choices[this.props.choiceID];
+    const { choiceID, task, translation } = this.props;
+    const choice = task.choices[this.props.choiceID];
     let hasFocus = choice.images.length > 1;
     return (
       <div className="survey-task-choice">
         {choice.images.length > 0 &&
           <ImageFlipper
-            images={choice.images.map(filename => this.props.task.images[filename])}
+            images={choice.images.map(filename => task.images[filename])}
           />
         }
         <div className="survey-task-choice-content">
-        <div className="survey-task-choice-label">{this.props.translation.choices[this.props.choiceID].label}</div>
-        <div className="survey-task-choice-description">{this.props.translation.choices[this.props.choiceID].description}</div>
+        <div className="survey-task-choice-label">{translation.choices[choiceID].label}</div>
+        <div className="survey-task-choice-description">{translation.choices[choiceID].description}</div>
 
           {choice.confusionsOrder.length > 0 &&
             <div className="survey-task-choice-confusions">
@@ -135,12 +136,12 @@ class Choice extends React.Component {
           <hr />
 
           {!choice.noQuestions &&
-            Utility.getQuestionIDs(this.props.task, this.props.choiceID).map((questionId) => {
-              const question = this.props.task.questions[questionId];
+            Utility.getQuestionIDs(task, choiceID).map((questionId) => {
+              const question = task.questions[questionId];
               const inputType = question.multiple ? 'checkbox' : 'radio';
               return (
                 <div key={questionId} className="survey-task-choice-question" data-multiple={question.multiple || null}>
-                <div className="survey-task-choice-question-label">{this.props.translation.questions[questionId].label}</div>
+                <div className="survey-task-choice-question-label">{translation.questions[questionId].label}</div>
                   {question.answersOrder.map((answerId, i) => {
                     const isChecked = question.multiple ?
                       !!this.state.answers[questionId] && this.state.answers[questionId].indexOf(answerId) > -1 :
@@ -163,7 +164,7 @@ class Choice extends React.Component {
                             onFocus={this.handleFocus.bind(this, questionId, answerId)}
                             onBlur={this.handleFocus.bind(this, null, null)}
                           />
-                          {this.props.translation.questions[questionId].answers[answerId].label}
+                          {translation.questions[questionId].answers[answerId].label}
                         </label>
                         {' '}
                         {hasFocus = true}
@@ -174,7 +175,7 @@ class Choice extends React.Component {
               );
             })
           }
-          {Utility.getQuestionIDs(this.props.task, this.props.choiceID).length > 0 && <hr />}
+          {Utility.getQuestionIDs(task, choiceID).length > 0 && <hr />}
         </div>
         <div style={{ textAlign: 'center' }}>
           <button