fix: create and join rooms

src/App.tsx

@@ -13,6 +13,7 @@ function App() {
       <Box className='App'>
         <Routes>
           <Route path='/' element={<VideoCall />} />
+          <Route path='/:roomName' element={<VideoCall />} />
         </Routes>
       </Box>
     </ThemeProvider>

src/Components/Lobby/Lobby.tsx

@@ -12,13 +12,29 @@ import {
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { useTheme, type Theme } from '@mui/material/styles'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 interface Props {
-  handleJoinClick: () => void
+  setJoined: (x: boolean) => void
 }
 
-const Lobby = ({ handleJoinClick }: Props) => {
+const Lobby = ({ setJoined }: Props) => {
   const theme: Theme = useTheme()
+  const navigate = useNavigate()
+
+  const [roomName, setRoomName] = useState('')
+
+  const handleJoinRoom = () => {
+    navigate(`/${roomName}`)
+    setJoined(true)
+  }
+
+  const handleCreateRoom = () => {
+    const roomName = Array.from({ length: 8 }, () => Math.random().toString(36)[2] || 0).join('')
+    navigate(`/${roomName}`)
+    setJoined(true)
+  }
 
   return (
     <Box
@@ -87,6 +103,7 @@ const Lobby = ({ handleJoinClick }: Props) => {
                 }}
                 inputProps={{ style: { color: theme.palette.common.white, borderColor: 'white' } }}
                 InputLabelProps={{ style: { color: theme.palette.common.white } }}
+                onChange={(e) => setRoomName(e.target.value)}
               />
               <IconButton
                 sx={{
@@ -97,6 +114,7 @@ const Lobby = ({ handleJoinClick }: Props) => {
                   height: '50px',
                 }}
                 aria-label='join room'
+                onClick={handleJoinRoom}
               >
                 <ChevronRightIcon />
               </IconButton>
@@ -118,7 +136,7 @@ const Lobby = ({ handleJoinClick }: Props) => {
                   borderRadius: '10px',
                   height: '50px',
                 }}
-                onClick={handleJoinClick}
+                onClick={handleCreateRoom}
               >
                 Create Room
               </Button>

src/Pages/VideoCall/VideoCall.tsx

@@ -9,10 +9,6 @@ const VideoCall = () => {
   const agoraEngine = useRTCClient(AgoraRTC.createClient({ codec: 'vp8', mode: 'rtc' }))
   const [joined, setJoined] = useState(false)
 
-  const handleJoinClick = () => {
-    setJoined(true)
-  }
-
   return (
     <Box sx={{ height: '100vh', width: '100vw', overflow: 'hidden' }}>
       {joined ? (
@@ -22,7 +18,7 @@ const VideoCall = () => {
           </AgoraManager>
         </AgoraRTCProvider>
       ) : (
-        <Lobby handleJoinClick={handleJoinClick} />
+        <Lobby setJoined={setJoined} />
       )}
     </Box>
   )

src/Services/AgoraManager/AgoraManager.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material'
 import { useTheme, type Theme } from '@mui/material/styles'
 import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
 import MeetingLayout from '../../Components/MeetingLayout/MeetingLayout'
+import { useParams } from 'react-router-dom'
 
 interface AgoraContextType {
   localCameraTrack: ICameraVideoTrack | null
@@ -38,6 +39,10 @@ export const AgoraManager = ({
   children: React.ReactNode
 }) => {
   const theme: Theme = useTheme()
+  let { channel } = useParams<{ channel: string }>()
+  if (!channel) {
+    channel = Array.from({ length: 8 }, () => Math.random().toString(36)[2] || 0).join('')
+  }
 
   const {
     data: uid,
@@ -46,13 +51,17 @@ export const AgoraManager = ({
     isLoading: isJoining,
   } = useJoin({
     appid: '3af4648782de46ddbf90005f7a68f206',
-    channel: 'test',
+    channel,
     token: null,
     uid: null,
   })
   const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack()
   const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack()
 
+  useEffect(() => {
+    localStorage.setItem('myUid', uid.toString())
+  }, [uid])
+
   useEffect(() => {
     return () => {
       localCameraTrack?.close()