tidies up code, related to ##286

CYPIAPT-LNDSE · Apr 27, 2017 · ed63505 · ed63505
1 parent 9ac0335
commit ed63505
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/app/components/view-goal/line-chart-detail.jsx b/app/components/view-goal/line-chart-detail.jsx
@@ -6,6 +6,14 @@ import LineChart from './line-chart.jsx';
 
 const defaultWidth = 400;
 const animationName = 'scroll';
+const animationDuration = 1;
+
+const getAnimationFrame = (name, width, defaultWidth) => `
+  @keyframes ${name} {
+    from { margin-left: 0; }
+    to { margin-left: ${0 - width + defaultWidth}px; }
+  }
+`;
 
 class LineChartDetail extends React.Component {
 
@@ -29,13 +37,15 @@ class LineChartDetail extends React.Component {
           .scrollLeft += 1000;
         this.props.onSelectRating(latestRating.id);
       }
-    }, 1500);
+    }, (animationDuration * 1000 + 500));
   }
 
   render() {
 
     const currentGoal = this.props.currentGoal;
+
     const allRatings = currentGoal.ratings.slice(0).reverse();
+
     const feedbackStyle = {
       opacity: currentGoal.ratingSelected
           ? 1
@@ -54,16 +64,9 @@ class LineChartDetail extends React.Component {
         ? currentGoal.ratingSelected.comment
         : '';
 
-    const animation = `
-          @keyframes ${animationName} {
-            from {
-              margin-left: 0;
-            }
-            to {
-              margin-left: ${0 - this.state.customWidth + defaultWidth}px;
-            }
-          }
-      `;
+    const animation = getAnimationFrame(
+      animationName, this.state.width, defaultWidth
+    );
 
     const stylesheet = document.styleSheets[0];
     stylesheet.insertRule(animation, stylesheet.cssRules.length);
@@ -74,12 +77,11 @@ class LineChartDetail extends React.Component {
         width: this.state.customWidth,
         animationName: animationName,
         animationTimingFunction: 'ease-in-out',
-        animationDuration: '1s',
+        animationDuration: `${animationDuration}s`,
         marginLeft: 0 - this.state.customWidth + defaultWidth,
       };
 
     return (
-
      <div className="line-chart-detail goal-detail-page">
        <div className="goal-detail-goal-tile-container">
          <GoalTileComponent goal={ currentGoal } />

diff --git a/app/components/view-goal/line-chart.jsx b/app/components/view-goal/line-chart.jsx
@@ -91,9 +91,6 @@ const compileData = arr => arr.length
   ? [0,].concat(getScores(arr)).concat(arr[arr.length - 1].score)
   : [];
 
-// const getStyles = (arr, avatar) =>
-//   ['circle',].concat(Array(arr.length).fill(avatar));
-
 const getStyles = (arr, avatar, selectedIndex) =>
   Array(arr.length + 1).fill('circle')
     .map((point, index) => index === selectedIndex ? avatar : point);