refactor: remove vuex dependency

nuxt.config.js

@@ -98,7 +98,6 @@ export default {
   plugins: [
     "~/plugins/v-tippy",
     "~/plugins/v-focus",
-    "~/plugins/vuex-persist",
     "~/plugins/vue-apollo",
     "~/plugins/crisp",
     { src: "~/plugins/web-worker", ssr: false },

package-lock.json

@@ -40,7 +40,6 @@
         "vue-github-button": "^1.3.0",
         "vue-tippy": "^4.10.2",
         "vuejs-auto-complete": "^0.9.0",
-        "vuex-persist": "^3.1.3",
         "yargs-parser": "^20.2.9"
       },
       "devDependencies": {
@@ -16854,7 +16853,8 @@
     "node_modules/flatted": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
-      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA=="
+      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+      "dev": true
     },
     "node_modules/flatten": {
       "version": "1.0.3",
@@ -33627,18 +33627,6 @@
         "vue": "^2.0.0"
       }
     },
-    "node_modules/vuex-persist": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
-      "integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
-      "dependencies": {
-        "deepmerge": "^4.2.2",
-        "flatted": "^3.0.5"
-      },
-      "peerDependencies": {
-        "vuex": ">=2.5"
-      }
-    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -48413,7 +48401,8 @@
     "flatted": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
-      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA=="
+      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+      "dev": true
     },
     "flatten": {
       "version": "1.0.3",
@@ -61351,15 +61340,6 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
-    "vuex-persist": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
-      "integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
-      "requires": {
-        "deepmerge": "^4.2.2",
-        "flatted": "^3.0.5"
-      }
-    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -56,7 +56,6 @@
     "vue-github-button": "^1.3.0",
     "vue-tippy": "^4.10.2",
     "vuejs-auto-complete": "^0.9.0",
-    "vuex-persist": "^3.1.3",
     "yargs-parser": "^20.2.9"
   },
   "devDependencies": {

plugins/vuex-persist.js

@@ -1,7 +0,0 @@
-import VuexPersistence from "vuex-persist"
-
-export default ({ store }) => {
-  new VuexPersistence({
-    filter: (mutation) => mutation.type !== "setFilesBodyParams",
-  }).plugin(store)
-}

store/README.md

@@ -1,8 +0,0 @@
-# STORE
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-
-Creating a file in this directory automatically activates the option in the framework.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

store/mutations.js

@@ -1,117 +0,0 @@
-import Vue from "vue"
-
-export default {
-  setState({ request }, { attribute, value }) {
-    request[attribute] = value
-  },
-
-  setGQLState({ gql }, { attribute, value }) {
-    gql[attribute] = value
-  },
-
-  addGQLHeader({ gql }, object) {
-    gql.headers.push(object)
-  },
-
-  setActiveGQLHeader({ gql }, { index, value }) {
-    if (!Object.prototype.hasOwnProperty.call(gql.headers[index], "active")) {
-      Vue.set(gql.headers[index], "active", value)
-    } else {
-      gql.headers[index].active = value
-    }
-  },
-
-  removeGQLHeader({ gql }, index) {
-    gql.headers.splice(index, 1)
-  },
-
-  setGQLHeaderKey({ gql }, { index, value }) {
-    gql.headers[index].key = value
-  },
-
-  setGQLHeaderValue({ gql }, { index, value }) {
-    gql.headers[index].value = value
-  },
-
-  addHeaders({ request }, value) {
-    request.headers.push(value)
-  },
-
-  removeHeaders({ request }, index) {
-    request.headers.splice(index, 1)
-  },
-
-  addParams({ request }, value) {
-    request.params.push(value)
-  },
-
-  removeParams({ request }, index) {
-    request.params.splice(index, 1)
-  },
-
-  addBodyParams({ request }, value) {
-    request.bodyParams.push(value)
-  },
-
-  removeBodyParams({ request }, index) {
-    request.bodyParams.splice(index, 1)
-  },
-
-  setKeyBodyParams({ request }, { index, value }) {
-    request.bodyParams[index].key = value
-  },
-
-  setValueBodyParams({ request }, { index, value }) {
-    request.bodyParams[index].value = value
-  },
-
-  setBodyParams({ request }, { params }) {
-    request.bodyParams = params
-  },
-
-  // While this mutation is same as the setValueBodyParams above, it is excluded
-  // from vuex-persist. We will commit this mutation while adding a file
-  // param as there is no way to serialize File objects and thus we cannot
-  // persist file objects in localStorage
-  setFilesBodyParams({ request }, { index, value }) {
-    request.bodyParams[index].value = value
-  },
-
-  removeFile({ request }, { index, fileIndex }) {
-    request.bodyParams[index].value.splice(fileIndex, 1)
-  },
-
-  setActiveBodyParams({ request }, { index, value }) {
-    if (
-      !Object.prototype.hasOwnProperty.call(request.bodyParams[index], "active")
-    ) {
-      Vue.set(request.bodyParams[index], "active", value)
-    } else {
-      request.bodyParams[index].active = value
-    }
-  },
-
-  setOAuth2({ oauth2 }, { attribute, value }) {
-    oauth2[attribute] = value
-  },
-
-  addOAuthToken({ oauth2 }, value) {
-    oauth2.tokens.push(value)
-  },
-
-  removeOAuthToken({ oauth2 }, index) {
-    oauth2.tokens.splice(index, 1)
-  },
-
-  setOAuthTokenName({ oauth2 }, { index, value }) {
-    oauth2.tokens[index].name = value
-  },
-
-  addOAuthTokenReq({ oauth2 }, value) {
-    oauth2.tokenReqs.push(value)
-  },
-
-  removeOAuthTokenReq({ oauth2 }, index) {
-    oauth2.tokenReqs.splice(index, 1)
-  },
-}

store/postwoman.js

@@ -1,259 +0,0 @@
-import Vue from "vue"
-
-export const state = () => ({
-  editingEnvironment: {},
-  selectedRequest: {},
-  selectedGraphqlRequest: {},
-  editingRequest: {},
-})
-
-export const mutations = {
-  removeCollection({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, flag } = payload
-    if (flag === "rest") collections.splice(collectionIndex, 1)
-    else collectionsGraphql.splice(collectionIndex, 1)
-  },
-
-  editCollection({ collections, collectionsGraphql }, payload) {
-    const { collection, collectionIndex, flag } = payload
-    const { name } = collection
-    let duplicateCollection = null
-    if (flag === "rest") {
-      duplicateCollection = collections.some(
-        (item) => item.name.toLowerCase() === name.toLowerCase()
-      )
-    } else {
-      duplicateCollection = collectionsGraphql.some(
-        (item) => item.name.toLowerCase() === name.toLowerCase()
-      )
-    }
-    if (duplicateCollection) {
-      this.$toast.info("Duplicate collection")
-      return
-    }
-    if (flag === "rest") collections[collectionIndex] = collection
-    else collectionsGraphql[collectionIndex] = collection
-  },
-
-  addFolder({ collections, collectionsGraphql }, payload) {
-    const { name, path, flag } = payload
-    const newFolder = {
-      name,
-      requests: [],
-      folders: [],
-    }
-
-    // Walk from collections to destination with the path
-    const indexPaths = path.split("/").map((x) => parseInt(x))
-
-    let target = null
-    if (flag === "rest") target = collections[indexPaths.shift()]
-    else target = collectionsGraphql[indexPaths.shift()]
-
-    while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
-
-    target.folders.push(newFolder)
-  },
-
-  editFolder({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folder, folderIndex, folderName, flag } = payload
-    let collection = null
-    if (flag === "rest") collection = collections[collectionIndex]
-    else collection = collectionsGraphql[collectionIndex]
-
-    const parentFolder = findFolder(folderName, collection, true)
-    if (parentFolder && parentFolder.folders) {
-      Vue.set(parentFolder.folders, folderIndex, folder)
-    }
-  },
-
-  removeFolder({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folderIndex, folderName, flag } = payload
-    let collection = null
-    if (flag === "rest") collection = collections[collectionIndex]
-    else collection = collectionsGraphql[collectionIndex]
-
-    const parentFolder = findFolder(folderName, collection, true)
-    if (parentFolder && parentFolder.folders) {
-      parentFolder.folders.splice(folderIndex, 1)
-    }
-  },
-
-  editRequest({ collections, collectionsGraphql }, payload) {
-    const {
-      requestCollectionIndex,
-      requestFolderName,
-      requestFolderIndex,
-      requestNew,
-      requestIndex,
-      flag,
-    } = payload
-    let collection = null
-    if (flag === "rest") collection = collections[requestCollectionIndex]
-    else collection = collectionsGraphql[requestCollectionIndex]
-
-    if (requestFolderIndex === -1) {
-      Vue.set(collection.requests, requestIndex, requestNew)
-      return
-    }
-
-    const folder = findFolder(requestFolderName, collection, false)
-    Vue.set(folder.requests, requestIndex, requestNew)
-  },
-
-  saveRequestAs({ collections, collectionsGraphql }, payload) {
-    let { request } = payload
-    const { collectionIndex, folderName, requestIndex, flag } = payload
-
-    if (flag === "rest") {
-      // Filter out all file inputs
-      request = {
-        ...request,
-        bodyParams: request.bodyParams.map((param) =>
-          param?.value?.[0] instanceof File ? { ...param, value: "" } : param
-        ),
-      }
-    }
-
-    const specifiedCollection = collectionIndex !== undefined
-    const specifiedFolder = folderName !== undefined
-    const specifiedRequest = requestIndex !== undefined
-
-    if (specifiedCollection && specifiedFolder && specifiedRequest) {
-      const folder = findFolder(
-        folderName,
-        flag === "rest"
-          ? collections[collectionIndex]
-          : collectionsGraphql[collectionIndex]
-      )
-      Vue.set(folder.requests, requestIndex, request)
-    } else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
-      const folder = findFolder(
-        folderName,
-        flag === "rest"
-          ? collections[collectionIndex]
-          : collectionsGraphql[collectionIndex]
-      )
-      const requests = folder.requests
-      const lastRequestIndex = requests.length - 1
-      Vue.set(requests, lastRequestIndex + 1, request)
-    } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
-      const requests =
-        flag === "rest"
-          ? collections[collectionIndex].requests
-          : collectionsGraphql[collectionIndex].requests
-      Vue.set(requests, requestIndex, request)
-    } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
-      const requests =
-        flag === "rest"
-          ? collections[collectionIndex].requests
-          : collectionsGraphql[collectionIndex].requests
-      const lastRequestIndex = requests.length - 1
-      Vue.set(requests, lastRequestIndex + 1, request)
-    }
-  },
-
-  removeRequest({ collections, collectionsGraphql }, payload) {
-    const { collectionIndex, folderName, requestIndex, flag } = payload
-    let collection = null
-    if (flag === "rest") collection = collections[collectionIndex]
-    else collection = collectionsGraphql[collectionIndex]
-
-    if (collection.name === folderName) {
-      collection.requests.splice(requestIndex, 1)
-      return
-    }
-    const folder = findFolder(folderName, collection, false)
-
-    if (folder) {
-      folder.requests.splice(requestIndex, 1)
-    }
-  },
-
-  selectRequest(state, { request }) {
-    state.selectedRequest = Object.assign({}, request)
-  },
-
-  selectGraphqlRequest(state, { request }) {
-    state.selectedGraphqlRequest = Object.assign({}, request)
-  },
-
-  moveRequest({ collections, collectionsGraphql }, payload) {
-    const {
-      oldCollectionIndex,
-      newCollectionIndex,
-      newFolderIndex,
-      newFolderName,
-      oldFolderName,
-      requestIndex,
-      flag,
-    } = payload
-    const isCollection = newFolderIndex === -1
-    let oldCollection = null
-    if (flag === "rest") oldCollection = collections[oldCollectionIndex]
-    else oldCollection = collectionsGraphql[oldCollectionIndex]
-    let newCollection = null
-    if (flag === "rest") newCollection = collections[newCollectionIndex]
-    else newCollection = collectionsGraphql[newCollectionIndex]
-    const request = findRequest(oldFolderName, oldCollection, requestIndex)
-
-    if (isCollection) {
-      newCollection.requests.push(request)
-      return
-    }
-
-    if (!isCollection) {
-      const folder = findFolder(newFolderName, newCollection, false)
-      if (folder) {
-        folder.requests.push(request)
-      }
-    }
-  },
-}
-
-function findRequest(folderName, currentFolder, requestIndex) {
-  let selectedFolder, result
-
-  if (folderName === currentFolder.name) {
-    const request = currentFolder.requests[requestIndex]
-    currentFolder.requests.splice(requestIndex, 1)
-    return request
-  } else {
-    for (let i = 0; i < currentFolder.folders.length; i += 1) {
-      selectedFolder = currentFolder.folders[i]
-
-      result = findRequest(folderName, selectedFolder, requestIndex)
-
-      if (result !== false) {
-        return result
-      }
-    }
-    return false
-  }
-}
-
-function findFolder(folderName, currentFolder, returnParent, parentFolder) {
-  let selectedFolder, result
-
-  if (folderName === currentFolder.name && returnParent) {
-    return parentFolder
-  } else if (folderName === currentFolder.name && !returnParent) {
-    return currentFolder
-  } else {
-    for (let i = 0; i < currentFolder.folders.length; i++) {
-      selectedFolder = currentFolder.folders[i]
-
-      result = findFolder(
-        folderName,
-        selectedFolder,
-        returnParent,
-        currentFolder
-      )
-
-      if (result !== false) {
-        return result
-      }
-    }
-    return false
-  }
-}

store/state.js

@@ -1,48 +0,0 @@
-export default () => ({
-  request: {
-    name: "Untitled request",
-    method: "GET",
-    uri: "",
-    url: "https://httpbin.org",
-    path: "/get",
-    auth: "None",
-    httpUser: "",
-    httpPassword: "",
-    passwordFieldType: "password",
-    bearerToken: "",
-    headers: [],
-    params: [],
-    bodyParams: [],
-    rawParams: "",
-    rawInput: false,
-    requestType: "curl",
-    contentType: "application/json",
-  },
-  gql: {
-    url: "https://rickandmortyapi.com/graphql",
-    headers: [],
-    schema: "",
-    variablesJSONString: '{ "id": "1" }',
-    query: `query GetCharacter($id: ID!) {
-  character(id: $id) {
-    id
-    name
-  }
-}`,
-    response: "",
-    schemaIntrospection: "",
-  },
-  oauth2: {
-    tokens: [],
-    tokenReqs: [],
-    tokenReqSelect: "",
-    tokenReqName: "",
-    accessTokenName: "",
-    oidcDiscoveryUrl: "",
-    authUrl: "",
-    accessTokenUrl: "",
-    clientId: "",
-    scope: "",
-  },
-  name: "Hoppscotch",
-})