refactor: cleanup, use createRef etc

src/components/modals/main/scss/settings/_main.scss

@@ -194,6 +194,11 @@ legend {
   h1 {
     max-width: 85%;
     font-size: 2rem;
+    margin-bottom: -10px !important;
+  }
+
+  h5 {
+    line-height: 0px !important;
   }
 
   img {

src/components/modals/main/settings/Dropdown.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
@@ -9,6 +9,7 @@ export default class Dropdown extends PureComponent {
       value: localStorage.getItem(this.props.name) || '',
       title: ''
     };
+    this.dropdown = createRef();
   }
 
   getLabel() {
@@ -47,9 +48,8 @@ export default class Dropdown extends PureComponent {
 
   // todo: find a better way to do this
   componentDidMount() {
-    const element = document.getElementById(this.props.name);
     this.setState({
-      title: element[element.selectedIndex].text
+      title: this.dropdown.current[this.dropdown.current.selectedIndex].text
     });
   }
 
@@ -57,7 +57,7 @@ export default class Dropdown extends PureComponent {
     return (
       <>
         {this.getLabel()}
-        <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{ width: `${(8*this.state.title.length) + 50}px` }}>
+        <select id={this.props.name} ref={this.dropdown} value={this.state.value} onChange={this.onChange} style={{ width: `${(8*this.state.title.length) + 50}px` }}>
           {this.props.children}
         </select>
       </>

src/components/modals/main/settings/sections/Changelog.jsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import { WifiOff } from '@material-ui/icons';
 import Modal from 'react-modal';
 
@@ -13,7 +13,9 @@ export default class Changelog extends PureComponent {
       lightboxImg: null
     };
     this.language = window.language.modals.update;
+    this.offlineMode = (localStorage.getItem('offlineMode') === 'true');
     this.controller = new AbortController();
+    this.changelog = createRef();
   }
 
   async getUpdate() {
@@ -39,9 +41,8 @@ export default class Changelog extends PureComponent {
     });
 
     // lightbox etc
-    const content = document.querySelector('.tab-content');
-    const images = content.getElementsByTagName('img');
-    const links = content.getElementsByTagName('a');
+    const images = this.changelog.current.getElementsByTagName('img');
+    const links = this.changelog.current.getElementsByTagName('a');
 
     for (const img of images) {
       img.draggable = false;
@@ -53,6 +54,7 @@ export default class Changelog extends PureComponent {
       };
     }
 
+    // open in new tab
     for (let link = 0; link < links.length; link++) {
       links[link].target = '_blank';
       links[link].rel = 'noopener noreferrer';
@@ -60,7 +62,7 @@ export default class Changelog extends PureComponent {
   }
   
   componentDidMount() {
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine === false || this.offlineMode) {
       return;
     }
   
@@ -83,7 +85,7 @@ export default class Changelog extends PureComponent {
       );
     };
 
-    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+    if (navigator.onLine === false || this.offlineMode) {
       const language = window.language.modals.main.marketplace;
     
       return errorMessage(<>
@@ -98,9 +100,9 @@ export default class Changelog extends PureComponent {
     }
 
     return (
-      <div className='changelogtab'>
-        <h1 style={{ marginBottom: '-10px' }}>{this.state.title}</h1>
-        <h5 style={{ lineHeight: '0px' }}>{this.state.author} • {this.state.date}</h5>
+      <div className='changelogtab' ref={this.changelog}>
+        <h1>{this.state.title}</h1>
+        <h5>{this.state.author} • {this.state.date}</h5>
         {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
         <div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>

src/components/modals/main/settings/sections/Keybinds.jsx

@@ -11,6 +11,11 @@ export default class KeybindSettings extends PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
+  showReminder() {
+    document.querySelector('.reminder-info').style.display = 'none';
+    return localStorage.setItem('showReminder', false);
+  }
+
   listen(type) {
     const currentKeybinds = this.state.keybinds;
     currentKeybinds[type] = this.language.sections.keybinds.recording;
@@ -40,8 +45,7 @@ export default class KeybindSettings extends PureComponent {
 
     document.removeEventListener('keyup', keyup);
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    return localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   reset(type) {
@@ -52,8 +56,7 @@ export default class KeybindSettings extends PureComponent {
       keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
     });
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    return localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   render() {

src/components/modals/main/settings/sections/Weather.jsx

@@ -18,13 +18,17 @@ export default class TimeSettings extends PureComponent {
     localStorage.setItem('location', this.state.location);
   }
 
+  showReminder() {
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
+  }
+
   changeLocation(e) {
     this.setState({ 
       location: e.target.value 
     });
 
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+    this.showReminder();
   }
 
   getAuto() {
@@ -34,8 +38,7 @@ export default class TimeSettings extends PureComponent {
         location: data[0].name
       });
 
-      document.querySelector('.reminder-info').style.display = 'block';
-      localStorage.setItem('showReminder', true);
+      this.showReminder();
     }, (error) => {
       // firefox requires this 2nd function
       console.log(error);

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -67,7 +67,7 @@ export default class ColourSettings extends PureComponent {
   }
 
   componentDidUpdate() {
-    localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
+    localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
   }
 
   onGradientChange = (event, index) => {
@@ -83,11 +83,7 @@ export default class ColourSettings extends PureComponent {
       return newState;
     });
 
-    const reminderInfo = document.querySelector('.reminder-info');
-    if (reminderInfo.style.display !== 'block') {
-      reminderInfo.style.display = 'block';
-      localStorage.setItem('showReminder', true);
-    }
+    this.showReminder();
   }
 
   addColour = () => {
@@ -133,12 +129,16 @@ export default class ColourSettings extends PureComponent {
       }
     });
 
+    this.showReminder();
+  };
+
+  showReminder() {
     const reminderInfo = document.querySelector('.reminder-info');
     if (reminderInfo.style.display !== 'block') {
       reminderInfo.style.display = 'block';
       localStorage.setItem('showReminder', true);
     }
-  };
+  }
 
   render() {
     const { background } = this.language.sections;
@@ -183,7 +183,6 @@ export default class ColourSettings extends PureComponent {
     return (
       <>
         <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
-        <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
         {colourSettings}
       </>
     );

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>
+    );
   }
 }