refactor: add fetchJson function

src/components/layout/sendTip/GiphySearch.vue

@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import { fetchJson } from '../../../utils';
 import Loading from '../../Loading.vue';
 import SearchInput from '../SearchInput.vue';
 
@@ -68,8 +69,12 @@ export default {
     },
     async search() {
       try {
-        const results = await fetch(`https://api.giphy.com/v1/gifs/${this.query ? `search?q=${this.query}&` : 'trending?'}api_key=${process.env.VUE_APP_GIPHY_API_KEY}&limit=10&offset=${this.offset}`);
-        const { data, pagination } = await results.json();
+        const url = new URL(`https://api.giphy.com/v1/gifs/${this.query ? 'search' : 'trending'}`);
+        if (this.query) url.searchParams.set('q', this.query);
+        url.searchParams.set('limit', 10);
+        url.searchParams.set('offset', this.offset);
+        url.searchParams.set('api_key', process.env.VUE_APP_GIPHY_API_KEY);
+        const { data, pagination } = await fetchJson(url);
         this.resultsCount = `${pagination.total_count.toLocaleString()} Results`;
         this.results.push(...data.map(({ images }) => ({
           still: images.fixed_width_still.url,

src/components/layout/sendTip/SendPost.vue

@@ -60,6 +60,7 @@
 
 <script>
 import { mapState } from 'vuex';
+import { fetchJson } from '../../../utils';
 import { EventBus } from '../../../utils/eventBus';
 import Backend from '../../../utils/backend';
 import MessageInput from '../../MessageInput.vue';
@@ -149,14 +150,13 @@ export default {
       const formData = new FormData();
       formData.append('image', event.target.files[0]);
       try {
-        const result = await fetch('https://api.imgur.com/3/image.json', {
+        const { data } = await fetchJson('https://api.imgur.com/3/image.json', {
           method: 'post',
           body: formData,
           headers: {
             Authorization: `Client-ID ${process.env.VUE_APP_IMGUR_API_CLIENT_ID}`,
           },
         });
-        const { data } = await result.json();
         this.media.push({ link: data.link, deletehash: data.deletehash });
       } finally { this.uploadingMedia = false; }
     },

src/store/index.js

@@ -11,7 +11,7 @@ import modals from './plugins/modals';
 import backend from './modules/backend';
 import aeternity from './modules/aeternity';
 import Backend from '../utils/backend';
-import { handleUnknownError } from '../utils';
+import { handleUnknownError, fetchJson } from '../utils';
 
 Vue.use(Vuex);
 
@@ -75,8 +75,7 @@ export default new Vuex.Store({
     },
     async initMiddleware({ commit }) {
       const specUrl = `${process.env.VUE_APP_MIDDLEWARE_URL}/swagger/swagger.json`;
-      const res = await fetch(specUrl);
-      const spec = await res.json();
+      const spec = await fetchJson(specUrl);
 
       spec.paths = {
         ...spec.paths,

src/utils/index.js

@@ -64,3 +64,9 @@ export const blockToDate = (goalBlock, height) => {
   const diff = goalBlock - height;
   return new Date(diff * 180000 + Date.now());
 };
+
+export const fetchJson = async (...args) => {
+  const response = await fetch(...args);
+  if (!response.ok) throw new Error(`Request failed with ${response.status}`);
+  return response.json();
+};