From db396b6b106d9047c71c9ef7446110475b0eb06b Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Tue, 1 Aug 2023 12:50:54 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20copy=20button=20to=20invite?=
 =?UTF-8?q?=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modals/copy-invite/copy-invite.modal.tsx | 35 ++++++++++++++------
 src/pages/manage/users/invites.tsx           |  2 ++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/modals/copy-invite/copy-invite.modal.tsx b/src/modals/copy-invite/copy-invite.modal.tsx
index 178a8960c..fc43115a8 100644
--- a/src/modals/copy-invite/copy-invite.modal.tsx
+++ b/src/modals/copy-invite/copy-invite.modal.tsx
@@ -1,12 +1,14 @@
-import { Button, Mark, Stack, Text } from '@mantine/core';
+import { Button, CopyButton, Mark, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 export const CopyInviteModal = ({
-  context,
   id,
   innerProps,
 }: ContextModalProps<{ id: string; token: string; expire: Date }>) => {
+  const inviteUrl = useInviteUrl(innerProps.id, innerProps.token);
+
   return (
     <Stack>
       <Text>
@@ -29,15 +31,26 @@ export const CopyInviteModal = ({
         </Mark>
       </Stack>
 
-      <Button
-        onClick={() => {
-          modals.close(id);
-        }}
-        variant="default"
-        fullWidth
-      >
-        Cancel
-      </Button>
+      <CopyButton value={inviteUrl}>
+        {({ copy }) => (
+          <Button
+            onClick={() => {
+              copy();
+              modals.close(id);
+            }}
+            variant="default"
+            fullWidth
+          >
+            Copy & Dismiss
+          </Button>
+        )}
+      </CopyButton>
     </Stack>
   );
 };
+
+const useInviteUrl = (id: string, token: string) => {
+  const router = useRouter();
+
+  return `${window.location.href.replace(router.pathname, `/auth/invite/${id}?token=${token}`)}`;
+};
diff --git a/src/pages/manage/users/invites.tsx b/src/pages/manage/users/invites.tsx
index 3c89908a3..673fc045b 100644
--- a/src/pages/manage/users/invites.tsx
+++ b/src/pages/manage/users/invites.tsx
@@ -13,6 +13,7 @@ import { modals } from '@mantine/modals';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { api } from '~/utils/api';
@@ -22,6 +23,7 @@ const ManageUserInvitesPage = () => {
   const { data } = api.invites.all.useQuery({
     page: activePage,
   });
+  const router = useRouter();
 
   const { classes } = useStyles();