Copy ID + Auto Update Members

src/comps/meetings/MeetingPreviewDialog.js

@@ -10,7 +10,9 @@ 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";
+import UserContext from "../context/UserContext";
 
 const previewEmitter = new EventEmitter();
 
@@ -34,7 +36,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 +70,21 @@ const MeetingPreviewDialog = () => {
 		return () => previewEmitter.removeListener("open", callback);
 	});
 
+  	const copyMeetingId = () => {
+    	navigator.clipboard.writeText(meetingId)
+  	};
+	const user = React.useContext(UserContext);
+
 	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>
+					{user?.adminRoles?.some(s => s.role === "admin") && (
+						<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,16 @@ 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 />} />
 				)}
+				{user?.adminRoles?.some(s => s.role === "admin") && (
+					<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/comps/pages/organization/RequestList.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
 	Avatar,
 	Grid,
@@ -7,12 +7,24 @@ import {
 	ListItem,
 	ListItemAvatar,
 	ListItemSecondaryAction,
-	Typography
+	Typography,
+	CircularProgress,
 } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 
 const RequestList = ({ requests, reject, approve }) => {
+  const [isLoading, setLoading] = useState(false);
+
+  const approveHandle = async (request) => {
+    setLoading(true);
+    try {
+      await approve(request);
+    } finally {
+      setLoading(false);
+    }
+  };
+
 	return (
 		<List>
 			{requests?.map(request => (
@@ -26,7 +38,7 @@ const RequestList = ({ requests, reject, approve }) => {
 							<Typography color={"textSecondary"} variant={"subtitle2"}>
 								{request.user.email}
 							</Typography>
-						</Grid>
+						</Grid> 
 						<Grid item xl={8} lg={8} md={6} sm={6} xs={12}>
 							<Typography>
 								Desired Role: "{request.role}" {request.adminPrivileges ? "(wants admin)" : ""}
@@ -37,20 +49,23 @@ const RequestList = ({ requests, reject, approve }) => {
 						</Grid>
 					</Grid>
 					<ListItemSecondaryAction>
-						{request.userApproval ? (
-							<IconButton onClick={() => approve(request)} size="large">
-								<CheckIcon />
-							</IconButton>
-						) : (
-							""
-						)}
-						<IconButton onClick={() => reject(request)} size="large">
-							<CloseIcon />
+						{isLoading ? ( <CircularProgress size="24px"/> ) : ( <>
+					{request.userApproval && (
+						<IconButton
+							onClick={() => approveHandle(request)}
+							size="large">
+						<CheckIcon/>
 						</IconButton>
-					</ListItemSecondaryAction>
-				</ListItem>
-			))}
-		</List>
-	);
+					)}
+					<IconButton onClick={() => reject(request)} size="large">
+					<CloseIcon/>
+					</IconButton>
+              </>
+            )}
+          </ListItemSecondaryAction>
+        </ListItem>
+      ))}
+    </List>
+  );
 };
-export default RequestList;
+export default RequestList;

src/pages/org/admin/meetings.js

@@ -205,6 +205,7 @@ const EDIT_RECURRING_MUTATION = gql`
 
 const Main = ({ match }) => {
 	const org = React.useContext(OrgContext);
+
 	let reversedMeetings = org?.meetings?.slice(0);
 	if (reversedMeetings) {
 		reversedMeetings.reverse();
@@ -312,7 +313,9 @@ const Main = ({ match }) => {
 					roomId,
 					groupId
 				}
-			});
+			}).then(() => {
+				org.refetch();
+			  });;
 		}
 		setSnackbarOpen(true);
 	};

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));