From 70a350fdac8e44cfd4f10e2e261a635a2834387a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 27 May 2021 23:22:17 -0400
Subject: [PATCH] Initial Collection State System implementation

Co-authored-by: Liyas Thomas <hi@liyasthomas.com>
---
 components/collections/ImportExport.vue       |  51 +-
 components/collections/SaveRequest.vue        |  42 +-
 components/collections/graphql/Add.vue        |  37 +-
 components/collections/graphql/AddFolder.vue  |  25 +-
 components/collections/graphql/Collection.vue |  39 +-
 components/collections/graphql/Edit.vue       |  37 +-
 components/collections/graphql/EditFolder.vue |  33 +-
 .../collections/graphql/EditRequest.vue       |  38 +-
 components/collections/graphql/Folder.vue     |  41 +-
 .../collections/graphql/ImportExport.vue      |  39 +-
 components/collections/graphql/Request.vue    |  42 +-
 components/collections/graphql/index.vue      |  57 +-
 components/collections/index.vue              | 113 ++--
 components/collections/my/Collection.vue      |  11 +-
 components/collections/my/Folder.vue          |  36 +-
 components/collections/my/Request.vue         |   2 +
 components/collections/teams/Folder.vue       |   7 +-
 helpers/fb.js                                 |  71 ++-
 newstore/collections.ts                       | 579 ++++++++++++++++++
 newstore/localpersistence.ts                  |  44 ++
 pages/settings.vue                            |   1 +
 store/postwoman.js                            |  14 -
 22 files changed, 872 insertions(+), 487 deletions(-)
 create mode 100644 newstore/collections.ts

diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index f10a22eff..57cab3c3e 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -74,6 +74,7 @@
               : $t('replace_current'),
           }"
         >
+          <!-- TODO: wtf -->
           <button
             v-if="collectionsType.type == 'my-collections'"
             :disabled="!fb.currentUser"
@@ -196,6 +197,11 @@
 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,7 +210,6 @@ export default {
   },
   data() {
     return {
-      fb,
       showJsonCode: false,
       mode: "import_export",
       mySelectedCollectionID: undefined,
@@ -214,15 +219,9 @@ export default {
   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,10 +265,7 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "rest",
-          })
+          setRESTCollections(collections)
           this.fileImported()
           this.syncToFBCollections()
         })
@@ -330,10 +326,7 @@ export default {
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "rest",
-          })
+          setRESTCollections(collections)
           this.fileImported()
           this.syncToFBCollections()
         }
@@ -388,10 +381,7 @@ export default {
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/importCollections", {
-            data: collections,
-            flag: "rest",
-          })
+          appendRESTCollections(collections)
           this.syncToFBCollections()
           this.fileImported()
         }
@@ -421,11 +411,7 @@ export default {
     },
     async getJSONCollection() {
       if (this.collectionsType.type === "my-collections") {
-        this.collectionJson = JSON.stringify(
-          this.$store.state.postwoman.collections,
-          null,
-          2
-        )
+        this.collectionJson = JSON.stringify(myCollections, null, 2)
       } else {
         this.collectionJson = await teamUtils.exportAsJSON(
           this.$apollo,
@@ -452,21 +438,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",
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index ea53e0c64..03ff55699 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -45,9 +45,9 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
 import * as teamUtils from "~/helpers/teams/utils"
+import { saveRESTRequestAs, editRESTRequest } from "~/newstore/collections"
 
 export default {
   props: {
@@ -138,14 +138,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 +155,18 @@ export default {
       const requestUpdated = {
         ...this.$props.editingRequest,
         name: this.$data.requestData.name,
-        collection: this.$data.requestData.collectionIndex,
       }
 
       if (this.picked.pickedType === "my-request") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          folderName: this.picked.folderName,
-          requestIndex: this.picked.requestIndex,
-          flag: "rest",
-        })
-
-        this.syncCollections()
+        editRESTRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
       } else if (this.picked.pickedType === "my-folder") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          folderName: this.picked.folderName,
-          flag: "rest",
-        })
-
-        this.syncCollections()
+        saveRESTRequestAs(this.picked.folderPath, requestUpdated)
       } else if (this.picked.pickedType === "my-collection") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          flag: "rest",
-        })
-
-        this.syncCollections()
+        saveRESTRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       } else if (this.picked.pickedType === "teams-request") {
         teamUtils.overwriteRequestTeams(
           this.$apollo,
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index c94e34de0..22367a0bf 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -36,41 +36,32 @@
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+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) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+      if (!this.name) {
+        this.$toast.info(this.$t("invalid_collection_name").toString())
         return
       }
-      this.$store.commit("postwoman/addNewCollection", {
-        name: this.$data.name,
-        flag: "graphql",
+
+      addGraphqlCollection({
+        name: this.name,
+        folders: [],
+        requests: [],
       })
-      this.syncCollections()
+
       this.hideModal()
     },
     hideModal() {
@@ -78,5 +69,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index d46f93a40..1cb67a7de 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -36,13 +36,12 @@
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+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>
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index f90a2b3e9..097a93363 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -42,7 +42,6 @@
                 class="icon"
                 @click="
                   $emit('add-folder', {
-                    folder: collection,
                     path: `${collectionIndex}`,
                   })
                 "
@@ -135,10 +134,11 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { removeGraphqlCollection } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -154,38 +154,27 @@ 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"
-          )
-        }
-      }
-    },
     toggleShowChildren() {
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      this.$store.commit("postwoman/removeCollection", {
-        collectionIndex: this.collectionIndex,
-        flag: "graphql",
-      })
-      this.$toast.error(this.$t("deleted"), {
+      removeGraphqlCollection(this.collectionIndex)
+
+      this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",
       })
-      this.syncCollections()
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
+
+      // TODO: Fix this
+
       const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
       const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
       const oldFolderName = dataTransfer.getData("oldFolderName")
       const requestIndex = dataTransfer.getData("requestIndex")
       const flag = "graphql"
+
       this.$store.commit("postwoman/moveRequest", {
         oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
@@ -196,8 +185,8 @@ export default {
         requestIndex,
         flag,
       })
-      this.syncCollections()
+      // this.syncCollections()
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index bbf99bc3a..775053c52 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -36,10 +36,11 @@
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+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) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+      if (!this.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,
-        collectionIndex: this.$props.editingCollectionIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
+
+      editGraphqlCollection(this.editingCollectionIndex, collectionUpdated)
       this.hideModal()
     },
     hideModal() {
@@ -85,5 +70,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 7dacd9a17..e9e8d1a57 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -36,15 +36,15 @@
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+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", {
-        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()
+      editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
       this.hideModal()
     },
     hideModal() {
@@ -80,5 +61,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 2b4390078..92f954432 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -36,53 +36,33 @@
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { editGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     show: Boolean,
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
+    folderPath: { 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", {
-        requestCollectionIndex: this.$props.collectionIndex,
-        requestFolderName: this.$props.folderName,
-        requestFolderIndex: this.$props.folderIndex,
-        requestNew: requestUpdated,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
+      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+
       this.hideModal()
     },
     hideModal() {
@@ -90,5 +70,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 3fa7d9f20..2dd74914b 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -43,9 +43,7 @@
             <button
               v-close-popover
               class="icon"
-              @click="
-                $emit('edit-folder', { folder, folderIndex, collectionIndex })
-              "
+              @click="$emit('edit-folder', { folder, folderPath })"
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
@@ -122,10 +120,11 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { removeGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   name: "Folder",
   props: {
     folder: { type: Object, default: () => {} },
@@ -143,34 +142,16 @@ 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"
-          )
-        }
-      }
-    },
     toggleShowChildren() {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
-      this.$toast.error(this.$t("deleted"), {
+      removeGraphqlFolder(this.folderPath)
+      this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",
       })
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
       const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
       const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
@@ -178,6 +159,8 @@ export default {
       const requestIndex = dataTransfer.getData("requestIndex")
       const flag = "graphql"
 
+      // TODO: Discuss
+
       this.$store.commit("postwoman/moveRequest", {
         oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
@@ -188,8 +171,8 @@ export default {
         requestIndex,
         flag,
       })
-      this.syncCollections()
+      // this.syncCollections()
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index ba63083ca..52363c318 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -131,6 +131,10 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import {
+  graphqlCollections$,
+  setGraphqlCollections,
+} from "~/newstore/collections"
 
 export default {
   props: {
@@ -142,13 +146,14 @@ export default {
       showJsonCode: false,
     }
   },
+  subscriptions() {
+    return {
+      collections: graphqlCollections$,
+    }
+  },
   computed: {
     collectionJson() {
-      return JSON.stringify(
-        this.$store.state.postwoman.collectionsGraphql,
-        null,
-        2
-      )
+      return JSON.stringify(this.collections, null, 2)
     },
   },
   methods: {
@@ -194,12 +199,8 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "graphql",
-          })
+          setGraphqlCollections(collections)
           this.fileImported()
-          this.syncToFBCollections()
         })
         .catch((error) => {
           this.failedImport()
@@ -238,12 +239,8 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/replaceCollections", {
-          data: collections,
-          flag: "graphql",
-        })
+        setGraphqlCollections(collections)
         this.fileImported()
-        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
       this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -310,18 +307,6 @@ export default {
       })
       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",
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 60dca25d2..e3c5ad87f 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -32,11 +32,9 @@
               class="icon"
               @click="
                 $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
                   request,
                   requestIndex,
+                  folderPath,
                 })
               "
             >
@@ -62,15 +60,14 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { removeGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default Vue.extend({
   props: {
     request: { type: Object, default: () => {} },
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
+    folderPath: { type: String, default: null },
     requestIndex: { type: Number, default: null },
     doc: Boolean,
   },
@@ -81,43 +78,26 @@ 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"
-          )
-        }
-      }
-    },
     selectRequest() {
       this.$store.commit("postwoman/selectGraphqlRequest", {
         request: this.request,
       })
     },
-    dragStart({ dataTransfer }) {
+    dragStart({ dataTransfer }: any) {
       this.dragging = !this.dragging
+      // TODO: Discuss
       dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
       dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
       dataTransfer.setData("oldFolderName", this.$props.folderName)
       dataTransfer.setData("requestIndex", this.$props.requestIndex)
     },
     removeRequest() {
-      this.$store.commit("postwoman/removeRequest", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folderName,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.$toast.error(this.$t("deleted"), {
+      removeGraphqlRequest(this.folderPath, this.requestIndex)
+      this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",
       })
       this.confirmRemove = false
-      this.syncCollections()
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 4f05ed781..462ea509d 100644
--- a/components/collections/graphql/index.vue
+++ b/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-index="editingFolderIndex"
-      :folder-name="editingFolderName"
+      :folder-path="editingFolderPath"
       :request="editingRequest"
       :request-index="editingRequestIndex"
       @hide-modal="displayModalEditRequest(false)"
@@ -94,7 +92,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
 export default {
   props: {
@@ -119,17 +117,14 @@ export default {
       filterText: "",
     }
   },
+  subscriptions() {
+    return {
+      collections: graphqlCollections$,
+    }
+  },
   computed: {
-    collections() {
-      return fb.currentUser !== null
-        ? fb.currentGraphqlCollections
-        : this.$store.state.postwoman.collectionsGraphql
-    },
     filteredCollections() {
-      const collections =
-        fb.currentUser !== null
-          ? fb.currentGraphqlCollections
-          : this.$store.state.postwoman.collectionsGraphql
+      const collections = this.collections
 
       if (!this.filterText) return collections
 
@@ -216,32 +211,21 @@ export default {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
-      this.syncCollections()
     },
     onAddFolder({ name, path }) {
-      const flag = "graphql"
-      this.$store.commit("postwoman/addFolder", {
-        name,
-        path,
-        flag,
-      })
-
+      addGraphqlFolder(name, path)
       this.displayModalAddFolder(false)
-      this.syncCollections()
     },
     addFolder(payload) {
-      const { folder, path } = payload
-      this.$data.editingFolder = folder
+      const { path } = payload
       this.$data.editingFolderPath = path
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
-      this.$data.editingCollectionIndex = collectionIndex
-      this.$data.editingFolder = folder
-      this.$data.editingFolderIndex = folderIndex
+      const { folder, folderPath } = payload
+      this.editingFolder = folder
+      this.editingFolderPath = folderPath
       this.displayModalEditFolder(true)
-      this.syncCollections()
     },
     editRequest(payload) {
       const {
@@ -257,7 +241,6 @@ export default {
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
       this.displayModalEditRequest(true)
-      this.syncCollections()
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined
@@ -267,18 +250,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>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a8ea48b56..44b2ab929 100644
--- a/components/collections/index.vue
+++ b/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
-      if (this.collectionsType.type === "my-collections") {
-        collections =
-          fb.currentUser !== null
-            ? fb.currentCollections
-            : this.$store.state.postwoman.collections
-      } else {
-        collections = this.teamCollectionsNew
-      }
+      const collections =
+        this.collectionsType.type === "my-collections"
+          ? this.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,
-          collectionIndex: this.editingCollectionIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
+
+        editRESTCollection(this.editingCollectionIndex, collectionUpdated)
       } 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", {
-          collectionIndex: this.editingCollectionIndex,
-          folder: { ...this.editingFolder, name },
-          folderIndex: this.editingFolderIndex,
-          folderName: this.editingFolder.name,
-          flag: "rest",
-        })
-        this.syncCollections()
+        editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
       } 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", {
-          requestCollectionIndex: this.editingCollectionIndex,
-          requestFolderName: this.editingFolderName,
-          requestFolderIndex: this.editingFolderIndex,
-          requestNew: requestUpdated,
-          requestIndex: this.editingRequestIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
+        editRESTRequest(
+          this.editingFolderPath,
+          this.editingRequestIndex,
+          requestUpdated
+        )
       } 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", {
-          name,
-          path,
-          flag,
-        })
-        this.syncCollections()
+        addRESTFolder(name, path)
       } else if (this.collectionsType.type === "team-collections") {
         if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
@@ -538,30 +514,33 @@ export default {
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
+      console.log(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) {
+      console.log(payload)
       const {
         collectionIndex,
         folderIndex,
         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 +550,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", {
-          collectionIndex,
-          flag: "rest",
-        })
+        removeRESTCollection(collectionIndex)
+
         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 +591,13 @@ export default {
         }
       }
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
+    removeRequest({ requestIndex, folderPath }) {
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/removeRequest", {
-          collectionIndex,
-          folderName,
-          requestIndex,
-          flag: "rest",
-        })
+        removeRESTRequest(folderPath, requestIndex)
+
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
-        this.syncCollections()
       } else if (this.collectionsType.type === "team-collections") {
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 2f477be59..e94713619 100644
--- a/components/collections/my/Collection.vue
+++ b/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>
@@ -253,13 +253,6 @@ export default {
       })
       this.syncCollections()
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
-    },
   },
 }
 </script>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index fa92a86e3..fb3c1edc5 100644
--- a/components/collections/my/Folder.vue
+++ b/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>
@@ -137,8 +142,8 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
+import { removeRESTFolder, removeRESTRequest } from "~/newstore/collections"
 
 export default {
   name: "Folder",
@@ -177,14 +182,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,13 +195,8 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex,
-        flag: "rest",
-      })
-      this.syncCollections()
+      removeRESTFolder(this.folderPath)
+
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
@@ -217,6 +209,8 @@ export default {
       const requestIndex = dataTransfer.getData("requestIndex")
       const flag = "rest"
 
+      // TODO: Implement for the new collection state system
+
       this.$store.commit("postwoman/moveRequest", {
         oldCollectionIndex,
         newCollectionIndex: this.$props.collectionIndex,
@@ -229,12 +223,8 @@ export default {
       })
       this.syncCollections()
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
+    removeRequest({ requestIndex }) {
+      removeRESTRequest(this.folderPath, requestIndex)
     },
   },
 }
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 1611e5d8c..7fbc08b25 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -43,6 +43,7 @@
                   folderName,
                   request,
                   requestIndex,
+                  folderPath,
                 })
               "
             >
@@ -132,6 +133,7 @@ export default {
       this.$emit("remove-request", {
         collectionIndex: this.$props.collectionIndex,
         folderName: this.$props.folderName,
+        folderPath: this.folderPath,
         requestIndex: this.$props.requestIndex,
       })
     },
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 3a85f821f..e9fd237b8 100644
--- a/components/collections/teams/Folder.vue
+++ b/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>
diff --git a/helpers/fb.js b/helpers/fb.js
index 5d8a1f8a2..0c24b1563 100644
--- a/helpers/fb.js
+++ b/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 (
-        this.currentSettings &&
-        loadedSettings &&
-        dispatch.dispatcher !== "applySettingFB"
-      ) {
-        this.writeSettings(
-          dispatch.payload.settingKey,
-          settingsStore.value[dispatch.payload.settingKey]
-        )
+      if (this.currentSettings && loadedSettings) {
+        if (dispatch.dispatcher === "bulkApplySettings") {
+          Object.keys(dispatch.payload).forEach((key) => {
+            this.writeSettings(key, dispatch.payload[key])
+          })
+        } else if (dispatch.dispatcher !== "applySettingFB") {
+          this.writeSettings(
+            dispatch.payload.settingKey,
+            settingsStore.value[dispatch.payload.settingKey]
+          )
+        }
       }
     })
 
@@ -220,9 +248,17 @@ 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
+              console.log(collections[0].collection)
+              setRESTCollections(collections[0].collection)
             }
+
+            loadedRESTCollections = true
           })
 
         this.usersCollection
@@ -235,9 +271,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
@@ -320,6 +363,7 @@ export class FirebaseInstance {
   }
 
   async writeSettings(setting, value) {
+    console.log(setting)
     const st = {
       updatedOn: new Date(),
       author: this.currentUser.uid,
@@ -458,6 +502,7 @@ export class FirebaseInstance {
         .set(cl)
     } catch (e) {
       console.error("error updating", cl, e)
+      console.log(collection)
 
       throw e
     }
diff --git a/newstore/collections.ts b/newstore/collections.ts
new file mode 100644
index 000000000..f0768d41a
--- /dev/null
+++ b/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,
+    },
+  })
+}
diff --git a/newstore/localpersistence.ts b/newstore/localpersistence.ts
index 21718caa9..f59890c51 100644
--- a/newstore/localpersistence.ts
+++ b/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()
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index fd4ba944a..e65debbf3 100644
--- a/pages/settings.vue
+++ b/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)
diff --git a/store/postwoman.js b/store/postwoman.js
index 9f1f882f2..cb24bb5a2 100644
--- a/store/postwoman.js
+++ b/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",