From 4cc58bf683618995d665eba0177ac76147946c68 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 6 Dec 2019 16:40:49 +0100
Subject: [PATCH] Some light tag sorting

---
 packages/app-accounts/src/Account.tsx       | 6 ++++--
 packages/app-address-book/src/Address.tsx   | 6 ++++--
 packages/react-components/src/InputTags.tsx | 5 +++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx
index 6e4f3f019f..7815437b78 100644
--- a/packages/app-accounts/src/Account.tsx
+++ b/packages/app-accounts/src/Account.tsx
@@ -42,6 +42,8 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
   const [isTransferOpen, setIsTransferOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
 
+  const _setTags = (tags: string[]): void => setTags(tags.sort());
+
   useEffect((): void => {
     const account = keyring.getAccount(address);
 
@@ -51,7 +53,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
       isEditable: (account && !(account.meta.isInjected || account.meta.isHardware)) || false,
       isExternal: (account && account.meta.isExternal) || false
     });
-    setTags(account?.meta?.tags || []);
+    _setTags(account?.meta?.tags || []);
     setAccName(account?.meta?.name || '');
   }, [address]);
 
@@ -209,7 +211,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
           ? (
             <InputTags
               onBlur={_saveTags}
-              onChange={setTags}
+              onChange={_setTags}
               onClose={_saveTags}
               openOnFocus
               defaultValue={tags}
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx
index 9aed0c7854..a0fe97fd3c 100644
--- a/packages/app-address-book/src/Address.tsx
+++ b/packages/app-address-book/src/Address.tsx
@@ -43,6 +43,8 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
   const [isTransferOpen, setIsTransferOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(true);
 
+  const _setTags = (tags: string[]): void => setTags(tags.sort());
+
   useEffect((): void => {
     const current = keyring.getAddress(address);
 
@@ -53,7 +55,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
   useEffect((): void => {
     const account = keyring.getAddress(address);
 
-    setTags(account?.meta?.tags || []);
+    _setTags(account?.meta?.tags || []);
     setAccName(account?.meta?.name || '');
   }, [address]);
 
@@ -192,7 +194,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
           ? (
             <InputTags
               onBlur={_saveTags}
-              onChange={setTags}
+              onChange={_setTags}
               onClose={_saveTags}
               openOnFocus
               defaultValue={tags}
diff --git a/packages/react-components/src/InputTags.tsx b/packages/react-components/src/InputTags.tsx
index 410014d48b..4e006b5fd1 100644
--- a/packages/react-components/src/InputTags.tsx
+++ b/packages/react-components/src/InputTags.tsx
@@ -33,7 +33,7 @@ interface Props extends BareProps {
 }
 
 function loadTags (): string[] {
-  return store.get('tags') || ['Default'];
+  return (store.get('tags') || ['Default']).sort();
 }
 
 function valueToOption (value: string): Option {
@@ -44,11 +44,12 @@ const tags = loadTags();
 const options = tags.map(valueToOption);
 
 function saveTags (tags: string[]): void {
-  store.set('tags', tags);
+  store.set('tags', tags.sort());
 }
 
 function onAddTag (value: string): void {
   tags.push(value);
+
   options.push(valueToOption(value));
 
   saveTags(tags);