Fix unread message alert

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>
+      {community && 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>
     );