Refactor join/leave button function and the related events

webapp/components/Button/JoinLeaveButton.vue

@@ -68,19 +68,17 @@ export default {
       const mutation = join ? joinGroupMutation : leaveGroupMutation
 
       this.hovered = false
-      const optimisticResult = { joinedByCurrentUser: join }
-      this.$emit('optimistic', optimisticResult)
+      this.$emit('prepare', join)
 
       try {
         const { data } = await this.$apollo.mutate({
           mutation,
           variables: { groupId: this.groupId, userId: this.userId },
         })
-        const joinedGroup = join ? data.JoinGroup : data.LeaveGroup
-        this.$emit('update', joinedGroup)
+        const joinedLeftGroupResult = join ? data.JoinGroup : data.LeaveGroup
+        this.$emit('update', joinedLeftGroupResult)
       } catch (error) {
-        optimisticResult.joinedByCurrentUser = !join
-        this.$emit('optimistic', optimisticResult)
+        this.$toast.error(error.message)
       }
     },
   },

webapp/pages/group/_id/_slug.vue

@@ -96,7 +96,7 @@
               :isMember="isGroupMember"
               :disabled="isGroupOwner"
               :loading="$apollo.loading"
-              @optimistic="optimisticJoinLeave"
+              @prepare="prepareJoinLeave"
               @update="updateJoinLeave"
             />
             <!-- implement:
@@ -457,31 +457,13 @@ export default {
     //   this.user.followedByCurrentUser = followedByCurrentUser
     //   this.user.followedBy = followedBy
     // },
-    optimisticJoinLeave({ joinedByCurrentUser }) {
-      /*
-       * Note: "membersCountStartValue" is updated to avoid counting from 0 when join/leave
-       */
-      let members
+    prepareJoinLeave() {
+      // "membersCountStartValue" is updated to avoid counting from 0 when join/leave
       this.membersCountStartValue = this.GroupMembers.length
-      if (joinedByCurrentUser) {
-        // this.membersCountToLoad++
-        members = [this.currentUser, ...this.GroupMembers]
-      } else {
-        // this.membersCountToLoad--
-        members = this.GroupMembers.filter((user) => user.id !== this.currentUser.id)
-      }
-      this.GroupMembers = members
     },
     updateJoinLeave({ myRoleInGroup }) {
       this.Group[0].myRole = myRoleInGroup
-      const currentUserInGroupMembers = this.GroupMembers.find(
-        (user) => user.id === this.currentUser.id,
-      )
-      if (currentUserInGroupMembers) {
-        currentUserInGroupMembers.myRoleInGroup = myRoleInGroup
-      } else {
-        this.$apollo.queries.GroupMembers.refetch()
-      }
+      this.$apollo.queries.GroupMembers.refetch()
     },
     fetchAllMembers() {
       this.membersCountToLoad = Infinity