clock: lint

pkg/interface/src/apps/launch/components/tiles/clock.js

@@ -1,14 +1,12 @@
 import React from 'react';
-import classnames from 'classnames';
 import moment from 'moment';
 import SunCalc from 'suncalc';
 
 import Tile from './tile';
 
-const outerSize = 124; //tile size
-const innerSize = 124; //clock size
+const innerSize = 124; // clock size
 
-//polar to cartesian
+// polar to cartesian
 // var ptc = function(r, theta) {
 //   return {
 //     x: r * Math.cos(theta),
@@ -16,77 +14,72 @@ const innerSize = 124; //clock size
 //   }
 // }
 
-let text = "#000000", background = "#ffffff";
+let text = '#000000', background = '#ffffff';
 
-let dark = window.matchMedia('(prefers-color-scheme: dark)');
+const dark = window.matchMedia('(prefers-color-scheme: dark)');
 
 if (dark.matches) {
-  text = "#7f7f7f";
-  background = "#333";
+  text = '#7f7f7f';
+  background = '#333';
 }
 
 function darkColors(dark) {
   if (dark.matches) {
-    text = "#7f7f7f";
-    background = "#333";
+    text = '#7f7f7f';
+    background = '#333';
   } else {
-    text = "#000000";
-    background = "#ffffff"
+    text = '#000000';
+    background = '#ffffff';
   }
  }
 
 dark.addListener(darkColors);
 
-
 const toRelativeTime = (date, referenceTime, unit) => moment(date)
-  .diff(referenceTime, unit)
+  .diff(referenceTime, unit);
 
 const minsToDegs = (mins) => {
   // 1440 = total minutes in an earth day
-  return (mins / 1440) * 360
-}
+  return (mins / 1440) * 360;
+};
 
-const clockwise = (deg, delta) => deg + delta
-
-const anticlockwise = (deg, delta) => deg - delta
-
-const splitArc = (start, end) => end + ((start - end) * 0.5)
+const splitArc = (start, end) => end + ((start - end) * 0.5);
 
 const isOdd = n => Math.abs(n % 2) == 1;
 
-const radToDeg = (rad) => rad * (180 / Math.PI);
+const radToDeg = rad => rad * (180 / Math.PI);
 
-const degToRad = (deg) => deg * (Math.PI / 180);
+const degToRad = deg => deg * (Math.PI / 180);
 
 const convert = (date, referenceTime) => {
-  return minsToDegs(toRelativeTime(date, referenceTime, 'minutes'))
-}
+  return minsToDegs(toRelativeTime(date, referenceTime, 'minutes'));
+};
 
 const circle = (ctx, x, y, r, from, to, fill) => {
   ctx.beginPath();
-  ctx.arc( x, y, r, from, to, );
+  ctx.arc( x, y, r, from, to );
   ctx.strokeStyle = 'rgba(0,0,0,0)';
   ctx.fillStyle = fill || 'rgba(0,0,0,0)';
   ctx.fill();
-}
+};
 
 const circleOutline = (ctx, x, y, r, from, to, stroke, lineWidth) => {
   ctx.beginPath();
-  ctx.arc( x, y, r, from, to, );
+  ctx.arc( x, y, r, from, to );
   ctx.fillStyle = 'rgba(0,0,0,0)';
   ctx.lineWidth = lineWidth;
   ctx.strokeStyle = stroke || 'rgba(0,0,0,0)';
   ctx.stroke();
-}
+};
 
 const arc = (ctx, x, y, r, from, to, fill) => {
   ctx.beginPath();
-  ctx.arc( x, y, r, from, to, );
+  ctx.arc( x, y, r, from, to );
   ctx.fillStyle = 'rgba(0,0,0,0)';
   ctx.lineWidth = r * 2;
   ctx.strokeStyle = fill || 'rgba(0,0,0,0)';
   ctx.stroke();
-}
+};
 
 const degArc = (ctx, x, y, r, from, to, fill) => {
   ctx.beginPath();
@@ -95,17 +88,16 @@ const degArc = (ctx, x, y, r, from, to, fill) => {
   ctx.lineWidth = r * 2;
   ctx.strokeStyle = fill || 'rgba(0,0,0,0)';
   ctx.stroke();
-}
+};
 
 class Clock extends React.Component {
-
   constructor(props) {
     super(props);
     this.animate = this.animate.bind(this);
     this.canvasRef = React.createRef();
     this.canvas = null;
     this.angle = 0;
-    this.referenceTime = moment().startOf('day').subtract(6, 'hours')
+    this.referenceTime = moment().startOf('day').subtract(6, 'hours');
     this.state = {
       lat: 0,
       lon: 0,
@@ -119,23 +111,22 @@ class Clock extends React.Component {
       night: 0,
       nightEnd: 0,
       nauticalDawn: 0,
-      nauticalDusk: 0,
+      nauticalDusk: 0
       // sunriseStartTime = 1509967519,
       // sunriseEndTime = 2500 + 1509967519,
       // sunsetStartTime = 1510003982,
       // sunsetEndTime
       // moonPhase = 0.59,
-    }
-
+    };
   }
 
   initGeolocation() {
     if (typeof this.props.data === 'string') {
-      const latlon = this.props.data.split(',')
-      const lat = latlon[0]
-      const lon = latlon[1]
+      const latlon = this.props.data.split(',');
+      const lat = latlon[0];
+      const lon = latlon[1];
 
-      const suncalc = SunCalc.getTimes(new Date(), lat, lon)
+      const suncalc = SunCalc.getTimes(new Date(), lat, lon);
 
       const convertedSunCalc = {
         sunset: convert(suncalc.sunset, this.referenceTime),
@@ -147,25 +138,24 @@ class Clock extends React.Component {
         night: convert(suncalc.night, this.referenceTime),
         nightEnd: convert(suncalc.nightEnd, this.referenceTime),
         nauticalDawn: convert(suncalc.nauticalDawn, this.referenceTime),
-        nauticalDusk: convert(suncalc.nauticalDusk, this.referenceTime),
-      }
+        nauticalDusk: convert(suncalc.nauticalDusk, this.referenceTime)
+      };
 
       this.setState({
         lat,
         lon,
         ...convertedSunCalc,
-        geolocationSuccess: true,
-      })
+        geolocationSuccess: true
+      });
     }
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps !== this.props) {
-      this.initGeolocation()
+      this.initGeolocation();
     }
   }
 
-
   componentDidMount() {
     this.canvas = initCanvas(
       this.canvasRef,
@@ -173,29 +163,27 @@ class Clock extends React.Component {
       4
     );
 
-    this.initGeolocation()
-    this.animate()
+    this.initGeolocation();
+    this.animate();
   }
 
-
   animate() {
-    window.setTimeout(() => window.requestAnimationFrame(this.animate), 1000)
+    window.setTimeout(() => window.requestAnimationFrame(this.animate), 1000);
 
-    const { state } = this
+    const { state } = this;
     const time = new Date();
-    const ctx = this.canvas.getContext("2d");
+    const ctx = this.canvas.getContext('2d');
     ctx.clearRect(0, 0, ctx.width, ctx.height);
     ctx.save();
 
-    const ctr = innerSize / 2
+    const ctr = innerSize / 2;
 
     // Sun+moon calculations
-    const dd = 4
-    var cx = ctr
-    var cy = ctr
-    this.angle = degToRad(convert(time, this.referenceTime))
-    var newX = cx + (ctr - 15) * Math.cos(this.angle);
-    var newY = cy + (ctr - 15) * Math.sin(this.angle);
+    const cx = ctr;
+    const cy = ctr;
+    this.angle = degToRad(convert(time, this.referenceTime));
+    const newX = cx + (ctr - 15) * Math.cos(this.angle);
+    const newY = cy + (ctr - 15) * Math.sin(this.angle);
 
     // Initial background
     circle(
@@ -206,7 +194,7 @@ class Clock extends React.Component {
       -1,
       2 * Math.PI,
       background
-    )
+    );
 
     // Day
     degArc(
@@ -276,7 +264,7 @@ class Clock extends React.Component {
         0,
         2 * Math.PI,
         '#FCC440'
-      )
+      );
 
       // Sun circle border
       circleOutline(
@@ -299,7 +287,7 @@ class Clock extends React.Component {
         0,
         2 * Math.PI,
         '#FFFFFF'
-      )
+      );
       // Moon circle outline
       circleOutline(
         ctx,
@@ -357,7 +345,7 @@ class Clock extends React.Component {
       -1,
       2 * Math.PI,
       background
-    )
+    );
 
     // Center white circle border
     circleOutline(
@@ -374,26 +362,27 @@ class Clock extends React.Component {
     // Text for time and date
     const timeText = isOdd(time.getSeconds())
       ? moment().format('h mm A')
-      : moment().format('h:mm A')
-    const dateText = moment().format('MMM Do')
-    ctx.textAlign = 'center'
-    ctx.fillStyle = text
-    ctx.font = '12px Inter'
-    ctx.fillText(timeText, ctr, ctr + 6 - 7)
-    ctx.fillStyle = text
-    ctx.font = '12px Inter'
-    ctx.fillText(dateText, ctr, ctr + 6 + 7)
+      : moment().format('h:mm A');
+    const dateText = moment().format('MMM Do');
+    ctx.textAlign = 'center';
+    ctx.fillStyle = text;
+    ctx.font = '12px Inter';
+    ctx.fillText(timeText, ctr, ctr + 6 - 7);
+    ctx.fillStyle = text;
+    ctx.font = '12px Inter';
+    ctx.fillText(dateText, ctr, ctr + 6 + 7);
 
     ctx.restore();
   }
 
   render() {
-    return <div style={{position:'relative'}}>
+    return <div style={{ position:'relative' }}>
       <canvas
-      style={{position:'absolute'}}
+      style={{ position:'absolute' }}
       ref={ canvasRef => this.canvasRef = canvasRef }
-      id="clock-canvas"/>
-    </div>
+      id="clock-canvas"
+      />
+    </div>;
   }
 }
 
@@ -411,27 +400,15 @@ export default class ClockTile extends React.Component {
   }
 
   render() {
-    let data = !!this.props.data ? this.props.data : {};
+    const data = this.props.data ? this.props.data : {};
     return this.renderWrapper((
-      <Clock data={data}/>
+      <Clock data={data} />
     ));
-
   }
-
 }
 
-const loadImg = (base64, cb) => new Promise(resolve => {
-  const img = new Image();
-  img.onload = () => resolve(cb(img));
-  img.onerror = () => reject('Error loading image');
-  img.src = base64;
-});
-
-
 const initCanvas = (canvas, size, ratio) => {
   const { x, y } = size;
-  let ctx = canvas.getContext('2d');
-
   // let ratio = ctx.webkitBackingStorePixelRatio < 2
   //   ? window.devicePixelRatio
   //   : 1;
@@ -439,7 +416,6 @@ const initCanvas = (canvas, size, ratio) => {
   // default for high print resolution.
   // ratio = ratio * resMult;
 
-
   canvas.width = x * ratio;
   canvas.height = y * ratio;
   canvas.style.width = x + 'px';
@@ -448,5 +424,5 @@ const initCanvas = (canvas, size, ratio) => {
   canvas.getContext('2d').scale(ratio, ratio);
 
   return canvas;
-}
+};