perf: marketplace cleanup

src/components/modals/main/marketplace/Item.jsx

@@ -17,22 +17,20 @@ export default class Item extends React.PureComponent {
   render() {
     const language = window.language.modals.main.marketplace.product;
 
+    if (!this.props.data.display_name) {
+      return null;
+    }
+
     let warningHTML;
-    // For some reason it breaks sometimes so we use try/catch
-    console.log(this.props.data)
-    try {
-      if (this.props.data.quote_api) {
-        warningHTML = (
-          <div className='productInformation'>
-            <ul>
-              <li className='header'>{language.quote_warning.title}</li>
-              <li id='updated'>{language.quote_warning.description}</li>
-            </ul>
-          </div>
-        );
-      }
-    } catch (e) {
-      // ignore
+    if (this.props.data.quote_api) {
+      warningHTML = (
+        <div className='productInformation'>
+          <ul>
+            <li className='header'>{language.quote_warning.title}</li>
+            <li id='updated'>{language.quote_warning.description}</li>
+          </ul>
+        </div>
+      );
     }
   
     // prevent console error
@@ -42,14 +40,15 @@ export default class Item extends React.PureComponent {
     }
   
     return (
-      <div id='item' style={{ 'display': this.props.display }}>
+      <div id='item'>
         <br/>
-        <span><ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/></span>
+        <ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/>
         <br/>
         <h1>{this.props.data.display_name}</h1>
+        <br/>
         {this.props.button}
         <br/>
-        <img alt='product' draggable='false' src={iconsrc} onClick={() => this.setState({ showLightbox: true })}/>
+        {iconsrc ? <img alt='product' draggable='false' src={iconsrc} onClick={() => this.setState({ showLightbox: true })}/> : null}
         <div className='informationContainer'>
           <h1>{language.overview}</h1>
           <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>

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

@@ -14,19 +14,8 @@ export default class Added extends React.PureComponent {
     super();
     this.state = {
       installed: JSON.parse(localStorage.getItem('installed')),
-      item: {
-        name: 'Name',
-        author: 'Author',
-        description: 'Description',
-        //updated: '???',
-        version: '1.0.0',
-        icon: ''
-      },
-      button: '',
-      display: {
-        marketplace: 'block',
-        item: 'none'
-      }
+      item: {},
+      button: ''
     };
     this.buttons = {
       uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
@@ -51,18 +40,11 @@ export default class Added extends React.PureComponent {
           icon: info.screenshot_url,
           quote_api: info.quote_api || null
         },
-        button: this.buttons.uninstall,
-        display: {
-          marketplace: 'none',
-          item: 'block'
-        }
+        button: this.buttons.uninstall
       });
     } else {
       this.setState({
-        display: {
-          marketplace: 'block',
-          item: 'none'
-        }
+        item: {}
       });
     }
   }
@@ -92,7 +74,9 @@ export default class Added extends React.PureComponent {
       case 'z-a':
         installed.sort();
         installed.reverse();
-      break;
+        break;
+      default:
+        break;
     }
 
     this.setState({
@@ -117,19 +101,20 @@ export default class Added extends React.PureComponent {
       );
     }
 
+    if (this.state.item.display_name) {
+      return <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} />;
+    }
+
     return (
       <>
-        <div style={{ 'display': this.state.display.marketplace }}>
-          <Dropdown label={this.language.sort.title} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
-            <option value='newest'>{this.language.sort.newest}</option>
-            <option value='oldest'>{this.language.sort.oldest}</option>
-            <option value='a-z'>{this.language.sort.a_z}</option>
-            <option value='z-a'>{this.language.sort.z_a}</option>
-          </Dropdown>
-          <br/>
-          <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', input)} />        
-        </div>
-        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
+        <Dropdown label={this.language.sort.title} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
+          <option value='newest'>{this.language.sort.newest}</option>
+          <option value='oldest'>{this.language.sort.oldest}</option>
+          <option value='a-z'>{this.language.sort.a_z}</option>
+          <option value='z-a'>{this.language.sort.z_a}</option>
+        </Dropdown>
+        <br/>
+        <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', input)} />        
       </>
     );
   }

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

@@ -19,18 +19,7 @@ export default class Marketplace extends React.PureComponent {
       button: '',
       featured: {},
       done: false,
-      item: {
-        name: 'Name',
-        author: 'Author',
-        description: 'Description',
-        //updated: '???',
-        version: '1.0.0',
-        icon: ''
-      },
-      display: {
-        marketplace: 'block',
-        item: 'none'
-      }
+      item: {}
     };
     this.buttons = {
       uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
@@ -76,18 +65,11 @@ export default class Marketplace extends React.PureComponent {
           icon: info.data.screenshot_url,
           data: info.data
         },
-        button: button,
-        display: {
-          item: 'block',
-          marketplace: 'none'
-        }
+        button: button
       });
     } else {
       this.setState({
-        display: {
-          marketplace: 'block',
-          item: 'none'
-        }
+        item: {}
       });
     }
   }
@@ -133,15 +115,13 @@ export default class Marketplace extends React.PureComponent {
       case 'z-a':
         items.sort();
         items.reverse();
-      break;
+        break;
+      default:
+        break;
     }
 
     this.setState({
-      items: items,
-      display: {
-        item: 'none',
-        marketplace: 'block'
-      }
+      items: items
     });
   }
 
@@ -189,23 +169,24 @@ export default class Marketplace extends React.PureComponent {
       </>);
     }
 
+    if (this.state.item.display_name) {
+      return <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()}/>;
+    }
+
     return (
       <>
-        <div style={{ 'display': this.state.display.marketplace }}>
-          <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.open(this.state.featured.buttonLink)}>{this.state.featured.buttonText}</button>
-          </div>
-          <br/>
-          <Dropdown label={window.language.modals.main.addons.sort.title} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
-            <option value='a-z'>{window.language.modals.main.addons.sort.a_z}</option>
-            <option value='z-a'>{window.language.modals.main.addons.sort.z_a}</option>
-          </Dropdown>
-          <br/>
-          <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
+        <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.open(this.state.featured.buttonLink)}>{this.state.featured.buttonText}</button>
         </div>
-        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
+        <br/>
+        <Dropdown label={window.language.modals.main.addons.sort.title} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
+          <option value='a-z'>{window.language.modals.main.addons.sort.a_z}</option>
+          <option value='z-a'>{window.language.modals.main.addons.sort.z_a}</option>
+        </Dropdown>
+        <br/>
+        <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
       </>
     );
   }

src/components/modals/main/scss/marketplace/_main.scss

@@ -129,6 +129,7 @@ p.description {
   cursor: pointer;
   width: 2rem !important;
   height: 2rem !important;
+  margin-left: -8px;
 
   &:hover {
     color: grey;