From 847ad709c5a4db7013a576f1af29a618b79e3ae4 Mon Sep 17 00:00:00 2001
From: antoine lebaud <lebaud.antoine131@gmail.com>
Date: Mon, 1 Jul 2024 20:06:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8(frontend)=20fix=20TypeScript=20err?=
 =?UTF-8?q?ors=20to=20enable=20successful=20build?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolved minor TypeScript errors in the Proof of Concept (PoC)
that were causing the "npm run build" command to fail.

These fixes were necessary to prepare the frontend for
containerization with Docker.

ASAP, a CI step will prevent these kind of errors.
---
 src/frontend/src/App.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index a3c8ba9b..52b7a7a8 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -12,6 +12,13 @@ export interface User {
   email: string;
 }
 
+export interface Room {
+  livekit?: {
+    token: string
+  };
+  is_public: boolean;
+}
+
 function getCSRFToken() {
   return document.cookie
     .split(';')
@@ -38,7 +45,7 @@ async function getMe() {
   return response.json() as Promise<User>;
 }
 
-function slugify(str) {
+function slugify(str: string) {
   return str
     .toLowerCase()
     .normalize('NFD')
@@ -49,7 +56,7 @@ function slugify(str) {
     .replace(/-+/g, '-')
 }
 
-async function fetchRoom(roomId) {
+async function fetchRoom(roomId: string) {
   const csrfToken = getCSRFToken();
   const response = await fetch(
     `${API_BASE_URL}rooms/${roomId}/`,
@@ -66,13 +73,13 @@ async function fetchRoom(roomId) {
     throw new Error(`Couldn't fetch room data: ${response.statusText}`);
   }
 
-  return response.json() as Promise<User>;
+  return response.json() as Promise<Room>;
 }
 
 
 function App() {
   const [authenticatedUser, setAuthenticatedUser] = useState<User | null>(null)
-  const [roomData, setRoomData] = useState(null)
+  const [roomData, setRoomData] = useState<Room | null>(null)
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
   useEffect(() => {
@@ -86,7 +93,7 @@ function App() {
 
   const getRoom = async () => {
 
-    const roomName = document.getElementById('roomName')?.value || crypto.randomUUID()
+    const roomName = (document.getElementById('roomName')as HTMLInputElement)?.value || crypto.randomUUID()
     const roomData = await fetchRoom(slugify(roomName))
     setRoomData(roomData)