💩(frontend) add PoC calling LiveKit server with an access token

This code is shit. It was made to play with the API.
@manuhabitela, the floor is yours.

src/frontend/visio/src/App.tsx

@@ -1,7 +1,11 @@
 import {useEffect, useState} from 'react'
 import './App.css'
+import {LiveKitRoom, VideoConference} from "@livekit/components-react";
+
+import '@livekit/components-styles';
 
 const API_BASE_URL = 'http://localhost:8071/api/v1.0/'
+const LIVEKIT_SERVER_URL = 'http://localhost:7880'
 
 export interface User {
   id: string;
@@ -34,9 +38,41 @@ async function getMe() {
   return response.json() as Promise<User>;
 }
 
+function slugify(str) {
+  return str
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+}
+
+async function fetchRoom(roomId) {
+  const csrfToken = getCSRFToken();
+  const response = await fetch(
+    `${API_BASE_URL}rooms/${roomId}/`,
+    {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(csrfToken && {'X-CSRFToken': csrfToken}),
+      },
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Couldn't fetch room data: ${response.statusText}`);
+  }
+
+  return response.json() as Promise<User>;
+}
+
 
 function App() {
   const [authenticatedUser, setAuthenticatedUser] = useState<User | null>(null)
+  const [roomData, setRoomData] = useState(null)
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
   useEffect(() => {
@@ -48,6 +84,17 @@ function App() {
       .finally(() => setIsLoading(false))
   }, [])
 
+  const getRoom = async () => {
+
+    const roomName = document.getElementById('roomName')?.value || crypto.randomUUID()
+    const roomData = await fetchRoom(slugify(roomName))
+    setRoomData(roomData)
+
+    if (!roomData.livekit && !roomData.is_public) {
+      alert('no access')
+    }
+  }
+
   if (isLoading) {
     return (
       <div>
@@ -56,17 +103,30 @@ function App() {
     )
   }
 
-  if (authenticatedUser) {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column'}}>
-        <p>You are connected as: {authenticatedUser.email}</p>
-        <button onClick={() => window.location.replace(new URL('logout/', API_BASE_URL).href)}>Logout</button>
-      </div>
-    )
-  }
-
   return (
-    <button onClick={() => window.location.replace(new URL('authenticate/', API_BASE_URL).href)}>Login</button>
+    <div>
+      {
+        authenticatedUser ? (
+          <div style={{display: 'flex', flexDirection: 'column'}}>
+            <p>You are connected as: {authenticatedUser.email}</p>
+            <button onClick={() => window.location.replace(new URL('logout/', API_BASE_URL).href)}>Logout</button>
+          </div>
+        ) : (
+          <button onClick={() => window.location.replace(new URL('authenticate/', API_BASE_URL).href)}>Login</button>
+        )
+      }
+      <>
+        <input id="roomName" type="text" placeholder="Room name"/>
+        <button onClick={() => getRoom()}>Get room</button>
+      </>
+      {
+        roomData?.livekit && (
+          <LiveKitRoom serverUrl={LIVEKIT_SERVER_URL} token={roomData?.livekit?.token} connect={true}>
+            <VideoConference/>
+          </LiveKitRoom>
+        )
+      }
+    </div>
   )
 }