Update membership instead of delete + create chain

By preserving the memberhsip, your position in the table will stay the same. Looks much better :)
webkom · Jan 18, 2024 · 162763d · 162763d
1 parent 6e4886c
commit 162763d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/app/actions/GroupActions.ts b/app/actions/GroupActions.ts
@@ -31,6 +31,25 @@ export function addMember({ groupId, userId, role }: AddMemberArgs) {
   });
 }
 
+export function editMembership(
+  membership: MembershipType,
+  role: RoleType
+) {
+  return callAPI<MembershipType>({
+    types: Membership.UPDATE,
+    endpoint: `/groups/${membership.abakusGroup}/memberships/${membership.id}/`,
+    method: 'PATCH',
+    body: {
+      membership: membership,
+      role: role,
+    },
+    schema: membershipSchema,
+    meta: {
+      errorMessage: 'Endring av medlemskap feilet',
+    },
+  });
+}
+
 export function removeMember(membership: MembershipType) {
   return callAPI({
     types: Membership.REMOVE,

diff --git a/app/routes/admin/groups/components/GroupMembersList.tsx b/app/routes/admin/groups/components/GroupMembersList.tsx
@@ -1,7 +1,7 @@
 import { ConfirmModal, Flex, Icon } from '@webkom/lego-bricks';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { removeMember, addMember } from 'app/actions/GroupActions';
+import { removeMember, editMembership } from 'app/actions/GroupActions';
 import { SelectInput } from 'app/components/Form';
 import Table from 'app/components/Table';
 import { defaultGroupMembersQuery } from 'app/routes/admin/groups/components/GroupMembers';
@@ -74,18 +74,11 @@ const GroupMembersList = ({
           }}
           options={roleOptions}
           onChange={(value: { label: string; value: RoleType }) => {
-            setMembershipsInEditMode((prev) => ({
-              ...prev,
-              [id]: false,
-            }));
-            dispatch(removeMember(membership)).then(() => {
-              dispatch(
-                addMember({
-                  userId: membership.user.id,
-                  groupId: membership.abakusGroup,
-                  role: value.value,
-                })
-              );
+            dispatch(editMembership(membership, value.value)).then(() => {
+              setMembershipsInEditMode((prev) => ({
+                ...prev,
+                [id]: false,
+              }));
             });
           }}
         />