diff --git a/src/components/Room.js b/src/components/Room.js
new file mode 100644
index 0000000..3277c6e
--- /dev/null
+++ b/src/components/Room.js
@@ -0,0 +1,11 @@
+import React, { PropTypes } from "react";
+
+const Room = ({ name }) => {
+ return
{name}
;
+};
+
+Room.propTypes = {
+ name: PropTypes.string.isRequired
+};
+
+export default Room;
diff --git a/src/components/RoomList.js b/src/components/RoomList.js
new file mode 100644
index 0000000..0cf8eb9
--- /dev/null
+++ b/src/components/RoomList.js
@@ -0,0 +1,26 @@
+import React, { PropTypes } from "react";
+
+import Room from "./Room";
+
+const RoomList = ({ rooms }) => {
+ const children = [];
+ for (const [room_name, room_data] of rooms) {
+ children.push(
+
+
+
+ );
+ }
+ return (
+
+ );
+};
+
+RoomList.propTypes = {
+ rooms: PropTypes.object.isRequired
+};
+
+export default RoomList;
diff --git a/src/components/SolsticeApp.js b/src/components/SolsticeApp.js
index 42889c5..6d08060 100644
--- a/src/components/SolsticeApp.js
+++ b/src/components/SolsticeApp.js
@@ -4,6 +4,7 @@ import ConnectForm from "../components/ConnectForm";
import SocketStatusPane from "../components/SocketStatusPane";
import LoginStatusPane from "../containers/LoginStatusPane";
+import RoomsPane from "../containers/RoomsPane";
import { STATE_OPEN } from "../constants/socket";
@@ -23,6 +24,7 @@ const SolsticeApp = (props) => {
Solstice web UI
+
);
};
diff --git a/src/containers/RoomsPane.js b/src/containers/RoomsPane.js
new file mode 100644
index 0000000..6a2880b
--- /dev/null
+++ b/src/containers/RoomsPane.js
@@ -0,0 +1,40 @@
+import React, { PropTypes } from "react";
+import { connect } from "react-redux";
+
+import RoomList from "../components/RoomList";
+import ControlRequest from "../utils/ControlRequest";
+
+const ID = "rooms-pane";
+
+class RoomsPane extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ componentDidMount() {
+ this.props.socketSend(ControlRequest.roomList());
+ }
+
+ render() {
+ const onClick = (event) => {
+ this.props.socketSend(ControlRequest.roomList());
+ event.preventDefault();
+ };
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+RoomsPane.propTypes = {
+ rooms: PropTypes.object.isRequired,
+ socketSend: PropTypes.func.isRequired
+};
+
+export default connect(
+ state => state.rooms
+)(RoomsPane);
diff --git a/src/reducers/index.js b/src/reducers/index.js
index b986903..2cb569a 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -2,10 +2,12 @@ import { combineReducers } from "redux";
import { reducer as form } from "redux-form";
import login from "./login";
+import rooms from "./rooms";
import socket from "./socket";
const rootReducer = combineReducers({
login,
+ rooms,
socket,
form
});
diff --git a/src/reducers/rooms.js b/src/reducers/rooms.js
new file mode 100644
index 0000000..6491df3
--- /dev/null
+++ b/src/reducers/rooms.js
@@ -0,0 +1,53 @@
+import { SOCKET_RECEIVE_MESSAGE } from "../constants/ActionTypes";
+
+const initialState = {
+ rooms: new Map()
+};
+
+const reduceRoomList = (old_rooms, room_list) => {
+ // First sort the room list by room name
+ room_list.sort((room_pair_1, room_pair_2) => {
+ const name_1 = room_pair_1[0];
+ const name_2 = room_pair_2[0];
+ if (name_1 < name_2) {
+ return -1;
+ } else if (name_1 > name_2) {
+ return 1;
+ }
+ return 0;
+ });
+
+ // Then build the new rooms map
+ const new_rooms = new Map();
+ for (const [ room_name, room_data ] of room_list) {
+ const old_data = old_rooms.get(room_name);
+ if (old_data) {
+ new_rooms.set(room_name, { ...old_data, ...room_data });
+ } else {
+ new_rooms.set(room_name, room_data);
+ }
+ }
+ return new_rooms;
+};
+
+const reduceReceiveMessage = (state, payload) => {
+ switch (payload.variant) {
+ case "RoomListResponse":
+ {
+ const rooms = reduceRoomList(state.rooms, payload.data.rooms);
+ return { ...state, rooms };
+ }
+ default:
+ return state;
+ }
+};
+
+export default (state = initialState, action) => {
+ const { type, payload } = action;
+ switch (type) {
+ case SOCKET_RECEIVE_MESSAGE:
+ return reduceReceiveMessage(state, payload);
+ default:
+ return state;
+ }
+};