soon

src/components/widgets/time/Clock.jsx

@@ -19,39 +19,56 @@ export default class Clock extends React.PureComponent {
       const now = new Date();
 
       // Percentage
-      if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
+      if (localStorage.getItem('percentageComplete') === 'true') {
+        return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'});
+      }
 
       // Analog clock
       if (localStorage.getItem('analog') === 'true') {
-        require('react-clock/dist/Clock.css');
-        this.setState({ time: now });
+        require('react-clock/dist/Clock.css'); // load analog clock css
+        this.setState({ 
+          time: now 
+        });
       } else {
+        // Default clock
         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 (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}`;
+          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;
+  
+          if (hours > 12) {
+            hours -= 12;
+          }
 
           // Toggle AM/PM
           let ampm = now.getHours() > 11 ? 'PM' : 'AM';
-          if (localStorage.getItem('ampm') === 'false') ampm = '';
+          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}`;
+          if (zero === 'false') {
+            time = `${hours}:${now.getMinutes()}${sec}`;
+          } else {
+            time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+          } 
 
           this.setState({
             time: time,
@@ -65,15 +82,15 @@ export default class Clock extends React.PureComponent {
   }
 
   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} />;
+    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

@@ -5,24 +5,24 @@ export default class DateWidget extends React.PureComponent {
   constructor(...args) {
     super(...args);
     this.state = {
-        date: ''
+      date: ''
     };
   }
 
   getDate() {
     const date = new Date();
-
     const short = localStorage.getItem('short');
-    const dateFormat = localStorage.getItem('dateFormat');
 
     if (short === 'true') {
       const dateDay = date.getDate();
       const dateMonth = date.getMonth() + 1;
       const dateYear = date.getFullYear();
 
-      let day = dateDay, month = dateMonth, year = dateYear;
+      let day = dateDay;
+      let month = dateMonth;
+      let year = dateYear;
 
-      switch (dateFormat) {
+      switch (localStorage.getItem('dateFormat')) {
         case 'MDY':
           day = dateMonth;
           month = dateDay;
@@ -36,13 +36,21 @@ export default class DateWidget extends React.PureComponent {
 
       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}`;
+        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
+      this.setState({ 
+        date: format 
+      });
+    } else {
+      // Full date
       const lang = localStorage.getItem('language');
 
       const day = date.toLocaleDateString(lang, { weekday: 'long' });
@@ -50,7 +58,9 @@ export default class DateWidget extends React.PureComponent {
       const month = date.toLocaleDateString(lang, { month: 'long' });
       const year = date.getFullYear();
 
-      this.setState({ date: `${day} ${nth} ${month} ${year}` });
+      this.setState({ 
+        date: `${day} ${nth} ${month} ${year}` 
+      });
     }
   }