Use new proxy + axios for requests

package.json

@@ -10,8 +10,8 @@
     "deploy": "npm run build && deploy.sh"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "bulma": "^0.7.2",
-    "unsplash-js": "^4.8.0",
     "vue": "^2.5.21",
     "vue-resize": "^0.4.5"
   },

src/App.vue

@@ -4,11 +4,8 @@
     id="app"
     v-if="loaded"
   >
-
-    <not-configured v-if="!$Unsplash.Instance" />
-
     <preview-selected
-      v-else-if="photo"
+      v-if="photo"
       :disabled="disabled"
       :photo="photo"
       @clear-photo="clearPhoto()"
@@ -30,7 +27,6 @@
 </template>
 
 <script>
-import NotConfigured from './components/not-configured'
 import PreviewSelected from './components/preview-selected'
 import UnsplashSelector from './components/unsplash-selector'
 
@@ -46,7 +42,6 @@ export default {
     }
   },
   components: {
-    NotConfigured,
     PreviewSelected,
     UnsplashSelector,
   },
@@ -88,14 +83,6 @@ export default {
       }
 
       this.disabled = this.element.disabled
-
-      // Instantiate Unsplash API
-      if(this.element.config && this.element.config.accessKey && this.element.config.secretKey) {
-        this.$Unsplash.createInstance({
-          applicationId: this.element.config.accessKey,
-          secret: this.element.config.secretKey
-        })
-      }
       this.loaded = true
       this.$CustomElement.updateSize()
     })

src/components/unsplash-selector-search.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { toJson } from 'unsplash-js'
+import unsplash from '../unsplashApi'
 import UnsplashSelectorResults from './unsplash-selector-results'
 
 export default {
@@ -53,12 +53,9 @@ export default {
   methods: {
     searchPhotos(page) {
       this.nextPageToLoad = page ? page : this.nextPageToLoad
-      const unsplash = this.$Unsplash.Instance
-      if(this.searchTerm && unsplash) {
-        unsplash.search.photos(this.searchTerm, this.nextPageToLoad)
-        .then(toJson)
-        .then(json => {
-          this.searchResponse = json
+      if(this.searchTerm) {
+        unsplash.searchPhotos(this.searchTerm, this.nextPageToLoad).then(response =>{
+          this.searchResponse = response.data
           if(this.searchResults === null) {
             this.searchResults = this.searchResponse.results
           } else {
@@ -74,7 +71,7 @@ export default {
     },
     selectPhoto(photo) {
       // Tell Unsplash that the photo was selected
-      this.$Unsplash.Instance.photos.downloadPhoto(photo)
+      unsplash.trackDownload(photo.id)
       this.$emit('select-photo', photo)
     },
   },

src/main.js

@@ -3,15 +3,13 @@ import VueMasonry from 'vue-masonry-css'
 import VueResize from 'vue-resize'
 import App from './App.vue'
 import KenticoCloudCustomElement from './plugins/kentico-cloud-custom-element'
-import Unsplash from './plugins/unsplash'
 
 import 'bulma/css/bulma.css'
 import 'vue-resize/dist/vue-resize.css'
 
 Vue.use(VueMasonry);
 Vue.use(VueResize);
 Vue.use(KenticoCloudCustomElement)
-Vue.use(Unsplash)
 
 Vue.config.productionTip = false
 

src/unsplashApi.js

@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+const _baseUrl = "https://kontentunsplash.azurewebsites.net"
+
+export default {
+  async searchPhotos(keyword, page) {
+    const url = `${_baseUrl}/search/photos?query=${encodeURIComponent(keyword)}&page=${page}`
+    return await axios.get(url);
+  },
+  trackDownload(id) {
+    const url = `${_baseUrl}/photos/${id}/download`
+    axios.get(url);
+  }
+}