[FIX] Highlight Unread Rooms

client/src/components/ChatWindow/index.css

@@ -4,6 +4,10 @@
   position: relative;
 }
 
+.hide-chatWindow-container {
+  display: none !important;
+}
+
 .loading-chatWindow {
   background-color: #2f343d;
   position: absolute;

client/src/components/ChatWindow/index.js

@@ -7,7 +7,7 @@ export default function ChatWindow(props) {
   useEffect(() => {
     document.getElementsByTagName(
       "iframe"
-    )[0].src = `${rcApiDomain}${pathname}/?layout=embedded`;
+    )[0].src = `${rcApiDomain}${pathname}?layout=embedded`;
     // eslint-disable-next-line
   }, []);
   useEffect(() => {
@@ -18,7 +18,12 @@ export default function ChatWindow(props) {
     );
   }, [pathname]);
   return (
-    <div className="chatWindow-container">
+    <div
+      className={`chatWindow-container ${
+        (pathname === "/home" || pathname === "/") &&
+        "hide-chatWindow-container"
+      }`}
+    >
       <div className="loading-chatWindow hide-chatWindow"></div>
       <iframe
         src={`${rcApiDomain}/home/?layout=embedded`}

client/src/components/CommunityListItem/index.js

@@ -2,13 +2,17 @@ import "./index.css"
 import RoomItem from "./../RoomItem/";
 
 export default function CommunityListItem(props) {
-    const { community, community_name } = props;
-    return (
-      <div className="community-wrapper">
-        <div className="community-title">{community_name}</div>
-        {community.map((room) => {
-            return <RoomItem room={room} key={room.rid}></RoomItem>
-        })}
-      </div>
-    );
+  const { community, community_name } = props;
+  return (
+    <div className="community-wrapper">
+      <div className="community-title">{community_name}</div>
+      {Object.keys(community).map((roomId) => {
+        let room = community[roomId];
+        if (room.open || room.open === undefined)
+          // Here the second condition holds when new room is created as the response from server doesn't return open field on creation
+          return <RoomItem room={room} key={room._id}></RoomItem>;
+        return null;
+      })}
+    </div>
+  );
 }

client/src/components/CreateChannel/index.js

@@ -55,7 +55,7 @@ export default class CreateChannel extends Component {
     let communityChannels = [],
       communityMember = [];
 
-    communityChannels = rooms
+    communityChannels = Object.keys(rooms).map((roomId) => rooms[roomId])
       .filter((room) => {
         return room.name.endsWith("_community");
       })

client/src/components/MainLayout/index.js

@@ -42,40 +42,23 @@ export default function MainLayout(props) {
   const {authState, stats} = props;
 
   return (
-    <Switch>
-      <Route
-        //TODO Shift this to programmatically check if repo is associated to hide activity
-        //_community (without repo) -> custom field (not repo)
-        //abcd (without repo) -> custom field (not repo)
-        path={["/direct", "(.*)_community"]}
-        render={(props) => {
-          return (
-            <div className="mainLayout-wrapper">
-              <ChatWindow {...props} />
-            </div>
-          );
-        }}
-      />
-      <Route
-        path={["/channel", "/group"]}
-        render={(props) => {
-          return (
-            <div className="mainLayout-wrapper">
-              <ChatWindow {...props} />
-              <RightSidebar {...props} authState={authState} />
-            </div>
-          );
-        }}
-      />
-      <Route
-        exact
-        path={["/home", "/"]}
-        render={(props) => {
-          return (
-            <Home {...props} authState={authState} stats={stats}/>
-          );
-        }}
-      />
-    </Switch>
+    <div className="mainLayout-wrapper">
+      <ChatWindow {...props} />
+      <Switch>
+        <Route
+          path={["/channel", "/group"]}
+          render={(props) => {
+            return <RightSidebar {...props} authState={authState} />;
+          }}
+        />
+        <Route
+          exact
+          path={["/home", "/"]}
+          render={(props) => {
+            return <Home {...props} authState={authState} />;
+          }}
+        />
+      </Switch>
+    </div>
   );
 }

client/src/components/RoomItem/index.css

@@ -29,4 +29,8 @@
 
 .active-room {
     background-color: #41464f;
+}
+
+.highlight-room {
+    color: white !important;
 }

client/src/components/RoomItem/index.js

@@ -10,7 +10,7 @@ export default function RoomItem({room}) {
         to={`/${
           room["t"] === "c" ? "channel" : room["t"] === "p" ? "group" : "direct"
         }/${room.username || room.name}`}
-        className="room-wrapper"
+        className={`room-wrapper ${room.alert && "highlight-room"}`}
         activeClassName="active-room"
       >
         <img
@@ -30,10 +30,9 @@ export default function RoomItem({room}) {
           <FiUser className="room-item-type-icon"></FiUser>
         )}
         <span className="room-name">
-          {room.name.split(/_(.+)/)[1] && room["t"] !== "d"
-            ? room.name.split(/_(.+)/)[1]
-            : room.name}
-          {room.username ? ` (${room.username})` : null}
+          {(room.fname && (room.fname.split(/_(.+)/)[1] || room.fname)) ||
+            room.name ||
+            room.username}
         </span>
       </NavLink>
     );

client/src/components/SignedLeftSidebar/index.js

@@ -31,18 +31,25 @@ export default function SignedLeftSidebar(props) {
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarSeverity, setSnackbarSeverity] = useState("success");
   const [snackbarText, setSnackbarText] = useState("");
-  const [rooms, setRooms] = useState([]);
-  const [communities, setCommunities] = useState({});
-  const [directMessages, setDirectMessages] = useState([]);
+  const [rooms, setRooms] = useState({
+    conversations: {},
+    communities: {},
+    directMessages: {},
+  });
   const [showSearch, setShowSearch] = useState(false);
   const [sortAnchorEl, setSortAnchorEl] = useState(null);
   const [groupByCommunity, setGroupByCommunity] = useState(true);
 
-  const sortRoomsAlphabetically = () => {
-    let chatRooms = rooms;
+  const sortRoomsAlphabetically = (conversations) => {
+    let chatRooms = [];
+    for (let roomId in conversations) {
+      chatRooms.push(conversations[roomId]);
+    }
     chatRooms.sort((a, b) => {
-      let roomAname = a.name.split(/_(.+)/)[1] || a.name;
-      let roomBname = b.name.split(/_(.+)/)[1] || b.name;
+      let roomAname =
+        (a.fname && (a.fname.split(/_(.+)/)[1] || a.fname)) || a.name;
+      let roomBname =
+        (b.fname && (b.fname.split(/_(.+)/)[1] || b.fname)) || b.name;
       roomAname = roomAname.toUpperCase();
       roomBname = roomBname.toUpperCase();
       if (roomAname < roomBname) {
@@ -53,44 +60,49 @@ export default function SignedLeftSidebar(props) {
       }
       return 0;
     });
-    setChatRooms(chatRooms);
+    formatAndSetRooms(chatRooms);
   };
 
-  const setChatRooms = (rooms) => {
+  const formatAndSetRooms = (rooms) => {
     let communities = {};
-    let directMessages = [];
+    let directMessages = {};
+    let conversations = {};
     rooms.forEach((room) => {
+      conversations[room._id] = room;
       if (room["t"] === "c" || room["t"] === "p") {
         let community_name = room.name.split(/_(.+)/)[0];
-        if (!communities[community_name]) communities[community_name] = [];
-        communities[community_name].push(room);
+        if (!communities[community_name]) communities[community_name] = {};
+        communities[community_name][room._id] = room;
       } else {
-        directMessages.push(room);
+        directMessages[room._id] = room;
       }
     });
-    setRooms(rooms);
-    setCommunities(communities);
-    setDirectMessages(directMessages);
+    setRooms({
+      conversations,
+      communities,
+      directMessages,
+    });
   };
 
   const addRoom = (room) => {
-    setRooms([...rooms, room]);
+    let newRooms = rooms;
+    newRooms["conversations"][room._id] = room;
+    if (document.getElementById("alpha-sort").checked) {
+      return sortRoomsAlphabetically(newRooms["conversations"]);
+    }
     if (room["t"] === "c" || room["t"] === "p") {
-      let newCommnunities = { ...communities };
       let community_name = room.name.split(/_(.+)/)[0];
-      if (!newCommnunities[community_name])
-        newCommnunities[community_name] = [];
-      newCommnunities[community_name].push(room);
-      setCommunities(newCommnunities);
+      if (!newRooms["communities"][community_name])
+        newRooms["communities"][community_name] = {};
+      newRooms["communities"][community_name][room._id] = room;
     } else {
-      setDirectMessages([...directMessages, room]);
+      newRooms["directMessages"][room._id] = room;
     }
+    setRooms(newRooms);
   };
 
   useEffect(() => {
-    const url = `${rcApiDomain}/api/v1/users.info?userId=${Cookies.get(
-      "rc_uid"
-    )}&fields={"userRooms": 1}`;
+    const url = `${rcApiDomain}/api/v1/subscriptions.get`;
     fetch(url, {
       headers: {
         "X-Auth-Token": Cookies.get("rc_token"),
@@ -101,13 +113,33 @@ export default function SignedLeftSidebar(props) {
     })
       .then((response) => response.json())
       .then((data) => {
-        setChatRooms(data.user.rooms);
+        formatAndSetRooms(data.update);
       })
       .catch((err) => {
         console.log("Error Fetching Rooms from server --->", err);
       });
   }, []);
 
+  window.addEventListener("message", function (e) {
+    if (
+      e.data.eventName === "unread-changed-by-subscription" &&
+      rooms["conversations"][e.data.data._id] &&
+      rooms["conversations"][e.data.data._id].alert !== e.data.data.alert
+    ) {
+      let newRooms = rooms;
+      newRooms["conversations"][e.data.data._id]["alert"] = e.data.data.alert;
+      if (e.data.data.t === "d") {
+        newRooms["directMessages"][e.data.data._id]["alert"] =
+          e.data.data.alert;
+      } else {
+        newRooms["communities"][e.data.data.name.split(/_(.+)/)[0]][
+          e.data.data._id
+        ]["alert"] = e.data.data.alert;
+      }
+      setRooms({ ...newRooms });
+    }
+  });
+
   const handleEndCreateCommunity = () => {
     setStartCreateCommunity(false);
   };
@@ -180,7 +212,9 @@ export default function SignedLeftSidebar(props) {
         { externalCommand: "logout" },
         `${rcApiDomain}`
       );
-      document.getElementsByClassName("loading-chatWindow")[0].classList.remove("hide-chatWindow");
+      document
+        .getElementsByClassName("loading-chatWindow")[0]
+        .classList.remove("hide-chatWindow");
     }
     const loadingIcon = document.getElementById("logout-loading-icon");
     const logoutButton = document.getElementById("logout-menu-item");
@@ -311,7 +345,9 @@ export default function SignedLeftSidebar(props) {
                 <Radio
                   color="primary"
                   id="alpha-sort"
-                  onChange={sortRoomsAlphabetically}
+                  onChange={() => {
+                    sortRoomsAlphabetically(rooms["conversations"]);
+                  }}
                 />
               </div>
             </div>
@@ -392,7 +428,7 @@ export default function SignedLeftSidebar(props) {
           organizations={organizations}
           setSnackbar={setSnackbar}
           addRoom={addRoom}
-          rooms={rooms}
+          rooms={rooms["conversations"]}
         />
       )}
       <Snackbar
@@ -409,24 +445,24 @@ export default function SignedLeftSidebar(props) {
       <div className="signed-left-sidebar-body">
         {!groupByCommunity && (
           <CommunityListItem
-            community={rooms}
+            community={rooms["conversations"]}
             key={"Conversations"}
             community_name={"Conversations"}
           ></CommunityListItem>
         )}
         {groupByCommunity &&
-          Object.keys(communities).map((community_name) => {
+          Object.keys(rooms["communities"]).map((community_name) => {
             return (
               <CommunityListItem
-                community={communities[community_name]}
+                community={rooms["communities"][community_name]}
                 key={community_name}
                 community_name={community_name}
               ></CommunityListItem>
             );
           })}
-        {groupByCommunity && directMessages.length > 0 ? (
+        {groupByCommunity && Object.keys(rooms["directMessages"]).length ? (
           <CommunityListItem
-            community={directMessages}
+            community={rooms["directMessages"]}
             key={"Direct Messages"}
             community_name={"Direct Messages"}
           ></CommunityListItem>