Update membership instead of delete + create chain

By preserving the memberhsip, your position in the table will stay the same. Looks much better :)
webkom · Apr 17, 2023 · 7f23b49 · 7f23b49
1 parent 6df20b6
commit 7f23b49
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/app/actions/GroupActions.ts b/app/actions/GroupActions.ts
@@ -33,6 +33,24 @@ export function addMember({
     },
   });
 }
+export function editMembership(
+  membership: MembershipType,
+  role: RoleType
+): Thunk<Promise<void>> {
+  return callAPI({
+    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): Thunk<any> {
   return callAPI({
     types: Membership.REMOVE,

diff --git a/app/actions/callAPI.ts b/app/actions/callAPI.ts
@@ -14,7 +14,6 @@ import fetchJSON from 'app/utils/fetchJSON';
 import { configWithSSR } from '../config';
 import { setStatusCode } from './RoutingActions';
 import type { Schema } from 'normalizr';
-import type { $Shape } from 'utility-types';
 
 function urlFor(resource: string) {
   if (resource.match(/^\/\//)) {

diff --git a/app/routes/admin/groups/components/GroupMembers.tsx b/app/routes/admin/groups/components/GroupMembers.tsx
@@ -6,6 +6,7 @@ import {
   fetchMemberships,
   fetchMembershipsPagination,
   addMember,
+  editMembership,
   removeMember,
 } from 'app/actions/GroupActions';
 import type { AddMemberArgs } from 'app/actions/GroupActions';
@@ -15,9 +16,11 @@ import { selectMembershipsForGroup } from 'app/reducers/memberships';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import type Membership from 'app/store/models/Membership';
 import type { CurrentUser } from 'app/store/models/User';
+import type { RoleType } from 'app/utils/constants';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
 import AddGroupMember from './AddGroupMember';
 import GroupMembersList from './GroupMembersList';
+import type { Push } from 'connected-react-router';
 
 type Props = {
   groupId: number;
@@ -39,8 +42,9 @@ type Props = {
   memberships: Membership[];
   showDescendants: boolean;
   addMember: (arg0: AddMemberArgs) => Promise<any>;
+  editMembership: (membership: Membership, role: RoleType) => Promise<void>;
   removeMember: (membership: Membership) => Promise<void>;
-  push: (arg0: any) => void;
+  push: Push;
   pathname: string;
   search: string;
   query: Record<string, any>;
@@ -49,6 +53,7 @@ type Props = {
 };
 export const GroupMembers = ({
   addMember,
+  editMembership,
   removeMember,
   groupId,
   memberships,
@@ -87,7 +92,7 @@ export const GroupMembers = ({
         fetch={fetch}
         fetching={fetching}
         showDescendants={showDescendants}
-        addMember={addMember}
+        editMembership={editMembership}
         removeMember={removeMember}
         memberships={memberships}
         currentUser={currentUser}
@@ -146,6 +151,7 @@ function mapStateToProps(state, props) {
 
 const mapDispatchToProps = {
   addMember,
+  editMembership,
   removeMember,
   fetch: fetchMembershipsPagination,
   push,

diff --git a/app/routes/admin/groups/components/GroupMembersList.tsx b/app/routes/admin/groups/components/GroupMembersList.tsx
@@ -3,7 +3,6 @@ import qs from 'qs';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Select from 'react-select';
-import type { AddMemberArgs } from 'app/actions/GroupActions';
 import Icon from 'app/components/Icon';
 import Flex from 'app/components/Layout/Flex';
 import { ConfirmModalWithParent } from 'app/components/Modal/ConfirmModal';
@@ -13,13 +12,14 @@ import type Membership from 'app/store/models/Membership';
 import type { CurrentUser } from 'app/store/models/User';
 import { ROLES, type RoleType } from 'app/utils/constants';
 import styles from './GroupMembersList.css';
+import type { Push } from 'connected-react-router';
 
 type Props = {
   fetching: boolean;
   hasMore: boolean;
   groupId: number;
   memberships: Membership[];
-  addMember: (arg0: AddMemberArgs) => Promise<any>;
+  editMembership: (membership: Membership, role: RoleType) => Promise<void>;
   removeMember: (membership: Membership) => Promise<void>;
   showDescendants: boolean;
   groupsById: Record<
@@ -35,7 +35,7 @@ type Props = {
     query: Record<string, any>;
     descendants: boolean;
   }) => Promise<any>;
-  push: (arg0: any) => void;
+  push: Push;
   pathname: string;
   search: string;
   query: Record<string, any>;
@@ -46,7 +46,7 @@ type Props = {
 const GroupMembersList = ({
   memberships,
   groupId,
-  addMember,
+  editMembership,
   removeMember,
   showDescendants,
   fetch,
@@ -98,13 +98,7 @@ const GroupMembersList = ({
               ...prev,
               [id]: false,
             }));
-            await removeMember(membership).then(() =>
-              addMember({
-                userId: membership.user.id,
-                groupId: membership.abakusGroup,
-                role: value.value,
-              })
-            );
+            await editMembership(membership, value.value);
           }}
         />
       );