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/composables/use-fetch-state.ts

@@ -42,10 +42,33 @@ const canFetchStatuses: Status[] = [statuses.IDLE, statuses.SUCCESS]
 
 /* Composable */
 
-export const useFetchState = (initialState = statuses.IDLE) => {
-  const fetchStatus: Ref<Status> = ref(initialState)
-  const fetchError: Ref<string | null> = ref(null)
-  const isFinished: Ref<boolean> = ref(false)
+export const useFetchState = (state?: FetchState | undefined) => {
+  const initialState: {
+    status: Status
+    fetchError: null | string
+    isFinished: boolean
+  } = {
+    status: statuses.IDLE,
+    fetchError: null,
+    isFinished: false,
+  }
+  if (state) {
+    if (state.isFetching) {
+      initialState.status = statuses.FETCHING
+    } else if (state.fetchingError) {
+      initialState.status = statuses.ERROR
+      initialState.fetchError = state.fetchingError
+    } else if (state.hasStarted) {
+      initialState.status = statuses.SUCCESS
+    }
+    if (state.isFinished) {
+      initialState.isFinished = true
+    }
+  }
+
+  const fetchStatus: Ref<Status> = ref(initialState.status)
+  const fetchError: Ref<string | null> = ref(initialState.fetchError)
+  const isFinished: Ref<boolean> = ref(initialState.isFinished)
 
   watch(fetchStatus, () => {
     if (nonErrorStatuses.includes(fetchStatus.value)) {

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

@@ -2,6 +2,9 @@ import Vuex from 'vuex'
 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'
 
@@ -14,29 +17,39 @@ const serviceMock = jest.fn(() =>
   })
 )
 const failedMock = jest.fn(() => Promise.reject('No result'))
-
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: messages },
+})
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(VueI18n)
+localVue.use(PiniaVuePlugin)
 // without nbFetching property on $nuxt, Nuxt's `fetch` hook throws an error:
 //  [Vue warn]: Error in beforeMount hook (Promise/async):
 //  "TypeError: Cannot read property 'nbFetching' of undefined"
 localVue.prototype.$nuxt = {
   nbFetching: 0,
+  context: i18n,
 }
 
 describe('RelatedImage', () => {
-  let props = null
-  let options = null
+  let props
+  let options
+  let pinia
   beforeEach(() => {
+    pinia = createPinia()
     props = {
       imageId: 'foo',
       service: { getRelatedMedia: serviceMock },
     }
     options = {
       localVue,
+      pinia,
       propsData: props,
       stubs: ['VLicense', 'NuxtLink'],
+      mocks: { $nuxt: { context: { i18n } } },
     }
   })
   it('should render an image grid', async () => {