From 8b4d1d18f15cdd7791b3be83d999426937a92e44 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Fri, 17 Sep 2021 14:36:47 +0100
Subject: [PATCH] feat: multiple custom quotes, fix background settings

---
 .../modals/main/settings/sections/Quote.jsx   | 81 +++++++++++++++--
 .../sections/background/Background.jsx        | 88 +++++++++----------
 src/components/widgets/quote/Quote.jsx        | 24 +++--
 src/translations/en_GB.json                   |  1 +
 4 files changed, 138 insertions(+), 56 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index d02d6b2f..59243745 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,8 +1,8 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { PureComponent, Fragment } from 'react';
+import { Cancel } from '@mui/icons-material';
 
 import Checkbox from '../Checkbox';
-import Text from '../Text';
 import Switch from '../Switch';
 import Slider from '../Slider';
 import Dropdown from '../Dropdown';
@@ -14,6 +14,7 @@ export default class QuoteSettings extends PureComponent {
     super();
     this.state = {
       quoteType: localStorage.getItem('quoteType') || 'api',
+      customQuote: this.getCustom()
     };
   }
 
@@ -23,13 +24,80 @@ export default class QuoteSettings extends PureComponent {
     }
   }
 
+  resetCustom = () => {
+    localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]');
+    this.setState({
+      customQuote: [{
+        quote: '',
+        author: ''
+      }]
+    });
+    toast(this.getMessage('toasts.reset'));
+    EventBus.dispatch('refresh', 'background');
+  }
+
+  customQuote(e, text, index, type) {
+    const result = (text === true) ? e.target.value : e.target.result;
+
+    const customQuote = this.state.customQuote;
+    customQuote[index][type] = result;
+    this.setState({
+      customQuote
+    });
+    this.forceUpdate();
+
+    localStorage.setItem('customQuote', JSON.stringify(customQuote));
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
+  }
+
+  modifyCustomQuote(type, index) {
+    const customQuote = this.state.customQuote;
+    if (type === 'add') {
+      customQuote.push({
+        quote: '',
+        author: ''
+      });
+    } else {
+      customQuote.splice(index, 1);
+    }
+
+    this.setState({
+      customQuote
+    });
+    this.forceUpdate();
+
+    localStorage.setItem('customQuote', JSON.stringify(customQuote));
+  }
+
+  getCustom() {
+    let data = JSON.parse(localStorage.getItem('customQuote'));
+    if (data === null) {
+      data = [{
+        quote: localStorage.getItem('customQuote') || '',
+        author: localStorage.getItem('customQuoteAuthor') || ''
+      }];
+    }
+    return data;
+  }
+
   render() {
     let customSettings;
     if (this.state.quoteType === 'custom') {
       customSettings = (
         <>
-          <Text title={this.getMessage('modals.main.settings.sections.quote.custom')} name='customQuote' category='quote' />
-          <Text title={this.getMessage('modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
+          <p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
+          {this.state.customQuote.map((_url, index) => (
+            <Fragment key={index}>
+              <input type='text' style={{marginRight: '10px'}} value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')}></input>
+              <input type='text' value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')}></input>
+              {this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)}>
+                <Cancel/>
+              </button> : null}
+              <br/><br/>
+            </Fragment>
+          ))}
+          <button className='uploadbg' onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')}</button>
         </>
       );
     } else {
@@ -54,6 +122,8 @@ export default class QuoteSettings extends PureComponent {
       <>
         <h2>{this.getMessage('modals.main.settings.sections.quote.title')}</h2>
         <Switch name='quote' text={this.getMessage('modals.main.settings.enabled')} category='quote' element='.quotediv' />
+        <Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
+        <br/>
         <Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
         <Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
           {this.marketplaceType()}
@@ -61,7 +131,6 @@ export default class QuoteSettings extends PureComponent {
           <option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
         </Dropdown>
         {customSettings}
-        <Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
   
         <h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
         <Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
@@ -70,4 +139,4 @@ export default class QuoteSettings extends PureComponent {
       </>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 2ea56ca6..058959b6 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -135,7 +135,7 @@ export default class BackgroundSettings extends PureComponent {
   }
 
   render() {
-    const { getMessage, languagecode } = this;
+    const { getMessage } = this;
 
     let backgroundSettings;
 
@@ -157,29 +157,29 @@ export default class BackgroundSettings extends PureComponent {
     const APISettings = (
       <>
         <br/>
-        <Radio title={getMessage(languagecode, 'modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
+        <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
         <br/>
-        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.category')} name='apiCategory'>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
             <option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
           ))}
         </Dropdown>
         <br/><br/>
-        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
-          <option value='original'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.original')}</option>
-          <option value='high'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.high')}</option>
-          <option value='normal'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.normal')}</option>
-          <option value='datasaver'>{getMessage(languagecode, 'modals.main.settings.sections.background.source.quality.datasaver')}</option>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
+          <option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
+          <option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
+          <option value='normal'>{getMessage('modals.main.settings.sections.background.source.quality.normal')}</option>
+          <option value='datasaver'>{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}</option>
         </Dropdown>
         <br/><br/>
-        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
-        <option value='refresh'>{getMessage(languagecode, 'tabname')}</option>
-          <option value='60000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
-          <option value='1800000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
-          <option value='3600000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
-          <option value='86400000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
-          <option value='604800000'>{getMessage(languagecode, 'widgets.date.week')}</option>
-          <option value='2628000000'>{getMessage(languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
+        <option value='refresh'>{getMessage('tabname')}</option>
+          <option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
+          <option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
+          <option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
+          <option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
+          <option value='604800000'>{getMessage('widgets.date.week')}</option>
+          <option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
         </Dropdown>
       </>
     );
@@ -187,19 +187,19 @@ export default class BackgroundSettings extends PureComponent {
     const customSettings = (
       <>
         <ul>
-          <p>{getMessage(languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</span></p>
+          <p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{getMessage('modals.main.settings.buttons.reset')}</span></p>
           {this.state.customBackground.map((_url, index) => (
             <Fragment key={index}>
               <input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
               {this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
                 <Cancel/>
               </button> : null}
-              <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage(languagecode, 'modals.main.settings.sections.background.source.upload')}</span>
+              <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
               {this.videoCustomSettings(index)}
               <br/><br/>  
             </Fragment>
           ))}
-          <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage(languagecode, 'modals.main.settings.sections.background.source.add_background')}</button>
+          <button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
           <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
         </ul>
       </>
@@ -217,41 +217,41 @@ export default class BackgroundSettings extends PureComponent {
   
     return (
       <>
-        <h2>{getMessage(languagecode, 'modals.main.settings.sections.background.title')}</h2>
-        <Switch name='background' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='background' element='#backgroundImage' />
-        <Checkbox name='ddgProxy' text={getMessage(languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
-        <Checkbox name='bgtransition' text={getMessage(languagecode, 'modals.main.settings.sections.background.transition')} element='.other' />
-        <Checkbox name='photoInformation' text={getMessage(languagecode, 'modals.main.settings.sections.background.photo_information')} element='.other' />
-        <Checkbox name='photoMap' text={getMessage(languagecode, 'modals.main.settings.sections.background.show_map')} element='.other'/>
+        <h2>{getMessage('modals.main.settings.sections.background.title')}</h2>
+        <Switch name='background' text={getMessage('modals.main.settings.enabled')} category='background' element='#backgroundImage' />
+        <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
+        <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
+        <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />
+        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other'/>
 
-        <h3>{getMessage(languagecode, 'modals.main.settings.sections.background.source.title')}</h3>
-        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
+        <h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
           {this.marketplaceType()}
-          <option value='api'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.api')}</option>
-          <option value='custom'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.custom_image')}</option>
-          <option value='colour'>{getMessage(languagecode, 'modals.main.settings.sections.background.type.custom_colour')}</option>
+          <option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
+          <option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
+          <option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
         </Dropdown>
         <br/>
 
         {backgroundSettings}
 
-        <h3>{getMessage(languagecode, 'modals.main.settings.sections.background.buttons.title')}</h3>
-        <Checkbox name='view' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.view')} category='navbar' />
-        <Checkbox name='favouriteEnabled' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
-        <Checkbox name='downloadbtn' text={getMessage(languagecode, 'modals.main.settings.sections.background.buttons.download')} element='.other' />
+        <h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
+        <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
+        <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
+        <Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
 
-        <h3>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.title')}</h3>
-        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
-        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
+        <h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
+        <Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
+        <Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
         <br/><br/>
-        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
-          <option value='grayscale'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.grayscale')}</option>
-          <option value='sepia'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.sepia')}</option>
-          <option value='invert'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.invert')}</option>
-          <option value='saturate'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.saturate')}</option>
-          <option value='contrast'>{getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.contrast')}</option>
+        <Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
+          <option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
+          <option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
+          <option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
+          <option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
+          <option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
         </Dropdown>
-        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
+        <Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
       </>
     );
   }
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 04343708..364e1f8c 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -77,14 +77,26 @@ export default class Quote extends PureComponent {
 
     switch (this.state.type) {
       case 'custom':
-        const customQuote = localStorage.getItem('customQuote');
-        const customQuoteAuthor = localStorage.getItem('customQuoteAuthor');
+        let customQuote;
+        try {
+          customQuote = JSON.parse(localStorage.getItem('customQuote'));
+        } catch (e) {
+          // move to new format
+          customQuote = [{
+            quote: localStorage.getItem('customQuote'),
+            author: localStorage.getItem('customQuoteAuthor')
+          }];
+          localStorage.setItem('customQuote', JSON.stringify(customQuote));
+        }
 
-        if (customQuote) {
+        // pick random
+        customQuote = customQuote[Math.floor(Math.random() * customQuote.length)];
+
+        if (customQuote !== '' && customQuote !== 'undefined' && customQuote !== ['']) {
           return this.setState({
-            quote: '"' + customQuote + '"',
-            author: customQuoteAuthor,
-            authorlink: this.getAuthorLink(customQuote)
+            quote: '"' + customQuote.quote + '"',
+            author: customQuote.author,
+            authorlink: this.getAuthorLink(customQuote.author)
           });
         }
         break;
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 64f00480..8d02a37b 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -112,6 +112,7 @@
             "author_link": "Author link",
             "custom": "Custom quote",
             "custom_author": "Custom author",
+            "add": "Add quote",
             "buttons": {
               "title": "Buttons",
               "copy": "Copy",