refactor: removeTeamMember optimization

Author: 7eliassen

src/application/services/useNoteSettings.ts

@@ -71,8 +71,9 @@ interface UseNoteSettingsComposableState {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<void>;
+  removeMemberByUserId: (id: NoteId, userId: UserId) => Promise<boolean>;
 }
 
 /**
@@ -199,9 +200,10 @@ export default function (): UseNoteSettingsComposableState {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<void> => {
-    await noteSettingsService.removeMemberByUserId(id, userId);
+  const removeMemberByUserId = async (id: NoteId, userId: UserId): Promise<boolean> => {
+    return await noteSettingsService.removeMemberByUserId(id, userId);
   };
 
   return {

src/domain/noteSettings.repository.interface.ts

@@ -48,6 +48,7 @@ export default interface NoteSettingsRepositoryInterface {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  removeMemberByUserId(id: NoteId, userId: UserId): Promise<void>;
+  removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean>;
 }

src/domain/noteSettings.service.ts

@@ -123,8 +123,9 @@ export default class NoteSettingsService {
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
     return await this.noteSettingsRepository.removeMemberByUserId(id, userId);
   }
 }

src/infrastructure/noteSettings.repository.ts

@@ -74,10 +74,12 @@ export default class NoteSettingsRepository implements NoteSettingsRepositoryInt
    * Delete team member by user id
    * @param id - Note id
    * @param userId - User id
+   * @returns true if user was removed
    */
-  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<void> {
+  public async removeMemberByUserId(id: NoteId, userId: UserId): Promise<boolean> {
     const data = { userId };
+    const response = await this.transport.delete<number>(`/note-settings/${id}/team`, data);
 
-    await this.transport.delete<boolean>(`/note-settings/${id}/team`, data);
+    return response === userId;
   }
 }

src/presentation/components/team/MoreActions.vue

@@ -1,9 +1,9 @@
 <template>
   <button
     ref="triggerButton"
+    :title="t('noteSettings.team.contextMenu.title')"
     class="more-actions-button"
     @click="handleButtonClick"
-    :title="t('noteSettings.team.contextMenu.title')"
   >
     <Icon
       name="EtcVertical"
@@ -43,17 +43,13 @@ const menuItems: ContextMenuItem[] = [
     title: t('noteSettings.team.contextMenu.remove'),
     onActivate: async () => {
       hide();
-      try {
-        await handleRemove(props.teamMember);
-      } catch (error) {
-        console.error('Failed to remove team member', error);
-      }
+      await handleRemove(props.teamMember);
     },
   },
 ];
 
 const emit = defineEmits<{
-  teamMemberRemoved: [];
+  teamMemberRemoved: [userId: TeamMember['user']['id']];
 }>();
 
 const handleButtonClick = (): void => {
@@ -87,8 +83,11 @@ const handleRemove = async (member: TeamMember): Promise<void> => {
   );
 
   if (shouldRemove) {
-    await removeMemberByUserId(props.noteId, member.user.id);
-    emit('teamMemberRemoved');
+    const isDeleted = await removeMemberByUserId(props.noteId, member.user.id);
+
+    if (isDeleted) {
+      emit('teamMemberRemoved', member.user.id);
+    }
   }
 };
 </script>

src/presentation/components/team/Team.vue

@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Team, MemberRole } from '@/domain/entities/Team';
+import { Team, MemberRole, TeamMember } from '@/domain/entities/Team';
 import { Note, NoteId } from '@/domain/entities/Note';
 import { Section, Row, Avatar } from '@codexteam/ui/vue';
 import RoleSelect from './RoleSelect.vue';
@@ -59,7 +59,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  teamMemberRemoved: [];
+  teamMemberRemoved: [id: TeamMember['user']['id']];
 }>();
 
 const { t } = useI18n();
@@ -91,8 +91,8 @@ const sortedTeam = computed(() => {
 });
 
 // Listen for teamMemberRemoved event from child component and bubble them up
-const handleMemberRemoved = () => {
-  emit('teamMemberRemoved');
+const handleMemberRemoved = (userId: TeamMember['user']['id']): void => {
+  emit('teamMemberRemoved', userId);
 };
 </script>
 

src/presentation/pages/NoteSettings.vue

@@ -112,6 +112,7 @@ import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
 import useNavbar from '@/application/services/useNavbar';
 import { useRoute } from 'vue-router';
+import { TeamMember } from '@/domain/entities/Team';
 
 const { t } = useI18n();
 
@@ -223,12 +224,18 @@ onMounted(async () => {
 });
 
 /**
- * Handle team member removal by refreshing the note settings
+ * Handle team member removal by refreshing the note settings and removing the member from the team
+ *
+ * @param userId - user id of the member to remove
  */
-async function handleTeamMemberRemoved() {
-  await loadSettings(props.id);
+async function handleTeamMemberRemoved(userId: TeamMember['user']['id']) {
+  if (noteSettings.value !== null) {
+    noteSettings.value = {
+      ...noteSettings.value,
+      team: noteSettings.value.team.filter(member => member.user.id !== userId),
+    };
+  }
 }
-
 </script>
 
 <style setup lang="postcss" scoped>