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,23 @@ 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:{" "}
+ 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));