feat: improved create ui, prepare for photo and quote packs etc

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

@@ -2,10 +2,15 @@ import { PureComponent } from 'react';
 
 import FileUpload from '../../settings/FileUpload';
 
-import { saveFile } from '../../../../../modules/helpers/settings/modals';
+import Settings from '@material-ui/icons/SettingsRounded';
+import Photos from '@material-ui/icons/PhotoOutlined';
+import Quotes from '@material-ui/icons/FormatQuoteOutlined';
 
+import { saveFile } from '../../../../../modules/helpers/settings/modals';
 import { toast } from 'react-toastify';
 
+import '../../../welcome/welcome.scss';
+
 export default class Create extends PureComponent {
   constructor() {
     super();
@@ -18,7 +23,7 @@ export default class Create extends PureComponent {
         version: '',
         author: '',
         icon_url: '',
-        screenshot_url: '',
+        screenshot_url: ''
       },
       addonData: ''
     };
@@ -39,25 +44,10 @@ export default class Create extends PureComponent {
     });
   }
 
-  importSettings() {
+  importSettings(input) {
+    const data = input || localStorage;
     let settings = {};
-    Object.keys(localStorage).forEach((key) => {
-      if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') {
-        return;
-      }
-      settings[key] = localStorage.getItem(key);
-    });
-
-    this.setState({
-      addonData: settings
-    });
-
-    toast('Imported settings!');
-  }
-
-  uploadSettings(input) {
-    let settings = {};
-    Object.keys(input).forEach((key) => {
+    Object.keys(data).forEach((key) => {
       if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') {
         return;
       }
@@ -80,7 +70,7 @@ export default class Create extends PureComponent {
       author: this.state.addonMetadata.author,
       icon_url: this.state.addonMetadata.icon_url,
       screenshot_url: this.state.addonMetadata.screenshot_url,
-      settings: this.state.addonData
+      [this.state.addonMetadata.type]: this.state.addonData
     }, this.state.addonMetadata.name + '.json');
   }
 
@@ -90,42 +80,94 @@ export default class Create extends PureComponent {
     const chooseType = (
       <>
         <h3>Type</h3>
-        <button onClick={() => this.changeTab(2, 'settings')} className='uploadbg'>Settings</button>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'photos')}>
+              <Photos/>
+              <span>Photo Pack (soon™️)</span>
+            </div>
+            <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'quotes')}>
+              <Quotes/>
+              <span>Quote Pack (soon™️)</span>
+            </div>
+            <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'settings')}>
+              <Settings/>
+              <span>Preset Settings</span>
+            </div>
+          </div>
+        </div>
       </>
     );
 
+    // todo: find a better way to do all this
+    const nextDescriptionDisabled = (this.state.addonMetadata.name !== undefined && 
+      this.state.addonMetadata.description !== undefined &&
+      this.state.addonMetadata.version !== undefined && this.state.addonMetadata.author !== undefined && 
+      this.state.addonMetadata.icon_url !== undefined && this.state.addonMetadata.screenshot_url !== undefined) 
+    ? false : true;
+    
+    const setMetadata = (data, type) => {
+      this.setState({
+        addonMetadata: {
+          name: (type === 'name') ? data : this.state.addonMetadata.name,
+          description: (type === 'description') ? data : this.state.addonMetadata.description,
+          version: (type === 'version') ? data : this.state.addonMetadata.version,
+          author: (type === 'author') ? data : this.state.addonMetadata.author,
+          icon_url: (type === 'icon_url') ? data : this.state.addonMetadata.icon_url,
+          screenshot_url: (type === 'screenshot_url') ? data : this.state.addonMetadata.screenshot_url,
+          type: this.state.addonMetadata.type
+        }
+      });
+    }
+
     const writeDescription = ( 
       <>
         <h3>Information</h3>
         <p>Name</p>
-        <input type='text' value={this.state.addonMetadata.name} onInput={(e) => this.setState({ addonMetadata: { name: e.target.value }})}/>
+        <input type='text' value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
         <p>Version</p>
-        <input type='text' value={this.state.addonMetadata.version} onInput={(e) => this.setState({ addonMetadata: { version: e.target.value }})}/>
+        <input type='text' value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
         <p>Author</p>
-        <input type='text' value={this.state.addonMetadata.author} onInput={(e) => this.setState({ addonMetadata: { author: e.target.value }})}/>
+        <input type='text' value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
         <p>Icon URL</p>
-        <input type='text' value={this.state.addonMetadata.icon_url} onInput={(e) => this.setState({ addonMetadata: { icon_url: e.target.value }})}/>
+        <input type='text' value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
         <p>Screenshot URL</p>
-        <input type='text' value={this.state.addonMetadata.screenshot_url} onInput={(e) => this.setState({ addonMetadata: { screenshot_url: e.target.value }})}/>
+        <input type='text' value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
         <p>Description</p>
-        <textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => this.setState({ addonMetadata: { description: e.target.value }})}></textarea>
+        <textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}></textarea>
         <br/>
         <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>Back</button>
-        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg'>Next</button>
+        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>Next</button>
       </>
     );
 
+    const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
+
     // settings
     const importSettings = (
       <>
         <h3>Import Settings</h3>
         <p onClick={() => this.importSettings()} className='addToMue'>Import current setup</p>
         <br/><br/><br/>
-        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.uploadSettings(JSON.parse(e.target.result))} />
+        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
         <p className='addToMue' style={{ position: 'absolute' }} onClick={() => document.getElementById('file-input').click()}>Upload JSON</p>
         <br/><br/>
-        <button onClick={() => this.changeTab(2, 'settings')} className='uploadbg' style={{ marginRight: '10px' }}>Back</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg'>Next</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>Back</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>Next</button>
+      </>
+    );
+    
+    // quotes
+    const addQuotes = (
+      <>
+        <h3>Add Quotes</h3>
+      </>
+    );
+
+    // photos
+    const addPhotos = (
+      <>
+        <h3>Add Photos</h3>
       </>
     );
 
@@ -141,6 +183,8 @@ export default class Create extends PureComponent {
     switch (this.state.currentTab) {
       case 2: tabContent = writeDescription; break;
       case 'settings': tabContent = importSettings; break;
+      case 'quotes': tabContent = addQuotes; break;
+      case 'photos': tabContent = addPhotos; break;
       case 3: tabContent = downloadAddon; break;
       default: tabContent = chooseType;
     }
@@ -152,4 +196,4 @@ export default class Create extends PureComponent {
       </>
     );
   }
-}
+}

src/modules/helpers/stats.js

@@ -28,7 +28,7 @@ export default class Stats {
     }
 
     // local
-    let data = JSON.parse(localStorage.getItem('statsData'));
+    const data = JSON.parse(localStorage.getItem('statsData'));
     // tl;dr this creates the objects if they don't exist
     // this really needs a cleanup at some point
     if (!data[type] || !data[type][value]) {
@@ -66,7 +66,7 @@ export default class Stats {
     }
 
     // local
-    let data = JSON.parse(localStorage.getItem('statsData'));
+    const data = JSON.parse(localStorage.getItem('statsData'));
     data['tabs-opened'] = data['tabs-opened'] + 1 || 1;        
     localStorage.setItem('statsData', JSON.stringify(data));
   }

src/scss/modules/_buttons.scss

@@ -12,6 +12,13 @@
     outline: none;
     background: none;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: grey !important;
+    background: none;
+    border: 2px solid grey !important;
+  }
 }
 
 .dark %settingsButton {
@@ -79,4 +86,4 @@
   span {
     font-size: 2em;
   }
-}
+}