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

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

src/App.jsx

@@ -5,6 +5,7 @@ import Widgets from './components/widgets/Widgets';
 import Modals from './components/modals/Modals';
 
 import SettingsFunctions from './modules/helpers/settings';
+
 import { ToastContainer } from 'react-toastify';
 
 export default class App extends React.PureComponent {

src/components/modals/main/marketplace/sections/Added.jsx

@@ -104,7 +104,7 @@ export default class Added extends React.PureComponent {
 
     if (this.state.installed.length === 0) {
       content = (
-        <div className='items'>
+        <div className='emptyitems'>
           <div className='emptyMessage'>
             <LocalMallIcon/>
             <h1>{this.language.empty.title}</h1>

src/components/modals/main/scss/index.scss

@@ -119,8 +119,7 @@ ul.sidebar {
   border-radius: 12px 0 0 12px;
   text-align: left;
   font-size: 24px;
-  padding-bottom: 100%;
-  margin-bottom: -100%;
+  height: 100vh;
 
   h1 {
     text-align: center;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import EventBus from '../../../../modules/helpers/eventbus';
 import SettingsFunctions from '../../../../modules/helpers/settings';
 
 import CheckboxUI from '@material-ui/core/Checkbox';
@@ -19,6 +20,8 @@ export default class Checkbox extends React.PureComponent {
     this.setState({
       checked: (this.state.checked === true) ? false : true
     });
+
+    EventBus.dispatch('refresh', this.props.category);
   }
 
   render() {

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../../modules/helpers/eventbus';
+
 import RadioUI from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -22,6 +24,8 @@ export default class Radio extends React.PureComponent {
     this.setState({
       value: value
     });
+
+    EventBus.dispatch('refresh', this.props.category);
   }
   
   render() {

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../../modules/helpers/eventbus';
+
 import { toast } from 'react-toastify';
 
 export default class Slider extends React.PureComponent {
@@ -18,6 +20,8 @@ export default class Slider extends React.PureComponent {
     this.setState({
       value: value
     });
+
+    EventBus.dispatch('refresh', this.props.category);
   }
 
   resetItem = () => {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import EventBus from '../../../../modules/helpers/eventbus';
 import SettingsFunctions from '../../../../modules/helpers/settings';
 
 import SwitchUI from '@material-ui/core/Switch';
@@ -19,6 +20,8 @@ export default class Switch extends React.PureComponent {
     this.setState({
       checked: (this.state.checked === true) ? false : true
     });
+
+    EventBus.dispatch('refresh', this.props.category);
   }
 
   render() {

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../../modules/helpers/eventbus';
+
 import { toast } from 'react-toastify';
 
 export default class Text extends React.PureComponent {
@@ -23,6 +25,8 @@ export default class Text extends React.PureComponent {
     this.setState({
       value: value
     });
+
+    EventBus.dispatch('refresh', this.props.category);
   }
 
   resetItem = () => {

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../../../modules/helpers/eventbus';
+
 import DragHandleIcon from '@material-ui/icons/DragIndicator';
 
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
@@ -63,6 +65,7 @@ export default class OrderSettings extends React.PureComponent {
 
   componentDidUpdate() {
     localStorage.setItem('order', JSON.stringify(this.state.items));
+    EventBus.dispatch('refresh', 'order');
   }
 
   render() {

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

@@ -10,15 +10,15 @@ export default function QuoteSettings() {
   return (
     <>
       <h2>{quote.title}</h2>
-      <Switch name='quote' text={window.language.modals.main.settings.enabled} />
-      <Checkbox name='authorLink' text={quote.author_link}/>
-      <Text title={quote.custom} name='customQuote'/>
-      <Text title={quote.custom_author} name='customQuoteAuthor'/>
+      <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' />
+      <Checkbox name='authorLink' text={quote.author_link} category='quote' />
+      <Text title={quote.custom} name='customQuote' category='quote' />
+      <Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
 
       <h3>{quote.buttons.title}</h3>
-      <Checkbox name='copyButton' text={quote.buttons.copy}/>
-      <Checkbox name='tweetButton' text={quote.buttons.tweet}/>
-      <Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
+      <Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
+      <Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
+      <Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
     </>
   );
 }

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

@@ -4,6 +4,8 @@ import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 
+import EventBus from '../../../../../modules/helpers/eventbus';
+
 import { isChrome } from 'react-device-detect';
 import { toast } from 'react-toastify';
 
@@ -44,6 +46,8 @@ export default class SearchSettings extends React.PureComponent {
     if (this.state.customEnabled === true && this.state.customValue !== '') {
       localStorage.setItem('customSearchEngine', this.state.customValue);
     }
+
+    EventBus.dispatch('refresh', 'search');
   }
 
   setSearchEngine(input) {
@@ -59,6 +63,8 @@ export default class SearchSettings extends React.PureComponent {
       });
       localStorage.setItem('searchEngine', input);
     }
+
+    EventBus.dispatch('refresh', 'search');
   }
 
   render() {
@@ -68,7 +74,7 @@ export default class SearchSettings extends React.PureComponent {
     return (
       <>
         <h2>{search.title}</h2>
-        <Switch name='searchBar' text={language.enabled} />
+        <Switch name='searchBar' text={language.enabled} category='search' />
         {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
 
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>

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'>

src/index.js

@@ -13,11 +13,15 @@ import '@fontsource/roboto/cyrillic-400.css';
 
 // language
 import merge from '@material-ui/utils/deepmerge';
+
 const languagecode = localStorage.getItem('language') || 'en_GB';
+
 // we set things to window. so they're global and we avoid passing the translation strings as props to each component
 window.languagecode = languagecode.replace('-', '_');
+
 // these are merged so if a string is untranslated it doesn't break mue
 window.language = merge(require('./translations/en_GB.json'), require(`./translations/${window.languagecode}.json`));
+
 // set html language tag
 if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
   document.documentElement.lang = window.languagecode.split('_')[0];

src/modules/helpers/eventbus.js

@@ -0,0 +1,17 @@
+const EventBus = {
+  on(event, callback) {
+    document.addEventListener(event, (e) => callback(e.detail));
+  },
+
+  dispatch(event, data) {
+    document.dispatchEvent(new CustomEvent(event, {
+      detail: data
+    }));
+  },
+
+  remove(event, callback) {
+    document.removeEventListener(event, callback);
+  },
+};
+
+export default EventBus;

src/scss/modules/_marketplace.scss

@@ -7,9 +7,16 @@
   }
 }
 
+.emptyitems {
+  width: 25vw;
+  display: flex;
+  justify-content: center;
+  margin-top: 90px;
+}
+
 .items {
   display: inline-grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   margin-top: 15px;
 
   .item {
@@ -92,10 +99,13 @@ p.description {
 }
 
 .emptyMessage {
-  margin: 0 auto;
   text-align: center;
-  transform: translateY(30%);
-
+  background: var(--sidebar);
+  padding: 25px;
+  border-radius: 30px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  position: absolute;
+  width: 300px;
   svg {
     font-size: 50px;
     margin-bottom: -20px;
@@ -170,7 +180,7 @@ p.description {
   padding: 50px;
   color: #fff;
   box-shadow: 0 0 10px rgb(0 0 0 / 30%);
-  width: 85%;
+  width: 100%;
 
   button {
     float: left;