Create a single media-service data fetching object

src/composables/use-related.js

@@ -1,14 +1,10 @@
-import AudioService from '~/data/audio-service'
-import ImageService from '~/data/image-service'
 import { ref, useFetch } from '@nuxtjs/composition-api'
-import { AUDIO, IMAGE } from '~/constants/media'
-
-const services = { [AUDIO]: AudioService, [IMAGE]: ImageService }
+import { mediaServices } from '~/store/media'
 
 export default function useRelated({
   mediaType,
   mediaId,
-  service = services[mediaType],
+  service = mediaServices[mediaType],
 }) {
   const media = ref([])
   // fetch and fetchState are available as this.$fetch and this.$fetchState

src/data/api-service.js

@@ -62,7 +62,7 @@ export const createApiService = (baseUrl = process.env.apiUrl) => {
      * @returns {Promise<import('axios').AxiosResponse<T>>} response  The API response object
      */
     query(resource, params) {
-      return client.get(resource, { params })
+      return client.get(`${resource}/`, { params })
     },
 
     /**

src/data/media-service.js

@@ -0,0 +1,71 @@
+import ApiService from '~/data/api-service'
+
+import decodeMediaData from '~/utils/decode-media-data'
+import { AUDIO, IMAGE } from '~/constants/media'
+
+const slugs = {
+  [AUDIO]: 'audio',
+  [IMAGE]: 'images',
+}
+
+const MediaService = (mediaType) => ({
+  slug: slugs[mediaType],
+  /**
+   * Decodes the text data to avoid encoding problems.
+   * Also, converts the results from an array of media objects into an object with
+   * media id as keys.
+   * @param data
+   * @returns {*}
+   */
+  transformResults(data) {
+    data.results = data.results.reduce((acc, item) => {
+      acc[item.id] = decodeMediaData(item, mediaType)
+      return acc
+    }, {})
+    return data
+  },
+
+  /**
+   * Search for media items by keyword.
+   * @param {Object} params
+   * @return {Promise<{data: any}>}
+   */
+  search(params) {
+    return ApiService.query(this.slug, params)
+  },
+
+  /**
+   * Retrieve media details by its id.
+   * SSR-called
+   * @param {object} params
+   * @param {string} params.id
+   * @return {Promise<{data: any}>}
+   */
+  getMediaDetail(params) {
+    if (!params.id) {
+      throw new Error(
+        `MediaService.getMediaDetail() id parameter required to retrieve ${mediaType} details.`
+      )
+    }
+
+    return ApiService.get(this.slug, params.id)
+  },
+
+  /**
+   * Retrieve related media
+   * @param {object} params
+   * @param {string} params.id
+   * @return {Promise<{data: any}>}
+   */
+  getRelatedMedia(params) {
+    if (!params.id) {
+      throw new Error(
+        `MediaService.getRelatedMedia() id parameter required to retrieve related media.`
+      )
+    }
+
+    return ApiService.get(this.slug, `${params.id}/related`)
+  },
+})
+
+export default MediaService

src/store/media.js

@@ -26,8 +26,8 @@ import {
 } from '~/constants/usage-data-analytics-types'
 import { AUDIO, IMAGE, VIDEO, ALL_MEDIA } from '~/constants/media'
 import { USAGE_DATA } from '~/constants/store-modules'
-import AudioService from '~/data/audio-service'
-import ImageService from '~/data/image-service'
+import MediaService from '~/data/media-service'
+import MockMediaService from '~/mocks/mock-media-service'
 
 // Note: images should always be first here,
 // and this only includes 'real' media. ALL is a
@@ -69,7 +69,11 @@ export const state = () => ({
   image: {},
 })
 
-export const createActions = (services) => ({
+export const mediaServices = process.env.isE2e
+  ? { [AUDIO]: MockMediaService(AUDIO), [IMAGE]: MockMediaService(IMAGE) }
+  : { [AUDIO]: MediaService(AUDIO), [IMAGE]: MediaService(IMAGE) }
+
+export const createActions = (services = mediaServices) => ({
   /**
    *
    * @param {import('vuex').ActionContext} context
@@ -258,6 +262,7 @@ export const createActions = (services) => ({
     }
   },
 })
+const actions = createActions()
 
 export const getters = {
   /**
@@ -420,9 +425,6 @@ export const mutations = {
   },
 }
 
-const mediaServices = { [AUDIO]: AudioService, [IMAGE]: ImageService }
-const actions = createActions(mediaServices)
-
 export default {
   state,
   getters,