initial commit with client plugin

Author: webmint

package-lock.json

@@ -8,12 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-vuex": "^4.4.6",
     "@vue/cli-service": "~4.4.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "babel-eslint": "^10.1.0",

package.json

@@ -1,8 +1,11 @@
 import Vue from 'vue';
 import App from './App.vue';
+import '@/plugins/httpClient';
+import store from './store';
 
 Vue.config.productionTip = false;
 
 new Vue({
+  store,
   render: (h) => h(App),
 }).$mount('#app');

src/main.js

@@ -0,0 +1,44 @@
+import axios from 'axios';
+import Vue from 'vue';
+import { capitalizeFirstLetter } from './helpers';
+
+export default class HttpClient {
+  constructor(baseConfig, methods) {
+    const observableRequests = Vue.observable({ requests: [] });
+
+    this.client = axios.create(baseConfig);
+    this.methodsList = methods;
+    this.awakenRequests = observableRequests;
+
+    this.methodsList.forEach(({ name, config, setCustomLoader }) => {
+      if (setCustomLoader) {
+        Object.defineProperty(this, `isLoading${capitalizeFirstLetter(name)}`, {
+          get: () => this.awakenRequests.requests.includes(name),
+        });
+      }
+      this[name] = async () => {
+        try {
+          this.addToAwakenRequests(name);
+          const result = await this.client.request(config);
+          this.removeFromAwakenRequests(name);
+          return result;
+        } catch {
+          return new Error();
+        }
+      };
+    });
+  }
+
+  addToAwakenRequests(name) {
+    this.awakenRequests.requests.push(name);
+  }
+
+  removeFromAwakenRequests(name) {
+    this.awakenRequests.requests = this.awakenRequests.requests
+      .filter((r) => r !== name);
+  }
+
+  get isLoading() {
+    return !!this.awakenRequests.requests.length;
+  }
+}

src/plugins/httpClient/HttpClient.js

@@ -0,0 +1,13 @@
+export const baseConfig = {
+  baseURL: 'https://jsonplaceholder.typicode.com',
+};
+
+export const methodsList = [
+  {
+    name: 'getPosts',
+    setCustomLoader: true,
+    config: {
+      url: '/posts',
+    },
+  },
+];

src/plugins/httpClient/configs.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export function capitalizeFirstLetter(string) {
+  return string[0].toUpperCase() + string.slice(1);
+}

src/plugins/httpClient/helpers.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import { baseConfig, methodsList } from './configs';
+import httpClientPlugin from './plugin';
+
+Vue.use(httpClientPlugin, { baseConfig, methodsList });

src/plugins/httpClient/index.js

@@ -0,0 +1,22 @@
+import HttpClient from './HttpClient';
+
+const httpClientPlugin = {
+  install(Vue, options) {
+    if (!options || !options.baseConfig) {
+      throw new Error('Please initialise plugin with baseConfig.');
+    }
+    if (!options.baseConfig.baseURL) {
+      throw new Error('baseURL in baseConfig is required');
+    }
+    if (!options || !options.methodsList) {
+      throw new Error('Please initialise plugin with methodsList');
+    }
+    if (options.methodsList.length < 1) {
+      throw new Error('Please specify at least one method in list');
+    }
+    // eslint-disable-next-line no-param-reassign
+    Vue.prototype.$httpClient = new HttpClient(options.baseConfig, options.methodsList);
+  },
+};
+
+export default httpClientPlugin;

src/plugins/httpClient/plugin.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+    async myAction() {
+      // eslint-disable-next-line no-underscore-dangle
+      const { data } = await this._vm.$httpClient.getPosts();
+      console.log(data);
+    },
+  },
+  modules: {
+  },
+});