Fix VLoadMore

src/components/VAllResultsGrid/VAllResultsGrid.vue

@@ -35,13 +35,7 @@
       </div>
     </div>
 
-    <VLoadMore
-      v-if="canLoadMore && !fetchState.isFinished"
-      class="mt-4"
-      :is-fetching="resultsLoading"
-      data-testid="load-more"
-      @onLoadMore="onLoadMore"
-    />
+    <VLoadMore class="mt-4" />
   </div>
 </template>
 
@@ -65,22 +59,12 @@ export default defineComponent({
     VGridSkeleton,
     VContentLink,
   },
-  props: ['canLoadMore'],
-  setup(_, { emit }) {
+  setup() {
     const { i18n } = useContext()
     const mediaStore = useMediaStore()
 
-    const onLoadMore = () => {
-      emit('load-more')
-    }
-
     /** @type {import('@nuxtjs/composition-api').ComputedRef<boolean>} */
-    const resultsLoading = computed(() => {
-      return (
-        Boolean(mediaStore.fetchState.fetchingError) ||
-        mediaStore.fetchState.isFetching
-      )
-    })
+    const resultsLoading = computed(() => mediaStore.fetchState.isFetching)
 
     /**
      * @type { ComputedRef<import('../../store/types').Media[]> }
@@ -107,7 +91,6 @@ export default defineComponent({
       isError,
       errorHeader,
       allMedia,
-      onLoadMore,
       fetchState,
       resultsLoading,
       resultCounts,

src/components/VImageGrid/VImageGrid.vue

@@ -7,16 +7,11 @@
         :image="image"
       />
     </div>
-    <h5 v-if="isError && !fetchState.isFinished" class="py-4">
+    <h5 v-if="isError" class="py-4">
       {{ fetchState.fetchingError }}
     </h5>
-    <footer class="pt-4">
-      <VLoadMore
-        v-if="canLoadMore && !fetchState.isFinished"
-        :is-fetching="fetchState.isFetching"
-        data-testid="load-more"
-        @onLoadMore="onLoadMore"
-      />
+    <footer>
+      <VLoadMore class="mt-4" />
     </footer>
   </section>
 </template>
@@ -29,50 +24,45 @@
  * or display 'No More Media'.
  * Used to display both image search results, and related images.
  */
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+
 import VLoadMore from '~/components/VLoadMore.vue'
 import VImageCell from '~/components/VImageGrid/VImageCell.vue'
 
-export default {
+export default defineComponent({
   name: 'ImageGrid',
   components: { VLoadMore, VImageCell },
   props: {
     images: {
       default: () => [],
     },
-    canLoadMore: {
-      type: Boolean,
-      default: true,
-    },
     fetchState: {
+      type: /** @type {import('~/use-fetch-state').FetchState} */ (Object),
       required: true,
     },
   },
-
-  computed: {
-    isError() {
-      return !!this.fetchState.fetchingError
-    },
-    fetchingErrorHeading() {
+  setup(props) {
+    const isError = computed(() => !!props.fetchState.fetchingError)
+    const fetchingErrorHeading = computed(() => {
       const type = this.$t('browse-page.search-form.image')
-      return this.$t('browse-page.fetching-error', { type })
-    },
-  },
-  methods: {
-    onLoadMore() {
-      this.$emit('load-more')
-    },
+      return this.$t('browse-page.fetching-error', { type }).toString()
+    })
+    return {
+      isError,
+      fetchingErrorHeading,
+    }
   },
-}
+})
 </script>
 
 <style scoped>
-.image-grid:after {
-  /**
+@screen md {
+  .image-grid:after {
+    /**
    * This keeps the last item in the results from expanding to fill
-   * all avaliable space, which can result in a final row with a
+   * all available space, which can result in a final row with a
    * single, 100% wide image.
    */
-  @screen md {
     content: '';
     flex-grow: 999999999;
   }

src/components/VLoadMore.vue

@@ -1,9 +1,10 @@
 <template>
   <VButton
+    v-show="canLoadMore"
     size="large"
     variant="full"
-    type="button"
     :disabled="isFetching"
+    data-testid="load-more"
     @click="onLoadMore"
   >
     {{ buttonLabel }}
@@ -12,33 +13,45 @@
 <script lang="ts">
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
+import { useMediaStore } from '~/stores/media'
+import { useSearchStore } from '~/stores/search'
+
 import VButton from '~/components/VButton.vue'
 
 export default defineComponent({
   name: 'VLoadMore',
   components: {
     VButton,
   },
-  props: {
-    isFetching: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup(_, { emit }) {
+  setup() {
     const { i18n } = useContext()
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
 
-    const buttonLabel = computed(() => {
-      return i18n.t('browse-page.load')
+    const canLoadMore = computed(() => {
+      return (
+        searchStore.searchTerm !== '' &&
+        mediaStore.fetchState.canFetch &&
+        mediaStore.resultCount > 0
+      )
     })
 
-    const onLoadMore = () => {
-      emit('onLoadMore')
+    const onLoadMore = async () => {
+      if (!canLoadMore.value) return
+
+      await mediaStore.fetchMedia({
+        shouldPersistMedia: true,
+      })
     }
+    const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+    const buttonLabel = computed(() => i18n.t('browse-page.load'))
 
     return {
       buttonLabel,
+      isFetching,
       onLoadMore,
+      canLoadMore,
     }
   },
 })

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-03-30T16:02:07+00:00\n"
+"POT-Creation-Date: 2022-04-05T15:43:52+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -680,13 +680,13 @@ msgid_plural "Over ###localeCount### results"
 msgstr[0] ""
 msgstr[1] ""
 
-#: src/components/VLoadMore.vue:32
+#: src/components/VLoadMore.vue:48
 msgctxt "browse-page.load"
 msgid "Load more results"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAllResultsGrid/VAllResultsGrid.vue:97
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:81
 msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
@@ -762,12 +762,12 @@ msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
 
-#: src/components/VImageGrid/VImageGrid.vue:56
+#: src/components/VImageGrid/VImageGrid.vue:47
 msgctxt "browse-page.search-form.image"
 msgid "images"
 msgstr ""
 
-#: src/components/VAllResultsGrid/VAllResultsGrid.vue:96
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:80
 msgctxt "browse-page.search-form.audio"
 msgid "audio"
 msgstr ""

src/pages/search/audio.vue

@@ -12,12 +12,7 @@
       :size="audioTrackSize"
       layout="row"
     />
-    <VLoadMore
-      v-if="canLoadMore && !fetchState.isFinished"
-      :is-fetching="fetchState.isFetching"
-      data-testid="load-more"
-      @onLoadMore="onLoadMore"
-    />
+    <VLoadMore />
   </section>
 </template>
 
@@ -29,14 +24,11 @@ import {
   useMeta,
 } from '@nuxtjs/composition-api'
 
-import { useLoadMore } from '~/composables/use-load-more'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
-
 import VLoadMore from '~/components/VLoadMore.vue'
-
 import VGridSkeleton from '~/components/VSkeleton/VGridSkeleton.vue'
 
 import { propTypes } from './search-page.types'
@@ -74,16 +66,11 @@ const AudioSearch = defineComponent({
       return i18n.t('browse-page.fetching-error', { type })
     })
 
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
-
     return {
       results,
       audioTrackSize,
       isError,
       errorHeader,
-
-      canLoadMore,
-      onLoadMore,
     }
   },
   head: {},

src/pages/search/image.vue

@@ -1,17 +1,11 @@
 <template>
-  <VImageGrid
-    :images="results"
-    :can-load-more="canLoadMore"
-    :fetch-state="fetchState"
-    @load-more="onLoadMore"
-  />
+  <VImageGrid :images="results" :fetch-state="fetchState" />
 </template>
 
 <script>
 import { computed, defineComponent, useMeta } from '@nuxtjs/composition-api'
 
 import { propTypes } from '~/pages/search/search-page.types'
-import { useLoadMore } from '~/composables/use-load-more'
 
 import VImageGrid from '~/components/VImageGrid/VImageGrid.vue'
 
@@ -23,8 +17,7 @@ const ImageSearch = defineComponent({
     useMeta({ title: `${props.searchTerm} | Openverse` })
 
     const results = computed(() => props.resultItems.image)
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
-    return { canLoadMore, onLoadMore, results }
+    return { results }
   },
   head: {},
 })

src/pages/search/index.vue

@@ -1,11 +1,10 @@
 <template>
-  <VAllResultsGrid :can-load-more="canLoadMore" @load-more="onLoadMore" />
+  <VAllResultsGrid />
 </template>
 
 <script>
 import { useMeta, defineComponent } from '@nuxtjs/composition-api'
 
-import { useLoadMore } from '~/composables/use-load-more'
 import { propTypes } from '~/pages/search/search-page.types'
 
 import VAllResultsGrid from '~/components/VAllResultsGrid/VAllResultsGrid.vue'
@@ -16,9 +15,6 @@ const SearchIndex = defineComponent({
   props: propTypes,
   setup(props) {
     useMeta({ title: `${props.searchTerm} | Openverse` })
-
-    const { canLoadMore, onLoadMore } = useLoadMore(props)
-    return { canLoadMore, onLoadMore }
   },
   head: {
     meta: [