refactor: cleanup, use createRef etc

src/components/widgets/background/Background.jsx

@@ -91,7 +91,7 @@ export default class Background extends PureComponent {
           camera: favourited.camera
         }
       });
-    };
+    }
 
     switch (localStorage.getItem('backgroundType')) {
       case 'api':

src/components/widgets/greeting/Greeting.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
@@ -13,6 +13,7 @@ export default class Greeting extends PureComponent {
     };
     this.timer = undefined;
     this.language = window.language.widgets.greeting;
+    this.greeting = createRef();
   }
 
   doEvents(time, message) {
@@ -114,23 +115,21 @@ export default class Greeting extends PureComponent {
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'greeting' || data === 'timezone') {
-        const element = document.querySelector('.greeting');
-
         if (localStorage.getItem('greeting') === 'false') {
-          return element.style.display = 'none';
+          return this.greeting.current.style.display = 'none';
         }
 
         this.timer = null;
         this.getGreeting(0);
 
-        element.style.display = 'block';
-        element.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
+        this.greeting.current.style.display = 'block';
+        this.greeting.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
       }
     });
 
     // this comment can apply to all widget zoom features apart from the general one in the Accessibility section
     // in a nutshell: 1.6 is the current font size and we do "localstorage || 100" so we don't have to try that 4.0 -> 5.0 thing again
-    document.querySelector('.greeting').style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
+    this.greeting.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomGreeting') || 100) / 100)}em`;
 
     this.getGreeting(0);
   }
@@ -140,8 +139,10 @@ export default class Greeting extends PureComponent {
   }
 
   render() {
-    return <h1 className='greeting'>
-      {this.state.greeting}
-    </h1>;
+    return (
+      <h1 className='greeting' ref={this.greeting}>
+        {this.state.greeting}
+      </h1>
+    );
   }
 }

src/components/widgets/navbar/Navbar.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@material-ui/icons';
 
 import Notes from './Notes';
@@ -11,12 +11,14 @@ import EventBus from '../../../modules/helpers/eventbus';
 import './scss/index.scss';
 
 export default class Navbar extends PureComponent {
+  constructor() {
+    super();
+    this.navbarContainer = createRef();
+  }
+
   setZoom() {
     const zoomNavbar = Number((localStorage.getItem('zoomNavbar') || 100) / 100);
-    const navbarIcons = document.querySelectorAll('.navbar-container');
-    for (let i = 0; i < navbarIcons.length; i++) {
-      navbarIcons[i].style.fontSize = `${zoomNavbar}em`;
-    }
+    this.navbarContainer.current.style.fontSize = `${zoomNavbar}em`;
   }
 
   componentDidMount() {
@@ -34,7 +36,7 @@ export default class Navbar extends PureComponent {
     const backgroundEnabled = (localStorage.getItem('background') === 'true');
   
     return (
-      <div className='navbar-container'>
+      <div className='navbar-container' ref={this.navbarContainer}>
         {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> : null}
         {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> : null}
     

src/components/widgets/navbar/Notes.jsx

@@ -9,7 +9,8 @@ export default class Notes extends PureComponent {
     super();
     this.state = {
       notes: localStorage.getItem('notes') || '',
-      visibility: (localStorage.getItem('notesPinned') === 'true') ? 'visible' : 'hidden'
+      visibility: (localStorage.getItem('notesPinned') === 'true') ? 'visible' : 'hidden',
+      marginLeft: (localStorage.getItem('refresh') === 'false') ? '-200px' : '0px'
     };
     this.language = window.language.widgets.navbar.notes;
   }
@@ -43,15 +44,9 @@ export default class Notes extends PureComponent {
     toast(window.language.toasts.notes);
   }
 
-  componentDidMount() {
-    if (localStorage.getItem('refresh') === 'false') {
-      document.getElementById('noteContainer').style.marginLeft = '-200px';
-    }
-  }
-
   render() {
     return (
-      <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
+      <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility, marginleft: this.state.marginLeft }}>
         <div className='topbarnotes'>
           <NotesRounded/>
           <h3>{this.language.title}</h3>

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { TextareaAutosize } from '@material-ui/core';
 import Hotkeys from 'react-hot-keys';
 
@@ -20,6 +20,7 @@ export default class QuickLinks extends PureComponent {
       urlError: ''
     };
     this.language = window.language.widgets.quicklinks;
+    this.quicklinksContainer = createRef();
   }
 
   deleteLink(key, event) {
@@ -81,8 +82,7 @@ export default class QuickLinks extends PureComponent {
     this.toggleAdd();
 
     // make sure image is correct size
-    const element = document.querySelector('.quicklinks-container');
-    this.setZoom(element);
+    this.setZoom(this.quicklinksContainer.current);
   }
 
   toggleAdd = () => {
@@ -103,14 +103,12 @@ export default class QuickLinks extends PureComponent {
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'quicklinks') {
-        const element = document.querySelector('.quicklinks-container');
-
         if (localStorage.getItem('quicklinksenabled') === 'false') {
-          return element.style.display = 'none';
+          return this.quicklinksContainer.current.style.display = 'none';
         }
 
-        element.style.display = 'block';
-        this.setZoom(element);
+        this.quicklinksContainer.current.style.display = 'block';
+        this.setZoom(this.quicklinksContainer.current);
 
         this.setState({
           items: JSON.parse(localStorage.getItem('quicklinks'))
@@ -118,17 +116,17 @@ export default class QuickLinks extends PureComponent {
       }
     });
 
-    // allows you to add a link by pressing enter
-    document.querySelector('.topbarquicklinks').onkeydown = (e) => {
-      e = e || window.event;
-      const code = e.which || e.keyCode;
-      if (code === 13 && this.state.showAddLink === 'visible') {
-        this.addLink();
-        e.preventDefault();
-      }
-    };
+    this.setZoom(this.quicklinksContainer.current);
+  }
 
-    this.setZoom(document.querySelector('.quicklinks-container'));
+  // allows you to add a link by pressing enter
+  topbarEnter = (e) => {
+    e = e || window.event;
+    const code = e.which || e.keyCode;
+    if (code === 13 && this.state.showAddLink === 'visible') {
+      this.addLink();
+      e.preventDefault();
+    }
   }
 
   componentWillUnmount() {
@@ -164,13 +162,13 @@ export default class QuickLinks extends PureComponent {
     const marginTop = (this.state.items.length > 0) ? '9vh' : '4vh';
 
     return (
-      <div className='quicklinks-container'>
+      <div className='quicklinks-container' ref={this.quicklinksContainer}>
         {this.state.items.map((item) => (
           quickLink(item)
         ))}
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
         <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink, marginTop }}>
-          <div className='topbarquicklinks'>
+          <div className='topbarquicklinks' onKeyDown={this.topbarEnter}>
             <h4>{this.language.new}</h4>
             <TextareaAutosize rowsmax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
             <p>{this.state.nameError}</p>

src/components/widgets/quote/Quote.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
 import { toast } from 'react-toastify';
 import Hotkeys from 'react-hot-keys';
@@ -28,6 +28,9 @@ export default class Quote extends PureComponent {
       type: localStorage.getItem('quoteType') || 'api'
     };
     this.language = window.language.widgets.quote;
+    this.quote = createRef();
+    this.quotediv = createRef();
+    this.quoteauthor = createRef();
   }
 
   useFavourite() {
@@ -197,20 +200,18 @@ export default class Quote extends PureComponent {
 
   setZoom() {
     const zoomQuote = Number((localStorage.getItem('zoomQuote') || 100) / 100);
-    document.querySelector('.quote').style.fontSize = `${0.8 * zoomQuote}em`;
-    document.querySelector('.quoteauthor').style.fontSize = `${0.9 * zoomQuote}em`;
+    this.quote.current.style.fontSize = `${0.8 * zoomQuote}em`;
+    this.quoteauthor.current.style.fontSize = `${0.9 * zoomQuote}em`;
   }
 
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'quote') {
-        const element = document.querySelector('.quotediv');
-
         if (localStorage.getItem('quote') === 'false') {
-          return element.style.display = 'none';
+          return this.quotediv.current.style.display = 'none';
         }
 
-        element.style.display = 'block';
+        this.quotediv.current.style.display = 'block';
         this.init();
 
         // buttons hot reload
@@ -253,9 +254,9 @@ export default class Quote extends PureComponent {
 
   render() {
     return (
-      <div className='quotediv'>
-        <h1 className='quote'>{this.state.quote}</h1>
-        <h1 className='quoteauthor'>
+      <div className='quotediv' ref={this.quotediv}>
+        <h1 className='quote' ref={this.quote}>{this.state.quote}</h1>
+        <h1 className='quoteauthor' ref={this.quoteauthor}>
           <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a>
           <br/>
           {this.state.copy} {this.state.tweet} {this.state.favourited}

src/components/widgets/time/Date.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
@@ -12,6 +12,7 @@ export default class DateWidget extends PureComponent {
       date: '',
       weekNumber: null
     };
+    this.date = createRef();
   }
 
   getWeekNumber(date) {
@@ -110,19 +111,18 @@ export default class DateWidget extends PureComponent {
   componentDidMount() {
     EventBus.on('refresh', (data) => {
       if (data === 'date' || data === 'timezone') {
-        const element = document.querySelector('.date');
 
         if (localStorage.getItem('date') === 'false') {
-          return element.style.display = 'none';
+          return this.date.current.style.display = 'none';
         }
 
-        element.style.display = 'block';
-        element.style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
+        this.date.current.style.display = 'block';
+        this.date.current.style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
         this.getDate();
       }
     });
 
-    document.querySelector('.date').style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
+    this.date.current.style.fontSize = `${Number((localStorage.getItem('zoomDate') || 100) / 100)}em`;
 
     this.getDate();
   }
@@ -132,6 +132,12 @@ export default class DateWidget extends PureComponent {
   }
 
   render() {
-    return <span className='date'>{this.state.date} <br/> {this.state.weekNumber}</span>;
+    return (
+      <span className='date' ref={this.date}>
+        {this.state.date}
+        <br/> 
+        {this.state.weekNumber}
+      </span>
+    );
   }
 }