removes url generator from page and replaces with 'copy as url' button.

jasonhawkharris · jasonhawkharris · commit 210842b71a05 · 2021-09-17T11:14:31.000-05:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -125,22 +125,23 @@ function App() {
 					namespace={namespace}
 					option={option}
 					setGeneratedURI={setGeneratedURI}
+					generatedURI={generatedURI}
 					mode={mode}
 				/>
 
 				{/* divider */}
-				<Or />
+				{/* <Or /> */}
 
 				{/* URI Generated so that user can revisit with the same options selected */}
-				<GeneratedURI
+				{/* <GeneratedURI
 					selectedDeployment={selectedDeployment}
 					selectedAction={selectedAction}
 					namespace={namespace}
 					option={option}
 					generatedURI={generatedURI}
 					setGeneratedURI={setGeneratedURI}
 					mode={mode}
-				/>
+				/> */}
 			</div>
 		</div>
 	);
diff --git a/src/Components/Command/Command.css b/src/Components/Command/Command.css
diff --git a/src/Components/Command/Command.jsx b/src/Components/Command/Command.jsx
diff --git a/src/Components/Command/GeneratedCommand.css b/src/Components/Command/GeneratedCommand.css
@@ -35,4 +35,5 @@
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
+    /* border: 1px solid white; */
 }
diff --git a/src/Components/Command/GeneratedCommand.jsx b/src/Components/Command/GeneratedCommand.jsx
@@ -1,30 +1,57 @@
 import { useState, useEffect } from 'react';
 
 import CopyBtn from '../UI/CopyBtn';
+import CopyURLBtn from '../UI/CopyURLBtn';
 
 import './GeneratedCommand.css';
 
 export default function GeneratedCommand({
     selectedDeployment,
     selectedAction,
     command,
+    generatedURI,
     mode
 }) {
-
     const [commandCopied, setCommandCopied] = useState(false);
+    const [urlCopied, setUrlCopied] = useState(false);
+
+    console.log("command copied: ", commandCopied);
+    console.log("url copied: ", urlCopied);
 
     const copyCommand = () => {
         navigator.clipboard.writeText(command);
         setCommandCopied(true);
+        setUrlCopied(false);
     }
 
+    const copyUrl = () => {
+        navigator.clipboard.writeText(generatedURI)
+        setUrlCopied(true);
+        setCommandCopied(false);
+    }
+
+    console.log(copyUrl);
+
     useEffect(() => {
         if (commandCopied) {
+            setUrlCopied(false);
             setTimeout(() => {
                 setCommandCopied(false);
             }, 3000);
         }
-    }, [commandCopied, setCommandCopied]);
+
+        if (urlCopied) {
+            setCommandCopied(false)
+            setTimeout(() => {
+                setUrlCopied(false);
+            }, 3000);
+        }
+    }, [
+        commandCopied,
+        setCommandCopied,
+        urlCopied,
+        setUrlCopied
+    ]);
 
     return (
         <div className="generated-command-container">
@@ -40,14 +67,23 @@ export default function GeneratedCommand({
                 )}
             </div>
             <div className="btns-container">
-                <p className={`copied-message ${commandCopied && "show"} ${mode === "dark" ? "dark" : "light"}`}>
-                    Command copied to clipboard.
+                <p className={`copied-message ${(commandCopied || urlCopied) && "show"} ${mode === "dark" ? "dark" : "light"}`}>
+                    {urlCopied && <>URL copied to clipboard.</>}
+                    {commandCopied && <>Command copied to clipboard.</>}
                 </p>
-                <CopyBtn
-                    selectedAction={selectedAction}
-                    copyCommand={copyCommand}
-                    mode={mode}
-                />
+                <div>
+                    <CopyBtn
+                        selectedAction={selectedAction}
+                        copyCommand={copyCommand}
+                        mode={mode}
+                    />
+                    <CopyURLBtn
+                        selectedAction={selectedAction}
+                        copyUrl={copyUrl}
+                        mode={mode}
+                    />
+                </div>
+
             </div>
         </div >
     )
diff --git a/src/Components/UI/CopyBtn.jsx b/src/Components/UI/CopyBtn.jsx
@@ -2,6 +2,7 @@
 import './CopyBtn.css';
 
 export default function CopyBtn({ selectedAction, copyCommand, mode }) {
+    console.log(copyCommand);
     return (
         <>
             {selectedAction === "Function" ? (
diff --git a/src/Components/UI/CopyURLBtn.css b/src/Components/UI/CopyURLBtn.css
diff --git a/src/Components/UI/CopyURLBtn.jsx b/src/Components/UI/CopyURLBtn.jsx
@@ -0,0 +1,24 @@
+// import "./CopyURLBtn.css"
+
+export default function CopyURLBtn({ selectedAction, mode, copyUrl }) {
+    return (
+        <>
+            {selectedAction === "Function" ? (
+                <button
+                    className={`btn w-margin ${mode === "dark" ? "dark" : "light"}`}
+                    onClick={copyUrl}
+                    disabled
+                >
+                    Copy as URL
+                </button>
+            ) : (
+                <button
+                    className={`btn w-margin ${mode === "dark" ? "dark" : "light"}`}
+                    onClick={copyUrl}
+                >
+                    Copy as URL
+                </button>
+            )}
+        </>
+    )
+}
diff --git a/src/Components/UI/GeneratedURI.jsx b/src/Components/UI/GeneratedURI.jsx
@@ -48,9 +48,12 @@ export default function GeneratedURI({
                 readOnly
             />
             <div className="copied-url-container">
+                {/* turn into seperate component */}
                 <p className={`copied-message ${copiedUrl && "show"} ${mode === "dark" ? "dark" : "light"}`}>
                     URL copied to clipboard
                 </p>
+
+
                 <div className="btns-container-2">
                     <GenerateLink
                         deployment={selectedDeployment}

Original file line number	Diff line number	Diff line change
`@@ -35,4 +35,5 @@`
`35`	`35`	`display: flex;`
`36`	`36`	`flex-flow: row nowrap;`
`37`	`37`	`justify-content: space-between;`
	`38`	`+ /* border: 1px solid white; */`
`38`	`39`	`}`