Introduce super basic UserDetails.

src/modules/user/UserDetails.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+
+import { UserState } from "modules/user/slice";
+
+interface Props {
+  user?: UserState;
+}
+
+const UserDetails: FC<Props> = ({ user }) => {
+  if (user === undefined) {
+    return (
+      <div className="flex h-full justify-center items-center">
+        <h3>Select a user</h3>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      Name: {user.name}
+      <br />
+      Status: {user.status}
+      <br />
+      Average speed: {user.averageSpeed}
+      <br /># Downloads: {user.numDownloads}
+      <br /># Files: {user.numFiles}
+      <br /># Folders: {user.numFolders}
+      <br /># Free slots: {user.numFreeSlots}
+      <br />
+      Country: {user.country}
+      <br />
+    </div>
+  );
+};
+
+export default UserDetails;

src/modules/user/UsersPane.tsx

@@ -1,10 +1,35 @@
 import { FC } from "react";
 import { useSelector } from "react-redux";
+import { useParams, useRouteMatch } from "react-router";
+import { Switch, Route } from "react-router-dom";
 
-import { selectAllUsers } from "modules/user/slice";
+import { decode } from "modules/base64";
+import { UserMap, selectAllUsers } from "modules/user/slice";
+import UserDetails from "modules/user/UserDetails";
 import UserList from "modules/user/UserList";
 
+interface Props {
+  users: UserMap;
+}
+
+interface UrlParams {
+  userId: string;
+}
+
+const UserInfoPane: FC<Props> = ({ users }) => {
+  const { userId } = useParams<UrlParams>();
+
+  let user;
+  if (userId !== undefined) {
+    const name = decode(userId);
+    user = users[name];
+  }
+
+  return <UserDetails user={user} />;
+};
+
 const UsersPane: FC<{}> = () => {
+  const { path } = useRouteMatch();
   const users = useSelector(selectAllUsers);
 
   return (
@@ -12,7 +37,16 @@ const UsersPane: FC<{}> = () => {
       <div className="w-80">
         <UserList users={users} />
       </div>
-      <div className="flex-grow">Coming soon: user details.</div>
+      <div className="flex-grow">
+        <Switch>
+          <Route exact path={path}>
+            <UserInfoPane users={users} />
+          </Route>
+          <Route path={`${path}/:userId`}>
+            <UserInfoPane users={users} />
+          </Route>
+        </Switch>
+      </div>
     </div>
   );
 };