From 1ea60f7a6e0dc47cd2340ca1219c9e1dae2eaf81 Mon Sep 17 00:00:00 2001
From: David Chen <dchen07@protonmail.com>
Date: Thu, 3 Oct 2024 15:13:48 -0400
Subject: [PATCH] Add member email display, button to copy

---
 src/pages/orgs/admin/Members.tsx | 53 +++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/pages/orgs/admin/Members.tsx b/src/pages/orgs/admin/Members.tsx
index 3cf45cf..6b3ebac 100644
--- a/src/pages/orgs/admin/Members.tsx
+++ b/src/pages/orgs/admin/Members.tsx
@@ -3,11 +3,14 @@ import OrgContext from "../../../comps/context/OrgContext";
 import UserContext from "../../../comps/context/UserContext";
 
 import AdminMember from "../../../comps/pages/orgs/admin/AdminMember";
-import { Box, Typography } from "@mui/material";
+import { Box, Button, TextField, Typography } from "@mui/material";
 
 import { sortByRole } from "../../../utils/DataFormatters";
+import { useSnackbar } from "notistack";
 
 const Members = () => {
+    const { enqueueSnackbar } = useSnackbar();
+
     const user = useContext(UserContext);
     const organization = useContext<OrgContextType>(OrgContext);
     const members = organization.memberships
@@ -25,6 +28,7 @@ const Members = () => {
                 is_faculty: member.users?.is_faculty,
             };
         });
+    const member_emails = members.map((member) => member.email).join(", ");
 
     const userMember = organization.memberships.find(
         (member) => member.users?.id === user.id,
@@ -35,6 +39,53 @@ const Members = () => {
             <Typography variant="h1" align="center" width="100%">
                 Manage Members
             </Typography>
+            <Box
+                sx={{
+                    width: "100%",
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    alignItems: "center",
+                    paddingLeft: "16px",
+                    paddingRight: "16px",
+                }}
+            >
+                <Box
+                    sx={{
+                        paddingTop: "8px",
+                        paddingBottom: "8px",
+                        width: "100%",
+                    }}
+                >
+                    <TextField
+                        disabled
+                        fullWidth
+                        value={member_emails}
+                        variant="outlined"
+                    />
+                </Box>
+                <Box sx={{ paddingLeft: "16px", width: "100px" }}>
+                    <Button
+                        onClick={async () => {
+                            try {
+                                await navigator.clipboard.writeText(
+                                    member_emails,
+                                );
+                                enqueueSnackbar("Copied emails to clipboard!", {
+                                    variant: "success",
+                                });
+                            } catch (error) {
+                                enqueueSnackbar(
+                                    "Failed to copy emails to clipboard. :( Try manually copying from the page.",
+                                    { variant: "error" },
+                                );
+                            }
+                        }}
+                        variant="contained"
+                    >
+                        Copy
+                    </Button>
+                </Box>
+            </Box>
             {members
                 ?.sort(sortByRole)
                 .map((member, i) => (