fix: marketplace cleanup

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

@@ -29,13 +29,13 @@ export default function Item(props) {
   }
 
   return (
-    <div id='item'>
+    <div id='item' style={{ 'display': props.display }}>
       <br/>
       <span>
         <ArrowBackIcon className='backArrow' onClick={props.toggleFunction}/>
       </span>
       <br/>
-      <h1>{props.data.name}</h1>
+      <h1>{props.data.display_name}</h1>
       {props.button}
       <br/>
       <img alt='product' draggable='false' src={iconsrc}/>
@@ -44,9 +44,9 @@ export default function Item(props) {
       <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
         <div className='productInformation'>
           <ul>
-            <li className='header'>{language.last_updated}</li>
+            {/* <li className='header'>{language.last_updated}</li>
             <li>{props.data.updated}</li>
-            <br/>
+            <br/>*/}
             <li className='header'>{language.version}</li>
             <li>{props.data.version}</li>
             <br/>
@@ -54,14 +54,7 @@ export default function Item(props) {
            <li>{props.data.author}</li>
          </ul>
         </div>
-        
-       {/*} <div className='productInformation'>
-          <ul>
-            <li className='header'>{language.notice.title}</li>
-            <li id='updated'>{language.notice.description}</li>
-          </ul>
-  </div> */}
-   {warningHTML} 
+        {warningHTML} 
       </div>
       <br/>
     </div>

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

@@ -1,11 +1,6 @@
 import React from 'react';
 
 export default function Items(props) {
-  // todo: add message here
-  if (props.items.length === 0) {
-    return null;
-  }
-
   return (
     <div className='items'>
       {props.items.map((item) => (

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

@@ -18,76 +18,68 @@ export default class Added extends React.PureComponent {
         name: '',
         content: {}
       },
-      item_data: {
+      item: {
         name: 'Name',
         author: 'Author',
         description: 'Description',
-        updated: '???',
+        //updated: '???',
         version: '1.0.0',
         icon: ''
       },
-      button: ''
+      button: '',
+      display: {
+        marketplace: 'block',
+        item: 'none'
+      }
     };
     this.buttons = {
-      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
+      uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
     }
     this.language = window.language.modals.main.addons;
   }
 
-  toggle(type, type2, data) {
+  toggle(type, data) {
     if (type === 'item') {
       const installed = JSON.parse(localStorage.getItem('installed'));
       const info = installed.find(i => i.name === data);
 
       this.setState({
-        current_data: {
-          type: type2,
+        item: {
+          type: info.type,
           name: data,
-          content: info
-        },
-        item_data: {
-          name: info.name,
+          display_name: info.name,
           author: info.author,
           description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
-          updated: 'Not Implemented',
+          //updated: info.updated,
           version: info.version,
           icon: info.screenshot_url
         }
       });
 
-      document.getElementById('item').style.display = 'block';
-      document.getElementById('marketplace').style.display = 'none';
+      this.setState({
+        button: this.buttons.uninstall,
+        display: {
+          marketplace: 'none',
+          item: 'block'
+        }
+      });
     } else {
-      document.getElementById('marketplace').style.display = 'block';
-      document.getElementById('item').style.display = 'none';
+      this.setState({
+        display: {
+          marketplace: 'block',
+          item: 'none'
+        }
+      });
     }
-
-    this.setState({
-      button: this.buttons.uninstall
-    });
   }
 
-  manage(type, input) {
-    switch (type) {
-      case 'install':
-        MarketplaceFunctions.install(input.type, input, true);
-        break;
-      case 'uninstall':
-        MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type);
-        break;
-      default:
-        break;
-    }
-
-    toast(window.language.toasts[type + 'ed']);
-
-    let button = '';
-    if (type === 'install') {
-      button = this.buttons.uninstall;
-    }
+  uninstall() {
+    MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type);
+    
+    toast(window.language.toasts.uninstalled);
 
     this.setState({
-      button: button,
+      button: '',
       installed: JSON.parse(localStorage.getItem('installed'))
     });
   }
@@ -96,7 +88,7 @@ export default class Added extends React.PureComponent {
     let content = (
       <Items 
         items={this.state.installed} 
-        toggleFunction={(input) => this.toggle('item', 'addon', input)} 
+        toggleFunction={(input) => this.toggle('item', input)} 
         reloadItemsList={() => this.setState({ installed: JSON.parse(localStorage.getItem('installed')) })} 
       />
     );
@@ -115,10 +107,10 @@ export default class Added extends React.PureComponent {
 
     return (
       <>
-        <div id='marketplace'>
+        <div id='marketplace' style={{ 'display': this.state.display.marketplace }}>
           {content}
         </div>
-        <Item data={this.state.item_data} button={this.state.button} toggleFunction={() => this.toggle()} />
+        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
       </>
     );
   }

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

@@ -15,21 +15,20 @@ export default class Marketplace extends React.PureComponent {
     super();
     this.state = {
       items: [],
-      current_data: {
-        type: '',
-        name: '',
-        content: {}
-      },
       button: '',
       featured: {},
       done: false,
-      item_data: {
+      item: {
         name: 'Name',
         author: 'Author',
         description: 'Description',
-        updated: '???',
+        //updated: '???',
         version: '1.0.0',
         icon: ''
+      },
+      display: {
+        marketplace: 'block',
+        item: 'none'
       }
     };
     this.buttons = {
@@ -40,46 +39,48 @@ export default class Marketplace extends React.PureComponent {
   }
 
   async toggle(type, data) {
-    switch (type) {
-      case 'item':
-        let info;
-        // get item info
-        try {
-          info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
-        } catch (e) {
-          return toast(window.language.toasts.error);
+    if (type === 'item') {
+      let info;
+      // get item info
+      try {
+        info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
+      } catch (e) {
+        return toast(window.language.toasts.error);
+      }
+
+      // check if already installed
+      let button = this.buttons.install;
+
+      const installed = JSON.parse(localStorage.getItem('installed'));
+
+      if (installed.some(item => item.name === info.data.name)) {
+        button = this.buttons.uninstall;
+      }
+
+      this.setState({
+        item: {
+          type: this.props.type,
+          display_name: info.data.name,
+          author: info.data.author,
+          description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+          //updated: info.updated,
+          version: info.data.version,
+          icon: info.data.screenshot_url,
+          data: info.data
+        },
+        button: button,
+        display: {
+          item: 'block',
+          marketplace: 'none'
         }
-
-        // check if already installed
-        let button = this.buttons.install;
-
-        const installed = JSON.parse(localStorage.getItem('installed'));
-
-        if (installed.some(item => item.name === info.data.name)) {
-          button = this.buttons.uninstall;
+      });
+    } else {
+      this.setState({
+        display: {
+          marketplace: 'block',
+          item: 'none'
         }
-
-        this.setState({
-          current_data: { type: this.props.type, name: data, content: info },
-          item_data: {
-            name: info.data.name,
-            author: info.data.author,
-            description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
-            updated: info.updated,
-            version: info.data.version,
-            icon: info.data.screenshot_url
-          },
-          button: button
-        });
-
-        document.getElementById('marketplace').style.display = 'none';
-        document.getElementById('item').style.display = 'block';
-        break;
-
-      default:
-        document.getElementById('marketplace').style.display = 'block';
-        document.getElementById('item').style.display = 'none';
-        break;
+      });
     }
   }
 
@@ -95,15 +96,10 @@ export default class Marketplace extends React.PureComponent {
   }
 
   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;
+    if (type === 'install') {
+      MarketplaceFunctions.install(this.state.item.type, this.state.item.data);
+    } else {
+      MarketplaceFunctions.uninstall(this.state.item.display_name, this.state.item.type);
     }
 
     toast(window.language.toasts[type + 'ed']);
@@ -157,7 +153,7 @@ export default class Marketplace extends React.PureComponent {
 
     return (
       <>
-        <div id='marketplace'>
+        <div id='marketplace' 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>
@@ -167,7 +163,7 @@ export default class Marketplace extends React.PureComponent {
             items={this.state.items}
             toggleFunction={(input) => this.toggle('item', input)} />
         </div>
-        <Item data={this.state.item_data} button={this.state.button} toggleFunction={() => this.toggle()} />
+        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
       </>
     );
   }

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

@@ -7,22 +7,15 @@ import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 import { toast } from 'react-toastify';
 
 export default function Sideload() {
-  const manage = (type, input) => {
-    switch (type) {
-      case 'install':
-        MarketplaceFunctions.install(input.type, input);
-        break;
-      default:
-        break;
-    }
-      
-    toast(window.language.toasts[type + 'ed']);
+  const install = (input) => {
+    MarketplaceFunctions.install(input.type, input);
+    toast(window.language.toasts.installed);
   }
 
   return (
     <>
       <div id='marketplace'>
-        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => manage('install', JSON.parse(e.target.result))} />
+        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.addons.sideload}</button>
       </div>
     </>