add create room option

Author: Vishesh-Pandey

src/App.tsx

@@ -5,6 +5,7 @@ import ShareText from "./components/ShareText";
 import PublishedText from "./components/PublishedText";
 import About from "./components/About";
 import LiveRoom from "./components/LiveRoom";
+import CreateRoom from "./components/CreateRoom";
 
 function App() {
   return (
@@ -14,7 +15,8 @@ function App() {
         <Route path="/" element={<ShareText />} />
         <Route path="about" element={<About />} />
         <Route path="published/:id" element={<PublishedText />} />
-        <Route path="liveroom" element={<LiveRoom />} />
+        <Route path="liveroom" element={<CreateRoom />} />
+        <Route path="liveroom/:id" element={<LiveRoom />} />
       </Routes>
     </>
   );

src/components/CreateRoom.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from "react-router-dom";
+
+function CreateRoom() {
+  const navigate = useNavigate();
+
+  const createLiveRoom = () => {
+    const roomId = Math.floor(Math.random() * 1000);
+    navigate(`${roomId}`);
+  };
+
+  return (
+    <div className="text-center py-5">
+      <button
+        onClick={createLiveRoom}
+        className="bg-green-300 p-4 rounded-md hover:bg-green-400 duration-500"
+      >
+        Create Room
+      </button>
+    </div>
+  );
+}
+
+export default CreateRoom;

src/components/LiveRoom.tsx

@@ -1,31 +1,47 @@
 import { onValue, ref, set } from "@firebase/database";
 import { useEffect, useState } from "react";
 import { realtimedb } from "../firebase";
+import { useParams } from "react-router-dom";
 
 type TextData = {
   text: string;
+  collaborators: [];
 };
 
 function LiveRoom() {
+  const { id } = useParams();
+
+  const [text, setText] = useState<string>("");
+  const [roomIdCopied, setRoomIdCopied] = useState<boolean>(false);
+
   const updateFirebaseDatabase = async (currentText: string) => {
-    set(ref(realtimedb, "users/" + "testing"), {
+    set(ref(realtimedb, "liveroom/" + `${id}`), {
       text: currentText,
     });
   };
 
-  const [text, setText] = useState<string>("");
+  const copyRoomId = () => {
+    navigator.clipboard.writeText(
+      `https://share.visheshpandey.com/#liveroom/${id}`
+    );
+    setRoomIdCopied(true);
+    setTimeout(() => {
+      setRoomIdCopied(false);
+    }, 3000);
+  };
 
   useEffect(() => {
     // Set up Firebase event listener
-    const databaseRef = ref(realtimedb, "users/testing"); // Replace with your actual path
+    setText("Loading...");
+    const databaseRef = ref(realtimedb, `liveroom/${id}`); // Replace with your actual path
 
     const onDataChange = (snapshot: { val(): TextData }) => {
       const data = snapshot.val();
       if (data !== null) {
         setText(data.text);
       } else {
         // Handle the case where there is no data
-        setText("No data available");
+        setText("");
       }
     };
 
@@ -42,33 +58,45 @@ function LiveRoom() {
 
   return (
     <>
-      <>
-        <div className="bg-gray-200 w-11/12 m-auto my-2 rounded-md p-2">
-          <div className="textarea  text-center">
-            <textarea
-              className="w-full border-black border-0 p-2 rounded-md outline-none resize-none"
-              value={text}
-              onChange={(e) => {
-                setText(e.target.value);
-                updateFirebaseDatabase(e.target.value);
-              }}
-              name=""
-              id=""
-              cols={30}
-              rows={20}
-              placeholder="start typing here... or paste your text using ctrl + v"
-            ></textarea>
-          </div>
+      <div className="bg-gray-200 w-11/12 m-auto my-2 rounded-md p-2">
+        <div className="buttons py-1 flex justify-between ">
+          <span className="text-red-600 font-bold animate-pulse"></span>
+          <button
+            onClick={copyRoomId}
+            className="bg-gray-300 p-4 rounded-md hover:bg-black duration-500 hover:text-white lg:w-1/12 md:w-2/12"
+          >
+            {roomIdCopied ? (
+              <span>
+                Copied <i className="bi bi-clipboard2-check"></i>
+              </span>
+            ) : (
+              <span>
+                Invite <i className="bi bi-clipboard-plus"></i>
+              </span>
+            )}
+          </button>
         </div>
-      </>
+        <div className="textarea  text-center">
+          <textarea
+            className="w-full border-black border-0 p-2 rounded-md outline-none resize-none"
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              updateFirebaseDatabase(e.target.value);
+            }}
+            name=""
+            id=""
+            cols={30}
+            rows={20}
+            placeholder="start typing here... or paste your text using ctrl + v"
+          ></textarea>
+        </div>
+      </div>
+
       <div className="details w-11/12 m-auto my-2">
         <p className="text-white bg-gray-400 p-2 rounded-lg font-bold">
           Text here will get updated in realtime due to other collaborators
         </p>
-        <p className="text-red-200">
-          LiveRoom on v-share is still under development. You might get
-          unexpected errors while using it.
-        </p>
       </div>
     </>
   );

src/components/PublishedText.tsx

@@ -35,7 +35,7 @@ function PublishedText() {
 
   const copyLink = () => {
     navigator.clipboard.writeText(
-      "https://vishesh-pandey.github.io/v-share/#" + location.pathname
+      "https://share.visheshpandey.com/#" + location.pathname
     );
     setLinkCopied(true);
   };