From 4abf1967386d295d8b8866e0a79a0ff8ce20d882 Mon Sep 17 00:00:00 2001
From: mvvasilev <me@mvvasilev.dev>
Date: Fri, 12 Jan 2024 16:05:26 +0200
Subject: [PATCH] Add copy to clipboard button for invite url

---
 frontend/package.json                    |  1 +
 frontend/src/pages/ExistingEventPage.tsx | 18 ++++++++++++++++--
 frontend/yarn.lock                       |  9 ++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 0290930..244eb5b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.4",
     "@mui/material": "^5.15.3",
     "@mui/system": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.7",
diff --git a/frontend/src/pages/ExistingEventPage.tsx b/frontend/src/pages/ExistingEventPage.tsx
index 9ae7ce9..07be298 100644
--- a/frontend/src/pages/ExistingEventPage.tsx
+++ b/frontend/src/pages/ExistingEventPage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Event, EventTypes, createEvent } from '../types/Event';
 import Grid from '@mui/material/Unstable_Grid2'
-import { Button, TextField, Typography } from "@mui/material";
+import { Button, IconButton, TextField, Tooltip, Typography } from "@mui/material";
 import AvailabilityPicker from "../components/AvailabilityPicker";
 import dayjs, { Dayjs } from "dayjs";
 import utils from "../utils";
@@ -12,6 +12,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import duration from 'dayjs/plugin/duration';
 import { AvailabilityDay, UserAvailabilityHeatmap } from "../types/Availabilities";
 import toast from "react-hot-toast";
+import { ContentCopy as CopyToClipboardIcon } from '@mui/icons-material'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -183,7 +184,20 @@ export default function ExistingEventPage() {
                 <Typography>You've been invited to...</Typography>
             </Grid>
             <Grid xs={12}>
-                <Typography variant="h4" sx={{ wordBreak: "break-word" }} noWrap={false}>{ event.name }</Typography>
+                <Typography variant="h4" sx={{ wordBreak: "break-word" }} noWrap={false}>
+                    { event.name }
+                    <Tooltip
+                        title={"Copy invite to clipboard"}
+                        arrow
+                    >
+                        <IconButton onClick={() => {
+                            navigator.clipboard.writeText(window.location.toString());
+                            toast('Copied to clipboard', { icon: <CopyToClipboardIcon/> });
+                        }}>
+                            <CopyToClipboardIcon/>
+                        </IconButton>
+                    </Tooltip>
+                </Typography>
             </Grid>
             {
                 (event.description !== null) &&
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 87677a2..482d43e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -186,7 +186,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.7":
   version "7.23.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
   integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
@@ -577,6 +577,13 @@
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.3.tgz"
   integrity sha512-sWeihiVyxdJjpLkp8SHkTy9kt2M/o11M60G1MzwljGL2BXdM3Ktzqv5QaQHdi00y7Y1ulvtI3GOSxP2xU8mQJw==
 
+"@mui/icons-material@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.4.tgz#fb8a5e4be2cd656c5d5b1bbad7618b3fadf8d37b"
+  integrity sha512-q/Yk7aokN8qGMpR7bwoDpBSeaNe6Bv7vaY9yHYodP37c64TM6ime05ueb/wgksOVszrKkNXC67E/XYbRWOoUFA==
+  dependencies:
+    "@babel/runtime" "^7.23.7"
+
 "@mui/material@^5.15.3":
   version "5.15.3"
   resolved "https://registry.npmjs.org/@mui/material/-/material-5.15.3.tgz"