From 8f09c827637eb9ab293f53bfa90af2c465fe089a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 14 May 2021 05:50:17 +0000
Subject: [PATCH] fixes and refactor

---
 components/collections/ChooseType.vue       |   3 +-
 components/collections/index.vue            |   7 +-
 components/collections/my/Collection.vue    |   6 +-
 components/collections/teams/Collection.vue |   4 +-
 components/collections/teams/Folder.vue     |   2 +-
 components/docs/Collection.vue              |   8 +-
 components/teams/Edit.vue                   |  19 ++--
 components/teams/Team.vue                   |   5 +-
 components/teams/index.vue                  |  13 +++
 helpers/apollo.ts                           |   8 +-
 helpers/teams/TeamCollectionAdapter.ts      |   4 +-
 helpers/teams/TeamMemberAdapter.ts          | 113 ++++++++++----------
 pages/doc.vue                               |   2 +-
 13 files changed, 107 insertions(+), 87 deletions(-)

diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index a87b6525d..c7e477ff4 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -5,7 +5,7 @@
       <SmartTab
         :id="'team-collections'"
         :label="'Team Collections'"
-        v-if="currentUser && currentUser.eaInvited"
+        v-if="currentUser && currentUser.eaInvited && !doc"
       >
         <ul>
           <li>
@@ -40,6 +40,7 @@ import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 
 export default {
   props: {
+    doc: Boolean,
     show: Boolean,
   },
   subscriptions() {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 3b539eead..bf584e22f 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -13,6 +13,7 @@
     <CollectionsChooseType
       :collectionsType="collectionsType"
       :show="showTeamCollections"
+      :doc="doc"
       @update-collection-type="updateCollectionType"
       @update-selected-team="updateSelectedTeam"
     />
@@ -108,7 +109,8 @@
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
             @update-team-collections="updateTeamCollections"
-            @select-collection="$emit('use-collection', index)"
+            @select-collection="$emit('use-collection', collection)"
+            @unselect-collection="$emit('remove-collection', collection)"
             @select-folder="
               $emit('select-folder', {
                 folderName:
@@ -128,11 +130,10 @@
                 picked = $event.id
               }
             "
-            @unselect-collection="$emit('remove-collection', collection)"
             @expand-collection="expandCollection"
             @remove-collection="removeCollection"
             @remove-request="removeRequest"
-            :picked="picked"
+            :picked="picked.toString()"
           />
         </li>
       </ul>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 89c90f914..a2e362ff8 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -12,7 +12,9 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
         <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-        <i v-if="picked === collectionIndex" class="text-green-400 material-icons">check_circle</i>
+        <i v-if="picked === collectionIndex.toString()" class="text-green-400 material-icons"
+          >check_circle</i
+        >
         <i v-else class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
@@ -92,7 +94,7 @@
               })
             "
             @remove-request="removeRequest"
-            :picked="picked"
+            :picked="picked.toString()"
           />
         </li>
       </ul>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 91325bc86..d5275439e 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -99,7 +99,7 @@
             "
             @expand-collection="expandCollection"
             @remove-request="removeRequest"
-            :picked="picked"
+            :picked="picked.toString()"
           />
         </li>
       </ul>
@@ -110,7 +110,7 @@
           class="ml-8 border-l border-brdColor"
         >
           <CollectionsTeamsRequest
-            :request="JSON.parse(request.request)"
+            :request="request.request"
             :collection-index="collectionIndex"
             :folder-index="-1"
             :folder-name="collection.name"
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index efdba7dde..c93455979 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -93,7 +93,7 @@
           class="flex ml-8 border-l border-brdColor"
         >
           <CollectionsTeamsRequest
-            :request="JSON.parse(request.request)"
+            :request="request.request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :folder-name="folder.name"
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index 7cf26374f..8d665b593 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -4,10 +4,14 @@
       <i class="material-icons">folder</i>
       {{ collection.name || $t("none") }}
     </h2>
-    <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
+    <span
+      class="folder"
+      v-for="(folder, index) in collection.folders"
+      :key="`sub-collection-${index}`"
+    >
       <DocsFolder :folder="folder" />
     </span>
-    <div v-for="(request, index) in collection.requests" :key="index">
+    <div v-for="(request, index) in collection.requests" :key="`request-${index}`">
       <DocsRequest :request="request" />
     </div>
   </div>
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index da5fa28eb..aafe300b7 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -165,6 +165,7 @@
 <script>
 import * as team_utils from "~/helpers/teams/utils"
 import cloneDeep from "lodash/cloneDeep"
+import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
 
 export default {
   props: {
@@ -177,21 +178,19 @@ export default {
       rename: null,
       doneButton: '<i class="material-icons">done</i>',
       members: [],
-      membersSubject: null,
-      membersSubscription: null,
       newMembers: [],
+      membersAdapter: new TeamMemberAdapter(null),
     }
   },
+  mounted() {
+    this.membersAdapter.members$.subscribe((list) => {
+      console.log(list)
+      this.members = cloneDeep(list)
+    })
+  },
   watch: {
     editingteamID(teamID) {
-      team_utils.getLiveTeamMembersList(this.$apollo, teamID).then((subject) => {
-        this.membersSubject = subject
-
-        this.membersSubscription = this.membersSubject.subscribe((memberList) => {
-          console.log(memberList)
-          this.members = cloneDeep(memberList)
-        })
-      })
+      this.membersAdapter.changeTeamID(teamID)
     },
   },
   computed: {
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 2820063a3..87afd52a2 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -32,13 +32,12 @@
             class="icon"
             @click="exitTeam"
             v-close-popover
-            :disabled="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+            :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
           >
             <i class="material-icons">remove</i>
             <div
               v-tooltip.left="{
-                content:
-                  team.myRole === 'OWNER' && team.ownersCount == 1 ? null : $t('disable_exit'),
+                content: team.myRole === 'OWNER' && team.ownersCount == 1 ? $t('disable_exit') : '',
               }"
             >
               <span>{{ $t("exit") }}</span>
diff --git a/components/teams/index.vue b/components/teams/index.vue
index c78f85a87..ede3d5ee4 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,5 +1,16 @@
 <template>
   <AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
+    <div class="flex flex-col">
+      <label>{{ $t("teams") }}</label>
+      <div v-if="fb.currentUser"></div>
+      <div v-else>
+        <label>{{ $t("login_with") }}</label>
+        <p>
+          <FirebaseLogin />
+        </p>
+      </div>
+    </div>
+
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <TeamsEdit
       :team="myTeams[0]"
@@ -53,6 +64,7 @@ ul {
 
 <script>
 import gql from "graphql-tag"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
@@ -64,6 +76,7 @@ export default {
       editingteamID: "",
       me: {},
       myTeams: [],
+      fb,
     }
   },
   apollo: {
diff --git a/helpers/apollo.ts b/helpers/apollo.ts
index 1e3dcf2d5..d4cfdb978 100644
--- a/helpers/apollo.ts
+++ b/helpers/apollo.ts
@@ -50,12 +50,8 @@ const wsLink = new WebSocketLink({
     reconnect: true,
     lazy: true,
     connectionParams: () => {
-      if (authToken) {
-        return {}
-      } else {
-        return {
-          authorization: `Bearer ${authToken}`,
-        }
+      return {
+        authorization: `Bearer ${authToken}`,
       }
     },
   },
diff --git a/helpers/teams/TeamCollectionAdapter.ts b/helpers/teams/TeamCollectionAdapter.ts
index 4972273b7..dae051399 100644
--- a/helpers/teams/TeamCollectionAdapter.ts
+++ b/helpers/teams/TeamCollectionAdapter.ts
@@ -466,6 +466,8 @@ export default class TeamCollectionAdapter {
         },
       })
       .subscribe(({ data }) => {
+        console.log("from adapter")
+
         this.updateRequest({
           id: data.teamRequestUpdated.id,
           collectionID: data.teamRequestUpdated.collectionID,
@@ -526,7 +528,7 @@ export default class TeamCollectionAdapter {
         id: el.id,
         collectionID: collectionID,
         title: el.title,
-        request: el.request,
+        request: JSON.parse(el.request),
       }
     })
 
diff --git a/helpers/teams/TeamMemberAdapter.ts b/helpers/teams/TeamMemberAdapter.ts
index 473a44c85..058f5e0e9 100644
--- a/helpers/teams/TeamMemberAdapter.ts
+++ b/helpers/teams/TeamMemberAdapter.ts
@@ -12,7 +12,6 @@ interface TeamsTeamMember {
 }
 
 export default class TeamMemberAdapter {
-
   members$: BehaviorSubject<TeamsTeamMember[]>
 
   private teamMemberAdded$: ZenObservable.Subscription | null
@@ -21,7 +20,7 @@ export default class TeamMemberAdapter {
 
   constructor(private teamID: string | null) {
     this.members$ = new BehaviorSubject<TeamsTeamMember[]>([])
-    
+
     this.teamMemberAdded$ = null
     this.teamMemberUpdated$ = null
     this.teamMemberRemoved$ = null
@@ -66,72 +65,76 @@ export default class TeamMemberAdapter {
       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
+    this.teamMemberAdded$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamMemberAdded($teamID: String!) {
+            teamMemberAdded(teamID: $teamID) {
+              user {
+                uid
+                email
+              }
+              role
             }
-            role
           }
-        }
-      `,
-      variables: {
-        teamID: this.teamID
-      }
-    }).subscribe(({ data }) => {
-      this.members$.next([...this.members$.value, data.teamMemberAdded])
-    })
+        `,
+        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.teamMemberRemoved$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamMemberRemoved($teamID: String!) {
+            teamMemberRemoved(teamID: $teamID)
+          }
+        `,
+        variables: {
+          teamID: this.teamID,
+        },
+      })
+      .subscribe(({ data }) => {
+        console.log(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
+    this.teamMemberUpdated$ = apolloClient
+      .subscribe({
+        query: gql`
+          subscription TeamMemberUpdated($teamID: String!) {
+            teamMemberUpdated(teamID: $teamID) {
+              user {
+                uid
+                email
+              }
+              role
             }
-            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
-      )
+        `,
+        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
+        if (!obj) return
 
-      Object.assign(obj, data.teamMemberUpdated)
-    })
+        Object.assign(obj, data.teamMemberUpdated)
+      })
   }
 }
diff --git a/pages/doc.vue b/pages/doc.vue
index 8cd43e684..8aee00d25 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -76,7 +76,7 @@
               </div>
             </div>
             <div>
-              <span v-for="(collection, index) in this.items" :key="index">
+              <span v-for="(collection, index) in this.items" :key="`collection-${index}`">
                 <DocsCollection :collection="collection" />
               </span>
             </div>