From 6e2ef65b9924127c24d95b7d724d94db5ca17111 Mon Sep 17 00:00:00 2001
From: roschaefer <gitkraken@roschaefer.de>
Date: Thu, 22 Aug 2019 00:26:59 +0200
Subject: [PATCH] Visual feedback if filters lead to 0 results

This is one of the bugs/improvements suggested by @ulfgebhardt.
---
 webapp/locales/de.json |  4 ++++
 webapp/locales/en.json |  4 ++++
 webapp/pages/index.vue | 32 +++++++++++++++++++++++++-------
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 812cf5665..e249ce160 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -1,4 +1,8 @@
 {
+  "index": {
+    "no-results": "Keine Beiträge gefunden.",
+    "change-filter-settings": "Verändere die Filter-Einstellungen um mehr Ergebnisse zu erhalten."
+  },
   "filter-menu": {
     "title": "Deine Filterblase",
     "hashtag-search": "Suche nach #{hashtag}",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 5595fb06b..7f9e7286b 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -1,4 +1,8 @@
 {
+  "index": {
+    "no-results": "No contributions found.",
+    "change-filter-settings": "Change your filter settings to get more results."
+  },
   "filter-menu": {
     "title": "Your filter bubble",
     "hashtag-search": "Searching for #{hashtag}",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 29cabbf68..910fa7a2f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -15,13 +15,26 @@
           ></ds-select>
         </div>
       </ds-grid-item>
-      <masonry-grid-item v-for="post in posts" :key="post.id">
-        <hc-post-card
-          :post="post"
-          :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-          @removePostFromList="deletePost(index, post.id)"
-        />
-      </masonry-grid-item>
+      <template v-if="hasResults">
+        <masonry-grid-item v-for="post in posts" :key="post.id">
+          <hc-post-card
+            :post="post"
+            :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+            @removePostFromList="deletePost(index, post.id)"
+          />
+        </masonry-grid-item>
+      </template>
+      <template v-else>
+        <ds-grid-item :row-span="2" column-span="fullWidth">
+          <hc-empty icon="docs" />
+          <ds-text align="center">
+            {{ $t('index.no-results') }}
+          </ds-text>
+          <ds-text align="center">
+            {{ $t('index.change-filter-settings') }}
+          </ds-text>
+        </ds-grid-item>
+      </template>
     </masonry-grid>
     <no-ssr>
       <ds-button
@@ -49,6 +62,7 @@
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import uniqBy from 'lodash/uniqBy'
+import HcEmpty from '~/components/Empty'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
@@ -61,6 +75,7 @@ export default {
     FilterMenu,
     HcPostCard,
     HcLoadMore,
+    HcEmpty,
     MasonryGrid,
     MasonryGridItem,
   },
@@ -119,6 +134,9 @@ export default {
       }
       return filter
     },
+    hasResults() {
+      return this.$apollo.loading || (this.posts && this.posts.length > 0)
+    },
   },
   watch: {
     postsFilter() {