Introduce paths modules.

src/components/Header.tsx

@@ -1,6 +1,9 @@
 import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
+import { roomListPath } from "modules/room/paths";
+import { userListPath } from "modules/user/paths";
+
 interface LinkProps {
   to: string;
 }
@@ -22,8 +25,8 @@ const Header: FC = () => (
       Solstice
     </h1>
     <nav className="flex items-center">
-      <Link to="/rooms">Rooms</Link>
-      <Link to="/users">Users</Link>
+      <Link to={roomListPath}>Rooms</Link>
+      <Link to={userListPath}>Users</Link>
     </nav>
   </header>
 );

src/components/SolsticeApp.tsx

@@ -1,30 +1,24 @@
 import { FC } from "react";
 import { useSelector } from "react-redux";
-import {
-  Switch,
-  Redirect,
-  Route,
-  useLocation,
-  useRouteMatch,
-} from "react-router-dom";
+import { Switch, Redirect, Route, useLocation } from "react-router-dom";
 
 import Header from "components/Header";
 import ConnectPage from "containers/ConnectPage";
 import Footer from "containers/Footer";
+import { roomListPath } from "modules/room/paths";
 import RoomsPane from "modules/room/RoomsPane";
+import { userListPath } from "modules/user/paths";
 import UsersPane from "modules/user/UsersPane";
 import { selectSocket, SocketState } from "modules/socket/slice";
 
 const MainPane: FC = () => {
-  const { path } = useRouteMatch();
-
   return (
     <main className="flex-1 min-h-0">
       <Switch>
-        <Route path={`${path}rooms`}>
+        <Route path={roomListPath}>
           <RoomsPane />
         </Route>
-        <Route path={`${path}users`}>
+        <Route path={userListPath}>
           <UsersPane />
         </Route>
       </Switch>

src/modules/room/RoomListEntry.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
-import { encode } from "modules/base64";
+import { getRoomDetailsPath } from "modules/room/paths";
 import { RoomMembership, RoomState } from "modules/room/slice";
 
 interface Props {
@@ -21,7 +21,7 @@ const RoomListEntry: FC<Props> = ({ name, data }) => {
 
   return (
     <NavLink
-      to={`/rooms/${encode(name)}`}
+      to={getRoomDetailsPath(name)}
       activeClassName="bg-yellow-300 font-bold"
       className={`block p-3 ${backgroundColor} hover:bg-yellow-300 rounded-xl`}
     >

src/modules/room/paths.ts

@@ -0,0 +1,7 @@
+import { encode } from "modules/base64";
+
+export const roomListPath = "/rooms";
+
+export function getRoomDetailsPath(roomName: string): string {
+  return `${roomListPath}/${encode(roomName)}`;
+}

src/modules/user/UserListEntry.tsx

@@ -1,18 +1,16 @@
 import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
-import { encode } from "modules/base64";
+import { getUserDetailsPath } from "modules/user/paths";
 
 interface Props {
   name: string;
 }
 
 const UserListEntry: FC<Props> = ({ name }) => {
-  const path = `/users/${encode(name)}`;
-
   return (
     <NavLink
-      to={path}
+      to={getUserDetailsPath(name)}
       activeClassName="bg-yellow-300 font-bold"
       className={`block p-3 hover:bg-yellow-300 rounded-xl`}
     >

src/modules/user/paths.ts

@@ -0,0 +1,7 @@
+import { encode } from "modules/base64";
+
+export const userListPath = "/users";
+
+export function getUserDetailsPath(userName: string): string {
+  return `${userListPath}/${encode(userName)}`;
+}