From 3e7cea20635194201db11105f281209a3b56d0e0 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <88056492+atridadl@users.noreply.github.com>
Date: Mon, 10 Jul 2023 00:30:57 -0600
Subject: [PATCH] copy button feedback and hmr

---
 next.config.mjs         | 14 ++++++++------
 src/pages/room/[id].tsx | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index 2db4efd..da54605 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -13,12 +13,14 @@ const config = {
     domains: ["avatars.githubusercontent.com", "lh3.googleusercontent.com"],
   },
   webpack: (config, { dev, isServer }) => {
-    Object.assign(config.resolve.alias, {
-      "react/jsx-runtime.js": "preact/compat/jsx-runtime",
-      react: "preact/compat",
-      "react-dom/test-utils": "preact/test-utils",
-      "react-dom": "preact/compat",
-    });
+    if (!dev && !isServer) {
+      Object.assign(config.resolve.alias, {
+        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
+        react: "preact/compat",
+        "react-dom/test-utils": "preact/test-utils",
+        "react-dom": "preact/compat",
+      });
+    }
     return config;
   },
 };
diff --git a/src/pages/room/[id].tsx b/src/pages/room/[id].tsx
index 82002a2..c9b1e0a 100644
--- a/src/pages/room/[id].tsx
+++ b/src/pages/room/[id].tsx
@@ -71,6 +71,7 @@ const RoomBody: React.FC = () => {
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false);
 
   const { data: roomFromDb, refetch: refetchRoomFromDb } =
     api.room.get.useQuery({ id: roomId });
@@ -201,8 +202,12 @@ const RoomBody: React.FC = () => {
   const copyRoomURLHandler = () => {
     navigator.clipboard
       .writeText(window.location.href)
-      .then(() => {
+      .then(async () => {
         console.log(`Copied Room Link to Clipboard!`);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
       })
       .catch(() => {
         console.log(`Error Copying Room Link to Clipboard!`);
@@ -252,10 +257,14 @@ const RoomBody: React.FC = () => {
           <div>{roomFromDb.id}</div>
 
           <button>
-            <IoCopyOutline
-              className="mx-1 hover:text-primary"
-              onClick={copyRoomURLHandler}
-            ></IoCopyOutline>
+            {copied ? (
+              <IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
+            ) : (
+              <IoCopyOutline
+                className="mx-1 hover:text-primary"
+                onClick={copyRoomURLHandler}
+              ></IoCopyOutline>
+            )}
           </button>
         </div>