Added toast and route to Editors page

developer-dash/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "uuid": "^9.0.1",

developer-dash/src/App.js

@@ -2,21 +2,36 @@ import logo from './logo.svg';
 import './App.css';
 import { BrowserRouter,Route,Routes } from 'react-router-dom';
 import EditorPage from './Components/EditorPage';
+import { Toaster } from 'react-hot-toast';
 import RoomID from './Components/RoomID';
 
 function App() {
   return (
-
-      <BrowserRouter>
+      <>
+        <div>
+          <Toaster
+              position="top-right"
+              toastOptions={{
+                  success: {
+                      theme: {
+                          primary: '#4aed88',
+                      },
+                  },
+              }}
+            ></Toaster>
+        </div>
+
+          <BrowserRouter>
 
-        <Routes>
+            <Routes>
 
-            <Route path='/' element={<RoomID/>}></Route>
-            <Route path='/editor/:roomId' element={<EditorPage/>}></Route>
+                <Route path='/' element={<RoomID/>}></Route>
+                <Route path='/editor/:roomId' element={<EditorPage/>}></Route>
 
-        </Routes>
+            </Routes>
 
-      </BrowserRouter>
+          </BrowserRouter>
+      </>
 
   );
 }

developer-dash/src/Components/RoomID.js

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
 import { v4 as uuidV4 } from 'uuid';
 
 
@@ -10,7 +12,27 @@ export default function RoomID() {
         e.preventDefault();
         const id = uuidV4();
         setRoomId(id);
+        toast.success("Created new room");
     };
+
+
+    const navigate = useNavigate();
+
+    const joinRoom = () => {
+        if (!roomId || !username) {
+            toast.error('ROOM ID & Username is required');
+            return;
+        }
+
+        // Redirect
+        navigate(`/editor/${roomId}`, {
+            state: {
+                username,
+            },
+        });
+
+    };
+
   return (
     <div className='home-page-wrapper'>
         <div className='form-wrapper '>
@@ -21,7 +43,7 @@ export default function RoomID() {
                 <input type='text' className='input-box' value={username} onChange={(e) => setUsername(e.target.value)} placeholder='Name'/>
                 <input type='text' className='input-box' value={roomId} placeholder='Room ID' onChange={(e) => setRoomId(e.target.value)}/>
             </div>
-            <button className='btn join-button'>Join Now</button>
+            <button className='btn join-button' onClick={joinRoom}>Join Now</button>
             <br/>
             <span className='create-info'>If you don't have an invite then create &nbsp; 
             <a onClick={createNewRoom} href='#'className='create-new-room' >new room</a>

developer-dash/src/index.js

@@ -15,3 +15,11 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+// // Add this in node_modules/react-dom/index.js
+// window.React1 = require('react');
+
+// // Add this in your component file
+// require('react-dom');
+// window.React2 = require('react');
+// console.log(window.React1 === window.React2);