From 89331e5c5a37292849097005e79e43d743c2f4a2 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Thu, 11 Aug 2022 14:39:07 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BF=D0=B8=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85?=
 =?UTF-8?q?=20=D0=B2=20=D0=BE=D0=BA=D0=BD=D0=B5=20=D0=9F=D0=BE=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=82=D1=8C=D1=81=D1=8F,=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=8D=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobileAddPart/mobileAddPart.css           |  7 +++
 .../mobileAddPart/shareContainer.tsx          | 44 ++++++++++++++++---
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
index a380072..29b4a84 100644
--- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
@@ -248,6 +248,8 @@
 }
 
 .share-container-item-copy-code-button-container {
+    border: none;
+    color: #FFFFFF;
     height: 48px;
     flex: 1;
     box-sizing: border-box;
@@ -297,6 +299,11 @@
     background-color: #FFFFFF;
 }
 
+.share-container-item-copy-code-button-container.copied,
+.share-container-item-copy-href-button.copied {
+    background-color: #219653;
+    transition: .3s;
+}
 
 
 
diff --git a/src/components/mainScreen/mobileAddPart/shareContainer.tsx b/src/components/mainScreen/mobileAddPart/shareContainer.tsx
index dbc89c3..4a1f541 100644
--- a/src/components/mainScreen/mobileAddPart/shareContainer.tsx
+++ b/src/components/mainScreen/mobileAddPart/shareContainer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BorderLine } from "./borderLine";
 
 type TProps = {
@@ -6,15 +6,42 @@ type TProps = {
 }
 
 export const ShareContainer:React.FC<TProps> = React.memo((props) => {
+    const [accessCode, setAccessCode] = useState<string>('123 456');
+    const [accessHref, setAccessHref] = useState<string>('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
+    const [isCopiedCode, setIsCopiedCode] = useState<boolean>(false);
+    const [isCopiedHref, setIsCopiedHref] = useState<boolean>(false);
+
+    function copyToClipboard(value: string, type: 'code' | 'href') {        
+        navigator.clipboard.writeText(value).then(() => {
+            let copiedFunc = setIsCopiedCode;
+            if(type === 'href') {
+                copiedFunc = setIsCopiedHref;
+            } 
+            copiedFunc(true)
+            setTimeout(() => {
+                copiedFunc(false)
+            }, 2000);
+        })
+    }
+
     return <div className="share-container">
         <div className="share-container-item">
             <span className="share-container-item-title">Код подключения</span>
             <div className="share-container-item-buttons">
-                <input className="share-container-item-input code" value={'123 456'} readOnly></input>
-                <div className="share-container-item-copy-code-button-container">
+                <input className="share-container-item-input code" value={accessCode} readOnly></input>
+                <button 
+                    className={`share-container-item-copy-code-button-container ${isCopiedCode ? 'copied' : ''}`} 
+                    onClick={() => copyToClipboard(accessCode, 'code')}
+                >
                     <span className="share-container-item-copy-code-button-icon"></span>
-                    <span className="share-container-item-copy-code-button-text">Скопировать</span>
-                </div>
+                    <span className="share-container-item-copy-code-button-text">
+                        {
+                            isCopiedCode 
+                            ? 'Скопировано'
+                            : 'Скопировать'
+                        }
+                    </span>
+                </button>
             </div>
         </div>
         <BorderLine width="80%"/>
@@ -23,10 +50,13 @@ export const ShareContainer:React.FC<TProps> = React.memo((props) => {
             <div className="share-container-item-buttons">
                 <input 
                     className="share-container-item-input href" 
-                    value={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
+                    value={accessHref}
                     readOnly
                 ></input>
-                <button className="share-container-item-copy-href-button"></button>
+                <button 
+                    className={`share-container-item-copy-href-button ${isCopiedHref ? 'copied' : ''}`}
+                    onClick={() => copyToClipboard(accessHref, 'href')}
+                ></button>
             </div>
         </div>
     </div>