From e8698f2141131664b2d39c998d0cbc5dc75743ad Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Sun, 2 May 2021 14:44:23 +0100
Subject: [PATCH] feat: sort addons/marketplace items

---
 .../main/marketplace/sections/Added.jsx       | 34 +++++++++++++++++++
 .../main/marketplace/sections/Marketplace.jsx | 31 +++++++++++++++++
 src/translations/en_GB.json                   |  9 ++++-
 3 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index f28b8071..be4b58db 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/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} />
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 46c90a6b..7873c4ad 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/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} />
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 896e729c..280b8285 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -344,7 +344,14 @@
           "title": "Empty",
           "description": "No addons are installed"
         },
-        "sideload": "Sideload"
+        "sideload": "Sideload",
+        "sort": {
+          "title": "Sort",
+          "newest": "Installed (Newest)",
+          "oldest": "Installed (Oldest)",
+          "a_z": "Alphabetical (A-Z)",
+          "z_a": "Alphabetical (Z-A)"
+        }
       }
     },
     "update": {