feat: enable usage of navigationFilter and preFilterFetch (#54)

* feat(compatibility): add feature for navigation filter and ensure compatibility to new component versions
* fix: make env variables accessible in Nuxt module (#53)

BREAKING CHANGE:
The original fsxa-api class was removed and the new ones FSXAProxyApi and FSXARemoteApi are used. Their have a slightly different, but better, method signatures. For more information, please read the migration guide in the CHANGELOG of the FSXA-API.

Environment variables FSXA_HOST and FSXA_PORT has be configured in your production environments. Make sure to set the variables in your PWA deployments. In testing scenarios, localhost:3000 will be used.

Dockerfile.template

@@ -9,7 +9,7 @@ ENV FSXA_MODE=...
 ENV FSXA_TENANT_ID=...
 COPY package*.json ./
 RUN npm ci
-COPY . . 
+COPY . .
 RUN npx nuxt build --config-file nuxt.config.ts --standalone \
   && rm -rf node_modules && \
   NODE_ENV=production npm ci --production --silent \
@@ -25,6 +25,8 @@ USER node
 EXPOSE 3000
 ENV NUXT_HOST=0.0.0.0
 ENV NUXT_PORT=3000
+ENV FSXA_HOST=...
+ENV FSXA_PORT=...
 ENV FSXA_API_KEY=...
 ENV FSXA_CAAS=...
 ENV FSXA_PROJECT_ID=...
@@ -33,4 +35,4 @@ ENV FSXA_MODE=...
 ENV FSXA_TENANT_ID=...
 ENV NODE_ENV=production
 ENTRYPOINT ["dumb-init", "--"]
-CMD [ "node", "--max-old-space-size=200", "/usr/src/nuxt-app/node_modules/.bin/nuxt-start" ]
+CMD [ "node", "--max-old-space-size=200", "/usr/src/nuxt-app/node_modules/.bin/nuxt-start" ]

components/fsxa/sections/DealerMap.tsx

@@ -16,8 +16,8 @@ class DealerMap extends FSXABaseSection {
   }
 
   async fetchItems() {
-    const items = await this.fsxaApi.fetchByFilter(
-      [
+    const items = await this.fsxaApi.fetchByFilter({
+      filters: [
         {
           field: 'entityType',
           operator: ComparisonQueryOperatorEnum.EQUALS,
@@ -29,8 +29,8 @@ class DealerMap extends FSXABaseSection {
           value: 'locations'
         }
       ],
-      this.locale
-    )
+      locale: this.locale
+    })
     this.setStoredItem('dealer_map_locations', items)
   }
 

components/fsxa/sections/products/CategoryProducts.tsx

@@ -57,7 +57,10 @@ class CategoryProducts extends FSXABaseSection<Payload> {
         value: this.payload.filterParams.category
       })
     }
-    const response = await this.fsxaApi.fetchByFilter(params, this.locale)
+    const response = await this.fsxaApi.fetchByFilter({
+      filters: params,
+      locale: this.locale
+    })
     this.setStoredItem(this.storedKey, response)
   }
 

customRoutes/download.ts

@@ -15,10 +15,10 @@ export default {
         error: 'No identifier was specified'
       })
     }
-    const media = await context.fsxaAPI.fetchElement(
-      req.params.identifier,
-      req.query.locale as string
-    )
+    const media = await context.fsxaAPI.fetchElement({
+      id: req.params.identifier,
+      locale: req.query.locale as string
+    })
     if (media.resolutions && media.resolutions.ORIGINAL) {
       return res.redirect(media.resolutions.ORIGINAL.url)
     }

nuxt.config.ts

@@ -23,6 +23,10 @@ const config: NuxtConfig = {
    ** env variables
    */
   publicRuntimeConfig: {
+    NUXT_HOST: process.env.NUXT_HOST,
+    NUXT_PORT: process.env.NUXT_PORT,
+    FSXA_HOST: process.env.FSXA_HOST,
+    FSXA_PORT: process.env.FSXA_PORT,
     FSXA_MAPS_APIKEY: process.env.FSXA_MAPS_APIKEY
   },
   privateRuntimeConfig: {},
@@ -56,7 +60,15 @@ const config: NuxtConfig = {
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
-    'fsxa-nuxt-module'
+    [
+      'fsxa-nuxt-module',
+      {
+        NUXT_HOST: process.env.NUXT_HOST,
+        NUXT_PORT: process.env.NUXT_PORT,
+        FSXA_HOST: process.env.FSXA_HOST,
+        FSXA_PORT: process.env.FSXA_PORT
+      }
+    ]
   ],
   /*
    ** Axios module configuration