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,6 +36,16 @@ const classes = {
 		padding: 3,
 		width: "700px",
 		maxWidth: "90vw"
+	},
+	button: {
+		backgroundColor: "light-blue",
+		color: "white",
+		border: "none",
+		padding: "8px 20px",
+		cursor: "pointer",
+		"&:hover": {
+			backgroundColor: "darkblue"
+		}
 	}
 };
 
@@ -58,13 +70,24 @@ 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 === "meetings") && (
+						<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 === "charters" || s.role === "meetings") && (
+					<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 => (
@@ -37,16 +49,20 @@ const RequestList = ({ requests, reject, approve }) => {
 						</Grid>
 					</Grid>
 					<ListItemSecondaryAction>
-						{request.userApproval ? (
-							<IconButton onClick={() => approve(request)} size="large">
-								<CheckIcon />
-							</IconButton>
+						{isLoading ? (
+							<CircularProgress size="24px" />
 						) : (
-							""
+							<>
+								{request.userApproval && (
+									<IconButton onClick={() => approveHandle(request)} size="large">
+										<CheckIcon />
+									</IconButton>
+								)}
+								<IconButton onClick={() => reject(request)} size="large">
+									<CloseIcon />
+								</IconButton>
+							</>
 						)}
-						<IconButton onClick={() => reject(request)} size="large">
-							<CloseIcon />
-						</IconButton>
 					</ListItemSecondaryAction>
 				</ListItem>
 			))}

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,6 +313,8 @@ 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);

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({
-			variables: {
-				membershipId: membership.id,
-				adminPrivileges,
-				role,
-				notify
-			}
-		});
-		// because graphql cache stores stuff by ID, the new item will show up without a refetch
+	const edit = async membership => {
+		try {
+			await alterMutation({
+				variables: {
+					membershipId: membership.id,
+					adminPrivileges,
+					role,
+					notify
+				}
+			});
+			await refetch();
+			setEditingMembership({});
+		} catch (error) {
+			console.error("Error editing membership:", error);
+		}
 	};
 	const openRemoveDialog = membership => {
 		setEditingMembership({});
 		setRemovingMembership(membership);
 	};
-	const remove = membership => {
-		setRemovingMembership({});
-		removeMutation({
-			variables: {
-				membershipId: membership.id,
-				notify: removeNotify
-			}
-		});
+	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));