Add support for searching media status

w/ some refactors

i've also tried to maintain support for backends that
don't have media status search support

src/components/search/search.js

@@ -27,16 +27,20 @@ const Search = {
   ],
   data () {
     return {
-      loaded: false,
+      loadedInitially: false,
       loading: false,
       searchTerm: this.query || '',
+      mediaSearchSupported: false,
       userIds: [],
       statuses: [],
+      media: [],
       hashtags: [],
       currenResultTab: 'statuses',
 
       statusesOffset: 0,
       lastStatusFetchCount: 0,
+      mediaOffset: 0,
+      lastMediaFetchCount: 0,
       lastQuery: ''
     }
   },
@@ -50,6 +54,13 @@ const Search = {
       return this.statuses.filter(status =>
         allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
       )
+    },
+    visibleMedia () {
+      const allStatusesObject = this.$store.state.statuses.allStatusesObject
+
+      return this.media.filter(status =>
+        allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
+      )
     }
   },
   mounted () {
@@ -72,61 +83,92 @@ const Search = {
         return
       }
 
+      const isNewSearch = this.lastQuery !== query
       this.loading = true
       this.$refs.searchInput.blur()
-      if (this.lastQuery !== query) {
+      if (isNewSearch) {
         this.userIds = []
         this.hashtags = []
         this.statuses = []
+        this.media = []
 
         this.statusesOffset = 0
         this.lastStatusFetchCount = 0
+        this.mediaOffset = 0
+        this.lastMediaFetchCount = 0
       }
 
-      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, 'type': searchType })
+      let searchOffset
+      if (searchType === 'statuses') {
+        searchOffset = this.statusesOffset
+      } else if (searchType === 'media') {
+        searchOffset = this.mediaOffset
+      }
+
+      this.$store.dispatch('search', {
+        q: query,
+        resolve: true,
+        offset: searchOffset,
+        'type': searchType,
+      })
         .then(data => {
           this.loading = false
 
-          let oldLength = this.statuses.length
+          let oldStasusesLength = this.statuses.length
+          let oldMediaLength = this.media.length
 
           // Always append to old results. If new results are empty, this doesn't change anything
           this.userIds = this.userIds.concat(map(data.accounts, 'id'))
           this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
+          if ('media' in data) {
+            this.mediaSearchSupported = true
+            this.media = uniqBy(this.media.concat(data.media), 'id')
+          }
           this.hashtags = this.hashtags.concat(data.hashtags)
 
-          this.currenResultTab = this.getActiveTab()
+          if (isNewSearch) {
-          this.loaded = true
+            this.currenResultTab = this.getActiveTab()
+          }
+          this.loadedInitially = true
 
-          // Offset from whatever we already have
+          if (!searchType || searchType === 'statuses') {
-          this.statusesOffset = this.statuses.length
+            // Offset from whatever we already have
-          // Because the amount of new statuses can actually be zero, compare to old lenght instead
+            this.statusesOffset = this.statuses.length
-          this.lastStatusFetchCount = this.statuses.length - oldLength
+            // Because the amount of new statuses can actually be zero, compare to old lenght instead
+            this.lastStatusFetchCount = this.statuses.length - oldStasusesLength
+          }
+          if (!searchType || searchType === 'media') {
+            this.mediaOffset = this.media.length
+            this.lastMediaFetchCount = this.media.length - oldMediaLength
+          }
           this.lastQuery = query
         })
     },
     resultCount (tabName) {
       const length = this[tabName].length
-      return (
+
-        length === 0
+      if (length === 0 || !this.loadedInitially) {
-          ? ''
+        return ''
-          : ` (${
+      }
-            length + (
+
-            tabName === "visibleStatuses" &&
+      if (
-            this.lastStatusFetchCount !== 0 &&
+        (tabName === 'visibleStatuses' && this.lastStatusFetchCount !== 0) ||
-            !this.loading &&
+        (tabName === 'visibleMedia' && this.lastMediaFetchCount !== 0)
-            this.loaded
+      ) {
-              ? '+'
+        return ` (${length}+)`
-              : ''
+      }
-          )
+
-        })`
+      return ` (${length})`
-      )
     },
     onResultTabSwitch (key) {
       this.currenResultTab = key
+      this.loading = false
     },
     getActiveTab () {
       if (this.visibleStatuses.length > 0) {
         return 'statuses'
+      } else if (this.visibleMedia.length > 0) {
+        return 'media'
       } else if (this.users.length > 0) {
         return 'people'
       } else if (this.hashtags.length > 0) {

src/components/search/search.vue

@@ -24,7 +24,13 @@
       </button>
     </div>
     <div
-      v-if="loading && statusesOffset == 0"
+      v-if="
+        loading &&
+          visibleStatuses.length === 0 &&
+          visibleMedia.length === 0 &&
+          users.length === 0 &&
+          hashtags.length === 0
+      "
       class="text-center loading-icon"
     >
       <FAIcon
@@ -33,7 +39,7 @@
         size="lg"
       />
     </div>
-    <div v-else-if="loaded">
+    <div v-else-if="loadedInitially">
       <div class="search-nav-heading">
         <tab-switcher
           ref="tabSwitcher"
@@ -44,6 +50,11 @@
             key="statuses"
             :label="$t('user_card.statuses') + resultCount('visibleStatuses')"
           />
+          <span
+            v-if="mediaSearchSupported"
+            key="media"
+            :label="$t('user_card.media') + resultCount('visibleMedia')"
+          />
           <span
             key="people"
             :label="$t('search.people') + resultCount('users')"
@@ -68,7 +79,7 @@
           :no-heading="false"
         />
         <button
-          v-if="!loading && loaded && lastStatusFetchCount > 0"
+          v-if="!loading && loadedInitially && lastStatusFetchCount > 0"
           class="more-statuses-button button-unstyled -link -fullwidth"
           @click.prevent="search(searchTerm, 'statuses')"
         >
@@ -87,7 +98,7 @@
           />
         </div>
         <div
-          v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loaded"
+          v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loadedInitially"
           class="search-result-heading"
         >
           <h4>
@@ -95,9 +106,48 @@
           </h4>
         </div>
       </div>
+      <div v-if="currenResultTab === 'media'">
+        <Status
+          v-for="media in visibleMedia"
+          :key="media.id"
+          :collapsable="false"
+          :expandable="false"
+          :compact="false"
+          class="search-result"
+          :statusoid="media"
+          :no-heading="false"
+        />
+        <button
+          v-if="!loading && loadedInitially && lastMediaFetchCount > 0"
+          class="more-statuses-button button-unstyled -link -fullwidth"
+          @click.prevent="search(searchTerm, 'media')"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('search.load_more') }}
+          </div>
+        </button>
+        <div
+          v-else-if="loading && mediaOffset > 0"
+          class="text-center loading-icon"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+        <div
+          v-if="(visibleMedia.length === 0 || lastMediaFetchCount === 0) && !loading && loadedInitially"
+          class="search-result-heading"
+        >
+          <h4>
+            {{ visibleMedia.length === 0 ? $t('search.no_results') : $t('search.no_more_results') }}
+          </h4>
+        </div>
+      </div>
       <div v-else-if="currenResultTab === 'people'">
         <div
-          v-if="users.length === 0 && !loading && loaded"
+          v-if="users.length === 0 && !loading && loadedInitially"
           class="search-result-heading"
         >
           <h4>{{ $t('search.no_results') }}</h4>
@@ -111,7 +161,7 @@
       </div>
       <div v-else-if="currenResultTab === 'hashtags'">
         <div
-          v-if="hashtags.length === 0 && !loading && loaded"
+          v-if="hashtags.length === 0 && !loading && loadedInitially"
           class="search-result-heading"
         >
           <h4>{{ $t('search.no_results') }}</h4>

src/services/api/api.service.js

@@ -1424,6 +1424,9 @@ const search2 = ({ credentials, q, resolve, limit, offset, following, type }) =>
     .then((data) => {
       data.accounts = data.accounts.slice(0, limit).map(u => parseUser(u))
       data.statuses = data.statuses.slice(0, limit).map(s => parseStatus(s))
+      if ('media' in data) {
+        data.media = data.media.slice(0, limit).map(s => parseStatus(s))
+      }
       return data
     })
 }