From a5d769e9b59fe1fe77f15ba80886e6f040016ba0 Mon Sep 17 00:00:00 2001
From: qvalentin <valentin.theodor@web.de>
Date: Thu, 6 Jul 2023 18:58:55 +0200
Subject: [PATCH] Fix url encoding for room names

---
 frontend/src/components/meeting/Meeting.tsx          |  2 +-
 frontend/src/components/meeting/MeetingNameInput.tsx |  4 ++--
 frontend/src/components/sidebar/Sidebar.tsx          |  2 +-
 frontend/src/hooks/useRoomData.ts                    | 10 +++++++++-
 frontend/src/hooks/useRoomName.ts                    |  2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/meeting/Meeting.tsx b/frontend/src/components/meeting/Meeting.tsx
index dfd4b73..d489575 100644
--- a/frontend/src/components/meeting/Meeting.tsx
+++ b/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) => (
diff --git a/frontend/src/components/meeting/MeetingNameInput.tsx b/frontend/src/components/meeting/MeetingNameInput.tsx
index 0da3d15..3c498be 100644
--- a/frontend/src/components/meeting/MeetingNameInput.tsx
+++ b/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>
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index e67f381..3e69178 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/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) => (
diff --git a/frontend/src/hooks/useRoomData.ts b/frontend/src/hooks/useRoomData.ts
index f8a66f4..ccef5b3 100644
--- a/frontend/src/hooks/useRoomData.ts
+++ b/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 }
 }
diff --git a/frontend/src/hooks/useRoomName.ts b/frontend/src/hooks/useRoomName.ts
index 6bbdfb0..14e3c1f 100644
--- a/frontend/src/hooks/useRoomName.ts
+++ b/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)
   }
 }