Cleanup, refactor and new features

src/components/widgets/time/Clock.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import Analog from 'react-clock';
+
+import './clock.scss';
+
+export default class Clock extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.timer = undefined;
+    this.state = {
+      time: '',
+      ampm: ''
+    };
+  }
+
+  startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('analog') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
+    this.timer = setTimeout(() => {
+      const now = new Date();
+
+      // Percentage
+      if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
+
+      // Analog clock
+      if (localStorage.getItem('analog') === 'true') this.setState({ time: now });
+      else {
+        let time, sec = '';
+
+        // Extra 0
+        const zero = localStorage.getItem('zero');
+
+        if (localStorage.getItem('seconds') === 'true') {
+          if (zero === 'false') sec = `:${now.getSeconds()}`;
+          else sec = `:${('00' + now.getSeconds()).slice(-2)}`;
+        }
+
+        if (localStorage.getItem('24hour') === 'true') {
+          if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
+          else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+
+          this.setState({ time: time });
+        } else {
+          // 12 hour support
+          let hours = now.getHours();
+          if (hours > 12) hours -= 12;
+
+          // Toggle AM/PM
+          let ampm = now.getHours() > 11 ? 'PM' : 'AM';
+          if (localStorage.getItem('ampm') === 'false') ampm = '';
+
+          if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`;
+          else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+
+          this.setState({
+            time: time,
+            ampm: ampm
+          });
+        }
+      }
+
+      this.startTime();
+    }, time);
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('time') === 'false') return;
+    this.startTime(0);
+  }
+
+  render() {
+    if (localStorage.getItem('time') === 'false') return null;
+
+    let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span> </h1>;
+    if (localStorage.getItem('analog') === 'true') clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
+
+    return clockHTML;
+  }
+}

src/components/widgets/time/Date.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import dtf from '@eartharoid/dtf';
+
+export default class DateWidget extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        date: ''
+    };
+  }
+
+  getDate() {
+    const date = new Date();
+    const dateFormat = localStorage.getItem('dateFormat');
+
+    if (dateFormat === 'short') {
+      const dateDay = date.getDate();
+      const dateMonth = date.getMonth() + 1;
+      const dateYear = date.getFullYear();
+
+      let day = dateDay, month = dateMonth, year = dateYear;
+
+      switch (dateFormat) {
+        case 'MDY':
+          day = dateMonth;
+          month = dateDay;
+          break;
+        case 'YMD':
+          day = dateYear;
+          year = dateDay;
+          break;
+        default: break; // DMY
+      }
+
+      let format;
+      switch (localStorage.getItem('shortFormat')) {
+        case 'dash': format = `${day}-${month}-${year}`; break;
+        case 'gaps': format = `${day} - ${month} - ${year}`; break;
+        default: format = `${day}/${month}/${year}`;
+      }
+
+      this.setState({ date: format });
+    } else { // full date
+      const lang = localStorage.getItem('language');
+
+      const day = date.toLocaleDateString(lang, { weekday: 'long' });
+      const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate();
+      const month = date.toLocaleDateString(lang, { month: 'long' });
+      const year = date.getFullYear();
+
+      this.setState({ date: `${day} ${nth} ${month} ${year}` });
+    }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('date') === 'false') return;
+    this.getDate();
+  }
+
+  render() {
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
+  }
+}

src/components/widgets/time/clock.scss

@@ -0,0 +1,24 @@
+@import '../../../scss/variables';
+
+.clock {
+    font-size: 4em;
+    margin: 0;
+}
+
+.ampm {
+    font-size: 0.5em;
+}
+
+.analogclock,
+.react-clock__face {
+    margin: 0 auto;
+    border-radius: 100%;
+    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
+    border: 1px solid map-get($theme-colours, "main");
+}
+
+.react-clock__hand__body {
+    background: map-get($theme-colours, "main");
+    ;
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}