From 97b7320939048d0edfb8e2c54419c6bf164ffbb9 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sun, 9 May 2021 05:30:31 +0000
Subject: [PATCH] move collections actions to parent

---
 components/collections/Collection.vue  | 309 +--------------------
 components/collections/index.vue       |  51 ++++
 helpers/teams/TeamCollection.ts        |  10 +-
 helpers/teams/TeamCollectionAdapter.ts | 370 +++++++++++++------------
 4 files changed, 264 insertions(+), 476 deletions(-)

diff --git a/components/collections/Collection.vue b/components/collections/Collection.vue
index 2637ce668..3581bd9f8 100644
--- a/components/collections/Collection.vue
+++ b/components/collections/Collection.vue
@@ -32,30 +32,6 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <div v-if="collectionsType.type !== 'my-collections' && showChildren">
-          <button
-            class="icon"
-            v-if="cursor !== ''"
-            @click="
-              cursor = prevCursor
-              pageNo -= 1
-            "
-          >
-            Prev
-          </button>
-          <span v-if="cursor !== '' || (requests && requests.length === 10)">{{ pageNo }}</span>
-          <button
-            class="icon"
-            v-if="requests && requests.length === 10"
-            @click="
-              prevCursor = cursor
-              cursor = requests[requests.length - 1].id
-              pageNo += 1
-            "
-          >
-            Next
-          </button>
-        </div>
         <v-popover v-if="!saveRequest">
           <button
             v-if="
@@ -127,7 +103,7 @@
         <li
           v-for="(folder, index) in collectionsType.type === 'my-collections'
             ? collection.folders
-            : folders"
+            : collection.children"
           :key="folder.name ? folder.name : folder.title"
           class="ml-8 border-l border-brdColor"
         >
@@ -143,7 +119,6 @@
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
-            @update-team-collections="$emit('update-team-collections')"
             @select-folder="
               $emit('select-folder', {
                 name:
@@ -161,7 +136,7 @@
         <li
           v-for="(request, index) in collectionsType.type === 'my-collections'
             ? collection.requests
-            : requests"
+            : collection.requests"
           :key="index"
           class="ml-8 border-l border-brdColor"
         >
@@ -190,8 +165,8 @@
       <ul>
         <li
           v-if="
-            (folders == undefined || folders.length === 0) &&
-            (requests == undefined || requests.length === 0)
+            (collection.folders == undefined || collection.folders.length === 0) &&
+            (collection.requests == undefined || collection.requests.length === 0)
           "
           class="flex ml-8 border-l border-brdColor"
         >
@@ -219,6 +194,8 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
+    folders: Array,
+    requests: Array,
     doc: Boolean,
     isFiltered: Boolean,
     selected: Boolean,
@@ -241,233 +218,6 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
-  apollo: {
-    requests: {
-      query: gql`
-        query getCollectionRequests($collectionID: String!, $cursor: String) {
-          requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
-            id
-            title
-            request
-          }
-        }
-      `,
-      subscribeToMore: [
-        {
-          document: gql`
-            subscription teamRequestAdded($teamID: String!) {
-              teamRequestAdded(teamID: $teamID) {
-                id
-                request
-                title
-                collection {
-                  id
-                  title
-                }
-              }
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return this.$props.collectionsType.selectedTeam === undefined
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            if (
-              subscriptionData.data.teamRequestAdded.collection.id === this.$props.collection.id
-            ) {
-              previousResult.requestsInCollection.push({
-                id: subscriptionData.data.teamRequestAdded.id,
-                request: subscriptionData.data.teamRequestAdded.request,
-                title: subscriptionData.data.teamRequestAdded.title,
-                __typename: subscriptionData.data.teamRequestAdded.__typename,
-              })
-              return previousResult
-            }
-          },
-        },
-        {
-          document: gql`
-            subscription teamRequestUpdated($teamID: String!) {
-              teamRequestUpdated(teamID: $teamID) {
-                id
-                request
-                title
-                collection {
-                  id
-                  title
-                }
-              }
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return this.$props.collectionsType.selectedTeam === undefined
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            if (
-              subscriptionData.data.teamRequestUpdated.collection.id === this.$props.collection.id
-            ) {
-              const index = previousResult.requestsInCollection.findIndex(
-                (x) => x.id === subscriptionData.data.teamRequestUpdated.id
-              )
-              previousResult.requestsInCollection[index].title =
-                subscriptionData.data.teamRequestUpdated.title
-              previousResult.requestsInCollection[index].request =
-                subscriptionData.data.teamRequestUpdated.request
-              return previousResult
-            }
-          },
-        },
-        {
-          document: gql`
-            subscription teamRequestDeleted($teamID: String!) {
-              teamRequestDeleted(teamID: $teamID)
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return this.$props.collectionsType.selectedTeam === undefined
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            const index = previousResult.requestsInCollection.findIndex(
-              (x) => x.id === subscriptionData.data.teamRequestDeleted
-            )
-            if (index !== -1) previousResult.requestsInCollection.splice(index, 1)
-            return previousResult
-          },
-        },
-      ],
-      variables() {
-        return {
-          collectionID: this.$props.collection.id,
-          cursor: this.$data.cursor,
-        }
-      },
-      update: (response) => response.requestsInCollection,
-      skip() {
-        return this.$props.collection.id === undefined
-      },
-      fetchPolicy: "no-cache",
-    },
-    folders: {
-      query: gql`
-        query getCollectionChildren($collectionID: String!) {
-          collection(collectionID: $collectionID) {
-            children {
-              id
-              title
-            }
-          }
-        }
-      `,
-      subscribeToMore: [
-        {
-          document: gql`
-            subscription teamCollectionAdded($teamID: String!) {
-              teamCollectionAdded(teamID: $teamID) {
-                id
-                title
-                parent {
-                  id
-                  title
-                }
-              }
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return (
-              this.$props.collectionsType.selectedTeam === undefined && this.$props.showChildren
-            )
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            if (
-              subscriptionData.data.teamCollectionAdded.parent &&
-              subscriptionData.data.teamCollectionAdded.parent.id === this.$props.collection.id
-            ) {
-              previousResult.collection.children.push({
-                id: subscriptionData.data.teamCollectionAdded.id,
-                title: subscriptionData.data.teamCollectionAdded.title,
-                __typename: subscriptionData.data.teamCollectionAdded.__typename,
-              })
-              return previousResult
-            }
-          },
-        },
-        {
-          document: gql`
-            subscription teamCollectionUpdated($teamID: String!) {
-              teamCollectionUpdated(teamID: $teamID) {
-                id
-                title
-                parent {
-                  id
-                  title
-                }
-              }
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return this.$props.collectionsType.selectedTeam === undefined
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            if (
-              subscriptionData.data.teamCollectionUpdated.parent &&
-              subscriptionData.data.teamCollectionUpdated.parent.id === this.$props.collection.id
-            ) {
-              const index = previousResult.collection.children.findIndex(
-                (x) => x.id === subscriptionData.data.teamCollectionUpdated.id
-              )
-              previousResult.collection.children[index].title =
-                subscriptionData.data.teamCollectionUpdated.title
-              return previousResult
-            }
-          },
-        },
-        {
-          document: gql`
-            subscription teamCollectionRemoved($teamID: String!) {
-              teamCollectionRemoved(teamID: $teamID)
-            }
-          `,
-          variables() {
-            return { teamID: this.$props.collectionsType.selectedTeam.id }
-          },
-          skip() {
-            return this.$props.collectionsType.selectedTeam === undefined
-          },
-          updateQuery(previousResult, { subscriptionData }) {
-            const index = previousResult.collection.children.findIndex(
-              (x) => x.id === subscriptionData.data.teamCollectionRemoved
-            )
-            if (index !== -1) previousResult.collection.children.splice(index, 1)
-            return previousResult
-          },
-        },
-      ],
-      variables() {
-        return {
-          collectionID: this.$props.collection.id,
-        }
-      },
-      update: (response) => response.collection.children,
-      skip() {
-        return this.$props.collection.id === undefined
-      },
-      fetchPolicy: "no-cache",
-    },
-  },
   methods: {
     editRequest(event) {
       this.$emit("edit-request", event)
@@ -490,50 +240,15 @@ export default {
       if (this.$props.saveRequest)
         this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
 
+      this.$emit("expand-collection", this.collection.id)
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (this.collectionsType.type == "my-collections") {
-        this.$store.commit("postwoman/removeCollection", {
-          collectionIndex: this.collectionIndex,
-          flag: "rest",
-        })
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-        })
-        this.syncCollections()
-      } else if (this.collectionsType.type == "team-collections") {
-        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
-          this.$apollo
-            .mutate({
-              // Query
-              mutation: gql`
-                mutation($collectionID: String!) {
-                  deleteCollection(collectionID: $collectionID)
-                }
-              `,
-              // Parameters
-              variables: {
-                collectionID: this.collection.id,
-              },
-            })
-            .then((data) => {
-              // Result
-              this.$toast.success(this.$t("deleted"), {
-                icon: "delete",
-              })
-              console.log(data)
-              this.$emit("update-team-collections")
-            })
-            .catch((error) => {
-              // Error
-              this.$toast.error(this.$t("error_occurred"), {
-                icon: "done",
-              })
-              console.error(error)
-            })
-        }
-      }
+      this.$emit("remove-collection", {
+        collectionsType: this.collectionsType,
+        collectionIndex: this.collectionIndex,
+        collectionID: this.collection.id,
+      })
       this.confirmRemove = false
     },
     dropEvent({ dataTransfer }) {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 0b01becbd..1312a211c 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -93,6 +93,8 @@
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
+            :folders="collection.children"
+            :requests="collection.requests"
             :doc="doc"
             :isFiltered="filterText.length > 0"
             :selected="selected.some((coll) => coll == collection)"
@@ -117,6 +119,8 @@
               })
             "
             @unselect-collection="$emit('remove-collection', collection)"
+            @expand-collection="expandCollection"
+            @removve-collection="removeCollection"
           />
         </li>
       </ul>
@@ -534,6 +538,53 @@ export default {
         )
       }
     },
+    expandCollection(collectionID) {
+      console.log(collectionID)
+      this.teamCollectionAdapter.expandCollection(collectionID)
+    },
+    removeCollection(collectionsType, collectionIndex, collectionID) {
+      console.log("removing")
+      if (collectionsType.type == "my-collections") {
+        this.$store.commit("postwoman/removeCollection", {
+          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
+            .mutate({
+              // Query
+              mutation: gql`
+                mutation($collectionID: String!) {
+                  deleteCollection(collectionID: $collectionID)
+                }
+              `,
+              // Parameters
+              variables: {
+                collectionID: collectionID,
+              },
+            })
+            .then((data) => {
+              // Result
+              this.$toast.success(this.$t("deleted"), {
+                icon: "delete",
+              })
+              console.log(data)
+            })
+            .catch((error) => {
+              // Error
+              this.$toast.error(this.$t("error_occurred"), {
+                icon: "done",
+              })
+              console.error(error)
+            })
+        }
+      }
+    },
   },
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener)
diff --git a/helpers/teams/TeamCollection.ts b/helpers/teams/TeamCollection.ts
index a279ad69c..7076f0aba 100644
--- a/helpers/teams/TeamCollection.ts
+++ b/helpers/teams/TeamCollection.ts
@@ -1,11 +1,11 @@
-import { TeamRequest } from "./TeamRequest";
+import { TeamRequest } from "./TeamRequest"
 
 /**
  * Defines how a Team Collection is represented in the TeamCollectionAdapter
  */
 export interface TeamCollection {
-  id: string;
-  title: string;
-  children: TeamCollection[] | null;
-  requests: TeamRequest[] | null;
+  id: string
+  title: string
+  children: TeamCollection[] | null
+  requests: TeamRequest[] | null
 }
diff --git a/helpers/teams/TeamCollectionAdapter.ts b/helpers/teams/TeamCollectionAdapter.ts
index 214b8d159..4972273b7 100644
--- a/helpers/teams/TeamCollectionAdapter.ts
+++ b/helpers/teams/TeamCollectionAdapter.ts
@@ -1,11 +1,11 @@
-import { BehaviorSubject } from "rxjs";
-import { TeamCollection } from "./TeamCollection";
-import { TeamRequest } from "./TeamRequest";
-import { apolloClient } from "~/helpers/apollo";
-import { rootCollectionsOfTeam, getCollectionChildren, getCollectionRequests } from "./utils";
-import { gql } from "graphql-tag";
-import pull from "lodash/pull";
-import remove from "lodash/remove";
+import { BehaviorSubject } from "rxjs"
+import { TeamCollection } from "./TeamCollection"
+import { TeamRequest } from "./TeamRequest"
+import { apolloClient } from "~/helpers/apollo"
+import { rootCollectionsOfTeam, getCollectionChildren, getCollectionRequests } from "./utils"
+import { gql } from "graphql-tag"
+import pull from "lodash/pull"
+import remove from "lodash/remove"
 
 /*
  * NOTE: These functions deal with REFERENCES to objects and mutates them, for a simpler implementation.
@@ -24,11 +24,15 @@ import remove from "lodash/remove";
  *
  * @returns REFERENCE to the collecton or null if not found or the collection is in root
  */
-function findParentOfColl(tree: TeamCollection[], collID: string, currentParent?: TeamCollection): TeamCollection | null {
+function findParentOfColl(
+  tree: TeamCollection[],
+  collID: string,
+  currentParent?: TeamCollection
+): TeamCollection | null {
   for (const coll of tree) {
     // If the root is parent, return null
     if (coll.id === collID) return currentParent ? currentParent : null
-    
+
     // Else run it in children
     if (coll.children) {
       const result = findParentOfColl(coll.children, collID, coll)
@@ -75,7 +79,7 @@ function findCollWithReqIDInTree(tree: TeamCollection[], reqID: string): TeamCol
   for (const coll of tree) {
     // Check in root collections (if expanded)
     if (coll.requests) {
-      if (coll.requests.find(req => req.id === reqID)) return coll
+      if (coll.requests.find((req) => req.id === reqID)) return coll
     }
 
     // Check in children of collections
@@ -101,7 +105,7 @@ function findReqInTree(tree: TeamCollection[], reqID: string): TeamRequest | nul
   for (const coll of tree) {
     // Check in root collections (if expanded)
     if (coll.requests) {
-      const match = coll.requests.find(req => req.id === reqID)
+      const match = coll.requests.find((req) => req.id === reqID)
       if (match) return match
     }
 
@@ -122,12 +126,15 @@ function findReqInTree(tree: TeamCollection[], reqID: string): TeamRequest | nul
  * @param {TeamCollection[]} tree - The tree to update in (THIS WILL BE MUTATED!)
  * @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} updateColl - An object defining all the fields that should be updated (ID is required to find the target collection)
  */
-function updateCollInTree(tree: TeamCollection[], updateColl: Partial<TeamCollection> & Pick<TeamCollection, "id">) {
+function updateCollInTree(
+  tree: TeamCollection[],
+  updateColl: Partial<TeamCollection> & Pick<TeamCollection, "id">
+) {
   const el = findCollInTree(tree, updateColl.id)
 
   // If no match, stop the operation
   if (!el) return
-  
+
   // Update all the specified keys
   Object.assign(el, updateColl)
 }
@@ -144,7 +151,7 @@ function deleteCollInTree(tree: TeamCollection[], targetID: string) {
 
   // If we found a parent, update it
   if (parent && parent.children) {
-    parent.children = parent.children.filter(coll => coll.id !== targetID)
+    parent.children = parent.children.filter((coll) => coll.id !== targetID)
   }
 
   // If there is no parent, it could mean:
@@ -157,13 +164,12 @@ function deleteCollInTree(tree: TeamCollection[], targetID: string) {
 
   // Collection exists, so this should be in root, hence removing element
   pull(tree, el)
-} 
+}
 
 /**
  * TeamCollectionAdapter provides a reactive collections list for a specific team
  */
 export default class TeamCollectionAdapter {
-
   /**
    * The reactive list of collections
    *
@@ -185,16 +191,16 @@ export default class TeamCollectionAdapter {
    *
    * @param {string | null} teamID - ID of the team to listen to, or null if none decided and the adapter should stand by
    */
-  constructor (private teamID: string | null) {
-    this.collections$ = new BehaviorSubject<TeamCollection[]>([]);
-    this.teamCollectionAdded$ = null;
-    this.teamCollectionUpdated$ = null;
-    this.teamCollectionRemoved$ = null;
-    this.teamRequestAdded$ = null;
-    this.teamRequestDeleted$ = null;
-    this.teamRequestUpdated$ = null;
+  constructor(private teamID: string | null) {
+    this.collections$ = new BehaviorSubject<TeamCollection[]>([])
+    this.teamCollectionAdded$ = null
+    this.teamCollectionUpdated$ = null
+    this.teamCollectionRemoved$ = null
+    this.teamRequestAdded$ = null
+    this.teamRequestDeleted$ = null
+    this.teamRequestUpdated$ = null
 
-    if (this.teamID) this.initialize();
+    if (this.teamID) this.initialize()
   }
 
   /**
@@ -203,11 +209,11 @@ export default class TeamCollectionAdapter {
    * @param {string | null} newTeamID - ID of the team to listen to, or null if none decided and the adapter should stand by
    */
   changeTeamID(newTeamID: string | null) {
-    this.collections$.next([]);
+    this.collections$.next([])
 
-    this.teamID = newTeamID;
+    this.teamID = newTeamID
 
-    if (this.teamID) this.initialize();
+    if (this.teamID) this.initialize()
   }
 
   /**
@@ -215,28 +221,28 @@ export default class TeamCollectionAdapter {
    * NOTE: Once this is called, no new updates to the tree will be detected
    */
   unsubscribeSubscriptions() {
-    this.teamCollectionAdded$?.unsubscribe();
-    this.teamCollectionUpdated$?.unsubscribe();
-    this.teamCollectionRemoved$?.unsubscribe();
-    this.teamRequestAdded$?.unsubscribe();
-    this.teamRequestDeleted$?.unsubscribe();
-    this.teamRequestUpdated$?.unsubscribe();
+    this.teamCollectionAdded$?.unsubscribe()
+    this.teamCollectionUpdated$?.unsubscribe()
+    this.teamCollectionRemoved$?.unsubscribe()
+    this.teamRequestAdded$?.unsubscribe()
+    this.teamRequestDeleted$?.unsubscribe()
+    this.teamRequestUpdated$?.unsubscribe()
   }
 
   /**
    * Initializes the adapter
    */
   private async initialize() {
-    await this.loadRootCollections();
-    this.registerSubscriptions();
+    await this.loadRootCollections()
+    this.registerSubscriptions()
   }
-  
+
   /**
    * Loads the root collections
    */
   private async loadRootCollections(): Promise<void> {
     const colls = await rootCollectionsOfTeam(apolloClient, this.teamID)
-    this.collections$.next(colls);
+    this.collections$.next(colls)
   }
 
   /**
@@ -249,7 +255,7 @@ export default class TeamCollectionAdapter {
     const tree = this.collections$.value
 
     if (!parentCollectionID) {
-      tree.push(collection);
+      tree.push(collection)
     } else {
       const parentCollection = findCollInTree(tree, parentCollectionID)
 
@@ -270,7 +276,7 @@ export default class TeamCollectionAdapter {
    *
    * @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} collectionUpdate - Object defining the fields that need to be updated (ID is required to find the target)
    */
-  private updateCollection(collectionUpdate: Partial<TeamCollection> & Pick<TeamCollection, 'id'>) {
+  private updateCollection(collectionUpdate: Partial<TeamCollection> & Pick<TeamCollection, "id">) {
     const tree = this.collections$.value
 
     updateCollInTree(tree, collectionUpdate)
@@ -298,7 +304,7 @@ export default class TeamCollectionAdapter {
    */
   private addRequest(request: TeamRequest) {
     const tree = this.collections$.value
-    
+
     // Check if we have the collection (if not, then not loaded?)
     const coll = findCollInTree(tree, request.collectionID)
     if (!coll) return // Ignore add request
@@ -325,7 +331,7 @@ export default class TeamCollectionAdapter {
     if (!coll || !coll.requests) return
 
     // Remove the collection
-    remove(coll.requests, req => req.id === requestID)
+    remove(coll.requests, (req) => req.id === requestID)
 
     // Publish new tree
     this.collections$.next(tree)
@@ -336,9 +342,9 @@ export default class TeamCollectionAdapter {
    *
    * @param {Partial<TeamRequest> & Pick<TeamRequest, 'id'>} requestUpdate - Object defining all the fields to update in request (ID of the request is required)
    */
-  private updateRequest(requestUpdate: Partial<TeamRequest> & Pick<TeamRequest, 'id'>) {
+  private updateRequest(requestUpdate: Partial<TeamRequest> & Pick<TeamRequest, "id">) {
     const tree = this.collections$.value
-    
+
     // Find request, if not present, don't update
     const req = findReqInTree(tree, requestUpdate.id)
     if (!req) return
@@ -346,133 +352,147 @@ export default class TeamCollectionAdapter {
     Object.assign(req, requestUpdate)
   }
 
-
   /**
    * Registers the subscriptions to listen to team collection updates
    */
   registerSubscriptions() {
-    this.teamCollectionAdded$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamCollectionAdded($teamID: String!) {
-          teamCollectionAdded(teamID: $teamID) {
-            id
-            title
-            parent {
+    this.teamCollectionAdded$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamCollectionAdded($teamID: String!) {
+            teamCollectionAdded(teamID: $teamID) {
               id
+              title
+              parent {
+                id
+              }
             }
           }
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.addCollection({
-        id: data.teamCollectionAdded.id,
-        children: null,
-        requests: null,
-        title: data.teamCollectionAdded.title
-      }, data.teamCollectionAdded.parent?.id)
-    });
-    
-    this.teamCollectionUpdated$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamCollectionUpdated($teamID: String!) {
-          teamCollectionUpdated(teamID: $teamID) {
-            id
-            title
-            parent {
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        this.addCollection(
+          {
+            id: data.teamCollectionAdded.id,
+            children: null,
+            requests: null,
+            title: data.teamCollectionAdded.title,
+          },
+          data.teamCollectionAdded.parent?.id
+        )
+      })
+
+    this.teamCollectionUpdated$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamCollectionUpdated($teamID: String!) {
+            teamCollectionUpdated(teamID: $teamID) {
               id
+              title
+              parent {
+                id
+              }
             }
           }
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.updateCollection({
-        id: data.teamCollectionUpdated.id,
-        title: data.teamCollectionUpdated.title
-      });
-    });
-
-    this.teamCollectionRemoved$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamCollectionRemoved($teamID: String!) {
-          teamCollectionRemoved(teamID: $teamID)
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.removeCollection(data.teamCollectionRemoved)
-    })
-
-    this.teamRequestAdded$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamRequestAdded($teamID: String!) {
-          teamRequestAdded(teamID: $teamID) {
-            id
-            collectionID
-            request
-            title
-          }
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.addRequest({
-        id: data.teamRequestAdded.id,
-        collectionID: data.teamRequestAdded.collectionID,
-        request: JSON.parse(data.teamRequestAdded.request),
-        title: data.teamRequestAdded.title
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
       })
-    })
-
-    this.teamRequestUpdated$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamRequestUpdated($teamID: String!) {
-          teamRequestUpdated(teamID: $teamID) {
-            id
-            collectionID
-            request
-            title
-          }
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.updateRequest({
-        id: data.teamRequestUpdated.id,
-        collectionID: data.teamRequestUpdated.collectionID,
-        request: data.teamRequestUpdated.request,
-        title: data.teamRequestUpdated.title
+      .subscribe(({ data }) => {
+        this.updateCollection({
+          id: data.teamCollectionUpdated.id,
+          title: data.teamCollectionUpdated.title,
+        })
       })
-    })
 
-    this.teamRequestDeleted$ = apolloClient.subscribe({
-      query: gql`
-        subscription TeamRequestDeleted($teamID: String!) {
-          teamRequestDeleted(teamID: $teamID)
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.removeRequest(data.teamRequestDeleted)
-    })
+    this.teamCollectionRemoved$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamCollectionRemoved($teamID: String!) {
+            teamCollectionRemoved(teamID: $teamID)
+          }
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        this.removeCollection(data.teamCollectionRemoved)
+      })
+
+    this.teamRequestAdded$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamRequestAdded($teamID: String!) {
+            teamRequestAdded(teamID: $teamID) {
+              id
+              collectionID
+              request
+              title
+            }
+          }
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        this.addRequest({
+          id: data.teamRequestAdded.id,
+          collectionID: data.teamRequestAdded.collectionID,
+          request: JSON.parse(data.teamRequestAdded.request),
+          title: data.teamRequestAdded.title,
+        })
+      })
+
+    this.teamRequestUpdated$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamRequestUpdated($teamID: String!) {
+            teamRequestUpdated(teamID: $teamID) {
+              id
+              collectionID
+              request
+              title
+            }
+          }
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        this.updateRequest({
+          id: data.teamRequestUpdated.id,
+          collectionID: data.teamRequestUpdated.collectionID,
+          request: data.teamRequestUpdated.request,
+          title: data.teamRequestUpdated.title,
+        })
+      })
+
+    this.teamRequestDeleted$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamRequestDeleted($teamID: String!) {
+            teamRequestDeleted(teamID: $teamID)
+          }
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        this.removeRequest(data.teamRequestDeleted)
+      })
   }
 
   /**
    * Expands a collection on the tree
-   * 
+   *
    * When a collection is loaded initially in the adapter, children and requests are not loaded (they will be set to null)
    * Upon expansion those two fields will be populated
    *
@@ -480,7 +500,7 @@ export default class TeamCollectionAdapter {
    */
   async expandCollection(collectionID: string): Promise<void> {
     // TODO: While expanding one collection, block (or queue) the expansion of the other, to avoid race conditions
-    const tree = this.collections$.value;
+    const tree = this.collections$.value
 
     const collection = findCollInTree(tree, collectionID)
 
@@ -488,25 +508,27 @@ export default class TeamCollectionAdapter {
 
     if (collection.children != null) return
 
-    const collections: TeamCollection[] = (await getCollectionChildren(apolloClient, collectionID))
-      .map<TeamCollection>(el => {
-        return {
-          id: el.id,
-          title: el.title,
-          children: null,
-          requests: null
-        }
-      })
+    const collections: TeamCollection[] = (
+      await getCollectionChildren(apolloClient, collectionID)
+    ).map<TeamCollection>((el) => {
+      return {
+        id: el.id,
+        title: el.title,
+        children: null,
+        requests: null,
+      }
+    })
 
-    const requests: TeamRequest[] = (await getCollectionRequests(apolloClient, collectionID))
-      .map<TeamRequest>(el => {
-        return {
-          id: el.id,
-          collectionID: collectionID,
-          title: el.title,
-          request: el.request
-        }
-      })
+    const requests: TeamRequest[] = (
+      await getCollectionRequests(apolloClient, collectionID)
+    ).map<TeamRequest>((el) => {
+      return {
+        id: el.id,
+        collectionID: collectionID,
+        title: el.title,
+        request: el.request,
+      }
+    })
 
     collection.children = collections
     collection.requests = requests