⚡ Improving performance

2019-11-28 20:41:52 +05:30
parent 2a81c2611b
commit b10a209daf
28 changed files with 1028 additions and 585 deletions
--- a/store/index.js
+++ b/store/index.js
@@ -1,20 +1,18 @@
-import Vuex from 'vuex';
-import state from './state';
-import VuexPersist from 'vuex-persist'
+import Vuex from "vuex";
+import state from "./state";
+import VuexPersist from "vuex-persist";

 export default {
  install(Vue) {
    Vue.use(Vuex);

    const vuexLocalStorage = new VuexPersist({
-      key: 'vuex',
+      key: "vuex",
      storage: window.localStorage,
-      reducer: ({
-        ...request
-      }) => ({
+      reducer: ({ ...request }) => ({
        ...request
      })
-    })
+    });

    const store = new Vuex.Store({
      state,
@@ -22,5 +20,5 @@ export default {
    });

    Vue.prototype.$store = store;
-  },
+  }
 };
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -1,73 +1,73 @@
 export default {
-  setState({request}, {attribute, value}) {
-    request[attribute] = value
+  setState({ request }, { attribute, value }) {
+    request[attribute] = value;
  },

-  setGQLState({gql}, {attribute, value}) {
+  setGQLState({ gql }, { attribute, value }) {
    gql[attribute] = value;
  },

-  addGQLHeader({gql}, object) {
+  addGQLHeader({ gql }, object) {
    gql.headers.push(object);
  },

-  removeGQLHeader({gql}, index) {
+  removeGQLHeader({ gql }, index) {
    gql.headers.splice(index, 1);
  },

-  setGQLHeaderKey({gql}, {index, value}) {
+  setGQLHeaderKey({ gql }, { index, value }) {
    gql.headers[index].key = value;
  },

-  setGQLHeaderValue({gql}, {index, value}) {
+  setGQLHeaderValue({ gql }, { index, value }) {
    gql.headers[index].value = value;
  },

-  addHeaders({request}, value) {
+  addHeaders({ request }, value) {
    request.headers.push(value);
  },

-  removeHeaders({request}, index) {
-    request.headers.splice(index, 1)
+  removeHeaders({ request }, index) {
+    request.headers.splice(index, 1);
  },

-  setKeyHeader({request}, {index, value}) {
-    request.headers[index].key = value
+  setKeyHeader({ request }, { index, value }) {
+    request.headers[index].key = value;
  },

-  setValueHeader({request}, {index, value}) {
-    request.headers[index].value = value
+  setValueHeader({ request }, { index, value }) {
+    request.headers[index].value = value;
  },

-  addParams({request}, value) {
+  addParams({ request }, value) {
    request.params.push(value);
  },

-  removeParams({request}, index) {
-    request.params.splice(index, 1)
+  removeParams({ request }, index) {
+    request.params.splice(index, 1);
  },

-  setKeyParams({request}, {index, value}) {
-    request.params[index].key = value
+  setKeyParams({ request }, { index, value }) {
+    request.params[index].key = value;
  },

-  setValueParams({request}, {index, value}) {
-    request.params[index].value = value
+  setValueParams({ request }, { index, value }) {
+    request.params[index].value = value;
  },

-  addBodyParams({request}, value) {
+  addBodyParams({ request }, value) {
    request.bodyParams.push(value);
  },

-  removeBodyParams({request}, index) {
-    request.bodyParams.splice(index, 1)
+  removeBodyParams({ request }, index) {
+    request.bodyParams.splice(index, 1);
  },

-  setKeyBodyParams({request}, {index, value}) {
-    request.bodyParams[index].key = value
+  setKeyBodyParams({ request }, { index, value }) {
+    request.bodyParams[index].key = value;
  },

-  setValueBodyParams({request}, {index, value}) {
-    request.bodyParams[index].value = value
-  },
+  setValueBodyParams({ request }, { index, value }) {
+    request.bodyParams[index].value = value;
+  }
 };
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue from "vue";

 export const SETTINGS_KEYS = [
  /**
@@ -61,20 +61,27 @@ export const SETTINGS_KEYS = [

 export const state = () => ({
  settings: {},
-  collections: [{
-    name: 'My Collection',
-    folders: [],
-    requests: [],
-  }],
+  collections: [
+    {
+      name: "My Collection",
+      folders: [],
+      requests: []
+    }
+  ],
  selectedRequest: {},
-  editingRequest: {},
+  editingRequest: {}
 });

 export const mutations = {
-
-  applySetting({settings}, setting) {
-    if (setting == null || !(setting instanceof Array) || setting.length !== 2) {
-      throw new Error("You must provide a setting (array in the form [key, value])");
+  applySetting({ settings }, setting) {
+    if (
+      setting == null ||
+      !(setting instanceof Array) ||
+      setting.length !== 2
+    ) {
+      throw new Error(
+        "You must provide a setting (array in the form [key, value])"
+      );
    }

    const [key, value] = setting;
@@ -103,151 +110,160 @@ export const mutations = {
    }
  },

-  addNewCollection({collections}, collection) {
+  addNewCollection({ collections }, collection) {
    collections.push({
-      name: '',
+      name: "",
      folders: [],
      requests: [],
-      ...collection,
-    })
-  },
-
-  removeCollection({collections}, payload) {
-    const {
-      collectionIndex
-    } = payload;
-    collections.splice(collectionIndex, 1)
-  },
-
-  editCollection({collections}, payload) {
-    const {
-      collection,
-      collectionIndex
-    } = payload
-    collections[collectionIndex] = collection
-  },
-
-  addNewFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folder
-    } = payload;
-    collections[collectionIndex].folders.push({
-      name: '',
-      requests: [],
-      ...folder,
+      ...collection
    });
  },

-  editFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folder,
-      folderIndex
-    } = payload;
-    Vue.set(collections[collectionIndex].folders, folderIndex, folder)
+  removeCollection({ collections }, payload) {
+    const { collectionIndex } = payload;
+    collections.splice(collectionIndex, 1);
  },

-  removeFolder({collections}, payload) {
-    const {
-      collectionIndex,
-      folderIndex
-    } = payload;
-    collections[collectionIndex].folders.splice(folderIndex, 1)
+  editCollection({ collections }, payload) {
+    const { collection, collectionIndex } = payload;
+    collections[collectionIndex] = collection;
  },

-  addRequest({collections}, payload) {
-    const {
-      request
-    } = payload;
+  addNewFolder({ collections }, payload) {
+    const { collectionIndex, folder } = payload;
+    collections[collectionIndex].folders.push({
+      name: "",
+      requests: [],
+      ...folder
+    });
+  },
+
+  editFolder({ collections }, payload) {
+    const { collectionIndex, folder, folderIndex } = payload;
+    Vue.set(collections[collectionIndex].folders, folderIndex, folder);
+  },
+
+  removeFolder({ collections }, payload) {
+    const { collectionIndex, folderIndex } = payload;
+    collections[collectionIndex].folders.splice(folderIndex, 1);
+  },
+
+  addRequest({ collections }, payload) {
+    const { request } = payload;

    // Request that is directly attached to collection
    if (request.folder === -1) {
      collections[request.collection].requests.push(request);
-      return
+      return;
    }

-    collections[request.collection].folders[request.folder].requests.push(request);
+    collections[request.collection].folders[request.folder].requests.push(
+      request
+    );
  },

-  editRequest({collections}, payload) {
+  editRequest({ collections }, payload) {
    const {
      requestOldCollectionIndex,
      requestOldFolderIndex,
      requestOldIndex,
      requestNew,
      requestNewCollectionIndex,
-      requestNewFolderIndex,
-    } = payload
+      requestNewFolderIndex
+    } = payload;

-    const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
-    const changedFolder = requestOldFolderIndex !== requestNewFolderIndex
-    const changedPlace = changedCollection || changedFolder
+    const changedCollection =
+      requestOldCollectionIndex !== requestNewCollectionIndex;
+    const changedFolder = requestOldFolderIndex !== requestNewFolderIndex;
+    const changedPlace = changedCollection || changedFolder;

    // set new request
    if (requestNewFolderIndex !== undefined) {
-      Vue.set(collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
-    }
-    else {
-      Vue.set(collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
+      Vue.set(
+        collections[requestNewCollectionIndex].folders[requestNewFolderIndex]
+          .requests,
+        requestOldIndex,
+        requestNew
+      );
+    } else {
+      Vue.set(
+        collections[requestNewCollectionIndex].requests,
+        requestOldIndex,
+        requestNew
+      );
    }

    // remove old request
    if (changedPlace) {
      if (requestOldFolderIndex !== undefined) {
-        collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
-      }
-      else {
-        collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
+        collections[requestOldCollectionIndex].folders[
+          requestOldFolderIndex
+        ].requests.splice(requestOldIndex, 1);
+      } else {
+        collections[requestOldCollectionIndex].requests.splice(
+          requestOldIndex,
+          1
+        );
      }
    }
  },

-  saveRequestAs({collections}, payload) {
-    const {
-      request,
-      collectionIndex,
-      folderIndex,
-      requestIndex,
-    } = payload
+  saveRequestAs({ collections }, payload) {
+    const { request, collectionIndex, folderIndex, requestIndex } = payload;

-    const specifiedCollection = collectionIndex !== undefined
-    const specifiedFolder = folderIndex !== undefined
-    const specifiedRequest = requestIndex !== undefined
+    const specifiedCollection = collectionIndex !== undefined;
+    const specifiedFolder = folderIndex !== undefined;
+    const specifiedRequest = requestIndex !== undefined;

    if (specifiedCollection && specifiedFolder && specifiedRequest) {
-      Vue.set(collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
-    }
-    else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
-      const requests = collections[collectionIndex].folders[folderIndex].requests
+      Vue.set(
+        collections[collectionIndex].folders[folderIndex].requests,
+        requestIndex,
+        request
+      );
+    } else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
+      const requests =
+        collections[collectionIndex].folders[folderIndex].requests;
      const lastRequestIndex = requests.length - 1;
-      Vue.set(requests, lastRequestIndex + 1, request)
+      Vue.set(requests, lastRequestIndex + 1, request);
    } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
-      const requests = collections[collectionIndex].requests
-      Vue.set(requests, requestIndex, request)
+      const requests = collections[collectionIndex].requests;
+      Vue.set(requests, requestIndex, request);
    } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
-      const requests = collections[collectionIndex].requests
+      const requests = collections[collectionIndex].requests;
      const lastRequestIndex = requests.length - 1;
-      Vue.set(requests, lastRequestIndex + 1, request)
+      Vue.set(requests, lastRequestIndex + 1, request);
    }
-
  },

-  saveRequest({collections}, payload) {
-    const {
-      request
-    } = payload;
+  saveRequest({ collections }, payload) {
+    const { request } = payload;

    // Remove the old request from collection
-    if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
-      const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
+    if (request.hasOwnProperty("oldCollection") && request.oldCollection > -1) {
+      const folder =
+        request.hasOwnProperty("oldFolder") && request.oldFolder >= -1
+          ? request.oldFolder
+          : request.folder;
      if (folder > -1) {
-        collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
+        collections[request.oldCollection].folders[folder].requests.splice(
+          request.requestIndex,
+          1
+        );
      } else {
-        collections[request.oldCollection].requests.splice(request.requestIndex, 1)
+        collections[request.oldCollection].requests.splice(
+          request.requestIndex,
+          1
+        );
      }
-    } else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
-      collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
+    } else if (
+      request.hasOwnProperty("oldFolder") &&
+      request.oldFolder !== -1
+    ) {
+      collections[request.collection].folders[folder].requests.splice(
+        request.requestIndex,
+        1
+      );
    }

    delete request.oldCollection;
@@ -255,31 +271,37 @@ export const mutations = {

    // Request that is directly attached to collection
    if (request.folder === -1) {
-      Vue.set(collections[request.collection].requests, request.requestIndex, request)
-      return
+      Vue.set(
+        collections[request.collection].requests,
+        request.requestIndex,
+        request
+      );
+      return;
    }

-    Vue.set(collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
+    Vue.set(
+      collections[request.collection].folders[request.folder].requests,
+      request.requestIndex,
+      request
+    );
  },

-  removeRequest({collections}, payload) {
-    const {
-      collectionIndex,
-      folderIndex,
-      requestIndex
-    } = payload;
+  removeRequest({ collections }, payload) {
+    const { collectionIndex, folderIndex, requestIndex } = payload;

    // Request that is directly attached to collection
    if (folderIndex === -1) {
-      collections[collectionIndex].requests.splice(requestIndex, 1)
-      return
+      collections[collectionIndex].requests.splice(requestIndex, 1);
+      return;
    }

-    collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
+    collections[collectionIndex].folders[folderIndex].requests.splice(
+      requestIndex,
+      1
+    );
  },

-  selectRequest(state, {request}) {
+  selectRequest(state, { request }) {
    state.selectedRequest = Object.assign({}, request);
-  },
-
+  }
 };
--- a/store/state.js
+++ b/store/state.js
@@ -1,24 +1,24 @@
 export default () => ({
  request: {
-    method: 'GET',
-    url: 'https://reqres.in',
-    path: '/api/users',
-    label: '',
-    auth: 'None',
-    httpUser: '',
-    httpPassword: '',
-    passwordFieldType: 'password',
-    bearerToken: '',
+    method: "GET",
+    url: "https://reqres.in",
+    path: "/api/users",
+    label: "",
+    auth: "None",
+    httpUser: "",
+    httpPassword: "",
+    passwordFieldType: "password",
+    bearerToken: "",
    headers: [],
    params: [],
    bodyParams: [],
-    rawParams: '',
+    rawParams: "",
    rawInput: false,
-    requestType: '',
-    contentType: '',
+    requestType: "",
+    contentType: ""
  },
  gql: {
-    url: 'https://rickandmortyapi.com/graphql',
+    url: "https://rickandmortyapi.com/graphql",
    headers: [],
    query: ""
  }