Move useLoadMore functionality in the Load More component

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>
 

src/components/VImageGrid/VImageGrid.vue

@@ -11,12 +11,7 @@
       {{ fetchState.fetchingError }}
     </h5>
     <footer class="pt-4">
-      <VLoadMore
-        v-if="canLoadMore && !fetchState.isFinished"
-        :is-fetching="fetchState.isFetching"
-        data-testid="load-more"
-        @onLoadMore="onLoadMore"
-      />
+      <VLoadMore />
     </footer>
   </section>
 </template>
@@ -66,13 +61,14 @@ export default {
 </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,43 @@
 <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(
+      () =>
+        searchStore.searchTerm !== '' &&
+        mediaStore.fetchState.canFetch &&
+        mediaStore.resultCount > 0
+    )
+    const onLoadMore = async () => {
+      if (!canLoadMore.value) return
 
-    const onLoadMore = () => {
-      emit('onLoadMore')
+      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

@@ -678,13 +678,13 @@ msgid_plural "Over ###localeCount### results"
 msgstr[0] ""
 msgstr[1] ""
 
-#: src/components/VLoadMore.vue:32
+#: src/components/VLoadMore.vue:46
 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:91
 msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
@@ -760,12 +760,12 @@ msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
 
-#: src/components/VImageGrid/VImageGrid.vue:56
+#: src/components/VImageGrid/VImageGrid.vue:51
 msgctxt "browse-page.search-form.image"
 msgid "images"
 msgstr ""
 
-#: src/components/VAllResultsGrid/VAllResultsGrid.vue:96
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:90
 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>
 

test/unit/specs/components/image-grid.spec.js

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/vue'
 import VueI18n from 'vue-i18n'
+import { createPinia, PiniaVuePlugin } from 'pinia'
+import { createLocalVue } from '@vue/test-utils'
 
 import messages from '~/locales/en.json'
 
@@ -17,43 +19,34 @@ const propsData = {
     { id: 'i2', url: 'http://localhost:8080/i2.jpg', title: 'image2' },
     { id: 'i3', url: 'http://localhost:8080/i3.svg', title: 'image3' },
   ],
-  canLoadMore: false,
   fetchState: {
     isFetching: false,
     fetchingError: null,
   },
 }
-const options = {
-  props: propsData,
-  stubs: ['NuxtLink', 'VLicense'],
-  mocks: {
-    $nuxt: {
-      context: {
-        i18n,
-      },
-    },
-  },
-}
+
 describe('VImageGrid', () => {
-  it('renders images without load more button if canLoadMore is false', () => {
-    options.props.canLoadMore = false
-    render(VImageGrid, options)
-    expect(screen.queryAllByRole('img').length).toEqual(propsData.images.length)
-    expect(screen.queryAllByRole('figure').length).toEqual(
-      propsData.images.length
-    )
-    expect(screen.queryByTestId('load-more')).not.toBeInTheDocument()
+  let localVue
+  let pinia
+  let options
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(PiniaVuePlugin)
+    pinia = createPinia()
+    options = {
+      localVue,
+      pinia,
+      props: propsData,
+      stubs: ['NuxtLink', 'VLicense'],
+      mocks: { $nuxt: { context: { i18n } } },
+    }
   })
-
-  it('renders images and load more button if canLoadMore is true', async () => {
-    options.props.canLoadMore = true
+  it('renders images without load more button', () => {
     render(VImageGrid, options)
     expect(screen.queryAllByRole('img').length).toEqual(propsData.images.length)
     expect(screen.queryAllByRole('figure').length).toEqual(
       propsData.images.length
     )
-    const loadMoreButton = screen.queryByTestId('load-more')
-    expect(loadMoreButton).toBeVisible()
-    expect(loadMoreButton).toHaveTextContent(messages['browse-page'].load)
+    expect(screen.queryByTestId('load-more')).not.toBeVisible()
   })
 })

test/unit/specs/components/related-images.spec.js

@@ -1,25 +1,37 @@
 import VueI18n from 'vue-i18n'
 import { createLocalVue } from '@vue/test-utils'
 import { render, screen } from '@testing-library/vue'
+import { createPinia, PiniaVuePlugin } from 'pinia'
+
+import messages from '~/locales/en.json'
 
 import VRelatedImages from '~/components/VImageDetails/VRelatedImages.vue'
 
 const media = [
   { id: 'img1', url: 'https://wp.org/img1.jpg' },
   { id: 'img2', url: 'https://wp.org/img2.jpg' },
 ]
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: messages },
+})
 const localVue = createLocalVue()
 localVue.use(VueI18n)
-
+localVue.use(PiniaVuePlugin)
 describe('RelatedImage', () => {
-  let props = null
-  let options = null
+  let props
+  let options
+  let pinia
   beforeEach(() => {
+    pinia = createPinia()
     props = { media, fetchState: { isFetching: false } }
     options = {
       localVue,
+      pinia,
       propsData: props,
       stubs: ['VLicense', 'NuxtLink'],
+      mocks: { $nuxt: { context: { i18n } } },
     }
   })
   it('should render an image grid', () => {