feat(PostActions): use tooltip to denote copy action

src/features/posts/components/PostActions/CopyAction.tsx

@@ -0,0 +1,38 @@
+import { Tooltip } from '@chakra-ui/react'
+import { IconButton } from '@opengovsg/design-system-react'
+import { useState, type MouseEventHandler, useEffect } from 'react'
+import { BiLink } from 'react-icons/bi'
+
+interface CopyActionProps {
+ postId: string
+}
+
+export const CopyAction = ({ postId }: CopyActionProps): JSX.Element => {
+ const [isOpen, setIsOpen] = useState(false)
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsOpen(false)
+ }, 2000)
+ return () => clearTimeout(timer)
+ }, [isOpen])
+
+ const handleCopyLink: MouseEventHandler = async (e) => {
+ setIsOpen(true)
+ e.stopPropagation()
+ const url = `${window.location.origin}/thread/${postId}`
+ await navigator.clipboard.writeText(url)
+ }
+
+ return (
+ <Tooltip label="Link copied!" hasArrow isOpen={isOpen}>
+ <IconButton
+ onMouseLeave={() => setIsOpen(false)}
+ data-value="post-action"
+ aria-label="Link to post"
+ icon={<BiLink fontSize="1.25rem" />}
+ onClick={handleCopyLink}
+ />
+ </Tooltip>
+ )
+}

src/features/posts/components/PostActions/PostActions.tsx

@@ -1,15 +1,11 @@
 import { Box, ButtonGroup } from '@chakra-ui/react'
-import {
- Button,
- BxsHeart,
- IconButton,
- useToast,
-} from '@opengovsg/design-system-react'
-import { type MouseEventHandler, useState } from 'react'
-import { BiHeart, BiLink } from 'react-icons/bi'
+import { Button, BxsHeart } from '@opengovsg/design-system-react'
+import { useState, type MouseEventHandler } from 'react'
+import { BiHeart } from 'react-icons/bi'
 import { useMe } from '~/features/me/api'
-import { type RouterOutput, trpc } from '~/utils/trpc'
+import { trpc, type RouterOutput } from '~/utils/trpc'
 import { AddCommentAction } from './AddCommentAction'
+import { CopyAction } from './CopyAction'
 import { DeletePostAction } from './DeletePostAction'
 
 export interface PostActionsProps {
@@ -21,10 +17,6 @@ export const PostActions = ({
 }: PostActionsProps): JSX.Element => {
  const { me } = useMe()
 
- const toast = useToast({
- status: 'info',
- })
-
  // Use local state to update the UI immediately on like/unlike
  const [post, setPost] = useState(postProp)
  const isOwnPost = me?.username === post.author.username
@@ -67,13 +59,6 @@ export const PostActions = ({
  })
  }
 
- const handleCopyLink: MouseEventHandler = async (e) => {
- e.stopPropagation()
- const url = `${window.location.origin}/thread/${post.id}`
- await navigator.clipboard.writeText(url)
- toast({ description: 'Link copied', icon: <BiLink /> })
- }
-
  return (
  <ButtonGroup
  variant="clear"
@@ -99,12 +84,7 @@ export const PostActions = ({
  {post._count.likes}
  </Button>
  <AddCommentAction post={post} onSuccess={incrementReplyCount} />
- <IconButton
- data-value="post-action"
- aria-label="Link to post"
- icon={<BiLink fontSize="1.25rem" />}
- onClick={handleCopyLink}
- />
+ <CopyAction postId={post.id} />
  {isOwnPost ? (
  <DeletePostAction postId={post.id} />
  ) : (