Fix url encoding for room names

frontend/src/components/meeting/Meeting.tsx

@@ -48,7 +48,7 @@ function Meeting(props: Props) {
                     setMeetingStarted(true)
                   }}
                 >
-                  {roomData.roomName}
+                  {decodeURI(roomData.roomName)}
                 </a>
               </h3>
               {roomData.participants.map((participant) => (

frontend/src/components/meeting/MeetingNameInput.tsx

@@ -8,7 +8,7 @@ function MeetingNameInput(props: { roomName: string; currentUser: string }) {
   const [_, setMeetingStarted] = useMeetingStarted()
 
   const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    updateRoomName(event.target.value)
+    updateRoomName(encodeURI(event.target.value))
     event.preventDefault()
   }
 
@@ -23,7 +23,7 @@ function MeetingNameInput(props: { roomName: string; currentUser: string }) {
     <div className="meeting-name-input">
       <h1>Greetings {props.currentUser}</h1>
       <form onSubmit={onSubmit}>
-        <input placeholder="Roomname" type="text" value={roomName} onChange={onInput} />
+        <input placeholder="Roomname" type="text" value={decodeURI(roomName)} onChange={onInput} />
         <button type="submit">Enter the adventure</button>
       </form>
     </div>

frontend/src/components/sidebar/Sidebar.tsx

@@ -31,7 +31,7 @@ function Sidebar(props: Props) {
                     setMeetingStarted(true)
                   }}
                 >
-                  {roomData.roomName}
+                  {decodeURI(roomData.roomName)}
                 </a>
               </h3>
               {roomData.participants.map((participant) => (

frontend/src/hooks/useRoomData.ts

@@ -2,7 +2,15 @@ import { useState } from 'react'
 import { UsersData } from '../background/types/roomData'
 
 function useRoomData() {
-  const [roomData, setRoomData] = useState<UsersData>()
+  const [roomData, setRoomDataInternal] = useState<UsersData>()
+
+  const setRoomData = (usersData: UsersData) => {
+    usersData.roomsData = usersData.roomsData.map((roomData) => {
+      roomData.roomName = decodeURI(roomData.roomName)
+      return roomData
+    })
+    setRoomDataInternal(usersData)
+  }
 
   return { roomData, setRoomData }
 }

frontend/src/hooks/useRoomName.ts

@@ -46,7 +46,7 @@ function setRoomNameInUrl(roomName: string) {
 
 function setRoomNameInTitle(roomName: string) {
   if (!!roomName) {
-    document.title = roomName
+    document.title = decodeURI(roomName)
   }
 }