More cleanup (some marketplace stuff broken, will fix later)

src/components/modals/Welcome.jsx

@@ -3,22 +3,15 @@ import EmailIcon from '@material-ui/icons/Email';
 
 export default class Welcome extends React.PureComponent {
   render() {
-    return <div className='welcomeContent'>
+    return (
+      <div className='welcomeContent'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <div className='welcomeModalText'>
           <h2 className='subtitle'>Welcome to</h2>
           <h1 className='welcometitle'>Mue Tab</h1>
-          <img alt='celebration' style={{'height': '200px', 'width': 'auto'}} src='./././icons/undraw_celebration.svg' />
+          <img alt='celebration' style={{ 'height': '200px', 'width': 'auto' }} src='./././icons/undraw_celebration.svg' />
           <h2 className='subtitle'>Information</h2>
           <p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
-          <h2 className='subtitle'>Tutorials</h2>
-          <a href=''>General Start</a>
-          <br/>
-          <a href='https://blog.muetab.xyz/welcome-to-marketplace/'>Marketplace</a>
-          <br/>
-          <a href=''>Submitting Photos</a>
-          <br/>
-          <a href=''>Settings</a>
           <h2 className='subtitle'>Support</h2>
          {/* <img alt='twitter' href='https://twitter.com/getmue' className='icon' src=''/>
           <img alt='discord' href='https://discord.gg/kJsufA9' className='icon' src=''/> */}
@@ -26,6 +19,7 @@ export default class Welcome extends React.PureComponent {
           <br/>
           <button className='close' onClick={this.props.modalClose}>Close</button>
         </div>
-      </div>;
+      </div>
+      );
     }
 }

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -156,28 +156,30 @@ export default class BackgroundSettings extends React.PureComponent {
       const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
       let gradientInputs;
       if (gradientHasMoreThanOneColour) {
-        if (this.GradientPickerInitalState === undefined) {
-          this.InitializeColorPickerState(this.state.gradientSettings);
-        }
-        gradientInputs = (<ColorPicker
-          onStartChange={color => this.onColorPickerChange(color, 'start')}
-          onChange={color => this.onColorPickerChange(color, 'change')}
-          onEndChange={color => this.onColorPickerChange(color, 'end')}
+        if (this.GradientPickerInitalState === undefined) this.InitializeColorPickerState(this.state.gradientSettings);
+        gradientInputs = (
+        <ColorPicker
+          onStartChange={(color) => this.onColorPickerChange(color, 'start')}
+          onChange={(color) => this.onColorPickerChange(color, 'change')}
+          onEndChange={(color) => this.onColorPickerChange(color, 'end')}
           gradient={this.GradientPickerInitalState}
-          isGradient />);
+          isGradient/>
+        );
       } else {
         gradientInputs = this.state.gradientSettings.gradient.map((g, i) => {
           return (
             <div key={i}>
-              <input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
-              <label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
+              <input id={'colour_' + i} type='color' name='colour' className='colour' onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
+              <label htmlFor={'colour_' + i} className='customBackgroundHex'>{g.colour}</label>
             </div>);
         });
       }
       colourSettings = (
         <div>
           {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled && !gradientHasMoreThanOneColour ? (<button type="button" className="add" onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null}
+          {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
+           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null
+          }
         </div>);
     }
     return (
@@ -193,8 +195,7 @@ export default class BackgroundSettings extends React.PureComponent {
               label={this.props.language.background.api}
               name='backgroundapi'
               id='backgroundAPI'
-              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
-            >
+              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
               <option className='choices' value='mue'>Mue</option>
               <option className='choices' value='unsplash'>Unsplash</option>
             </Dropdown>

src/components/modals/tabs/Addons.jsx

@@ -23,7 +23,10 @@ export default class Addons extends React.PureComponent {
                 version: '1.0.0',
                 icon: ''
             },
-            button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
+            button: ''
+        }
+        this.buttons = {
+            uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
         }
     }
 
@@ -46,29 +49,21 @@ export default class Addons extends React.PureComponent {
             document.getElementById('item').style.display = 'block';
             document.getElementById('marketplace').style.display = 'none';
          } else {
-            this.setState({
-                button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
-            });
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
         }
+        this.setState({ button: this.buttons.uninstall });
     }
 
     uninstall() {
         let type, data = this.state.current_data.content.type;
         switch (data) {
-            case 'photos':
-                type = 'photo_packs';
-                break;
-            case 'quotes':
-                type = 'quote_packs';
-                break;
-            default:
-                type = this.state.current_data.type;
-                break;
+            case 'photos': type = 'photo_packs'; break;
+            case 'quotes': type = 'quote_packs'; break;
+            default: type = this.state.current_data.type; break;
         }
         MarketplaceFunctions.uninstall(this.state.current_data.name, type);
-        toast(this.props.toastLanguage.removed);
+        toast(this.props.toastLanguage.uninstalled);
         this.setState({
             button: '',
             installed: JSON.parse(localStorage.getItem('installed'))
@@ -76,28 +71,19 @@ export default class Addons extends React.PureComponent {
     }
 
     install(input) {
-        let button;
         MarketplaceFunctions.install(input.type, input, true);
         toast(this.props.toastLanguage.installed);
-        button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>;
         this.setState({
-            button: button,
+            button: this.buttons.uninstall,
             installed: JSON.parse(localStorage.getItem('installed'))
         });
     }
 
   componentDidMount() {
     document.getElementById('file-input').onchange = (e) => {
-        const file = e.target.files[0];
-        if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
-
         const reader = new FileReader();
-        reader.readAsText(file, 'UTF-8');
-
-        reader.onload = (readerEvent) => {
-          const content = JSON.parse(readerEvent.target.result);
-          this.install(content);
-        };
+        reader.readAsText(e.target.files[0], 'UTF-8');
+        reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result));
     };
 
     this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
@@ -107,20 +93,22 @@ export default class Addons extends React.PureComponent {
     let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />
 
     if (this.state.installed.length === 0) {
-         content = <div className='items'>
-               <div className='emptyMessage'>
-                    <LocalMallIcon />
-                    <h1>{this.props.language.empty.title}</h1>
-                    <p className='description'>{this.props.language.empty.description}</p>
-                    <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
-              </div>
-           </div>;
+         content = (
+           <div className='items'>
+            <div className='emptyMessage'>
+                 <LocalMallIcon/>
+                 <h1>{this.props.language.empty.title}</h1>
+                 <p className='description'>{this.props.language.empty.description}</p>
+                 <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+           </div>
+          </div>
+        );
     }
 
     return (
        <div>
          <div id='marketplace'>
-          <input id='file-input' type='file' name='name' className='hidden' />
+          <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
           <h1>{this.props.language.added}</h1>
           {content}

src/components/modals/tabs/Marketplace.jsx

@@ -8,59 +8,48 @@ import * as Constants from '../../../modules/constants';
 import Items from '../marketplace/Items';
 
 export default class Marketplace extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            themes: [],
-            settings: [],
-            photo_packs: [],
-            quote_packs: [],
-            see_more: [],
-            see_more_type: '',
-            current_data: {
-                type: '',
-                name: '',
-                content: {}
-            },
-            button: '',
-            featured: {},
-            done: false,
-            item_data: {
-                name: 'Name',
-                author: 'Author',
-                description: 'Description',
-                updated: '???',
-                version: '1.0.0',
-                icon: ''
-            }
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        settings: [],
+        photo_packs: [],
+        quote_packs: [],
+        see_more: [],
+        see_more_type: '',
+        current_data: {
+            type: '',
+            name: '',
+            content: {}
+        },
+        button: '',
+        featured: {},
+        done: false,
+        item_data: {
+            name: 'Name',
+            author: 'Author',
+            description: 'Description',
+            updated: '???',
+            version: '1.0.0',
+            icon: ''
         }
-
-        this.offlineHTML = <div id='marketplace'>
-            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
-                <WifiOffIcon />
-                <h1>{this.props.language.offline.title}</h1>
-                <p className='description'>{this.props.language.offline.description}</p>
-            </div>
-        </div>;
+      }
+      this.buttons = {
+          uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.language.product.buttons.remove}</button>,
+          install: <button className='addToMue' onClick={() => this.manage('install')}>{this.props.language.product.buttons.addtomue}</button>
+      }
     }
 
-    async toggle(type, type2, data) {
-        if (type === 'seemore') {
+  async toggle(type, type2, data) {
+    switch (type) {
+        case 'seemore':
             document.getElementById('marketplace').style.display = 'none';
             document.getElementById('seemore').style.display = 'block';
-            return this.setState({
-                see_more: this.state[type2],
-                see_more_type: type2
-            });
-        }
-
-        if (type === 'item') {
+            this.setState({ see_more: this.state[type2], see_more_type: type2 });
+            break;
+        case 'item':
             let info;
-            try {
-                info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
-            } catch (e) {
-                return toast(this.props.toastLanguage.error);
-            }
+            try { info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json(); }
+            catch (e) { return toast(this.props.toastLanguage.error); }
 
             this.setState({
                 current_data: { type: type2, name: data, content: info },
@@ -74,111 +63,117 @@ export default class Marketplace extends React.PureComponent {
                 }
             });
 
+            let button = this.buttons.install;
+            const installed = JSON.parse(localStorage.getItem('installed'));
+            if (installed.some(item => item.name === data)) button = this.buttons.uninstall;
+            this.setState({ button: button });
+
             document.getElementById('marketplace').style.display = 'none';
             document.getElementById('seemore').style.display = 'none';
             document.getElementById('item').style.display = 'block';
-
-            let button = <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
-            const installed = JSON.parse(localStorage.getItem('installed'));
-            if (installed.some(item => item.name === data)) button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
-            this.setState({ button: button });
-        } else {
+            break;
+        default:
             document.getElementById('marketplace').style.display = 'block';
             document.getElementById('item').style.display = 'none';
             document.getElementById('seemore').style.display = 'none';
+            break;
         }
    }
 
-    async getItems() {
-        const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
-        const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
-        this.setState({
-            themes: data.data.themes,
-            settings: data.data.settings,
-            photo_packs: data.data.photo_packs,
-            quote_packs: data.data.quote_packs,
-            see_more: data.data.photo_packs,
-            featured: featured.data,
-            done: true
-        });
-    }
+  async getItems() {
+    const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+    const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+    this.setState({
+        settings: data.data.settings,
+        photo_packs: data.data.photo_packs,
+        quote_packs: data.data.quote_packs,
+        see_more: data.data.photo_packs,
+        featured: featured.data,
+        done: true
+    });
+  }
 
-    install() {
-        let button;
-        MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data);
-        toast(this.props.toastLanguage.installed);
-        button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
-        this.setState({ button: button });
+  manage(type) {
+    switch (type) {
+        case 'install': MarketplaceFunctions.install(this.state.current_data.type, this.state.current_data.content.data); break;
+        case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.content.data.name, this.state.current_data.type); break;
+        default: break;
     }
+    toast(this.props.toastLanguage[type + 'ed']);
+    let button = this.buttons.install;
+    if (type === 'install') button = this.buttons.uninstall;
+    this.setState({ button: button });
+  }
 
-    uninstall() {
-        MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type);
-        toast(this.props.toastLanguage.removed);
-        this.setState({
-            button: <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
-        });
-    }
-
-    componentDidMount() {
-      if (navigator.onLine === false) return;
-      this.getItems();
-    }
+  componentDidMount() {
+    if (navigator.onLine === false) return;
+    this.getItems();
+  }
 
   render() {
-    if (navigator.onLine === false) return this.offlineHTML;
-    if (this.state.done === false) {
+    const returnMessage = (msg) => {
         return (
             <div id='marketplace'>
               <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-                <h1>{this.props.updateLanguage.loading}</h1>
+                {msg}
               </div>
             </div>
         );
     }
 
+    if (navigator.onLine === false) {
+        return returnMessage(
+            <React.Fragment>
+                <WifiOffIcon/>
+                <h1>{this.props.language.offline.title}</h1>
+                <p className='description'>{this.props.language.offline.description}</p>
+            </React.Fragment>
+        );
+    }
+
+    if (this.state.done === false) return returnMessage(<h1>{this.props.updateLanguage.loading}</h1>)
+
     return (
         <React.Fragment>
             <div id='marketplace'>
-                 <div className='featured' style={{backgroundColor: this.state.featured.colour}}>
+                <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
                     <p>{this.state.featured.title}</p>
                     <h1>{this.state.featured.name}</h1>
                     <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
-                 </div>
-                 <Items
+                </div>
+                <Items
                    title={this.props.language.photo_packs}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.photo_packs.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
-                 <Items
+                <Items
                    title={this.props.language.preset_settings}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.settings.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'settings', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'settings')} />
-                 <Items
+                <Items
                    title={this.props.language.quote_packs}
                    seeMoreTitle={this.props.language.see_more}
                    items={this.state.quote_packs.slice(0, 3)}
                    toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
                    seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
-             </div>
-             <Item
+            </div>
+            <Item
                button={this.state.button}
                data={this.state.item_data}
                content={this.state.current_data}
-               function={() => this.toggle()} language={this.props.language.product}
-             />
-             <div id='seemore'>
+               function={() => this.toggle()} language={this.props.language.product} />
+            <div id='seemore'>
                 <ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
                 <Items
                   title={this.props.language.see_more}
                   seeMoreTitle={this.props.language.see_more}
                   toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
-                  items={this.state.see_more}
-                />
-             </div>
+                  items={this.state.see_more} />
+            </div>
         </React.Fragment>
-      )
+      );
     }
 }

src/components/widgets/Date.jsx

@@ -63,6 +63,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span style={{ 'text-transform': 'capitalize', 'font-weight': 'bold'}}>{this.state.date}</span>
+    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold'}}>{this.state.date}</span>
   }
 }