From 651b8604dfa945ef10aaf9029c22b4b83c0b0c85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= <rasul@MacBook-Air.local>
Date: Sun, 5 Nov 2023 00:13:14 +0300
Subject: [PATCH] feat: add feedback for copy

---
 .../App/SideBar/AudioClip/index.tsx           |  2 +-
 .../App/SideBar/Transcript/index.tsx          | 69 +++++++++++++------
 src/components/App/SideBar/YouTube/index.tsx  |  2 +-
 3 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx
index cd0d40dfe..db35132a7 100644
--- a/src/components/App/SideBar/AudioClip/index.tsx
+++ b/src/components/App/SideBar/AudioClip/index.tsx
@@ -129,7 +129,7 @@ const _AudioClip = () => {
         </TextWrapper>
         <StyledDivider />
         <TextWrapper>
-          <Transcript node={selectedNode} stateless />
+          <Transcript key={id} node={selectedNode} stateless />
         </TextWrapper>
       </div>
     </Wrapper>
diff --git a/src/components/App/SideBar/Transcript/index.tsx b/src/components/App/SideBar/Transcript/index.tsx
index 4e91163a9..c03d0fcaa 100644
--- a/src/components/App/SideBar/Transcript/index.tsx
+++ b/src/components/App/SideBar/Transcript/index.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@mui/material'
+import React, { useState } from 'react'
 import { MdClose } from 'react-icons/md'
 import styled from 'styled-components'
 import CopyIcon from '~/components/Icons/CopyIcon'
@@ -7,24 +8,7 @@ import { Flex } from '~/components/common/Flex'
 import { useAppStore } from '~/stores/useAppStore'
 import { NodeExtended } from '~/types'
 import { colors } from '~/utils/colors'
-
-const copyNodeText = (text: string | undefined) => {
-  if (text === undefined) {
-    return
-  }
-
-  navigator.clipboard.writeText(text)
-
-  const copyButton = document.querySelector('.copy-button')
-
-  if (copyButton) {
-    copyButton.classList.add('copied')
-
-    setTimeout(() => {
-      copyButton.classList.remove('copied')
-    }, 1000)
-  }
-}
+import CheckIcon from '../../../Icons/CheckIcon'
 
 type TranscriptProps = {
   stateless?: boolean
@@ -34,10 +18,21 @@ type TranscriptProps = {
 export const Transcript = ({ stateless, node }: TranscriptProps) => {
   const [transcriptIsOpen, setTranscriptOpen] = useAppStore((s) => [s.transcriptIsOpen, s.setTranscriptOpen])
 
+  const [isCopied, setIsCopied] = useState(false)
+
   if (!stateless && !transcriptIsOpen) {
     return null
   }
 
+  const copyNodeText = (text: string | undefined) => {
+    if (text === undefined) {
+      return
+    }
+
+    navigator.clipboard.writeText(text)
+    setIsCopied(true)
+  }
+
   return (
     <Flex grow={1} shrink={1}>
       <Header>
@@ -51,9 +46,25 @@ export const Transcript = ({ stateless, node }: TranscriptProps) => {
         )}
 
         {node?.text ? (
-          <Button endIcon={<CopyIcon />} onPointerDown={() => copyNodeText(node?.text)} size="small" variant="outlined">
-            Copy
-          </Button>
+          <>
+            {!isCopied ? (
+              <Button
+                endIcon={<CopyIcon />}
+                onPointerDown={() => copyNodeText(node?.text)}
+                size="small"
+                variant="outlined"
+              >
+                Copy
+              </Button>
+            ) : (
+              <CopiedButton align="center" direction="row" justify="flex-start">
+                <div className="icon">
+                  <CheckIcon />
+                </div>
+                <div className="text">Copied</div>
+              </CopiedButton>
+            )}
+          </>
         ) : (
           <div />
         )}
@@ -121,3 +132,19 @@ const Box = styled(Flex)`
   font-weight: 400;
   line-height: 18px;
 `
+
+const CopiedButton = styled(Flex)`
+  color: ${colors.SECONDARY_BLUE};
+  font-family: Barlow;
+  font-size: 13px;
+  font-weight: 500;
+  height: 28px;
+  padding: 0 20px;
+  .text {
+    margin-left: 5px;
+  }
+
+  .icon {
+    font-size: 12px;
+  }
+`
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
index 67761e1e3..848e5874f 100644
--- a/src/components/App/SideBar/YouTube/index.tsx
+++ b/src/components/App/SideBar/YouTube/index.tsx
@@ -79,7 +79,7 @@ export const YouTube = () => {
         </TextWrapper>
         <StyledDivider />
         <TextWrapper>
-          <Transcript node={selectedNode} stateless />
+          <Transcript key={id} node={selectedNode} stateless />
         </TextWrapper>
       </div>
     </Wrapper>