Implement very simple /users page.

src/components/SolsticeApp.tsx

@@ -12,6 +12,7 @@ import Header from "components/Header";
 import ConnectPage from "containers/ConnectPage";
 import Footer from "containers/Footer";
 import RoomsPane from "modules/room/RoomsPane";
+import UsersPane from "modules/user/UsersPane";
 import { selectSocket, SocketState } from "modules/socket/slice";
 
 const MainPane: FC = () => {
@@ -23,7 +24,9 @@ const MainPane: FC = () => {
         <Route path={`${path}rooms`}>
           <RoomsPane />
         </Route>
-        <Route path={`${path}users`}>Coming soon: users pane.</Route>
+        <Route path={`${path}users`}>
+          <UsersPane />
+        </Route>
       </Switch>
     </main>
   );

src/components/User.js

@@ -1,19 +0,0 @@
-import React, { PropTypes } from "react";
-import { Link } from "react-router";
-import md5 from "md5";
-
-const User = ({ name }) => {
-  const path = `/app/users/${md5(name)}`;
-
-  return (
-    <Link to={path} className="user" activeClassName="user-selected">
-      {name}
-    </Link>
-  );
-};
-
-User.propTypes = {
-  name: PropTypes.string.isRequired,
-};
-
-export default User;

src/components/UserList.js

@@ -1,22 +0,0 @@
-import React, { PropTypes } from "react";
-import ImmutablePropTypes from "react-immutable-proptypes";
-
-import SearchableList from "./SearchableList";
-import User from "./User";
-
-const ComposedSearchableList = SearchableList(User);
-
-const UserList = ({ users, userActions }) => (
-  <ComposedSearchableList
-    id="user-list"
-    itemMap={users}
-    refresh={userActions.getList}
-  />
-);
-
-UserList.propTypes = {
-  users: ImmutablePropTypes.record.isRequired,
-  userActions: PropTypes.object.isRequired,
-};
-
-export default UserList;

src/containers/UsersPane.js

@@ -1,29 +0,0 @@
-import React, { PropTypes } from "react";
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-import ImmutablePropTypes from "react-immutable-proptypes";
-
-import UserActions from "../actions/UserActions";
-
-import UserList from "../components/UserList";
-
-const UsersPane = ({ users, userActions }) => {
-  return (
-    <div id="users-pane">
-      <UserList users={users} userActions={userActions} />
-    </div>
-  );
-};
-
-UsersPane.propTypes = {
-  users: ImmutablePropTypes.record.isRequired,
-  userActions: PropTypes.object.isRequired,
-};
-
-const mapStateToProps = ({ users }) => ({ users });
-
-const mapDispatchToProps = (dispatch) => ({
-  userActions: bindActionCreators(UserActions, dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(UsersPane);

src/modules/user/User.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { NavLink } from "react-router-dom";
+
+import { encode } from "modules/base64";
+
+interface Props {
+  name: string;
+}
+
+const User: FC<Props> = ({ name }) => {
+  const path = `/users/${encode(name)}`;
+
+  return (
+    <NavLink to={path} className="user" activeClassName="user-selected">
+      {name}
+    </NavLink>
+  );
+};
+
+export default User;

src/modules/user/UserList.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+import SearchableList from "components/SearchableList";
+import { UserMap } from "modules/user/slice";
+import User from "modules/user/User";
+
+const SearchableUserList = SearchableList(User);
+
+interface Props {
+  users: UserMap;
+}
+
+const UserList: FC<Props> = ({ users }) => (
+  <SearchableUserList id="user-list" itemMap={users} refresh={() => {}} />
+);
+
+export default UserList;

src/modules/user/UsersPane.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { useSelector } from "react-redux";
+
+import { selectAllUsers } from "modules/user/slice";
+import UserList from "modules/user/UserList";
+
+const UsersPane: FC<{}> = () => {
+  const users = useSelector(selectAllUsers);
+
+  return (
+    <div id="users-pane">
+      <UserList users={users} />
+    </div>
+  );
+};
+
+export default UsersPane;