From d04a768037ff7b816913068ac81c481ba02f8a73 Mon Sep 17 00:00:00 2001 From: Titouan Rigoudy Date: Mon, 23 May 2016 15:36:32 +0200 Subject: [PATCH] Make entire rooms state immutable. --- src/components/Room.js | 12 +++---- src/components/RoomChatHeader.js | 3 +- src/components/RoomList.js | 8 ++--- src/containers/RoomsPane.js | 33 ++++++++++--------- src/reducers/rooms.js | 55 +++++++++++--------------------- 5 files changed, 47 insertions(+), 64 deletions(-) diff --git a/src/components/Room.js b/src/components/Room.js index 0e89eb4..bca9fc1 100644 --- a/src/components/Room.js +++ b/src/components/Room.js @@ -1,9 +1,9 @@ import React, { PropTypes } from "react"; import { Link } from "react-router"; -const Room = ({ name, room }) => { +const Room = ({ name, membership, userCount }) => { const classes = ["room"]; - if (room.membership == "Member") { + if (membership == "Member") { classes.push("room-joined"); } @@ -16,17 +16,15 @@ const Room = ({ name, room }) => { className={classes.join(" ")} > {name} - ({room.user_count}) + ({userCount}) ); }; Room.propTypes = { name: PropTypes.string.isRequired, - room: PropTypes.shape({ - membership: PropTypes.string.isRequired, - user_count: PropTypes.number.isRequired - }) + membership: PropTypes.string.isRequired, + userCount: PropTypes.number.isRequired }; export default Room; diff --git a/src/components/RoomChatHeader.js b/src/components/RoomChatHeader.js index 8ed927f..7cdfa46 100644 --- a/src/components/RoomChatHeader.js +++ b/src/components/RoomChatHeader.js @@ -58,8 +58,7 @@ RoomChatHeader.propTypes = { showUsers: PropTypes.bool }), roomActions: PropTypes.shape({ - leave: PropTypes.func.isRequired, - select: PropTypes.func.isRequired + leave: PropTypes.func.isRequired }).isRequired, router: PropTypes.object.isRequired }; diff --git a/src/components/RoomList.js b/src/components/RoomList.js index 55d98ed..588fb02 100644 --- a/src/components/RoomList.js +++ b/src/components/RoomList.js @@ -13,7 +13,7 @@ class RoomList extends React.Component { } render() { - const { selected, roomMap, roomActions } = this.props; + const { roomMap, roomActions } = this.props; const children = []; @@ -22,7 +22,8 @@ class RoomList extends React.Component {
    • ); @@ -41,8 +42,7 @@ RoomList.propTypes = { roomMap: PropTypes.object.isRequired, roomActions: PropTypes.shape({ getList: PropTypes.func.isRequired - }).isRequired, - selected: PropTypes.string + }).isRequired }; export default RoomList; diff --git a/src/containers/RoomsPane.js b/src/containers/RoomsPane.js index 9d38a2d..c293d8f 100644 --- a/src/containers/RoomsPane.js +++ b/src/containers/RoomsPane.js @@ -23,20 +23,24 @@ class RoomsPane extends React.Component { if (params && params.roomName) { roomName = decodeURIComponent(atob(params.roomName)); - const { membership, messages, showUsers } = roomMap.get(roomName); - const room = { - name: roomName, - membership, - messages, - showUsers - }; - roomChat = ( - - ); + const roomData = roomMap.get(roomName); + + if (roomData) { + const room = { + name: roomName, + membership: roomData.get("membership"), + messages: roomData.get("messages"), + showUsers: roomData.get("showUsers") + }; + + roomChat = ( + + ); + } } return ( @@ -44,7 +48,6 @@ class RoomsPane extends React.Component {
    {roomChat} diff --git a/src/reducers/rooms.js b/src/reducers/rooms.js index 0ecc247..88f7476 100644 --- a/src/reducers/rooms.js +++ b/src/reducers/rooms.js @@ -32,16 +32,19 @@ const reduceRoomList = (state, roomList) => { let newRoomMap = Immutable.OrderedMap(); for (const [ roomName, newRoomData ] of roomList) { - // Transform room_data.messages to an immutable list. - newRoomData.messages = Immutable.List(newRoomData.messages); // Get the old room data. - const roomData = roomMap.get(roomName); + let roomData = roomMap.get(roomName); + if (roomData) { + // Scrap the old message list, we only want the new message list. + roomData.remove("messages"); + } else { + // If the room did not exist, make up an empty one. + roomData = Immutable.Map(); + } // Merge the old data and the new data, overwriting with new data if // conflicting. - const mergedRoomData = { - ...roomData, - ...newRoomData - }; + const mergedRoomData = roomData.merge(newRoomData); + // Insert that in the new room map. newRoomMap = newRoomMap.set(roomName, mergedRoomData); } @@ -53,24 +56,17 @@ const reduceRoomList = (state, roomList) => { const reduceReceiveMessageRoom = (roomData, { variant, data }) => { switch (variant) { case "RoomJoinResponse": - return { - ...roomData, - membership: "Member" - }; + return roomData.set("membership", "Member"); case "RoomLeaveResponse": - return { - ...roomData, - membership: "NonMember" - }; + return roomData.set("membership", "NonMember"); case "RoomMessageResponse": { const { user_name, message } = data; - return { - ...roomData, - messages: roomData.messages.push({ user_name, message }) - }; + const messages = roomData.get("messages") + .push({user_name, message}); + return roomData.set("messages", messages); } } }; @@ -83,7 +79,6 @@ const reduceReceiveMessage = (state, message) => { case "RoomMessageResponse": { const { room_name } = data; - const roomMap = state.get("roomMap"); return state.updateIn(["roomMap", data.room_name], (roomData) => { if (roomData) { return reduceReceiveMessageRoom(roomData, message); @@ -105,28 +100,16 @@ const reduceReceiveMessage = (state, message) => { const reduceRoom = (roomData, { type, payload }) => { switch (type) { case ROOM_JOIN: - return { - ...roomData, - membership: "Joining" - }; + return roomData.set("membership", "Joining"); case ROOM_LEAVE: - return { - ...roomData, - membership: "Leaving" - }; + return roomData.set("membership", "Leaving"); case ROOM_SHOW_USERS: - return { - ...roomData, - showUsers: true - }; + return roomData.set("showUsers", true); case ROOM_HIDE_USERS: - return { - ...roomData, - showUsers: false - }; + return roomData.set("showUsers", false); } };