feat: add create quote pack (WIP)

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

@@ -11,6 +11,7 @@ import { toast } from 'react-toastify';
 import { saveFile } from 'modules/helpers/settings/modals';
 
 import FileUpload from '../../settings/FileUpload';
+import Dropdown from '../../settings/Dropdown';
 
 import '../../../welcome/welcome.scss';
 
@@ -72,11 +73,46 @@ export default class Create extends PureComponent {
     toast('Imported settings!');
   }
 
+  updateQuotePackType(e) {
+    if (e === 'quotePack') {
+      this.setState({ 
+        addonMetadata: {
+          type: e,
+          quotes: [{
+            quote: '',
+            author: ''
+          }]
+        }
+      });
+    } else {
+      this.setState({ 
+        addonMetadata: {
+          type: e,
+          quote_api: {
+            url: '',
+            name: '',
+            author: ''
+          }
+        }
+      });
+    }
+  }
+  
+  updateQuotePackAPI(type, data) {
+    this.setState({
+      addonData: {
+        url: (type === 'url') ? data : this.state.addonData.url || '',
+        name: (type === 'name') ? data : this.state.addonData.name || '',
+        author: (type === 'author') ? data : this.state.addonData.author || '',
+      }
+    });
+  }
+
   downloadAddon() {
     saveFile({
       name: this.state.addonMetadata.name,
       description: this.state.addonMetadata.description,
-      type: this.state.addonMetadata.type,
+      type: (this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type,
       version: this.state.addonMetadata.version,
       author: this.state.addonMetadata.author,
       icon_url: this.state.addonMetadata.icon_url,
@@ -99,11 +135,11 @@ export default class Create extends PureComponent {
               <Photos/>
               <span>{marketplace.photo_packs}</span>
             </div>
+           */}
             <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'quotes')}>
               <Quotes/>
-              <span>{marketplace.quote_packs}</span>
+              <span>{getMessage('modals.main.marketplace.quote_packs')}</span>
             </div> 
-           */}
             <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'settings')}>
               <Settings/>
               <span>{getMessage('modals.main.marketplace.preset_settings')}</span>
@@ -151,7 +187,7 @@ export default class Create extends PureComponent {
         <textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
         <br/>
         <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg'>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -178,9 +214,29 @@ export default class Create extends PureComponent {
     );
     
     // quotes
+    const nextQuotesDisabled = (this.state.addonMetadata.type === 'quote_api' && this.state.addonData.url !== '' && this.state.addonData.name !== '' && this.state.addonData.author !== '') ? false : true;
     const addQuotes = (
       <>
         <h3>{getMessage('modals.main.addons.create.quotes.title')}</h3>
+        <Dropdown label='Type' noSetting onChange={(e) => this.updateQuotePackType(e)}>
+          <option value='quotes'>Local</option>
+          <option value='quote_api'>API</option>
+        </Dropdown>
+        {this.state.addonMetadata.type === 'quote_api' ? <>
+          <h3>API</h3>
+          <p>Quote URL</p>
+          <input type='text' value={this.state.addonData.url} onChange={(e) => this.updateQuotePackAPI('url', e.target.value)}/>
+          <p>JSON Quote Name</p>
+          <input type='text' value={this.state.addonData.name} onChange={(e) => this.updateQuotePackAPI('name', e.target.value)}/>
+          <p>JSON Quote Author (or override)</p>
+          <input type='text' value={this.state.addonData.author} onChange={(e) => this.updateQuotePackAPI('author', e.target.value)}/>
+          <br/><br/>
+        </> : <>
+          <h3>Local</h3>
+          <p>To be implemented</p>
+        </>}
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 

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

@@ -31,7 +31,9 @@ export default class Dropdown extends PureComponent {
       title: e.target[e.target.selectedIndex].text
     });
   
-    localStorage.setItem(this.props.name, value);
+    if (!this.props.noSetting) {
+      localStorage.setItem(this.props.name, value);
+    }
   
     if (this.props.onChange) {
       this.props.onChange(value);

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

@@ -47,6 +47,7 @@ export default class Stats extends PureComponent {
     return (
       <>
         <h2>{getMessage('modals.main.settings.sections.stats.title')}</h2>
+        <Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
         <p>{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}: {this.state.stats['tabs-opened'] || 0}</p>
         <p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_favourited')}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
         <p>{getMessage('modals.main.settings.sections.stats.sections.backgrounds_downloaded')}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
@@ -54,7 +55,6 @@ export default class Stats extends PureComponent {
         <p>{getMessage('modals.main.settings.sections.stats.sections.quicklinks_added')}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
         <p>{getMessage('modals.main.settings.sections.stats.sections.settings_changed')}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
         <p>{getMessage('modals.main.settings.sections.stats.sections.addons_installed')}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
-        <Switch name='stats' text={getMessage('modals.main.settings.sections.stats.usage')} category='stats'/>
       </>
     );
   }