Encode/decode room names in URLs.

package-lock.json

@@ -20,7 +20,8 @@
         "react-redux": "^7.2.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
-        "typescript": "~4.1.5"
+        "typescript": "~4.1.5",
+        "utf8": "^3.0.0"
       },
       "devDependencies": {
         "@types/jest": "^24.9.1",
@@ -30,6 +31,7 @@
         "@types/react-redux": "^7.1.18",
         "@types/react-router": "^5.1.16",
         "@types/react-router-dom": "^5.1.8",
+        "@types/utf8": "^3.0.0",
         "prettier": "^2.3.2",
         "sass": "^1.36.0",
         "sass-loader": "^10.2.0"
@@ -4019,6 +4021,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@types/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-QrhvCktdm5wD48axAnjqSzPH9lOj0MiCYfMX6MSqGs2Jv+txwvdxviXiCEj8zSCWIEDU9SIJ7g9pU5KtxRgYSg==",
+      "dev": true
+    },
     "node_modules/@types/webpack": {
       "version": "4.41.30",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@@ -20287,6 +20295,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -25147,6 +25160,12 @@
         }
       }
     },
+    "@types/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-QrhvCktdm5wD48axAnjqSzPH9lOj0MiCYfMX6MSqGs2Jv+txwvdxviXiCEj8zSCWIEDU9SIJ7g9pU5KtxRgYSg==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.30",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
@@ -37753,6 +37772,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

package.json

@@ -16,7 +16,8 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "typescript": "~4.1.5"
+    "typescript": "~4.1.5",
+    "utf8": "^3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -47,6 +48,7 @@
     "@types/react-redux": "^7.1.18",
     "@types/react-router": "^5.1.16",
     "@types/react-router-dom": "^5.1.8",
+    "@types/utf8": "^3.0.0",
     "prettier": "^2.3.2",
     "sass": "^1.36.0",
     "sass-loader": "^10.2.0"

src/components/Room.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
+import { encode } from "../modules/base64";
 import { RoomMembership, Room as RoomState } from "../modules/room/slice";
 
 interface Props {
@@ -16,12 +17,9 @@ const Room: FC<Props> = ({ name, data }) => {
     classes.push("room-joined");
   }
 
-  // TODO: Encode the name.
-  const path = `/rooms/${name}`;
-
   return (
     <NavLink
-      to={path}
+      to={`/rooms/${encode(name)}`}
       activeClassName="room-selected"
       className={classes.join(" ")}
     >

src/components/RoomChatForm.tsx

@@ -16,7 +16,7 @@ interface Fields {
 const RoomChatForm: FC<Props> = ({ roomName, loginUserName }) => {
   const dispatch = useDispatch();
 
-  const onSubmit = ({ message }: Fields, form: Form) => {
+  const onSubmit = ({ message }: Fields, form: any) => {
     dispatch(
       roomMessage({
         roomName,

src/containers/RoomsPane.tsx

@@ -5,6 +5,7 @@ import { Switch, Route } from "react-router-dom";
 
 import RoomChat from "../components/RoomChat";
 import RoomList from "../components/RoomList";
+import { decode } from "../modules/base64";
 import { selectLogin } from "../modules/login/slice";
 import { RoomMap, selectAllRooms } from "../modules/room/slice";
 
@@ -19,7 +20,8 @@ interface UrlParams {
 
 const RoomChatPane: FC<ChatProps> = ({ loginUserName, rooms }) => {
   const { roomId } = useParams<UrlParams>();
-  return <RoomChat loginUserName={loginUserName} room={rooms[roomId]} />;
+  const name = decode(roomId);
+  return <RoomChat loginUserName={loginUserName} room={rooms[name]} />;
 };
 
 const RoomsPane: FC<{}> = () => {

src/modules/base64.ts

@@ -0,0 +1,13 @@
+import utf8 from "utf8";
+
+// Base64-encodes the given string. Supports UTF-8.
+export function encode(str: string): string {
+  const bytes = utf8.encode(str);
+  return btoa(bytes);
+}
+
+// Base64-decodes the given string. Supports UTF-8.
+export function decode(encoded: string): string {
+  const bytes = atob(encoded);
+  return utf8.decode(bytes);
+}