feat: hot reload support for some widgets, css improvements on marketplace

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/Widgets.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import EventBus from '../../modules/helpers/eventbus';
 
 import Clock from './time/Clock';
 import Greeting from './greeting/Greeting';
@@ -13,6 +14,9 @@ const renderLoader = () => <></>;
 export default class Widgets extends React.PureComponent {
   constructor() {
     super();
+    this.state = {
+      order: JSON.parse(localStorage.getItem('order'))
+    };
     // widgets we can re-order
     this.widgets = {
       time: this.enabled('time') ? <Clock/> : null,
@@ -27,13 +31,22 @@ export default class Widgets extends React.PureComponent {
     return (localStorage.getItem(key) === 'true');
   }
 
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'order') {
+        this.setState({
+          order: JSON.parse(localStorage.getItem('order'))
+        });
+      }
+    });
+  }
+
   render() {
     // allow for re-ordering widgets
     let elements = [];
-    const order = JSON.parse(localStorage.getItem('order'));
 
-    if (order) {
-      order.forEach((element) => {
+    if (this.state.order) {
+      this.state.order.forEach((element) => {
         elements.push(<React.Fragment key={element}>{this.widgets[element]}</React.Fragment>);
       });
     } else {

src/components/widgets/quote/Quote.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import FileCopy from '@material-ui/icons/FilterNone';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import StarIcon from '@material-ui/icons/Star';
@@ -17,9 +19,14 @@ export default class Quote extends React.PureComponent {
       quote: '',
       author: '',
       favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
+      tweet: '',
+      copy: ''
+    };
+
+    this.buttons = {
       tweet: <TwitterIcon className='copyButton' onClick={this.tweetQuote} />,
       copy: <FileCopy className='copyButton' onClick={this.copyQuote} />
-    };
+    }
   
     this.language = window.language.widgets.quote;
   }
@@ -137,7 +144,7 @@ export default class Quote extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
+  init() {
     let favouriteQuote = '';
     if (localStorage.getItem('favouriteQuoteEnabled') === 'true') {
       favouriteQuote = localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={this.favourite} /> : <StarIcon2 className='copyButton' onClick={this.favourite} />;
@@ -145,13 +152,34 @@ export default class Quote extends React.PureComponent {
 
     this.setState({
       favourited: favouriteQuote,
-      copy: (localStorage.getItem('copyButton') === 'false') ? null : this.state.copy,
-      tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.state.tweet
+      copy: (localStorage.getItem('copyButton') === 'false') ? null : this.buttons.copy,
+      tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet
     });
-
+  
     this.getQuote();
   }
 
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'quote') {
+        const element = document.querySelector('.quotediv');
+
+        if (localStorage.getItem('quote') === 'false') {
+          return element.style.display = 'none';
+        }
+
+        element.style.display = 'block';
+        this.init();
+      }
+    });
+  
+    this.init();
+  }
+
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     return (
       <div className='quotediv'>

src/components/widgets/search/Search.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
 
@@ -40,7 +42,7 @@ export default class Search extends React.PureComponent {
     window.location.href = this.state.url + `?${this.state.query}=` + value;
   }
 
-  componentDidMount() {
+  init() {
     let url;
     let query = 'q';
     let microphone = null;
@@ -70,6 +72,27 @@ export default class Search extends React.PureComponent {
     });
   }
 
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'search') {
+        const element = document.querySelector('.searchBar');
+
+        if (localStorage.getItem('searchBar') === 'false') {
+          return element.style.display = 'none';
+        }
+
+        element.style.display = 'block';
+        this.init();
+      }
+    });
+  
+    this.init();
+  }
+
+  componentWillUnmount() {
+    EventBus.remove('refresh');
+  }
+
   render() {
     return (
       <form action={this.state.url} className='searchBar'>