From 18c65146667e364ab7030583e10168afe8804854 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Tue, 13 Apr 2021 18:25:55 +0100
Subject: [PATCH] feat: hot reload for background and quote language, css fixes
 etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
---
 .../main/marketplace/sections/Marketplace.jsx |  6 ++-
 src/components/modals/main/scss/index.scss    | 14 ++++++-
 .../modals/main/scss/settings/_buttons.scss   |  4 ++
 .../main/settings/sections/Language.jsx       |  2 +-
 .../modals/main/settings/sections/Order.jsx   |  7 +++-
 .../sections/background/Background.jsx        | 10 ++---
 .../widgets/background/Background.jsx         | 42 ++++++++++++++++++-
 .../widgets/quicklinks/QuickLinks.jsx         | 17 ++++----
 .../widgets/quicklinks/quicklinks.scss        |  3 ++
 src/components/widgets/quote/Quote.jsx        | 11 +++--
 src/components/widgets/quote/quote.scss       |  1 +
 src/components/widgets/search/search.scss     |  2 +
 src/components/widgets/time/clock.scss        |  4 ++
 src/translations/en_GB.json                   |  2 +-
 14 files changed, 100 insertions(+), 25 deletions(-)

diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index e21bef25..2d813545 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -124,8 +124,10 @@ export default class Marketplace extends React.PureComponent {
     const errorMessage = (msg) => {
       return (
         <div id='marketplace'>
-          <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-            {msg}
+          <div className='emptyitems'>
+            <div class='emptyMessage'>
+              {msg}
+            </div>
           </div>
         </div>
       );
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index d332f3c4..c23bd22e 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -118,7 +118,7 @@ ul.sidebar {
   border-radius: 12px 0 0 12px;
   text-align: left;
   font-size: 24px;
-  height: 100vh;
+  min-height: 100vh;
 
   h1 {
     text-align: center;
@@ -155,10 +155,20 @@ li {
   right: 0;
   bottom: 0;
   left: 0;
-  width: 60%;
   height: 80%;
 }
 
+@media only screen and (max-width: 1300px) {
+  #modal {
+    width: 90% !important;
+  }
+}
+@media only screen and (min-width: 1310px) {
+  #modal {
+    width: 60%;
+  }
+}
+
 .tab-list-active {
   background: var(--tab-active);
 }
diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index 674661bb..b66b9492 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -186,3 +186,7 @@ legend {
 li.stortableitem {
   width: 200px;
 }
+
+.MuiTouchRipple-root {
+  background: transparent;
+}
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index be370c34..3eb208f7 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -13,7 +13,7 @@ export default function LanguageSettings() {
       <h2>{language.title}</h2>
       <Radio name='language' options={languages} />
       <h3>{language.quote}</h3>
-      <Radio name='quotelanguage' options={quote_languages} />
+      <Radio name='quotelanguage' options={quote_languages} category='quote' />
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index 402b6747..b4496ae1 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -8,7 +8,12 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
 const enabled = (setting) => {
-  return (localStorage.getItem(setting) === 'true');
+  switch (setting) {
+    case 'quicklinks':
+      return (localStorage.getItem('quicklinksenabled') === 'true');
+    default:
+      return (localStorage.getItem(setting) === 'true');
+  }
 };
 
 const settings = window.language.modals.main.settings.sections;
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 5ef722fd..7bbbf3bc 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -95,7 +95,7 @@ export default class BackgroundSettings extends React.PureComponent {
     const APISettings = (
       <>
         <br/>
-        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
+        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background'/>
         <br/>
         <Dropdown label={background.category} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
@@ -127,12 +127,12 @@ export default class BackgroundSettings extends React.PureComponent {
     return (
       <>
         <h2>{background.title}</h2>
-        <Switch name='background' text={this.language.enabled} />
+        <Switch name='background' text={this.language.enabled} category='background' />
         <Checkbox name='ddgProxy' text={background.ddg_proxy} />
         <Checkbox name='bgtransition' text={background.transition} />
 
         <h3>{background.source.title}</h3>
-        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
+        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
           {this.marketplaceType()}
           <option value='api'>{background.type.api}</option>
           <option value='custom'>{background.type.custom_image}</option>
@@ -148,8 +148,8 @@ export default class BackgroundSettings extends React.PureComponent {
         <Checkbox name='downloadbtn' text={background.buttons.download}/>
 
         <h3>{background.effects.title}</h3>
-        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
+        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
+        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' category='background' />
         <br/><br/>
       </>
     );
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index f4dcfe15..1c2ba46c 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventBus from '../../../modules/helpers/eventbus';
+
 import PhotoInformation from './PhotoInformation';
 
 import './scss/index.scss';
@@ -10,6 +12,7 @@ export default class Background extends React.PureComponent {
     this.state = {
       style: '',
       url: '',
+      currentAPI: '',
       video: false,
       photoInfo: {
         hidden: false,
@@ -32,6 +35,7 @@ export default class Background extends React.PureComponent {
     }
 
     this.setState({
+      type: 'colour',
       style: style
     });
   }
@@ -137,7 +141,8 @@ export default class Background extends React.PureComponent {
         let requestURL, data;
         switch (backgroundAPI) {
           case 'unsplash':
-            requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
+            //requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
+            requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
             break;
           // Defaults to Mue
           default:
@@ -154,6 +159,8 @@ export default class Background extends React.PureComponent {
 
         this.setState({
           url: data.file,
+          type: 'api',
+          currentAPI: backgroundAPI,
           photoInfo: {
             credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
             location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
@@ -196,6 +203,7 @@ export default class Background extends React.PureComponent {
         if (customBackground !== '' && customBackground !== 'undefined') {
           this.setState({
             url: customBackground,
+            type: 'custom',
             video: this.videoCheck(customBackground),
             photoInfo: {
               hidden: true
@@ -226,11 +234,43 @@ export default class Background extends React.PureComponent {
     }
   }
 
+  updateFilters() {
+    document.querySelector('#backgroundImage').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
+  }
+
   componentDidMount() {
     if (localStorage.getItem('background') === 'false') {
       return;
     }
 
+    EventBus.on('refresh', (data) => {
+      if (data === 'background') {
+        const element = document.querySelector('#backgroundImage');
+        const photoInfo = document.querySelector('.photoInformation');
+
+        if (localStorage.getItem('background') === 'false') {
+          photoInfo.style.display = 'none';
+          return element.style.display = 'none';
+        }
+
+        photoInfo.style.display = 'block';
+        element.style.display = 'block';
+
+        if (this.state.type !== localStorage.getItem('backgroundType') || (this.state.type === 'api' && this.state.currentAPI !== localStorage.getItem('backgroundAPI'))) {
+          element.classList.remove('fade-in');
+          this.setState({
+            url: '',
+            photoInfo: {
+              hidden: true
+            }
+          });
+          return this.getBackground();
+        }
+
+        this.updateFilters();
+      }
+    });
+
     this.getBackground();
   }
 
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 6e5ebd20..4638ade2 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -19,11 +19,11 @@ export default class QuickLinks extends React.PureComponent {
     this.language = window.language.widgets.quicklinks;
   }
 
-  deleteLink(name, event) {
+  deleteLink(key, event) {
     event.preventDefault();
 
     let data = JSON.parse(localStorage.getItem('quicklinks'));
-    data = data.filter((i) => i.name !== name);
+    data = data.filter((i) => i.key !== key);
 
     localStorage.setItem('quicklinks', JSON.stringify(data));
     this.setState({
@@ -35,7 +35,8 @@ export default class QuickLinks extends React.PureComponent {
     let data = JSON.parse(localStorage.getItem('quicklinks'));
     data.push({
       name: this.state.name,
-      url: this.state.url
+      url: this.state.url,
+      key: Math.random().toString(36).substring(7) + 1
     });
 
     localStorage.setItem('quicklinks', JSON.stringify(data));
@@ -87,9 +88,9 @@ export default class QuickLinks extends React.PureComponent {
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
 
-    const quickLink = (item, index) => {
+    const quickLink = (item) => {
       const link = (
-        <a key={index} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel} draggable={false}>
+        <a key={item.key} onContextMenu={(e) => this.deleteLink(item.key, 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,11 +104,11 @@ export default class QuickLinks extends React.PureComponent {
 
     return (
       <div className='quicklinks-container'>
-        {this.state.items.map((item, index) => (
-          quickLink(item, index)
+        {this.state.items.map((item) => (
+          quickLink(item)
         ))}
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
-        <span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>
+        <span className='quicklinkscontainer' style={{ 'visibility': this.state.showAddLink }}>
           <div className='topbarquicklinks'>
             <h4>{this.language.new}</h4>
             <TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
diff --git a/src/components/widgets/quicklinks/quicklinks.scss b/src/components/widgets/quicklinks/quicklinks.scss
index dcdc3816..98b0f109 100644
--- a/src/components/widgets/quicklinks/quicklinks.scss
+++ b/src/components/widgets/quicklinks/quicklinks.scss
@@ -1,5 +1,6 @@
 .quicklinks {
   position: relative;
+  user-select: none;
 
   h3 {
     text-shadow: none;
@@ -49,6 +50,8 @@ textarea {
 
   h4 {
     margin: 0;
+    cursor: initial;
+    user-select: none;
   }
 }
 
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 753b06d1..40fb5cfc 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -20,7 +20,8 @@ export default class Quote extends React.PureComponent {
       author: '',
       favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
       tweet: '',
-      copy: ''
+      copy: '',
+      quoteLanguage: ''
     };
 
     this.buttons = {
@@ -98,7 +99,8 @@ export default class Quote extends React.PureComponent {
 
     // First we try and get a quote from the API...
     try {
-      const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
+      const quotelanguage = localStorage.getItem('quotelanguage');
+      const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + quotelanguage)).json();
 
       // If we hit the ratelimit, we fallback to local quotes
       if (data.statusCode === 429) {
@@ -113,7 +115,8 @@ export default class Quote extends React.PureComponent {
       this.setState({
         quote: '"' + data.quote + '"',
         author: data.author,
-        authorlink: authorlink
+        authorlink: authorlink,
+        quoteLanguage: quotelanguage
       });
     } catch (e) {
       // ..and if that fails we load one locally
@@ -156,7 +159,7 @@ export default class Quote extends React.PureComponent {
       tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet
     });
 
-    if (!this.state.quote) {
+    if (!this.state.quote || localStorage.getItem('quotelanguage') !== this.state.quoteLanguage) {
       this.getQuote();
     }
   }
diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss
index 5a1e29ef..100270bc 100644
--- a/src/components/widgets/quote/quote.scss
+++ b/src/components/widgets/quote/quote.scss
@@ -17,6 +17,7 @@
 .quoteauthor {
   font-size: 0.9em;
   letter-spacing: 0.5px;
+  user-select: none;
 
   svg {
     margin-left: 10px;
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index c800a376..590a6d5c 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -18,10 +18,12 @@
     transition: width 0.5s ease-in-out;
     color: white;
     padding: 0.5rem 1rem;
+    user-select: none;
 
     &:focus {
       width: 400px;
       background-color: rgba(0, 0, 0, .3);
+      user-select: text;
     }
   }
 
diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss
index 11c6be5a..70ccbc29 100644
--- a/src/components/widgets/time/clock.scss
+++ b/src/components/widgets/time/clock.scss
@@ -26,3 +26,7 @@
   background: map-get($theme-colours, 'main') !important;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
+
+.clock-container {
+  margin-top: 13px;
+}
\ No newline at end of file
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index a8c941e8..45856d1f 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -291,13 +291,13 @@
         "quote_packs": "Quote Packs",
         "preset_settings": "Preset Settings",
         "themes": "Themes",
+        "no_items": "No items in this category",
         "product": {
           "overview": "Overview",
           "information": "Information",
           "last_updated": "Last Updated",
           "version": "Version",
           "author": "Authour",
-          "no_items": "No items in this category",
           "notice": {
             "title": "Notice",
             "description": "In order for the change to take place, the page must be refreshed."