added copy to clipboard on AliasesDetails.tsx

src/route-widgets/AliasesRoute/AliasesDetails.tsx

@@ -1,14 +1,19 @@
-import {ReactElement} from "react"
+import {ReactElement, useState} from "react"
+import {useTranslation} from "react-i18next"
+import {useKeyPress} from "react-use"
+import {MdContentCopy} from "react-icons/md"
+import copy from "copy-to-clipboard"
 
 import {
 	Grid,
 	List,
 	ListItemButton,
 	ListItemIcon,
+	ListItemSecondaryAction,
 	ListItemText,
 } from "@mui/material"
 
-import {AliasTypeIndicator} from "~/components"
+import {AliasTypeIndicator, SuccessSnack} from "~/components"
 import {AliasList} from "~/server-types"
 import {useUIState} from "~/hooks"
 import CreateAliasButton from "~/route-widgets/AliasesRoute/CreateAliasButton"
@@ -17,13 +22,14 @@ export interface AliasesDetailsProps {
 	aliases: AliasList[]
 }
 
-const getAddress = (alias: AliasList): string =>
-	`${alias.local}@${alias.domain}`
+const getAddress = (alias: AliasList): string => `${alias.local}@${alias.domain}`
+
+export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactElement {
+	const {t} = useTranslation()
+	const [isInCopyAddressMode] = useKeyPress("Control")
 
-export default function AliasesDetails({
-	aliases,
-}: AliasesDetailsProps): ReactElement {
 	const [aliasesUIState, setAliasesUIState] = useUIState<AliasList[]>(aliases)
+	const [hasCopiedToClipboard, setHasCopiedToClipboard] = useState<boolean>(false)
 
 	return (
 		<>
@@ -33,12 +39,25 @@ export default function AliasesDetails({
 						{aliasesUIState.map(alias => (
 							<ListItemButton
 								key={alias.id}
+								onClick={event => {
+									if (isInCopyAddressMode) {
+										event.preventDefault()
+										event.stopPropagation()
+										copy(getAddress(alias))
+										setHasCopiedToClipboard(true)
+									}
+								}}
 								href={`/aliases/${btoa(getAddress(alias))}`}
 							>
 								<ListItemIcon>
 									<AliasTypeIndicator type={alias.type} />
 								</ListItemIcon>
 								<ListItemText primary={getAddress(alias)} />
+								{isInCopyAddressMode && (
+									<ListItemSecondaryAction>
+										<MdContentCopy />
+									</ListItemSecondaryAction>
+								)}
 							</ListItemButton>
 						))}
 					</List>
@@ -46,14 +65,18 @@ export default function AliasesDetails({
 				<Grid item>
 					<CreateAliasButton
 						onCreated={alias =>
-							setAliasesUIState(currentAliases => [
-								alias,
-								...currentAliases,
-							])
+							setAliasesUIState(currentAliases => [alias, ...currentAliases])
 						}
 					/>
 				</Grid>
 			</Grid>
+			<SuccessSnack
+				onClose={() => setHasCopiedToClipboard(false)}
+				message={
+					hasCopiedToClipboard &&
+					t("relations.alias.mutations.success.addressCopiedToClipboard")
+				}
+			/>
 		</>
 	)
 }