feat: new sideload addons tab and hot reload for more widgets

src/components/widgets/background/Favourite.jsx

@@ -36,6 +36,6 @@ export default class Favourite extends React.PureComponent {
       return null;
     }
 
-    return <Tooltip title='Favourite' placement='top'>{this.state.favourited}</Tooltip>;
+    return <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
   }
 }

src/components/widgets/background/Maximise.jsx

@@ -48,7 +48,7 @@ export default class View extends React.PureComponent {
 
   render() {
     return (
-      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view} placement='top'>
+      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
         <FullscreenIcon onClick={this.maximise} className='topicons' />
       </Tooltip>
     );

src/components/widgets/greeting/Greeting.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
 import dtf from '../../../modules/helpers/date';
 
 import './greeting.scss';
@@ -101,6 +102,18 @@ export default class Greeting extends React.PureComponent {
   }
 
   componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'greeting') {
+        const element = document.querySelector('.greeting');
+
+        if (localStorage.getItem('greeting') === 'false') {
+          return element.style.display = 'none';
+        }
+
+        element.style.display = 'block';
+      }
+    });
+
     this.getGreeting(0);
   }
 

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -87,10 +87,10 @@ export default class QuickLinks extends React.PureComponent {
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
 
-    const quickLink = (item) => {
+    const quickLink = (item, index) => {
       const link = (
-        <a key={item.name} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel}>
-          <img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name}/>
+        <a key={index} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel} draggable={false}>
+          <img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name} draggable={false}/>
         </a>
       );
 
@@ -103,8 +103,8 @@ export default class QuickLinks extends React.PureComponent {
 
     return (
       <div className='quicklinks-container'>
-        {this.state.items.map((item) => (
-          quickLink(item)
+        {this.state.items.map((item, index) => (
+          quickLink(item, index)
         ))}
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
         <span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>

src/components/widgets/quote/Quote.jsx

@@ -178,10 +178,6 @@ export default class Quote extends React.PureComponent {
     this.init();
   }
 
-  componentWillUnmount() {
-    EventBus.remove('refresh');
-  }
-
   render() {
     return (
       <div className='quotediv'>

src/components/widgets/time/Clock.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import './clock.scss';
 
 const Analog = React.lazy(() => import('react-clock'));
@@ -86,11 +88,23 @@ export default class Clock extends React.PureComponent {
   }
 
   componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'clock') {
+        const element = document.querySelector('.clock-container');
+
+        if (localStorage.getItem('time') === 'false') {
+          return element.style.display = 'none';
+        }
+
+        element.style.display = 'block';
+      }
+    });
+
     this.startTime(0);
   }
 
   render() {
-    let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
+    let clockHTML = <h1 className='clock clock-container'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
 
     const enabled = (setting) => {
       return (localStorage.getItem(setting) === 'true');
@@ -100,7 +114,7 @@ export default class Clock extends React.PureComponent {
       clockHTML = (
         <React.Suspense fallback={renderLoader()}>
           <Analog 
-          className='analogclock' 
+          className='analogclock clock-container' 
           value={this.state.time} 
           renderHourMarks={enabled('hourMarks')} 
           renderMinuteMarks={enabled('minuteMarks')} 

src/components/widgets/time/Date.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import dtf from '../../../modules/helpers/date';
 
 import './date.scss';
@@ -95,6 +97,19 @@ export default class DateWidget extends React.PureComponent {
   }
 
   componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'date') {
+        const element = document.querySelector('.date');
+
+        if (localStorage.getItem('date') === 'false') {
+          return element.style.display = 'none';
+        }
+
+        element.style.display = 'block';
+        this.getDate();
+      }
+    });
+
     this.getDate();
   }