Fixed handling of group_memberships

src/App/Pages/Groups/Board/GroupMemberManagement.js

@@ -19,8 +19,10 @@ const GroupMemberManagement = ({ association }) => {
     const [group, setGroup] = useState({});
     const [memberships, setMemberships] = useState([]);
 
-    const addMembership = (membership) => {};
-    const editMembership = (edited_memberships) => {};
+    const addMembership = (membership) => setMemberships(prevState => prevState.concat(membership));
+    const updateMembership = (edited_membership) => setMemberships(prevState =>
+        prevState.map(membership=>membership.slug === membership.slug ? {...membership, ...edited_membership} : membership)
+    );
 
     // Get the full representation of propGroup on mount
     useEffect(()=>{
@@ -31,12 +33,13 @@ const GroupMemberManagement = ({ association }) => {
             on_succes: (data) => {
                 console.log("This is called too");
                 setGroup(data);
+                setMemberships(data.groupmemberships);
             },
             on_failure: () => {
                 alerthandler.handleAlertHandler("red", "Loading group failed");
             },
         });
-    }, [slug]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, ["on mount only"]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const morphDataToGroupMemberList = (data) => {
         data = data.map(member_profile => Object({
@@ -64,7 +67,7 @@ const GroupMemberManagement = ({ association }) => {
     };
 
     const rowSelectionEnabledFilter = (row, selection) => {
-        const profile_urls = group.groupmemberships ? group.groupmemberships.map(m => m.profile.url) : [];
+        const profile_urls = memberships.map(m => m.profile.url);
         return !profile_urls.includes(row.url);
     };
 
@@ -79,14 +82,15 @@ const GroupMemberManagement = ({ association }) => {
                     <GroupMemberManagementGroupMemberList
                         current_board={group.board_group}
                         association={association}
-                        memberships={group.groupmemberships ? morphDataToGroupMemberList(group.groupmemberships) : []}
+                        memberships={morphDataToGroupMemberList(memberships)}
+                        updateRows={updateMembership}
                     />
                 </Block>
                 <GroupMemberManagementAssociationMemberList
                     rowSelectionEnabledFilter={rowSelectionEnabledFilter}
                     association={association}
                     group={group}
-                    onAdd={() => {}}
+                    onAdd={addMembership}
                 />
             </Container>
         </div>

src/App/Pages/Groups/Board/GroupMemberManagementGroupMemberList.js

@@ -6,7 +6,7 @@ import ExtremeTable from "../../../Components/Tables/ExtremeTable";
 import {useAlertHandler} from "../../../Contexts/AlertHandler";
 import {useAPI} from "../../../Contexts/API";
 
-export const GroupMemberManagementGroupMemberList = ({ memberships: initRows, board_group}) => {
+export const GroupMemberManagementGroupMemberList = ({ memberships: initRows, board_group, updateRows}) => {
     const API = useAPI();
     const alerthandler = useAlertHandler();
 
@@ -14,9 +14,6 @@ export const GroupMemberManagementGroupMemberList = ({ memberships: initRows, bo
 
     useEffect(()=>setRows(initRows), [initRows]);
 
-    console.log(initRows);
-    console.log(rows);
-
     let columns = [
         { name: "given_name", title: "Given Name" },
         { name: "surname", title: "Last Name" },
@@ -55,13 +52,12 @@ export const GroupMemberManagementGroupMemberList = ({ memberships: initRows, bo
             membership.email = edited_row.email;
             membership.order = edited_row.order;
         }
-        console.log(membership);
         API.callv4({
             url: membership.url,
             method: "PATCH",
             object: membership,
             on_succes: (patched_membership) => {
-                setRows(prevState => prevState.map(row=>(row.url === patched_membership.url) ? patched_membership : row));
+                updateRows(patched_membership);
                 alerthandler.handleAlertHandler("green", "Save successful");
             },
             on_failure: () => {alerthandler.handleAlertHandler("red", "Save failed");},

src/App/Pages/Members/MembersIncoming.js

@@ -30,8 +30,7 @@ const MembersIncoming = ({ association }) => {
         });
     };
 
-    // run refreshPendingMemberships once on mount
-    useEffect(()=>refreshPendingMemberships(), []); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(refreshPendingMemberships, ["run on mount only"]); // eslint-disable-line react-hooks/exhaustive-deps
 
 
     return (
@@ -68,7 +67,7 @@ const IncomingRequest = ({ membership, postPatch }) => {
         API.callv4({
             url: membership.url,
             method: "PATCH",
-            object: {"slug": membership.slug, "status": status},
+            object: {"status": status},
             on_succes: () => {
                 alerthandler.handleAlertHandler("success", status+": "+membership.profile.given_name);
                 postPatch();