refactor(clock): Move clock variations to components

src/features/misc/sections/Language.jsx

@@ -74,10 +74,6 @@ class LanguageOptions extends PureComponent {
             {variables.getMessage('modals.main.settings.sections.language.title')}
           </span>
           <div className="headerActions">
-            {/*<a className="link" href="" target="_blank" rel="noopener noreferrer">
-              Improve
-              <MdOutlineOpenInNew />
-    </a>*/}
             <a
               className="link"
               href="https://hosted.weblate.org/new-lang/mue/mue-tab/"

src/features/quote/Quote.jsx

@@ -69,9 +69,9 @@ class Quote extends PureComponent {
   constructor() {
     super();
     this.state = {
-      quote: '',
-      author: '',
-      authorOccupation: '',
+      quote: null,
+      author: null,
+      authorOccupation: null,
       favourited: this.useFavourite(),
       share: localStorage.getItem('quoteShareButton') === 'false' ? null : this.buttons.share,
       copy: localStorage.getItem('copyButton') === 'false' ? null : this.buttons.copy,
@@ -473,7 +473,7 @@ class Quote extends PureComponent {
               >
                 {this.state.authorimg === undefined || this.state.authorimg ? '' : <MdPerson />}
               </div>
-              {this.state.author !== '' ? (
+              {this.state.author !== null ? (
                 <div className="author-content" ref={this.quoteauthor}>
                   <span className="title">{this.state.author}</span>
                   {this.state.authorOccupation !== 'Unknown' && (

src/features/time/Clock.jsx

@@ -1,26 +1,24 @@
-import { PureComponent, Suspense, lazy } from 'react';
+import { PureComponent } from 'react';
 
 import { convertTimezone } from 'utils/date';
+import { AnalogClock } from './components/AnalogClock';
+import { VerticalClock } from './components/VerticalClock';
 import EventBus from 'utils/eventbus';
 
 import './clock.scss';
-
-const Analog = lazy(() => import('react-clock'));
-
 export default class Clock extends PureComponent {
   constructor() {
     super();
 
     this.timer = undefined;
     this.state = {
+      timeType: localStorage.getItem('timeType'),
       time: '',
       finalHour: '',
       finalMinute: '',
       finalSeconds: '',
       ampm: '',
       nowGlobal: new Date(),
-      minuteColour: localStorage.getItem('minuteColour'),
-      hourColour: localStorage.getItem('hourColour'),
     };
   }
 
@@ -153,41 +151,17 @@ export default class Clock extends PureComponent {
   }
 
   render() {
-    const enabled = (setting) => {
-      return localStorage.getItem(setting) === 'true';
-    };
-
     if (localStorage.getItem('timeType') === 'analogue') {
-      return (
-        <Suspense fallback={<></>}>
-          <div className={`clockBackground ${enabled('roundClock') ? 'round' : ''}`}>
-            <Analog
-              className="analogclock clock-container"
-              value={this.state.time}
-              size={1.5 * Number(localStorage.getItem('zoomClock') || 100)}
-              renderMinuteMarks={enabled('minuteMarks')}
-              renderHourMarks={enabled('hourMarks')}
-              renderSecondHand={enabled('secondHand')}
-              renderMinuteHand={enabled('minuteHand')}
-              renderHourHand={enabled('hourHand')}
-            />
-          </div>
-        </Suspense>
-      );
+      return <AnalogClock time={this.state.time} />;
     }
 
     if (localStorage.getItem('timeType') === 'verticalClock') {
       return (
-        <span className="new-clock clock-container">
-          {' '}
-          <div className="hour" style={{ color: this.state.hourColour }}>
-            {this.state.finalHour}
-          </div>{' '}
-          <div className="minute" style={{ color: this.state.minuteColour }}>
-            {this.state.finalMinute}
-          </div>{' '}
-          <div className="seconds">{this.state.finalSeconds}</div>{' '}
-        </span>
+        <VerticalClock
+          finalHour={this.state.finalHour}
+          finalMinute={this.state.finalMinute}
+          finalSeconds={this.state.finalSeconds}
+        />
       );
     }
 

src/features/time/components/AnalogClock.jsx

@@ -0,0 +1,26 @@
+import { Suspense, lazy } from 'react';
+const Analog = lazy(() => import('react-clock'));
+
+function AnalogClock({ time }) {
+  const enabled = (setting) => {
+    return localStorage.getItem(setting) === 'true';
+  };
+  return (
+    <Suspense fallback={<></>}>
+      <div className={`clockBackground ${enabled('roundClock') ? 'round' : ''}`}>
+        <Analog
+          className="analogclock clock-container"
+          value={time}
+          size={1.5 * Number(localStorage.getItem('zoomClock') || 100)}
+          renderMinuteMarks={enabled('minuteMarks')}
+          renderHourMarks={enabled('hourMarks')}
+          renderSecondHand={enabled('secondHand')}
+          renderMinuteHand={enabled('minuteHand')}
+          renderHourHand={enabled('hourHand')}
+        />
+      </div>
+    </Suspense>
+  );
+}
+
+export { AnalogClock as default, AnalogClock };

src/features/time/components/VerticalClock.jsx

@@ -0,0 +1,18 @@
+function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
+  const hourColour = localStorage.getItem('hourColour') || '#fff';
+  const minuteColour = localStorage.getItem('minuteColour') || '#ƒff';
+
+  return (
+    <span className="new-clock clock-container">
+      <div className="hour" style={{ color: hourColour }}>
+        {finalHour}
+      </div>
+      <div className="minute" style={{ color: minuteColour }}>
+        {finalMinute}
+      </div>
+      <div className="seconds">{finalSeconds}</div>
+    </span>
+  );
+}
+
+export { VerticalClock as default, VerticalClock };