feat: sort addons/marketplace items

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

@@ -3,6 +3,7 @@ import React from 'react';
 import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Item from '../Item';
 import Items from '../Items';
+import Dropdown from '../../settings/Dropdown';
 
 import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 
@@ -76,6 +77,32 @@ export default class Added extends React.PureComponent {
     });
   }
 
+  sortAddons(value) {
+    let installed = JSON.parse(localStorage.getItem('installed'));
+    switch (value) {
+      case 'newest':
+        installed.reverse();
+        break;
+      case 'oldest':
+        break;
+      case 'a-z':
+        installed.sort();
+        break;
+      case 'z-a':
+        installed.sort();
+        installed.reverse();
+      break;
+    }
+
+    this.setState({
+      installed: installed
+    });
+  }
+
+  componentDidMount() {
+    this.sortAddons(localStorage.getItem('sortAddons'));
+  }
+
   render() {
     if (this.state.installed.length === 0) {
       return (
@@ -92,6 +119,13 @@ export default class Added extends React.PureComponent {
     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} />

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

@@ -5,6 +5,7 @@ import LocalMallIcon from '@material-ui/icons/LocalMall';
 
 import Item from '../Item';
 import Items from '../Items';
+import Dropdown from '../../settings/Dropdown';
 
 import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 
@@ -101,9 +102,12 @@ export default class Marketplace extends React.PureComponent {
 
     this.setState({
       items: data[this.props.type],
+      oldItems: data[this.props.type],
       featured: featured.data,
       done: true
     });
+
+    this.sortMarketplace(localStorage.getItem('sortMarketplace'));
   }
 
   manage(type) {
@@ -119,6 +123,28 @@ export default class Marketplace extends React.PureComponent {
     });
   }
 
+  sortMarketplace(value) {
+    let items = this.state.oldItems;
+    switch (value) {
+      case 'a-z':
+        items.sort();
+        items.reverse();
+        break;
+      case 'z-a':
+        items.sort();
+        items.reverse();
+      break;
+    }
+
+    this.setState({
+      items: items,
+      display: {
+        item: 'none',
+        marketplace: 'block'
+      }
+    });
+  }
+
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return;
@@ -171,6 +197,11 @@ export default class Marketplace extends React.PureComponent {
             <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>
           <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
         </div>
         <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />