From b58c03e30dc0c4484afebb490447348bfc91acc5 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Thu, 29 Jul 2021 17:36:27 -0400
Subject: [PATCH] Fix up Room component and add routes to RoomsPane.

---
 src/components/Room.js       | 28 ----------------------------
 src/components/Room.tsx      | 34 ++++++++++++++++++++++++++++++++++
 src/containers/RoomsPane.tsx | 12 +++++++++++-
 3 files changed, 45 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/Room.js
 create mode 100644 src/components/Room.tsx

diff --git a/src/components/Room.js b/src/components/Room.js
deleted file mode 100644
index dc77445..0000000
--- a/src/components/Room.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { PropTypes } from "react";
-import { Link } from "react-router-dom";
-
-import md5 from "md5";
-
-const Room = ({ name, data }) => {
-  const { membership, userCount } = data;
-
-  const classes = ["room"];
-  if (membership == "Member") {
-    classes.push("room-joined");
-  }
-
-  const path = `/app/rooms/${md5(name)}`;
-
-  return (
-    <Link
-      to={path}
-      activeClassName="room-selected"
-      className={classes.join(" ")}
-    >
-      <span className="room-name">{name}</span>
-      <span className="room-user-count">({userCount})</span>
-    </Link>
-  );
-};
-
-export default Room;
diff --git a/src/components/Room.tsx b/src/components/Room.tsx
new file mode 100644
index 0000000..973f64c
--- /dev/null
+++ b/src/components/Room.tsx
@@ -0,0 +1,34 @@
+import { FC } from "react";
+import { NavLink } from "react-router-dom";
+
+import { RoomMembership, Room as RoomState } from "../modules/room/slice";
+
+interface Props {
+  name: string;
+  data: RoomState;
+}
+
+const Room: FC<Props> = ({ name, data }) => {
+  const { membership, userCount } = data;
+
+  const classes = ["room"];
+  if (membership === RoomMembership.Joined) {
+    classes.push("room-joined");
+  }
+
+  // TODO: Encode the name.
+  const path = `/rooms/${name}`;
+
+  return (
+    <NavLink
+      to={path}
+      activeClassName="room-selected"
+      className={classes.join(" ")}
+    >
+      <span className="room-name">{name}</span>
+      <span className="room-user-count">({userCount})</span>
+    </NavLink>
+  );
+};
+
+export default Room;
diff --git a/src/containers/RoomsPane.tsx b/src/containers/RoomsPane.tsx
index 0999e0d..05b5402 100644
--- a/src/containers/RoomsPane.tsx
+++ b/src/containers/RoomsPane.tsx
@@ -1,11 +1,14 @@
 import { FC } from "react";
 import { useSelector } from "react-redux";
+import { useRouteMatch } from "react-router";
+import { Switch, Route } from "react-router-dom";
 
 //import RoomChat from "../components/RoomChat";
 import RoomList from "../components/RoomList";
 import { selectAllRooms } from "../modules/room/slice";
 
 const RoomsPane: FC = () => {
+  const { path, url } = useRouteMatch();
   const rooms = useSelector(selectAllRooms);
 
   let roomChat;
@@ -38,7 +41,14 @@ const RoomsPane: FC = () => {
   return (
     <div id="rooms-pane">
       <RoomList rooms={rooms} />
-      <div id="room-selected-pane">{roomChat}</div>
+      <Switch>
+        <Route exact path={path}>
+          <div id="room-selected-pane">Pick a room.</div>
+        </Route>
+        <Route path={`${path}/:roomId`}>
+          <div id="room-selected-pane">{roomChat}</div>
+        </Route>
+      </Switch>
     </div>
   );
 };