Introduce TeamMemberAdapter

helpers/teams/TeamMemberAdapter.ts

@@ -0,0 +1,137 @@
+import { BehaviorSubject } from "rxjs"
+import { apolloClient } from "~/helpers/apollo"
+import gql from "graphql-tag"
+import cloneDeep from "lodash/cloneDeep"
+
+interface TeamsTeamMember {
+  user: {
+    uid: string
+    email: string
+  }
+  role: "OWNER" | "EDITOR" | "VIEWER"
+}
+
+export default class TeamMemberAdapter {
+
+  members$: BehaviorSubject<TeamsTeamMember[]>
+
+  private teamMemberAdded$: ZenObservable.Subscription | null
+  private teamMemberRemoved$: ZenObservable.Subscription | null
+  private teamMemberUpdated$: ZenObservable.Subscription | null
+
+  constructor(private teamID: string | null) {
+    this.members$ = new BehaviorSubject<TeamsTeamMember[]>([])
+    
+    this.teamMemberAdded$ = null
+    this.teamMemberUpdated$ = null
+    this.teamMemberRemoved$ = null
+
+    if (this.teamID) this.initialize()
+  }
+
+  changeTeamID(newTeamID: string | null) {
+    this.members$.next([])
+
+    this.teamID = newTeamID
+
+    if (this.teamID) this.initialize()
+  }
+
+  unsubscribeSubscriptions() {
+    this.teamMemberAdded$?.unsubscribe()
+    this.teamMemberRemoved$?.unsubscribe()
+    this.teamMemberUpdated$?.unsubscribe()
+  }
+
+  private async initialize() {
+    await this.loadTeamMembers()
+    this.registerSubscriptions()
+  }
+
+  private async loadTeamMembers(): Promise<void> {
+    const { data } = await apolloClient.query({
+      query: gql`
+        query GetTeamMembers($teamID: String!) {
+          team(teamID: $teamID) {
+            members {
+              user {
+                uid
+                email
+              }
+              role
+            }
+          }
+        }
+      `,
+      variables: {
+        teamID: this.teamID,
+      },
+    });
+
+    this.members$.next(data.team.members)
+  }
+
+  private registerSubscriptions() {
+    this.teamMemberAdded$ = apolloClient.subscribe({
+      query: gql`
+        subscription TeamMemberAdded($teamID: String!) {
+          teamMemberAdded(teamID: $teamID) {
+            user {
+              uid
+              email
+            }
+            role
+          }
+        }
+      `,
+      variables: {
+        teamID: this.teamID
+      }
+    }).subscribe(({ data }) => {
+      this.members$.next([...this.members$.value, data.teamMemberAdded])
+    })
+
+    this.teamMemberRemoved$ = apolloClient.subscribe({
+      query: gql`
+        subscription TeamMemberRemoved($teamID: String!) {
+          teamMemberRemoved(teamID: $teamID)
+        }
+      `,
+      variables: {
+        teamID: this.teamID
+      }
+    }).subscribe(({ data }) => {
+      this.members$.next(
+        this.members$.value.filter(
+          el => el.user.uid !== data.teamMemberRemoved
+        )
+      )
+    })
+
+    this.teamMemberUpdated$ = apolloClient.subscribe({
+      query: gql`
+        subscription TeamMemberUpdated($teamID: String!) {
+          teamMemberUpdated(teamID: $teamID) {
+            user {
+              uid
+              email
+            }
+            role
+          }
+        }
+      `,
+      variables: {
+        teamID: this.teamID
+      }
+    }).subscribe(({ data }) => {
+      const list = cloneDeep(this.members$.value)
+      const obj = list.find(
+        el => el.user.uid === data.teamMemberUpdated.user.uid
+      )
+
+      if (!obj) return
+
+      Object.assign(obj, data.teamMemberUpdated)
+    })
+  }
+}