From e895dd4668cfd008afd0410b2c1199ec73d02da9 Mon Sep 17 00:00:00 2001 From: vagusx Date: Tue, 21 Nov 2023 16:44:05 +0800 Subject: [PATCH 1/3] feat: add copy code button --- frontend/package.json | 1 + frontend/src/App.tsx | 23 ++++++++++++++++++----- frontend/yarn.lock | 12 ++++++++++++ 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 7a34ab2..912d0b7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "classnames": "^2.3.2", "clsx": "^2.0.0", "codemirror": "^6.0.1", + "copy-to-clipboard": "^3.3.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c2ec3fe..cc0d1cb 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useCallback } from "react"; import ImageUpload from "./components/ImageUpload"; import CodePreview from "./components/CodePreview"; import Preview from "./components/Preview"; @@ -7,11 +7,13 @@ import Spinner from "./components/Spinner"; import classNames from "classnames"; import { FaCode, + FaCopy, FaDesktop, FaDownload, FaMobile, FaUndo, } from "react-icons/fa"; +import copy from 'copy-to-clipboard'; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; @@ -111,6 +113,10 @@ function App() { setUpdateInstruction(""); } + const handleCopyCode = useCallback(() => { + copy(generatedCode); + }, [generatedCode]); + return (
{IS_RUNNING_ON_CLOUD && } @@ -243,10 +249,17 @@ function App() { - +
+ + + + +
diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2109c60..7e7efc4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1258,6 +1258,13 @@ convert-source-map@^2.0.0: resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz" integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== +copy-to-clipboard@^3.3.3: + version "3.3.3" + resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0" + integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA== + dependencies: + toggle-selection "^1.0.6" + crelt@^1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72" @@ -2420,6 +2427,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== + ts-api-utils@^1.0.1: version "1.0.3" resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz" From 49ce6dcc88a79cf50c19d5d8d1bdf80ae8d745fd Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 21 Nov 2023 10:52:33 -0500 Subject: [PATCH 2/3] rename method --- backend/main.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/main.py b/backend/main.py index 4eb09fa..72b4dd7 100644 --- a/backend/main.py +++ b/backend/main.py @@ -59,7 +59,7 @@ def write_logs(prompt_messages, completion): @app.websocket("/generate-code") -async def stream_code_test(websocket: WebSocket): +async def stream_code(websocket: WebSocket): await websocket.accept() params = await websocket.receive_json() From 2303ed6d0552acf2d748b58c04e741a1804da5e8 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 21 Nov 2023 10:56:17 -0500 Subject: [PATCH 3/3] add success toast after copying code --- frontend/src/App.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cc0d1cb..2b962e6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -13,7 +13,7 @@ import { FaMobile, FaUndo, } from "react-icons/fa"; -import copy from 'copy-to-clipboard'; +import copy from "copy-to-clipboard"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; @@ -26,6 +26,7 @@ import { OnboardingNote } from "./components/OnboardingNote"; import { usePersistedState } from "./hooks/usePersistedState"; import { UrlInputSection } from "./components/UrlInputSection"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; +import toast from "react-hot-toast"; function App() { const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">( @@ -113,8 +114,9 @@ function App() { setUpdateInstruction(""); } - const handleCopyCode = useCallback(() => { + const doCopyCode = useCallback(() => { copy(generatedCode); + toast.success("Copied to clipboard"); }, [generatedCode]); return ( @@ -256,7 +258,9 @@ function App() { /> + className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]" + onClick={doCopyCode} + >