diff --git a/src/hooks/useClipboard.ts b/src/hooks/useClipboard.ts new file mode 100644 index 000000000..db792690a --- /dev/null +++ b/src/hooks/useClipboard.ts @@ -0,0 +1,30 @@ +import { useEffect, useRef, useState } from "react"; + +function useClipboard(): [boolean, (text: string) => void] { + const [copied, setCopyStatus] = useState(false); + const timeout = useRef(null); + + const clear = () => { + if (timeout.current) { + clearTimeout(timeout.current); + timeout.current = null; + } + }; + + const copy = (text: string) => { + navigator.clipboard.writeText(text).then(() => { + setCopyStatus(true); + timeout.current = setTimeout(() => { + clear(); + setCopyStatus(false); + }, 2000); + }); + }; + + // Clear timeout after hook unmounting + useEffect(() => clear, []); + + return [copied, copy]; +} + +export default useClipboard; diff --git a/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx b/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx index e35971d50..8e781bee8 100644 --- a/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx +++ b/src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx @@ -9,6 +9,7 @@ import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import { makeStyles } from "@material-ui/styles"; import Link from "@saleor/components/Link"; +import useClipboard from "@saleor/hooks/useClipboard"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -55,13 +56,10 @@ const useStyles = makeStyles( } ); -function handleCopy(token: string) { - navigator.clipboard.writeText(token); -} - const ServiceDefaultToken: React.FC = props => { const { apiUri, token, onApiUriClick, onTokenClose } = props; const classes = useStyles(props); + const [copied, copy] = useClipboard(); return ( @@ -98,12 +96,16 @@ const ServiceDefaultToken: React.FC = props => {