Merge branch 'newstate/collections' into main

components/collections/ImportExport.vue

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">Export</h3>
+        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
         <div>
           <button
             v-if="mode != 'import_export'"
@@ -67,23 +67,6 @@
     </div>
     <div slot="body" class="flex flex-col">
       <div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
-        <span
-          v-tooltip="{
-            content: !fb.currentUser
-              ? $t('login_first')
-              : $t('replace_current'),
-          }"
-        >
-          <button
-            v-if="collectionsType.type == 'my-collections'"
-            :disabled="!fb.currentUser"
-            class="icon"
-            @click="syncCollections"
-          >
-            <i class="material-icons">folder_shared</i>
-            <span>{{ $t("import_from_sync") }}</span>
-          </button>
-        </span>
         <button
           v-tooltip="$t('replace_current')"
           class="icon"
@@ -194,8 +177,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
 import * as teamUtils from "~/helpers/teams/utils"
+import {
+  restCollections$,
+  setRESTCollections,
+  appendRESTCollections,
+} from "~/newstore/collections"
 
 export default {
   props: {
@@ -204,25 +191,18 @@ export default {
   },
   data() {
     return {
-      fb,
       showJsonCode: false,
       mode: "import_export",
       mySelectedCollectionID: undefined,
       collectionJson: "",
+      fb,
     }
   },
   subscriptions() {
     return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
+      myCollections: restCollections$,
     }
   },
-  computed: {
-    myCollections() {
-      return fb.currentUser !== null
-        ? fb.currentCollections
-        : this.$store.state.postwoman.collections
-    },
-  },
   methods: {
     async createCollectionGist() {
       await this.$axios
@@ -266,12 +246,8 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
+          setRESTCollections(collections)
-            data: collections,
-            flag: "rest",
-          })
           this.fileImported()
-          this.syncToFBCollections()
         })
         .catch((error) => {
           this.failedImport()
@@ -330,12 +306,8 @@ export default {
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/replaceCollections", {
+          setRESTCollections(collections)
-            data: collections,
-            flag: "rest",
-          })
           this.fileImported()
-          this.syncToFBCollections()
         }
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
@@ -388,11 +360,7 @@ export default {
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/importCollections", {
+          appendRESTCollections(collections)
-            data: collections,
-            flag: "rest",
-          })
-          this.syncToFBCollections()
           this.fileImported()
         }
       }
@@ -421,11 +389,7 @@ export default {
     },
     async getJSONCollection() {
       if (this.collectionsType.type === "my-collections") {
-        this.collectionJson = JSON.stringify(
+        this.collectionJson = JSON.stringify(this.myCollections, null, 2)
-          this.$store.state.postwoman.collections,
-          null,
-          2
-        )
       } else {
         this.collectionJson = await teamUtils.exportAsJSON(
           this.$apollo,
@@ -452,21 +416,6 @@ export default {
         icon: "done",
       })
     },
-    syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", {
-        data: fb.currentCollections,
-        flag: "rest",
-      })
-      this.fileImported()
-    },
-    syncToFBCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
         icon: "folder_shared",

components/collections/SaveRequest.vue

@@ -20,7 +20,18 @@
       />
       <label for="selectLabel">Select location</label>
       <!-- <input readonly :value="path" /> -->
+
+      <CollectionsGraphql
+        v-if="mode === 'graphql'"
+        :doc="false"
+        :show-coll-actions="false"
+        :picked="picked"
+        :saving-mode="true"
+        @select="onSelect"
+      />
+
       <Collections
+        v-else
         :picked="picked"
         :save-request="true"
         @select="onSelect"
@@ -45,12 +56,19 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
 import * as teamUtils from "~/helpers/teams/utils"
+import {
+  saveRESTRequestAs,
+  editRESTRequest,
+  editGraphqlRequest,
+  saveGraphqlRequestAs,
+} from "~/newstore/collections"
 
 export default {
   props: {
+    // mode can be either "graphql" or "rest"
+    mode: { type: String, default: "rest" },
     show: Boolean,
     editingRequest: { type: Object, default: () => {} },
   },
@@ -138,14 +156,6 @@ export default {
     onSelect({ picked }) {
       this.picked = picked
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     saveRequestAs() {
       if (this.picked == null) {
         this.$toast.error(this.$t("select_collection"), {
@@ -163,36 +173,25 @@ export default {
       const requestUpdated = {
         ...this.$props.editingRequest,
         name: this.$data.requestData.name,
-        collection: this.$data.requestData.collectionIndex,
+      }
+
+      // Filter out all REST file inputs
+      if (this.mode === "rest" && requestUpdated.bodyParams) {
+        requestUpdated.bodyParams = requestUpdated.bodyParams.map((param) =>
+          param?.value?.[0] instanceof File ? { ...param, value: "" } : param
+        )
       }
 
       if (this.picked.pickedType === "my-request") {
-        this.$store.commit("postwoman/saveRequestAs", {
+        editRESTRequest(
-          request: requestUpdated,
+          this.picked.folderPath,
-          collectionIndex: this.picked.collectionIndex,
+          this.picked.requestIndex,
-          folderName: this.picked.folderName,
+          requestUpdated
-          requestIndex: this.picked.requestIndex,
+        )
-          flag: "rest",
-        })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "my-folder") {
-        this.$store.commit("postwoman/saveRequestAs", {
+        saveRESTRequestAs(this.picked.folderPath, requestUpdated)
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          folderName: this.picked.folderName,
-          flag: "rest",
-        })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "my-collection") {
-        this.$store.commit("postwoman/saveRequestAs", {
+        saveRESTRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          flag: "rest",
-        })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "teams-request") {
         teamUtils.overwriteRequestTeams(
           this.$apollo,
@@ -216,6 +215,16 @@ export default {
           this.collectionsType.selectedTeam.id,
           this.picked.collectionID
         )
+      } else if (this.picked.pickedType === "gql-my-request") {
+        editGraphqlRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
+      } else if (this.picked.pickedType === "gql-my-folder") {
+        saveGraphqlRequestAs(this.picked.folderPath, requestUpdated)
+      } else if (this.picked.pickedType === "gql-my-collection") {
+        saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       }
       this.$toast.success("Requested added", {
         icon: "done",

components/collections/graphql/Add.vue

@@ -36,41 +36,32 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { addGraphqlCollection } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
   },
   data() {
     return {
-      name: null,
+      name: null as string | null,
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     addNewCollection() {
-      if (!this.$data.name) {
+      if (!this.name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+        this.$toast.info(this.$t("invalid_collection_name").toString())
         return
       }
-      this.$store.commit("postwoman/addNewCollection", {
+
-        name: this.$data.name,
+      addGraphqlCollection({
-        flag: "graphql",
+        name: this.name,
+        folders: [],
+        requests: [],
       })
-      this.syncCollections()
+
       this.hideModal()
     },
     hideModal() {
@@ -78,5 +69,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/AddFolder.vue

@@ -36,13 +36,12 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
-    folder: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
     collectionIndex: { type: Number, default: null },
   },
@@ -52,25 +51,13 @@ export default {
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     addFolder() {
+      // TODO: Blocking when name is null ?
+
       this.$emit("add-folder", {
         name: this.name,
-        folder: this.folder,
         path: this.folderPath || `${this.collectionIndex}`,
       })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
@@ -78,5 +65,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/Collection.vue

@@ -19,7 +19,12 @@
         <i v-show="showChildren || isFiltered" class="material-icons"
           >arrow_drop_down</i
         >
-        <i class="material-icons">folder</i>
+
+        <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+          >check_circle</i
+        >
+
+        <i v-else class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
       <div>
@@ -31,7 +36,7 @@
         >
           <i class="material-icons">topic</i>
         </button>
-        <v-popover>
+        <v-popover v-if="!savingMode">
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>
@@ -42,7 +47,6 @@
                 class="icon"
                 @click="
                   $emit('add-folder', {
-                    folder: collection,
                     path: `${collectionIndex}`,
                   })
                 "
@@ -83,6 +87,8 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlFolder
+            :picked="picked"
+            :saving-mode="savingMode"
             :folder="folder"
             :folder-index="index"
             :folder-path="`${collectionIndex}/${index}`"
@@ -92,6 +98,7 @@
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -102,13 +109,17 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlRequest
+            :picked="picked"
+            :saving-mode="savingMode"
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="-1"
             :folder-name="collection.name"
+            :folder-path="`${collectionIndex}`"
             :request-index="index"
             :doc="doc"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -135,11 +146,18 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import {
+  removeGraphqlCollection,
+  moveGraphqlRequest,
+} from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
+    picked: { type: Object, default: null },
+    // Whether the viewing context is related to picking (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
     doc: Boolean,
@@ -153,51 +171,46 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      )
+    },
+  },
   methods: {
-    syncCollections() {
+    pick() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
+      this.$emit("select", {
-        if (fb.currentSettings[0].value) {
+        picked: {
-          fb.writeCollections(
+          pickedType: "gql-my-collection",
-            JSON.parse(
+          collectionIndex: this.collectionIndex,
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
+        },
-            ),
+      })
-            "collectionsGraphql"
-          )
-        }
-      }
     },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      this.$store.commit("postwoman/removeCollection", {
+      removeGraphqlCollection(this.collectionIndex)
-        collectionIndex: this.collectionIndex,
+
-        flag: "graphql",
+      this.$toast.error(this.$t("deleted").toString(), {
-      })
-      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
-      this.syncCollections()
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
+      const folderPath = dataTransfer.getData("folderPath")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
+
-      this.$store.commit("postwoman/moveRequest", {
+      moveGraphqlRequest(folderPath, requestIndex, `${this.collectionIndex}`)
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: -1,
-        newFolderName: this.$props.collection.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
     },
   },
-}
+})
 </script>

components/collections/graphql/Edit.vue

@@ -36,10 +36,11 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { editGraphqlCollection } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
@@ -47,37 +48,21 @@ export default {
   },
   data() {
     return {
-      name: null,
+      name: null as string | null,
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     saveCollection() {
-      if (!this.$data.name) {
+      if (!this.name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+        this.$toast.info(this.$t("invalid_collection_name").toString())
         return
       }
       const collectionUpdated = {
         ...this.$props.editingCollection,
-        name: this.$data.name,
+        name: this.name,
       }
-      this.$store.commit("postwoman/editCollection", {
+
-        collection: collectionUpdated,
+      editGraphqlCollection(this.editingCollectionIndex, collectionUpdated)
-        collectionIndex: this.$props.editingCollectionIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
@@ -85,5 +70,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/EditFolder.vue

@@ -36,15 +36,15 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { editGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
-    collectionIndex: { type: Number, default: null },
     folder: { type: Object, default: () => {} },
-    folderIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
   },
   data() {
     return {
@@ -52,27 +52,8 @@ export default {
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     editFolder() {
-      this.$store.commit("postwoman/editFolder", {
+      editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
-        collectionIndex: this.$props.collectionIndex,
-        folder: { ...this.$props.folder, name: this.$data.name },
-        folderIndex: this.$props.folderIndex,
-        folderName: this.$props.folder.name,
-        flag: "graphql",
-      })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
@@ -80,5 +61,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/EditRequest.vue

@@ -36,53 +36,33 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { editGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
-    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
     request: { type: Object, default: () => {} },
     requestIndex: { type: Number, default: null },
   },
   data() {
     return {
       requestUpdateData: {
-        name: null,
+        name: null as any | null,
       },
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     saveRequest() {
       const requestUpdated = {
         ...this.$props.request,
         name: this.$data.requestUpdateData.name || this.$props.request.name,
       }
 
-      this.$store.commit("postwoman/editRequest", {
+      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
-        requestCollectionIndex: this.$props.collectionIndex,
+
-        requestFolderName: this.$props.folderName,
-        requestFolderIndex: this.$props.folderIndex,
-        requestNew: requestUpdated,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
@@ -90,5 +70,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/Folder.vue

@@ -20,11 +20,15 @@
           <i v-show="showChildren || isFiltered" class="material-icons"
             >arrow_drop_down</i
           >
-          <i class="material-icons">folder_open</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
+
+          <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <v-popover>
+      <v-popover v-if="!savingMode">
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -43,9 +47,7 @@
             <button
               v-close-popover
               class="icon"
-              @click="
+              @click="$emit('edit-folder', { folder, folderPath })"
-                $emit('edit-folder', { folder, folderIndex, collectionIndex })
-              "
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
@@ -68,6 +70,8 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlFolder
+            :picked="picked"
+            :saving-mode="savingMode"
             :folder="subFolder"
             :folder-index="subFolderIndex"
             :folder-path="`${folderPath}/${subFolderIndex}`"
@@ -77,6 +81,7 @@
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -87,13 +92,17 @@
           class="flex ml-8 border-l border-brdColor"
         >
           <CollectionsGraphqlRequest
+            :picked="picked"
+            :saving-mode="savingMode"
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
+            :folder-path="folderPath"
             :folder-name="folder.name"
             :request-index="index"
             :doc="doc"
             @edit-request="$emit('edit-request', $event)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -122,12 +131,16 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   name: "Folder",
   props: {
+    picked: { type: Object, default: null },
+    // Whether the request is in a selectable mode (activates 'select' event)
+    savingMode: { type: Boolean, default: false },
     folder: { type: Object, default: () => {} },
     folderIndex: { type: Number, default: null },
     collectionIndex: { type: Number, default: null },
@@ -142,54 +155,44 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      )
+    },
+  },
   methods: {
-    syncCollections() {
+    pick() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
+      this.$emit("select", {
-        if (fb.currentSettings[0].value) {
+        picked: {
-          fb.writeCollections(
+          pickedType: "gql-my-folder",
-            JSON.parse(
+          folderPath: this.folderPath,
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
+        },
-            ),
+      })
-            "collectionsGraphql"
-          )
-        }
-      }
     },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
+      removeGraphqlFolder(this.folderPath)
-        collectionIndex: this.$props.collectionIndex,
+      this.$toast.error(this.$t("deleted").toString(), {
-        folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
-      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const folderPath = dataTransfer.getData("folderPath")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
 
-      this.$store.commit("postwoman/moveRequest", {
+      moveGraphqlRequest(folderPath, requestIndex, this.folderPath)
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: this.$props.folderIndex,
-        newFolderName: this.$props.folder.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
     },
   },
-}
+})
 </script>

components/collections/graphql/ImportExport.vue

@@ -54,22 +54,6 @@
     </div>
     <div slot="body" class="flex flex-col">
       <div class="flex flex-col items-start p-2">
-        <span
-          v-tooltip="{
-            content: !fb.currentUser
-              ? $t('login_first')
-              : $t('replace_current'),
-          }"
-        >
-          <button
-            :disabled="!fb.currentUser"
-            class="icon"
-            @click="syncCollections"
-          >
-            <i class="material-icons">folder_shared</i>
-            <span>{{ $t("import_from_sync") }}</span>
-          </button>
-        </span>
         <button
           v-tooltip="$t('replace_current')"
           class="icon"
@@ -131,6 +115,11 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import {
+  graphqlCollections$,
+  setGraphqlCollections,
+  appendGraphqlCollections,
+} from "~/newstore/collections"
 
 export default {
   props: {
@@ -142,13 +131,14 @@ export default {
       showJsonCode: false,
     }
   },
+  subscriptions() {
+    return {
+      collections: graphqlCollections$,
+    }
+  },
   computed: {
     collectionJson() {
-      return JSON.stringify(
+      return JSON.stringify(this.collections, null, 2)
-        this.$store.state.postwoman.collectionsGraphql,
-        null,
-        2
-      )
     },
   },
   methods: {
@@ -194,12 +184,8 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
+          setGraphqlCollections(collections)
-            data: collections,
-            flag: "graphql",
-          })
           this.fileImported()
-          this.syncToFBCollections()
         })
         .catch((error) => {
           this.failedImport()
@@ -238,12 +224,8 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/replaceCollections", {
+        setGraphqlCollections(collections)
-          data: collections,
-          flag: "graphql",
-        })
         this.fileImported()
-        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
       this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -275,12 +257,8 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/importCollections", {
+        appendGraphqlCollections(collections)
-          data: collections,
-          flag: "graphql",
-        })
         this.fileImported()
-        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
       this.$refs.inputChooseFileToImportFrom.value = ""
@@ -303,25 +281,6 @@ export default {
         icon: "done",
       })
     },
-    syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", {
-        data: fb.currentGraphqlCollections,
-        flag: "graphql",
-      })
-      this.fileImported()
-    },
-    syncToFBCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
         icon: "folder_shared",

components/collections/graphql/Request.vue

@@ -17,11 +17,15 @@
           class="icon"
           @click="!doc ? selectRequest() : {}"
         >
-          <i class="material-icons">description</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
+
+          <i v-else class="material-icons">description</i>
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover>
+      <v-popover v-if="!savingMode">
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -32,11 +36,9 @@
               class="icon"
               @click="
                 $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
                   request,
                   requestIndex,
+                  folderPath,
                 })
               "
             >
@@ -62,15 +64,18 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { removeGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
+    // Whether the object is selected (show the tick mark)
+    picked: { type: Object, default: null },
+    // Whether the request is being saved (activate 'select' event)
+    savingMode: { type: Boolean, default: false },
     request: { type: Object, default: () => {} },
-    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
     requestIndex: { type: Number, default: null },
     doc: Boolean,
   },
@@ -80,44 +85,49 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
+    },
+  },
   methods: {
-    syncCollections() {
+    pick() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
+      this.$emit("select", {
-        if (fb.currentSettings[0].value) {
+        picked: {
-          fb.writeCollections(
+          pickedType: "gql-my-request",
-            JSON.parse(
+          folderPath: this.folderPath,
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
+          requestIndex: this.requestIndex,
-            ),
+        },
-            "collectionsGraphql"
+      })
-          )
-        }
-      }
     },
     selectRequest() {
+      if (this.savingMode) {
+        this.pick()
+        return
+      }
+
       this.$store.commit("postwoman/selectGraphqlRequest", {
         request: this.request,
       })
     },
-    dragStart({ dataTransfer }) {
+    dragStart({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
+
-      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
+      dataTransfer.setData("folderPath", this.folderPath)
-      dataTransfer.setData("oldFolderName", this.$props.folderName)
+      dataTransfer.setData("requestIndex", this.requestIndex)
-      dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      this.$store.commit("postwoman/removeRequest", {
+      removeGraphqlRequest(this.folderPath, this.requestIndex)
-        collectionIndex: this.$props.collectionIndex,
+      this.$toast.error(this.$t("deleted").toString(), {
-        folderName: this.$props.folderName,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.confirmRemove = false
-      this.syncCollections()
     },
   },
-}
+})
 </script>

components/collections/graphql/SaveRequest.vue

@@ -1,253 +0,0 @@
-<template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("save_request_as") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("token_req_name") }}</label>
-      <input
-        id="selectLabel"
-        v-model="requestData.name"
-        type="text"
-        @keyup.enter="saveRequestAs"
-      />
-      <ul>
-        <li>
-          <label for="selectCollection">{{ $t("collection") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="selectCollection"
-              v-model="requestData.collectionIndex"
-              type="text"
-            >
-              <option
-                :key="undefined"
-                :value="undefined"
-                hidden
-                disabled
-                selected
-              >
-                {{ $t("select_collection") }}
-              </option>
-              <option
-                v-for="(collection, index) in $store.state.postwoman
-                  .collectionsGraphql"
-                :key="index"
-                :value="index"
-              >
-                {{ collection.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
-      <label>{{ $t("folder") }}</label>
-      <SmartAutoComplete
-        v-model="requestData.folderName"
-        :placeholder="$t('search')"
-        :source="folders"
-        :spellcheck="false"
-      />
-      <ul>
-        <li>
-          <label for="selectRequest">{{ $t("request") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="selectRequest"
-              v-model="requestData.requestIndex"
-              type="text"
-            >
-              <option :key="undefined" :value="undefined">/</option>
-              <option
-                v-for="(folder, index) in requests"
-                :key="index"
-                :value="index"
-              >
-                {{ folder.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveRequestAs">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
-  </SmartModal>
-</template>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-export default {
-  props: {
-    show: Boolean,
-    editingRequest: { type: Object, default: () => {} },
-  },
-  data() {
-    return {
-      defaultRequestName: "Untitled Request",
-      requestData: {
-        name: undefined,
-        collectionIndex: undefined,
-        folderName: undefined,
-        requestIndex: undefined,
-      },
-    }
-  },
-  computed: {
-    folders() {
-      const collections = this.$store.state.postwoman.collectionsGraphql
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) return []
-
-      const noCollectionAvailable = collections[collectionIndex] !== undefined
-      if (!noCollectionAvailable) return []
-
-      return getFolderNames(collections[collectionIndex].folders, [])
-    },
-    requests() {
-      const collections = this.$store.state.postwoman.collectionsGraphql
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const folderName = this.$data.requestData.folderName
-
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) {
-        return []
-      }
-
-      const userSelectedAnyFolder =
-        folderName !== undefined && folderName !== ""
-
-      if (userSelectedAnyFolder) {
-        const collection = collections[collectionIndex]
-        const folder = findFolder(folderName, collection)
-        return folder.requests
-      } else {
-        const collection = collections[collectionIndex]
-        const noCollectionAvailable = collection !== undefined
-
-        if (!noCollectionAvailable) {
-          return []
-        }
-
-        return collection.requests
-      }
-    },
-  },
-  watch: {
-    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
-      // if user has chosen some folder, than selected other collection, which doesn't have any folders
-      // than `requestUpdateData.folderName` won't be reseted
-      this.$data.requestData.folderName = undefined
-      this.$data.requestData.requestIndex = undefined
-    },
-    "requestData.folderName": function resetRequestIndex() {
-      this.$data.requestData.requestIndex = undefined
-    },
-    editingRequest({ name }) {
-      this.$data.requestData.name = name || this.$data.defaultRequestName
-    },
-  },
-  methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
-    saveRequestAs() {
-      const userDidntSpecifyCollection =
-        this.$data.requestData.collectionIndex === undefined
-      if (userDidntSpecifyCollection) {
-        this.$toast.error(this.$t("select_collection"), {
-          icon: "error",
-        })
-        return
-      }
-      if (this.$data.requestData.name.length === 0) {
-        this.$toast.error(this.$t("empty_req_name"), {
-          icon: "error",
-        })
-        return
-      }
-
-      const requestUpdated = {
-        ...this.$props.editingRequest,
-        name: this.$data.requestData.name,
-        collection: this.$data.requestData.collectionIndex,
-      }
-
-      this.$store.commit("postwoman/saveRequestAs", {
-        request: requestUpdated,
-        collectionIndex: this.$data.requestData.collectionIndex,
-        folderName: this.$data.requestData.folderName,
-        requestIndex: this.$data.requestData.requestIndex,
-        flag: "graphql",
-      })
-
-      this.hideModal()
-      this.syncCollections()
-    },
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-
-function getFolderNames(folders, namesList) {
-  if (folders.length) {
-    folders.forEach((folder) => {
-      namesList.push(folder.name)
-      if (folder.folders && folder.folders.length) {
-        getFolderNames(folder.folders, namesList)
-      }
-    })
-  }
-  return namesList
-}
-
-function findFolder(folderName, currentFolder) {
-  let selectedFolder
-  let result
-
-  if (folderName === currentFolder.name) {
-    return currentFolder
-  }
-
-  for (let i = 0; i < currentFolder.folders.length; i++) {
-    selectedFolder = currentFolder.folders[i]
-
-    result = findFolder(folderName, selectedFolder)
-
-    if (result !== false) {
-      return result
-    }
-  }
-  return false
-}
-</script>

components/collections/graphql/index.vue

@@ -26,7 +26,6 @@
     />
     <CollectionsGraphqlAddFolder
       :show="showModalAddFolder"
-      :folder="editingFolder"
       :folder-path="editingFolderPath"
       @add-folder="onAddFolder($event)"
       @hide-modal="displayModalAddFolder(false)"
@@ -36,13 +35,12 @@
       :collection-index="editingCollectionIndex"
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
+      :folder-path="editingFolderPath"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsGraphqlEditRequest
       :show="showModalEditRequest"
-      :collection-index="editingCollectionIndex"
+      :folder-path="editingFolderPath"
-      :folder-index="editingFolderIndex"
-      :folder-name="editingFolderName"
       :request="editingRequest"
       :request-index="editingRequestIndex"
       @hide-modal="displayModalEditRequest(false)"
@@ -52,11 +50,19 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-brdColor">
-      <button class="icon" @click="displayModalAdd(true)">
+      <button
+        v-if="showCollActions"
+        class="icon"
+        @click="displayModalAdd(true)"
+      >
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
-      <button class="icon" @click="displayModalImportExport(true)">
+      <button
+        v-if="showCollActions"
+        class="icon"
+        @click="displayModalImportExport(true)"
+      >
         {{ $t("import_export") }}
       </button>
     </div>
@@ -71,16 +77,19 @@
           :key="collection.name"
         >
           <CollectionsGraphqlCollection
+            :picked="picked"
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
             :doc="doc"
             :is-filtered="filterText.length > 0"
+            :saving-mode="savingMode"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
             @select-collection="$emit('use-collection', collection)"
+            @select="$emit('select', $event)"
           />
         </li>
       </ul>
@@ -94,11 +103,16 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
 export default {
   props: {
-    doc: Boolean,
+    // Whether to activate the ability to pick items (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
+    doc: { type: Boolean, default: false },
+    picked: { type: Object, default: null },
+    // Whether to show the 'New' and 'Import/Export' actions
+    showCollActions: { type: Boolean, default: true },
   },
   data() {
     return {
@@ -119,17 +133,14 @@ export default {
       filterText: "",
     }
   },
+  subscriptions() {
+    return {
+      collections: graphqlCollections$,
+    }
+  },
   computed: {
-    collections() {
-      return fb.currentUser !== null
-        ? fb.currentGraphqlCollections
-        : this.$store.state.postwoman.collectionsGraphql
-    },
     filteredCollections() {
-      const collections =
+      const collections = this.collections
-        fb.currentUser !== null
-          ? fb.currentGraphqlCollections
-          : this.$store.state.postwoman.collectionsGraphql
 
       if (!this.filterText) return collections
 
@@ -216,32 +227,21 @@ export default {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
-      this.syncCollections()
     },
     onAddFolder({ name, path }) {
-      const flag = "graphql"
+      addGraphqlFolder(name, path)
-      this.$store.commit("postwoman/addFolder", {
-        name,
-        path,
-        flag,
-      })
-
       this.displayModalAddFolder(false)
-      this.syncCollections()
     },
     addFolder(payload) {
-      const { folder, path } = payload
+      const { path } = payload
-      this.$data.editingFolder = folder
       this.$data.editingFolderPath = path
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
+      const { folder, folderPath } = payload
-      this.$data.editingCollectionIndex = collectionIndex
+      this.editingFolder = folder
-      this.$data.editingFolder = folder
+      this.editingFolderPath = folderPath
-      this.$data.editingFolderIndex = folderIndex
       this.displayModalEditFolder(true)
-      this.syncCollections()
     },
     editRequest(payload) {
       const {
@@ -257,7 +257,6 @@ export default {
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
       this.displayModalEditRequest(true)
-      this.syncCollections()
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined
@@ -267,18 +266,6 @@ export default {
       this.$data.editingRequest = undefined
       this.$data.editingRequestIndex = undefined
     },
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
   },
 }
 </script>

components/collections/index.vue

@@ -141,9 +141,18 @@
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
 import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
+import {
+  restCollections$,
+  addRESTCollection,
+  editRESTCollection,
+  addRESTFolder,
+  removeRESTCollection,
+  editRESTFolder,
+  removeRESTRequest,
+  editRESTRequest,
+} from "~/newstore/collections"
 
 export default {
   props: {
@@ -179,7 +188,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
+      collections: restCollections$,
     }
   },
   computed: {
@@ -189,21 +198,11 @@ export default {
       }
       return true
     },
-    collections() {
-      return fb.currentUser !== null
-        ? fb.currentCollections
-        : this.$store.state.postwoman.collections
-    },
     filteredCollections() {
-      let collections = null
+      const collections =
-      if (this.collectionsType.type === "my-collections") {
+        this.collectionsType.type === "my-collections"
-        collections =
+          ? this.collections
-          fb.currentUser !== null
+          : this.teamCollectionsNew
-            ? fb.currentCollections
-            : this.$store.state.postwoman.collections
-      } else {
-        collections = this.teamCollectionsNew
-      }
 
       if (!this.filterText) {
         return collections
@@ -301,12 +300,11 @@ export default {
         return
       }
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/addNewCollection", {
+        addRESTCollection({
           name,
-          flag: "rest",
+          folders: [],
+          requests: [],
         })
-
-        this.syncCollections()
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -342,12 +340,8 @@ export default {
           ...this.editingCollection,
           name: newName,
         }
-        this.$store.commit("postwoman/editCollection", {
+
-          collection: collectionUpdated,
+        editRESTCollection(this.editingCollectionIndex, collectionUpdated)
-          collectionIndex: this.editingCollectionIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -372,14 +366,7 @@ export default {
     // Intended to be called by CollectionEditFolder modal submit event
     updateEditingFolder(name) {
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/editFolder", {
+        editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
-          collectionIndex: this.editingCollectionIndex,
-          folder: { ...this.editingFolder, name },
-          folderIndex: this.editingFolderIndex,
-          folderName: this.editingFolder.name,
-          flag: "rest",
-        })
-        this.syncCollections()
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -411,15 +398,11 @@ export default {
       }
 
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/editRequest", {
+        editRESTRequest(
-          requestCollectionIndex: this.editingCollectionIndex,
+          this.editingFolderPath,
-          requestFolderName: this.editingFolderName,
+          this.editingRequestIndex,
-          requestFolderIndex: this.editingFolderIndex,
+          requestUpdated
-          requestNew: requestUpdated,
+        )
-          requestIndex: this.editingRequestIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -478,17 +461,10 @@ export default {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
-      this.syncCollections()
     },
     onAddFolder({ name, folder, path }) {
-      const flag = "rest"
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/addFolder", {
+        addRESTFolder(name, path)
-          name,
-          path,
-          flag,
-        })
-        this.syncCollections()
       } else if (this.collectionsType.type === "team-collections") {
         if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
@@ -538,13 +514,13 @@ export default {
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
+      const { collectionIndex, folder, folderIndex, folderPath } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolder = folder
       this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderPath = folderPath
       this.$data.collectionsType = this.collectionsType
       this.displayModalEditFolder(true)
-      this.syncCollections()
     },
     editRequest(payload) {
       const {
@@ -553,15 +529,16 @@ export default {
         folderName,
         request,
         requestIndex,
+        folderPath,
       } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
+      this.editingFolderPath = folderPath
       this.$emit("select-request", requestIndex)
       this.displayModalEditRequest(true)
-      this.syncCollections()
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined
@@ -571,27 +548,16 @@ export default {
       this.$data.editingRequest = undefined
       this.$data.editingRequestIndex = undefined
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     expandCollection(collectionID) {
       this.teamCollectionAdapter.expandCollection(collectionID)
     },
     removeCollection({ collectionsType, collectionIndex, collectionID }) {
       if (collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/removeCollection", {
+        removeRESTCollection(collectionIndex)
-          collectionIndex,
+
-          flag: "rest",
-        })
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
-        this.syncCollections()
       } else if (collectionsType.type === "team-collections") {
         if (collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
@@ -623,18 +589,13 @@ export default {
         }
       }
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
+    removeRequest({ requestIndex, folderPath }) {
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/removeRequest", {
+        removeRESTRequest(folderPath, requestIndex)
-          collectionIndex,
+
-          folderName,
-          requestIndex,
-          flag: "rest",
-        })
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
-        this.syncCollections()
       } else if (this.collectionsType.type === "team-collections") {
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)

components/collections/my/Collection.vue

@@ -109,7 +109,7 @@
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
             @select="$emit('select', $event)"
-            @remove-request="removeRequest"
+            @remove-request="$emit('remove-request', $event)"
           />
         </li>
       </ul>
@@ -132,7 +132,7 @@
             :picked="picked"
             @edit-request="editRequest($event)"
             @select="$emit('select', $event)"
-            @remove-request="removeRequest"
+            @remove-request="$emit('remove-request', $event)"
           />
         </li>
       </ul>
@@ -163,8 +163,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { moveRESTRequest } from "~/newstore/collections"
-import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   props: {
@@ -188,11 +187,6 @@ export default {
       pageNo: 0,
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
   computed: {
     isSelected() {
       return (
@@ -206,14 +200,6 @@ export default {
     editRequest(event) {
       this.$emit("edit-request", event)
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     toggleShowChildren() {
       if (this.$props.saveRequest)
         this.$emit("select", {
@@ -236,29 +222,9 @@ export default {
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const folderPath = dataTransfer.getData("folderPath")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "rest"
+      moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: -1,
-        newFolderName: this.$props.collection.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
-    },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
     },
   },
 }

components/collections/my/Folder.vue

@@ -47,7 +47,12 @@
               v-close-popover
               class="icon"
               @click="
-                $emit('edit-folder', { folder, folderIndex, collectionIndex })
+                $emit('edit-folder', {
+                  folder,
+                  folderIndex,
+                  collectionIndex,
+                  folderPath,
+                })
               "
             >
               <i class="material-icons">edit</i>
@@ -99,8 +104,8 @@
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :folder-name="folder.name"
-            :request-index="index"
             :folder-path="folderPath"
+            :request-index="index"
             :doc="doc"
             :picked="picked"
             :save-request="saveRequest"
@@ -137,8 +142,11 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import {
-import { getSettingSubject } from "~/newstore/settings"
+  removeRESTFolder,
+  removeRESTRequest,
+  moveRESTRequest,
+} from "~/newstore/collections"
 
 export default {
   name: "Folder",
@@ -162,11 +170,6 @@ export default {
       cursor: "",
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
   computed: {
     isSelected() {
       return (
@@ -177,14 +180,6 @@ export default {
     },
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     toggleShowChildren() {
       if (this.$props.saveRequest)
         this.$emit("select", {
@@ -198,43 +193,20 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
+      removeRESTFolder(this.folderPath)
-        collectionIndex: this.$props.collectionIndex,
+
-        folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex,
-        flag: "rest",
-      })
-      this.syncCollections()
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
+      const folderPath = dataTransfer.getData("folderPath")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "rest"
+      moveRESTRequest(folderPath, requestIndex, this.folderPath)
-
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: this.$props.folderIndex,
-        newFolderName: this.$props.folder.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
+    removeRequest({ requestIndex }) {
-      this.$emit("remove-request", {
+      removeRESTRequest(this.folderPath, requestIndex)
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
     },
   },
 }

components/collections/my/Request.vue

@@ -43,6 +43,7 @@
                   folderName,
                   request,
                   requestIndex,
+                  folderPath,
                 })
               "
             >
@@ -123,15 +124,14 @@ export default {
     },
     dragStart({ dataTransfer }) {
       this.dragging = !this.dragging
-      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
+      dataTransfer.setData("folderPath", this.folderPath)
-      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
+      dataTransfer.setData("requestIndex", this.requestIndex)
-      dataTransfer.setData("oldFolderName", this.$props.folderName)
-      dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
       this.$emit("remove-request", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folderName,
+        folderPath: this.folderPath,
         requestIndex: this.$props.requestIndex,
       })
     },

components/collections/teams/Folder.vue

@@ -44,7 +44,12 @@
               v-close-popover
               class="icon"
               @click="
-                $emit('edit-folder', { folder, folderIndex, collectionIndex })
+                $emit('edit-folder', {
+                  folder,
+                  folderIndex,
+                  collectionIndex,
+                  folderPath: '',
+                })
               "
             >
               <i class="material-icons">edit</i>

helpers/fb.js

@@ -10,6 +10,12 @@ import {
   setGraphqlHistoryEntries,
   HISTORY_LIMIT,
 } from "~/newstore/history"
+import {
+  restCollectionStore,
+  setRESTCollections,
+  graphqlCollectionStore,
+  setGraphqlCollections,
+} from "~/newstore/collections"
 
 // Initialize Firebase, copied from cloud console
 const firebaseConfig = {
@@ -39,8 +45,6 @@ export class FirebaseInstance {
     this.idToken = null
     this.currentFeeds = []
     this.currentSettings = []
-    this.currentCollections = []
-    this.currentGraphqlCollections = []
     this.currentEnvironments = []
 
     this.currentUser$ = new ReplaySubject(1)
@@ -49,6 +53,28 @@ export class FirebaseInstance {
     let loadedSettings = false
     let loadedRESTHistory = false
     let loadedGraphqlHistory = false
+    let loadedRESTCollections = false
+    let loadedGraphqlCollections = false
+
+    graphqlCollectionStore.subject$.subscribe(({ state }) => {
+      if (
+        loadedGraphqlCollections &&
+        this.currentUser &&
+        settingsStore.value.syncCollections
+      ) {
+        this.writeCollections(state, "collectionsGraphql")
+      }
+    })
+
+    restCollectionStore.subject$.subscribe(({ state }) => {
+      if (
+        loadedRESTCollections &&
+        this.currentUser &&
+        settingsStore.value.syncCollections
+      ) {
+        this.writeCollections(state, "collections")
+      }
+    })
 
     restHistoryStore.dispatches$.subscribe((dispatch) => {
       if (
@@ -87,15 +113,17 @@ export class FirebaseInstance {
     })
 
     settingsStore.dispatches$.subscribe((dispatch) => {
-      if (
+      if (this.currentSettings && loadedSettings) {
-        this.currentSettings &&
+        if (dispatch.dispatcher === "bulkApplySettings") {
-        loadedSettings &&
+          Object.keys(dispatch.payload).forEach((key) => {
-        dispatch.dispatcher !== "applySettingFB"
+            this.writeSettings(key, dispatch.payload[key])
-      ) {
+          })
-        this.writeSettings(
+        } else if (dispatch.dispatcher !== "applySettingFB") {
-          dispatch.payload.settingKey,
+          this.writeSettings(
-          settingsStore.value[dispatch.payload.settingKey]
+            dispatch.payload.settingKey,
-        )
+            settingsStore.value[dispatch.payload.settingKey]
+          )
+        }
       }
     })
 
@@ -220,9 +248,16 @@ export class FirebaseInstance {
               collection.id = doc.id
               collections.push(collection)
             })
+
+            // Prevent infinite ping-pong of updates
+            loadedRESTCollections = false
+
+            // TODO: Wth is with collections[0]
             if (collections.length > 0) {
-              this.currentCollections = collections[0].collection
+              setRESTCollections(collections[0].collection)
             }
+
+            loadedRESTCollections = true
           })
 
         this.usersCollection
@@ -235,9 +270,16 @@ export class FirebaseInstance {
               collection.id = doc.id
               collections.push(collection)
             })
+
+            // Prevent infinite ping-pong of updates
+            loadedGraphqlCollections = false
+
+            // TODO: Wth is with collections[0]
             if (collections.length > 0) {
-              this.currentGraphqlCollections = collections[0].collection
+              setGraphqlCollections(collections[0].collection)
             }
+
+            loadedGraphqlCollections = true
           })
 
         this.usersCollection
@@ -458,7 +500,6 @@ export class FirebaseInstance {
         .set(cl)
     } catch (e) {
       console.error("error updating", cl, e)
-
       throw e
     }
   }

newstore/collections.ts

@@ -0,0 +1,579 @@
+import { pluck } from "rxjs/operators"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+interface Collection {
+  name: string
+  folders: Collection[]
+  requests: any[]
+}
+
+const defaultRESTCollectionState = {
+  state: [
+    <Collection>{
+      name: "My Collection",
+      folders: [],
+      requests: [],
+    },
+  ],
+}
+
+const defaultGraphqlCollectionState = {
+  state: [
+    <Collection>{
+      name: "My GraphQL Collection",
+      folders: [],
+      requests: [],
+    },
+  ],
+}
+
+type RESTCollectionStoreType = typeof defaultRESTCollectionState
+type GraphqlCollectionStoreType = typeof defaultGraphqlCollectionState
+
+type CollectionStoreType = RESTCollectionStoreType | GraphqlCollectionStoreType
+
+function navigateToFolderWithIndexPath(
+  collections: Collection[],
+  indexPaths: number[]
+) {
+  if (indexPaths.length === 0) return null
+
+  let target = collections[indexPaths.shift() as number]
+
+  while (indexPaths.length > 0)
+    target = target.folders[indexPaths.shift() as number]
+
+  return target !== undefined ? target : null
+}
+
+const collectionDispatchers = defineDispatchers({
+  setCollections(
+    _: CollectionStoreType,
+    { entries }: { entries: Collection[] }
+  ) {
+    return {
+      state: entries,
+    }
+  },
+
+  appendCollections(
+    { state }: CollectionStoreType,
+    { entries }: { entries: Collection[] }
+  ) {
+    return {
+      state: [...state, ...entries],
+    }
+  },
+
+  addCollection(
+    { state }: CollectionStoreType,
+    { collection }: { collection: Collection }
+  ) {
+    return {
+      state: [...state, collection],
+    }
+  },
+
+  removeCollection(
+    { state }: CollectionStoreType,
+    { collectionIndex }: { collectionIndex: number }
+  ) {
+    return {
+      state: state.filter((_, i) => i !== collectionIndex),
+    }
+  },
+
+  editCollection(
+    { state }: CollectionStoreType,
+    {
+      collectionIndex,
+      collection,
+    }: { collectionIndex: number; collection: Collection }
+  ) {
+    return {
+      state: state.map((col, index) =>
+        index === collectionIndex ? collection : col
+      ),
+    }
+  },
+
+  addFolder(
+    { state }: CollectionStoreType,
+    { name, path }: { name: string; path: string }
+  ) {
+    const newFolder: Collection = {
+      name,
+      folders: [],
+      requests: [],
+    }
+
+    const newState = state
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const target = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (target === null) {
+      console.log(`Could not parse path '${path}'. Ignoring add folder request`)
+      return {}
+    }
+
+    target.folders.push(newFolder)
+
+    return {
+      state: newState,
+    }
+  },
+
+  editFolder(
+    { state }: CollectionStoreType,
+    { path, folder }: { path: string; folder: string }
+  ) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const target = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (target === null) {
+      console.log(
+        `Could not parse path '${path}'. Ignoring edit folder request`
+      )
+      return {}
+    }
+
+    Object.assign(target, folder)
+
+    return {
+      state: newState,
+    }
+  },
+
+  removeFolder({ state }: CollectionStoreType, { path }: { path: string }) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+    if (indexPaths.length === 0) {
+      console.log(
+        "Given path too short. If this is a collection, use removeCollection dispatcher instead. Skipping request."
+      )
+      return {}
+    }
+    // We get the index path to the folder itself,
+    // we have to find the folder containing the target folder,
+    // so we pop the last path index
+    const folderIndex = indexPaths.pop() as number
+
+    const containingFolder = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (containingFolder === null) {
+      console.log(
+        `Could not resolve path '${path}'. Skipping removeFolder dispatch.`
+      )
+      return {}
+    }
+
+    containingFolder.folders.splice(folderIndex, 1)
+
+    return {
+      state: newState,
+    }
+  },
+
+  editRequest(
+    { state }: CollectionStoreType,
+    {
+      path,
+      requestIndex,
+      requestNew,
+    }: { path: string; requestIndex: number; requestNew: any }
+  ) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (targetLocation === null) {
+      console.log(
+        `Could not resolve path '${path}'. Ignoring editRequest dispatch.`
+      )
+
+      return {}
+    }
+
+    targetLocation.requests = targetLocation.requests.map((req, index) =>
+      index !== requestIndex ? req : requestNew
+    )
+
+    return {
+      state: newState,
+    }
+  },
+
+  saveRequestAs(
+    { state }: CollectionStoreType,
+    { path, request }: { path: string; request: any }
+  ) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (targetLocation === null) {
+      console.log(
+        `Could not resolve path '${path}'. Ignoring saveRequestAs dispatch.`
+      )
+
+      return {}
+    }
+
+    targetLocation.requests.push(request)
+
+    return {
+      state: newState,
+    }
+  },
+
+  removeRequest(
+    { state }: CollectionStoreType,
+    { path, requestIndex }: { path: string; requestIndex: number }
+  ) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (targetLocation === null) {
+      console.log(
+        `Could not resolve path '${path}'. Ignoring removeRequest dispatch.`
+      )
+
+      return {}
+    }
+
+    targetLocation.requests.splice(requestIndex, 1)
+
+    return {
+      state: newState,
+    }
+  },
+
+  moveRequest(
+    { state }: CollectionStoreType,
+    {
+      path,
+      requestIndex,
+      destinationPath,
+    }: { path: string; requestIndex: number; destinationPath: string }
+  ) {
+    const newState = state
+
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    const targetLocation = navigateToFolderWithIndexPath(newState, indexPaths)
+
+    if (targetLocation === null) {
+      console.log(
+        `Could not resolve source path '${path}'. Skipping moveRequest dispatch.`
+      )
+      return {}
+    }
+
+    const req = targetLocation.requests[requestIndex]
+
+    const destIndexPaths = destinationPath.split("/").map((x) => parseInt(x))
+
+    const destLocation = navigateToFolderWithIndexPath(newState, destIndexPaths)
+
+    if (destLocation === null) {
+      console.log(
+        `Could not resolve destination path '${destinationPath}'. Skipping moveRequest dispatch.`
+      )
+
+      return {}
+    }
+
+    destLocation.requests.push(req)
+    targetLocation.requests.splice(requestIndex, 1)
+
+    return {
+      state: newState,
+    }
+  },
+})
+
+export const restCollectionStore = new DispatchingStore(
+  defaultRESTCollectionState,
+  collectionDispatchers
+)
+
+export const graphqlCollectionStore = new DispatchingStore(
+  defaultGraphqlCollectionState,
+  collectionDispatchers
+)
+
+export function setRESTCollections(entries: Collection[]) {
+  restCollectionStore.dispatch({
+    dispatcher: "setCollections",
+    payload: {
+      entries,
+    },
+  })
+}
+
+export const restCollections$ = restCollectionStore.subject$.pipe(
+  pluck("state")
+)
+
+export const graphqlCollections$ = graphqlCollectionStore.subject$.pipe(
+  pluck("state")
+)
+
+export function appendRESTCollections(entries: Collection[]) {
+  restCollectionStore.dispatch({
+    dispatcher: "appendCollections",
+    payload: {
+      entries,
+    },
+  })
+}
+
+export function addRESTCollection(collection: Collection) {
+  restCollectionStore.dispatch({
+    dispatcher: "addCollection",
+    payload: {
+      collection,
+    },
+  })
+}
+
+export function removeRESTCollection(collectionIndex: number) {
+  restCollectionStore.dispatch({
+    dispatcher: "removeCollection",
+    payload: {
+      collectionIndex,
+    },
+  })
+}
+
+export function editRESTCollection(
+  collectionIndex: number,
+  collection: Collection
+) {
+  restCollectionStore.dispatch({
+    dispatcher: "editCollection",
+    payload: {
+      collectionIndex,
+      collection,
+    },
+  })
+}
+
+export function addRESTFolder(name: string, path: string) {
+  restCollectionStore.dispatch({
+    dispatcher: "addFolder",
+    payload: {
+      name,
+      path,
+    },
+  })
+}
+
+export function editRESTFolder(path: string, folder: Collection) {
+  restCollectionStore.dispatch({
+    dispatcher: "editFolder",
+    payload: {
+      path,
+      folder,
+    },
+  })
+}
+
+export function removeRESTFolder(path: string) {
+  restCollectionStore.dispatch({
+    dispatcher: "removeFolder",
+    payload: {
+      path,
+    },
+  })
+}
+
+export function editRESTRequest(
+  path: string,
+  requestIndex: number,
+  requestNew: any
+) {
+  restCollectionStore.dispatch({
+    dispatcher: "editRequest",
+    payload: {
+      path,
+      requestIndex,
+      requestNew,
+    },
+  })
+}
+
+export function saveRESTRequestAs(path: string, request: any) {
+  restCollectionStore.dispatch({
+    dispatcher: "saveRequestAs",
+    payload: {
+      path,
+      request,
+    },
+  })
+}
+
+export function removeRESTRequest(path: string, requestIndex: number) {
+  restCollectionStore.dispatch({
+    dispatcher: "removeRequest",
+    payload: {
+      path,
+      requestIndex,
+    },
+  })
+}
+
+export function moveRESTRequest(
+  path: string,
+  requestIndex: number,
+  destinationPath: string
+) {
+  restCollectionStore.dispatch({
+    dispatcher: "moveRequest",
+    payload: {
+      path,
+      requestIndex,
+      destinationPath,
+    },
+  })
+}
+
+export function setGraphqlCollections(entries: Collection[]) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "setCollections",
+    payload: {
+      entries,
+    },
+  })
+}
+
+export function appendGraphqlCollections(entries: Collection[]) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "appendCollections",
+    payload: {
+      entries,
+    },
+  })
+}
+
+export function addGraphqlCollection(collection: Collection) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "addCollection",
+    payload: {
+      collection,
+    },
+  })
+}
+
+export function removeGraphqlCollection(collectionIndex: number) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "removeCollection",
+    payload: {
+      collectionIndex,
+    },
+  })
+}
+
+export function editGraphqlCollection(
+  collectionIndex: number,
+  collection: Collection
+) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "editCollection",
+    payload: {
+      collectionIndex,
+      collection,
+    },
+  })
+}
+
+export function addGraphqlFolder(name: string, path: string) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "addFolder",
+    payload: {
+      name,
+      path,
+    },
+  })
+}
+
+export function editGraphqlFolder(path: string, folder: Collection) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "editFolder",
+    payload: {
+      path,
+      folder,
+    },
+  })
+}
+
+export function removeGraphqlFolder(path: string) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "removeFolder",
+    payload: {
+      path,
+    },
+  })
+}
+
+export function editGraphqlRequest(
+  path: string,
+  requestIndex: number,
+  requestNew: any
+) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "editRequest",
+    payload: {
+      path,
+      requestIndex,
+      requestNew,
+    },
+  })
+}
+
+export function saveGraphqlRequestAs(path: string, request: any) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "saveRequestAs",
+    payload: {
+      path,
+      request,
+    },
+  })
+}
+
+export function removeGraphqlRequest(path: string, requestIndex: number) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "removeRequest",
+    payload: {
+      path,
+      requestIndex,
+    },
+  })
+}
+
+export function moveGraphqlRequest(
+  path: string,
+  requestIndex: number,
+  destinationPath: string
+) {
+  graphqlCollectionStore.dispatch({
+    dispatcher: "moveRequest",
+    payload: {
+      path,
+      requestIndex,
+      destinationPath,
+    },
+  })
+}

newstore/localpersistence.ts

@@ -8,6 +8,12 @@ import {
   setRESTHistoryEntries,
   setGraphqlHistoryEntries,
 } from "./history"
+import {
+  restCollectionStore,
+  graphqlCollectionStore,
+  setGraphqlCollections,
+  setRESTCollections,
+} from "./collections"
 
 function checkAndMigrateOldSettings() {
   const vuexData = JSON.parse(window.localStorage.getItem("vuex") || "{}")
@@ -22,6 +28,22 @@ function checkAndMigrateOldSettings() {
     delete vuexData.postwoman.settings
     window.localStorage.setItem("vuex", JSON.stringify(vuexData))
   }
+
+  if (vuexData.postwoman && vuexData.postwoman.collections) {
+    const restColls = vuexData.postwoman.collections
+    window.localStorage.setItem("collections", JSON.stringify(restColls))
+
+    delete vuexData.postwoman.collections
+    window.localStorage.setItem("vuex", JSON.stringify(vuexData))
+  }
+
+  if (vuexData.postwoman && vuexData.postwoman.collectionsGraphql) {
+    const gqlColls = vuexData.postwoman.collectionsGraphql
+    window.localStorage.setItem("collectionsGraphql", JSON.stringify(gqlColls))
+
+    delete vuexData.postwoman.collectionsGraphql
+    window.localStorage.setItem("vuex", JSON.stringify(vuexData))
+  }
 }
 
 function setupSettingsPersistence() {
@@ -59,9 +81,31 @@ function setupHistoryPersistence() {
   })
 }
 
+function setupCollectionsPersistence() {
+  const restCollectionData = JSON.parse(
+    window.localStorage.getItem("collections") || "[]"
+  )
+
+  const graphqlCollectionData = JSON.parse(
+    window.localStorage.getItem("collectionsGraphql") || "[]"
+  )
+
+  setRESTCollections(restCollectionData)
+  setGraphqlCollections(graphqlCollectionData)
+
+  restCollectionStore.subject$.subscribe(({ state }) => {
+    window.localStorage.setItem("collections", JSON.stringify(state))
+  })
+
+  graphqlCollectionStore.subject$.subscribe(({ state }) => {
+    window.localStorage.setItem("collectionsGraphql", JSON.stringify(state))
+  })
+}
+
 export function setupLocalPersistence() {
   checkAndMigrateOldSettings()
 
   setupSettingsPersistence()
   setupHistoryPersistence()
+  setupCollectionsPersistence()
 }

pages/graphql.vue

@@ -467,7 +467,8 @@
         </SmartTabs>
       </aside>
     </div>
-    <CollectionsGraphqlSaveRequest
+    <CollectionsSaveRequest
+      mode="graphql"
       :show="showSaveRequestModal"
       :editing-request="editRequest"
       @hide-modal="hideRequestModal"

pages/index.vue

@@ -553,6 +553,7 @@
     </div>
 
     <CollectionsSaveRequest
+      mode="rest"
       :show="showSaveRequestModal"
       @hide-modal="hideRequestModal"
       :editing-request="editRequest"

pages/settings.vue

@@ -333,6 +333,7 @@ export default Vue.extend({
         1000
       )
     },
+    // TODO: Use the new collection store
     syncCollections(): void {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
         if (this.$store.state.postwoman.collections)

store/postwoman.js

@@ -42,20 +42,6 @@ export const SETTINGS_KEYS = [
 
 export const state = () => ({
   settings: {},
-  collections: [
-    {
-      name: "My Collection",
-      folders: [],
-      requests: [],
-    },
-  ],
-  collectionsGraphql: [
-    {
-      name: "My GraphQL Collection",
-      folders: [],
-      requests: [],
-    },
-  ],
   environments: [
     {
       name: "My Environment Variables",