@xiul/xdv-fetch-get-data-mixin/src/XdvFetchGetDataMixin.js

Mixin to get data from local json file or picsum, unsplash api

export const XdvFetchGetDataMixin = (superclass) => {
  return class extends superclass {

    static get properties() {
      return {
        apiUrl: { type: String },
        data: { type: Object },
        slideUrls: { type: String },
        urls: { type: Array },
        slidesNumber: { type: Number }
      };
    }

    constructor () {
      super()

      this.apiUrl = this.dataset.apiUrl
      this.data = {}
      this.slideUrls = ''
      this.urls = false 
      this.slidesNumber = false 
    }

    async getData () {
      // url from api.unsplash.com/photos
      if (this.apiUrl.startsWith('https://api.unsplash.com/photos/')) {
        this.data = await fetch(this.apiUrl)
          .then((response) => response.json())
          .then((json) => json
        );
        this.urls = await this.data.map(item => eval(`item.${this.slideUrls}`))
        this.slidesNumber = await this.urls.length - 1
        return
      }
      // url from api.unsplash.com/search/photos/
      if (this.apiUrl.startsWith('https://api.unsplash.com/search/photos/')) {
        this.data = await fetch(this.apiUrl)
          .then((response) => response.json())
          .then((json) => json
        );
        this.urls = await this.data.results.map(item => eval(`item.${this.slideUrls}`))
        this.slidesNumber = await this.urls.length - 1
        return
      }

      // url from picsum list
      if (this.apiUrl.startsWith('https://picsum.photos/v2/')) {
        this.data = await fetch(this.apiUrl)
          .then((response) => response.json())
          .then((json) => json
        );
        this.urls = await this.data.map(item => item[this.slideUrls])
        this.slidesNumber = await this.urls.length - 1
        return
      }

      // url from json file in mocks
      this.data = await fetch(this.apiUrl)
        .then((response) => response.json())
        .then((json) => json
        );
        this.urls = await eval(`this.data.${this.slideUrls}`)
        this.slidesNumber = await this.urls.length - 1
    }
  }

}