Copy ID + Auto Update Members

Enhancement for Copy ID #722
Auto Update Members for approving/rejecting members as well as removing one. #725 and #717

src/comps/meetings/MeetingPreviewDialog.js

@@ -10,6 +10,7 @@ import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import AppBar from "@mui/material/AppBar";
+import Button from "@mui/material/Button"
 import FlexCenter from "../ui/FlexCenter";
 
 const previewEmitter = new EventEmitter();
@@ -34,7 +35,17 @@ const classes = {
 		padding: 3,
 		width: "700px",
 		maxWidth: "90vw"
-	}
+	},
+	button: {
+		backgroundColor: "light-blue",
+		color: "white",
+		border: "none",
+		padding: "8px 20px",
+		cursor: "pointer", 
+		"&:hover": {
+			backgroundColor: "darkblue",
+		},
+	},
 };
 
 const MeetingPreviewDialog = () => {
@@ -58,13 +69,19 @@ const MeetingPreviewDialog = () => {
 		return () => previewEmitter.removeListener("open", callback);
 	});
 
+  const copyMeetingId = () => {
+    navigator.clipboard.writeText(meetingId)
+  };
+
+
 	return (
 		<Dialog fullScreen={isMobile} open={open} onClose={closeDialog} TransitionComponent={Transition}>
 			<AppBar color={"secondary"} sx={classes.appBar} enableColorOnDark>
 				<Toolbar>
 					<Typography variant="h6" sx={classes.title}>
 						Meeting Preview:{" "}
 					</Typography>
+					<Button onClick={copyMeetingId} sx={classes.button}> Copy ID </Button>
 					<IconButton edge="end" color="inherit" onClick={closeDialog} aria-label="close" size="large">
 						<CloseIcon />
 					</IconButton>

src/comps/pages/organization/OrgNavPanel.js

@@ -24,6 +24,7 @@ import { triggerLoginDialog } from "../../auth/AuthDialog";
 import UserContext from "../../context/UserContext";
 import Join from "./join";
 import LinkifyText from "../../ui/LinkifyText";
+import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
 
 const classes = {
 	avatar: {
@@ -87,6 +88,10 @@ const OrgNavPanel = ({ match }) => {
 		memberStatus = org.membershipRequest.adminApproval ? "invited" : "requested";
 	}
 
+	const CopyOrgId = () => {
+		navigator.clipboard.writeText(org.id)
+	  };
+
 	const [leaveOpen, setLeaveOpen] = React.useState(false);
 	const [joinOpen, setJoinOpen] = React.useState(false);
 	const [leaveMutation] = useMutation(LEAVE_MUTATION, {
@@ -150,10 +155,10 @@ const OrgNavPanel = ({ match }) => {
 				<TabItem label={"Meetings"} to={match.path + "/meetings"} icon={<GroupWork />} />
 				<TabItem label={"Members"} to={match.path + "/members"} icon={<Person />} />
 				<TabItem label={"Groups"} to={match.path + "/groups"} icon={<Group />} />
-
 				{org.membership?.adminPrivileges && (
 					<TabItem label={"Admin Panel"} exact={false} to={match.path + "/admin"} icon={<Settings />} />
 				)}
+				<FlexCenter> <Button onClick={CopyOrgId} > <FileCopyOutlinedIcon/> Copy ID </Button> </FlexCenter>
 			</List>
 			<Dialog open={leaveOpen} onClose={() => setLeaveOpen(false)}>
 				<DialogTitle>Are you sure you want to leave {org.name}?</DialogTitle>

src/pages/org/admin/member-requests.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {
 	Button,
 	Dialog,
@@ -90,15 +90,20 @@ export default function MemberRequests({ match }) {
 	const { data, refetch } = useQuery(QUERY, {
 		variables: { orgId: org.id }
 	});
+	useEffect(() => {
+		if (data) {
+		  refetch();
+		}
+	  }, [data, refetch]);
 	const [dialogError, setDialogError] = React.useState("");
 	const [approveMutation] = useMutation(APPROVE_MUTATION, {
-		update(cache) {
-			cache.reset().then(() => refetch());
-		}
+		onCompleted() {
+			refetch(); 
+		},
 	});
 	const [deleteMutation] = useMutation(DELETE_MUTATION, {
-		update(cache) {
-			cache.reset().then(() => refetch());
+		onCompleted() {
+			refetch();
 		},
 		onError(err) {
 			setDialogError(err.message);
@@ -353,4 +358,4 @@ export default function MemberRequests({ match }) {
 			</Dialog>
 		</Box>
 	);
-}
+}

src/pages/org/admin/members.js

@@ -1,4 +1,4 @@
-import React from "react";
+import {useState, useContext} from "react";
 import {
 	Avatar,
 	Button,
@@ -71,8 +71,8 @@ const REMOVE_MUTATION = gql`
 `;
 
 export default function Members({ match }) {
-	const user = React.useContext(UserContext);
-	const { data } = useQuery(QUERY, {
+	const user = useContext(UserContext);
+	const { data, refetch } = useQuery(QUERY, {
 		variables: { url: match.params.orgUrl }
 	});
 	const [alterMutation] = useMutation(ALTER_MUTATION);
@@ -81,47 +81,56 @@ export default function Members({ match }) {
 			cache.reset();
 		}
 	});
-	const [editingMembership, setEditingMembership] = React.useState({});
-	const [removingMembership, setRemovingMembership] = React.useState({});
-	const [role, setRole] = React.useState("");
-	const [adminPrivileges, setAdminPrivileges] = React.useState(false);
-	const [notify, setNotify] = React.useState(true);
-	const [removeNotify, setRemoveNotify] = React.useState(true);
+	const [editingMembership, setEditingMembership] = useState({});
+	const [removingMembership, setRemovingMembership] = useState({});
+	const [role, setRole] = useState("");
+	const [adminPrivileges, setAdminPrivileges] = useState(false);
+	const [notify, setNotify] = useState(true);
+	const [removeNotify, setRemoveNotify] = useState(true);
 	const openEditDialog = membership => {
 		setEditingMembership(membership);
 		setRole(membership.role);
 		setAdminPrivileges(membership.adminPrivileges);
 	};
-	const edit = membership => {
-		setEditingMembership({});
-		alterMutation({
+	const edit = async (membership) => {
+		try {
+		  await alterMutation({
 			variables: {
 				membershipId: membership.id,
 				adminPrivileges,
 				role,
 				notify
 			}
 		});
-		// because graphql cache stores stuff by ID, the new item will show up without a refetch
-	};
+		  await refetch();
+		  setEditingMembership({});
+		} catch (error) {
+		  console.error("Error editing membership:", error);
+		}
+	  };
 	const openRemoveDialog = membership => {
 		setEditingMembership({});
 		setRemovingMembership(membership);
 	};
-	const remove = membership => {
-		setRemovingMembership({});
-		removeMutation({
+	const remove = async (membership) => {
+		try {
+		  await removeMutation({
 			variables: {
 				membershipId: membership.id,
 				notify: removeNotify
 			}
 		});
-	};
+		  await refetch();
+		  setRemovingMembership({});
+		} catch (error) {
+		  console.error("Error removing membership:", error);
+		}
+	};	
 
 	let sortedMemberships = [...(data?.organizationByUrl?.memberships || [])];
 	sortedMemberships.sort((a, b) => (a.adminPrivileges && !b.adminPrivileges ? -1 : 1));
 
-	const [snackBarOpen, setSnackBarOpen] = React.useState(false);
+	const [snackBarOpen, setSnackBarOpen] = useState(false);
 	const emailList = sortedMemberships.map(membership => membership.user.email).join(", ");
 	const copy = () => {
 		navigator.clipboard.writeText(emailList).then(() => setSnackBarOpen(true));