From 9da36dd0effc7e64b8c72d7429d969db062da2e2 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Tue, 24 May 2016 17:31:05 +0200
Subject: [PATCH] Add SearchableList, use it for RoomList and UserList.

---
 src/components/Room.js           | 14 ++++---
 src/components/RoomList.js       | 46 +++++-----------------
 src/components/SearchableList.js | 65 ++++++++++++++++++++++++++++++++
 src/components/UserList.js       | 46 +++++-----------------
 4 files changed, 91 insertions(+), 80 deletions(-)
 create mode 100644 src/components/SearchableList.js

diff --git a/src/components/Room.js b/src/components/Room.js
index 0d77da5..2e7ee24 100644
--- a/src/components/Room.js
+++ b/src/components/Room.js
@@ -1,16 +1,19 @@
 import React, { PropTypes } from "react";
 import { Link } from "react-router";
+import ImmutablePropTypes from "react-immutable-proptypes";
 
 import md5 from "md5";
 
-const Room = ({ name, membership, userCount }) => {
+const Room = ({ name, data }) => {
+    const membership = data.get("membership");
+    const user_count = data.get("user_count");
+
     const classes = ["room"];
     if (membership == "Member") {
         classes.push("room-joined");
     }
 
-    const hash = md5(name);
-    const path = `/app/rooms/${hash}`;
+    const path = `/app/rooms/${md5(name)}`;
 
     return (
         <Link to={path}
@@ -18,15 +21,14 @@ const Room = ({ name, membership, userCount }) => {
             className={classes.join(" ")}
         >
             <span className="room-name">{name}</span>
-            <span className="room-user-count">({userCount})</span>
+            <span className="room-user-count">({user_count})</span>
         </Link>
     );
 };
 
 Room.propTypes = {
     name: PropTypes.string.isRequired,
-    membership: PropTypes.string.isRequired,
-    userCount: PropTypes.number.isRequired
+    data: ImmutablePropTypes.map.isRequired
 };
 
 export default Room;
diff --git a/src/components/RoomList.js b/src/components/RoomList.js
index 5b6c17b..7b02dab 100644
--- a/src/components/RoomList.js
+++ b/src/components/RoomList.js
@@ -2,45 +2,17 @@ import React, { PropTypes } from "react";
 import ImmutablePropTypes from "react-immutable-proptypes";
 
 import Room from "./Room";
-import RoomListHeader from "./RoomListHeader";
+import SearchableList from "./SearchableList";
 
-class RoomList extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+const ComposedSearchableList = SearchableList(Room);
 
-    componentDidMount() {
-        const { rooms, roomActions } = this.props;
-        if (rooms.shouldUpdate()) {
-            roomActions.getList();
-        }
-    }
-
-    render() {
-        const { rooms, roomActions } = this.props;
-
-        const children = [];
-
-        for (const [roomName, roomData] of rooms.byName) {
-            children.push(
-                <li key={roomName}>
-                    <Room
-                        name={roomName}
-                        membership={roomData.get("membership")}
-                        userCount={roomData.get("user_count")}
-                    />
-                </li>
-            );
-        }
-
-        return (
-            <div id="room-list">
-                <RoomListHeader refresh={this.props.roomActions.getList}/>
-                <ul> {children} </ul>
-            </div>
-        );
-    }
-}
+const RoomList = ({ rooms, roomActions }) => (
+    <ComposedSearchableList
+        id="room-list"
+        itemMap={rooms}
+        refresh={roomActions.getList}
+    />
+);
 
 RoomList.propTypes = {
     rooms: ImmutablePropTypes.record.isRequired,
diff --git a/src/components/SearchableList.js b/src/components/SearchableList.js
new file mode 100644
index 0000000..d7452fb
--- /dev/null
+++ b/src/components/SearchableList.js
@@ -0,0 +1,65 @@
+import React, { PropTypes } from "react";
+import ImmutablePropTypes from "react-immutable-proptypes";
+
+const SearchableList = (ItemComponent) => {
+    class ComposedSearchableList extends React.Component {
+        constructor(props) {
+            super(props);
+        }
+
+        componentDidMount() {
+            const { itemMap, refresh } = this.props;
+            if (itemMap.shouldUpdate()) {
+                refresh();
+            }
+        }
+
+
+        render() {
+            const { id, itemMap, refresh } = this.props;
+
+            const children = [];
+
+            for (const [itemName, itemData] of itemMap.byName) {
+                children.push(
+                    <li key={itemName}>
+                        <ItemComponent
+                            name={itemName}
+                            data={itemData}
+                        />
+                    </li>
+                );
+            }
+
+            const onClick = (event) => {
+                event.preventDefault();
+                refresh();
+            };
+
+            return (
+                <div id={id}>
+                    <div id={`${id}-header`}>
+                        <div>
+                            <button onClick={onClick}>
+                                Refresh
+                            </button>
+                        </div>
+                    </div>
+                    <ul>
+                        {children}
+                    </ul>
+                </div>
+            );
+        }
+    }
+
+    ComposedSearchableList.propTypes = {
+        id:      PropTypes.string.isRequired,
+        itemMap: ImmutablePropTypes.record.isRequired,
+        refresh: PropTypes.func.isRequired
+    };
+
+    return ComposedSearchableList;
+};
+
+export default SearchableList;
diff --git a/src/components/UserList.js b/src/components/UserList.js
index ca8068e..213f5c7 100644
--- a/src/components/UserList.js
+++ b/src/components/UserList.js
@@ -1,46 +1,18 @@
 import React, { PropTypes } from "react";
 import ImmutablePropTypes from "react-immutable-proptypes";
 
+import SearchableList from "./SearchableList";
 import User from "./User";
 
-class UserList extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+const ComposedSearchableList = SearchableList(User);
 
-    componentDidMount() {
-        const { users, userActions } = this.props;
-        if (users.shouldUpdate()) {
-            userActions.getList();
-        }
-    }
-
-    render() {
-        const { users, userActions } = this.props;
-        let children = [];
-        for (const [ userName, userData ] of users.byName) {
-            children.push(
-                <li key={userName}>
-                    <User name={userName} />
-                </li>
-            );
-        }
-
-        const onClick = (event) => {
-            event.preventDefault();
-            userActions.getList();
-        };
-
-        return (
-            <div className="user-list">
-                <button onClick={onClick}>Refresh</button>
-                <ul>
-                    {children}
-                </ul>
-            </div>
-        );
-    }
-}
+const UserList = ({ users, userActions }) => (
+    <ComposedSearchableList
+        id="user-list"
+        itemMap={users}
+        refresh={userActions.getList}
+    />
+);
 
 UserList.propTypes = {
     users: ImmutablePropTypes.record.isRequired,