get the majority vote values

source/js/buyers-guide/components/creep-vote/creep-vote.jsx

@@ -3,21 +3,41 @@ import Creepometer from '../creepometer/creepometer.jsx';
 import CreepChart from '../creepiness-chart/creepiness-chart.jsx';
 import LikelyhoodChart from '../likelyhood-chart/likelyhood-chart.jsx';
 
+import CREEPINESS_LABELS from "../creepiness-labels.js";
+
 export default class CreepVote extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.getInitialState();
   }
 
   getInitialState() {
-    // let conf = this.props.votes.confidence;
-    let totalVotes = this.props.votes.total;
+    let votes = this.props.votes;
+    let totalVotes = votes.total;
+
+    let c_breakdown = votes.creepiness['vote_breakdown'];
+    let creepiness = 0;
+    let creepinessId = 0;
+
+    Object.keys(c_breakdown).forEach(id => {
+      let v = c_breakdown[id];
+      if (v>creepiness) {
+        creepiness = v;
+        creepinessId = id;
+      }
+    });
+
+    let confidence = votes.confidence;
 
     return {
       totalVotes,
       creepiness: 50,
       confidence: undefined,
-      didVote: false
+      didVote: false,
+      majority: {
+        creepiness: creepinessId,
+        confidence: confidence[0] > confidence[1] ? 0 : 1
+      }
     };
   }
 
@@ -95,19 +115,22 @@ export default class CreepVote extends React.Component {
    * @returns {jsx} What users see when they haven't voted on this product yet.
    */
   renderVoteAsk() {
+    let creepJudgement =  CREEPINESS_LABELS[this.state.majority.creepiness].toLowerCase();
+    let confJudgement = this.state.majority.confidence ? `likely` : `not likely`;
+
     return (<form method="post" id="creep-vote" onSubmit={evt => this.submitVote(evt)}>
       <div className="row mb-5">
         <div className="col-12 col-md-6">
           <div className="mb-4 text-center">
             <h3 className="h5-heading mb-2">How creepy is this product?</h3>
-            <p className="help-text">Majority of voters think it is super creepy</p>
+            <p className="help-text">Majority of voters think it is {creepJudgement}</p>
           </div>
           <Creepometer initialValue={this.state.creepiness} onChange={value => this.setCreepiness(value)}></Creepometer>
         </div>
         <div className="col-12 col-md-6">
           <div className="mb-4 text-center">
             <h3 className="h5-heading mb-2">How likely are you to buy it?</h3>
-            <p className="help-text">Majority of voters are not likely to buy it</p>
+            <p className="help-text">Majority of voters are {confJudgement} to buy it</p>
           </div>
           <div className="text-center">
             <div class="btn-group btn-group-toggle mt-5" data-toggle="buttons">

source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import CREEPINESS_LABELS from "../creepiness-labels.js";
 
 export default class CreepChart extends React.Component {
   constructor(props) {
@@ -9,11 +10,11 @@ export default class CreepChart extends React.Component {
   getInitialState() {
     let values = this.props.values;
     let data = [
-      {c: `no-creep`, label: `Not creepy`, value: values[0], offset: 0},
-      {c: `little-creep`, label: `A little creepy`, value: values[1], offset: 225},
-      {c: `somewhat-creep`, label: `Somewhat creepy`, value: values[2], offset: 475},
-      {c: `very-creep`, label: `Very creepy`, value: values[3], offset: 725},
-      {c: `super-creep`, label: `Super creepy`, value: values[4], offset: 975}
+      {c: `no-creep`, label: CREEPINESS_LABELS[0], value: values[0], offset: 0},
+      {c: `little-creep`, label: CREEPINESS_LABELS[1], value: values[1], offset: 225},
+      {c: `somewhat-creep`, label: CREEPINESS_LABELS[2], value: values[2], offset: 475},
+      {c: `very-creep`, label: CREEPINESS_LABELS[3], value: values[3], offset: 725},
+      {c: `super-creep`, label: CREEPINESS_LABELS[4], value: values[4], offset: 975}
     ];
     let sum = data.reduce((tally, v) => tally + v.value, 0);
 

source/js/buyers-guide/components/creepiness-labels.js

@@ -0,0 +1,9 @@
+const CREEPINESS_LABELS = [
+  `Not creepy`,
+  `A little creepy`,
+  `Somewhat creepy`,
+  `Very creepy`,
+  `Super creepy`
+];
+
+export default CREEPINESS_LABELS;