From b157530ebf7f256930a3fcda01a5330ea29f59b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 8 Aug 2021 16:17:29 +0200
Subject: [PATCH] No account search results message
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/aliases/index.js | 17 +++++++++++++----
 app/soapbox/locales/pl.json           |  1 +
 app/soapbox/reducers/aliases.js       | 10 ++++++++--
 app/styles/components/aliases.scss    |  5 +++++
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/aliases/index.js b/app/soapbox/features/aliases/index.js
index d094c116d..b2653ca6f 100644
--- a/app/soapbox/features/aliases/index.js
+++ b/app/soapbox/features/aliases/index.js
@@ -22,6 +22,7 @@ const messages = defineMessages({
 const mapStateToProps = state => ({
   aliases: state.getIn(['meta', 'pleroma', 'also_known_as']),
   searchAccountIds: state.getIn(['aliases', 'suggestions', 'items']),
+  loaded: state.getIn(['aliases', 'suggestions', 'loaded']),
 });
 
 export default @connect(mapStateToProps)
@@ -34,7 +35,7 @@ class Aliases extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, aliases, searchAccountIds } = this.props;
+    const { intl, aliases, searchAccountIds, loaded } = this.props;
 
     const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
 
@@ -42,9 +43,17 @@ class Aliases extends ImmutablePureComponent {
       <Column className='aliases-settings-panel' icon='suitcase' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
         <Search />
-        <div className='aliases__accounts'>
-          {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
-        </div>
+        {
+          loaded && searchAccountIds.size === 0 ? (
+            <div className='aliases__accounts empty-column-indicator'>
+              <FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
+            </div>
+          ) : (
+            <div className='aliases__accounts'>
+              {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
+            </div>
+          )
+        }
         <ColumnSubheading text={intl.formatMessage(messages.subheading_aliases)} />
         <div className='aliases-settings-panel'>
           <ScrollableList
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 6938bf429..2a3cc566f 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -318,6 +318,7 @@
   "empty_column.account_timeline": "Brak wpisów tutaj!",
   "empty_column.account_unavailable": "Profil niedostępny",
   "empty_column.aliases": "Nie utworzyłeś(-aś) jeszcze żadnego aliasu konta.",
+  "empty_column.aliases.suggestions": "Brak propozycji kont dla podanej frazy.",
   "empty_column.blocks": "Nie zablokowałeś(-aś) jeszcze żadnego użytkownika.",
   "empty_column.bookmarks": "Nie masz jeszcze żadnej zakładki. Kiedy dodasz jakąś, pojawi się ona tutaj.",
   "empty_column.community": "Lokalna oś czasu jest pusta. Napisz coś publicznie, aby zagaić!",
diff --git a/app/soapbox/reducers/aliases.js b/app/soapbox/reducers/aliases.js
index 6a63b4d7b..a4d4ecec8 100644
--- a/app/soapbox/reducers/aliases.js
+++ b/app/soapbox/reducers/aliases.js
@@ -8,6 +8,7 @@ import {
 const initialState = ImmutableMap({
   suggestions: ImmutableMap({
     value: '',
+    loaded: false,
     items: ImmutableList(),
   }),
 });
@@ -15,13 +16,18 @@ const initialState = ImmutableMap({
 export default function aliasesReducer(state = initialState, action) {
   switch(action.type) {
   case ALIASES_SUGGESTIONS_CHANGE:
-    return state.setIn(['suggestions', 'value'], action.value);
+    return state
+      .setIn(['suggestions', 'value'], action.value)
+      .setIn(['suggestions', 'loaded'], false);
   case ALIASES_SUGGESTIONS_READY:
-    return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
+    return state
+      .setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)))
+      .setIn(['suggestions', 'loaded'], true);
   case ALIASES_SUGGESTIONS_CLEAR:
     return state.update('suggestions', suggestions => suggestions.withMutations(map => {
       map.set('items', ImmutableList());
       map.set('value', '');
+      map.set('loaded', false);
     }));
   default:
     return state;
diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss
index 85145488a..a9888a85b 100644
--- a/app/styles/components/aliases.scss
+++ b/app/styles/components/aliases.scss
@@ -11,6 +11,11 @@
     .account__avatar {
       cursor: default;
     }
+
+    &.empty-column-indicator {
+      min-height: unset;
+      overflow-y: unset;
+    }
   }
 
   &_search {