From d28a3580ae0f3a570f76fed1147c4768c5de98ca Mon Sep 17 00:00:00 2001
From: Dhruv Jain <dhruv.jain93@gmail.com>
Date: Tue, 9 Mar 2021 22:13:24 +0530
Subject: [PATCH 1/4] [FIX] Highlight Unread Rooms

- Events do not emit if iframe is not loaded
- Load iframe in home
- Fix add room when sorting is enabled
---
 client/src/components/ChatWindow/index.css    |   4 +
 client/src/components/ChatWindow/index.js     |   9 +-
 .../src/components/CommunityListItem/index.js |  22 ++--
 client/src/components/CreateChannel/index.js  |   2 +-
 client/src/components/MainLayout/index.js     |  53 +++------
 client/src/components/RoomItem/index.css      |   4 +
 client/src/components/RoomItem/index.js       |   9 +-
 .../src/components/SignedLeftSidebar/index.js | 106 ++++++++++++------
 8 files changed, 122 insertions(+), 87 deletions(-)

diff --git a/client/src/components/ChatWindow/index.css b/client/src/components/ChatWindow/index.css
index b7e6439..37127a5 100644
--- a/client/src/components/ChatWindow/index.css
+++ b/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;
diff --git a/client/src/components/ChatWindow/index.js b/client/src/components/ChatWindow/index.js
index 2372d9f..68d00f3 100644
--- a/client/src/components/ChatWindow/index.js
+++ b/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`}
diff --git a/client/src/components/CommunityListItem/index.js b/client/src/components/CommunityListItem/index.js
index 3286ad5..5bc760a 100644
--- a/client/src/components/CommunityListItem/index.js
+++ b/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>
+  );
 }
diff --git a/client/src/components/CreateChannel/index.js b/client/src/components/CreateChannel/index.js
index b21c7e5..d0a550f 100644
--- a/client/src/components/CreateChannel/index.js
+++ b/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");
       })
diff --git a/client/src/components/MainLayout/index.js b/client/src/components/MainLayout/index.js
index 169673a..f787b43 100644
--- a/client/src/components/MainLayout/index.js
+++ b/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>
   );
 }
diff --git a/client/src/components/RoomItem/index.css b/client/src/components/RoomItem/index.css
index fbc1cf5..dd6469e 100644
--- a/client/src/components/RoomItem/index.css
+++ b/client/src/components/RoomItem/index.css
@@ -29,4 +29,8 @@
 
 .active-room {
     background-color: #41464f;
+}
+
+.highlight-room {
+    color: white !important;
 }
\ No newline at end of file
diff --git a/client/src/components/RoomItem/index.js b/client/src/components/RoomItem/index.js
index cba6ed4..34ba51d 100644
--- a/client/src/components/RoomItem/index.js
+++ b/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>
     );
diff --git a/client/src/components/SignedLeftSidebar/index.js b/client/src/components/SignedLeftSidebar/index.js
index 7f0a305..7bb1f4f 100644
--- a/client/src/components/SignedLeftSidebar/index.js
+++ b/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>

From 1a9b619d96566e8addab78407edce6723772e5a9 Mon Sep 17 00:00:00 2001
From: Dhruv Jain <dhruv.jain93@gmail.com>
Date: Wed, 10 Mar 2021 21:45:53 +0530
Subject: [PATCH 2/4] [FIX] Automatic room creation in sidebar when new room is
 opened

---
 .../src/components/CommunityListItem/index.js |   2 +-
 .../src/components/SignedLeftSidebar/index.js | 100 ++++++++++++------
 2 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/client/src/components/CommunityListItem/index.js b/client/src/components/CommunityListItem/index.js
index 5bc760a..a755d20 100644
--- a/client/src/components/CommunityListItem/index.js
+++ b/client/src/components/CommunityListItem/index.js
@@ -6,7 +6,7 @@ export default function CommunityListItem(props) {
   return (
     <div className="community-wrapper">
       <div className="community-title">{community_name}</div>
-      {Object.keys(community).map((roomId) => {
+      {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
diff --git a/client/src/components/SignedLeftSidebar/index.js b/client/src/components/SignedLeftSidebar/index.js
index 7bb1f4f..12ded6c 100644
--- a/client/src/components/SignedLeftSidebar/index.js
+++ b/client/src/components/SignedLeftSidebar/index.js
@@ -31,11 +31,7 @@ export default function SignedLeftSidebar(props) {
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarSeverity, setSnackbarSeverity] = useState("success");
   const [snackbarText, setSnackbarText] = useState("");
-  const [rooms, setRooms] = useState({
-    conversations: {},
-    communities: {},
-    directMessages: {},
-  });
+  const [rooms, setRooms] = useState({});
   const [showSearch, setShowSearch] = useState(false);
   const [sortAnchorEl, setSortAnchorEl] = useState(null);
   const [groupByCommunity, setGroupByCommunity] = useState(true);
@@ -120,25 +116,65 @@ export default function SignedLeftSidebar(props) {
       });
   }, []);
 
-  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;
+  useEffect(() => {
+    const handleMessageEvents = (e) => {
+      switch (e.data.eventName) {
+        case "unread-changed-by-subscription":
+          if (
+            rooms["conversations"] &&
+            rooms["conversations"][e.data.data._id] &&
+            rooms["conversations"][e.data.data._id].alert !== e.data.data.alert
+          ) {
+            console.log(e.data.data);
+            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 });
+          }
+          break;
+        case "room-opened":
+          if (
+            rooms["conversations"] &&
+            !rooms["conversations"][e.data.data._id]
+          ) {
+            rooms["conversations"][e.data.data._id] = e.data.data;
+            fetch(
+              `${rcApiDomain}/api/v1/subscriptions.getOne?roomId=${e.data.data._id}`,
+              {
+                headers: {
+                  "X-Auth-Token": Cookies.get("rc_token"),
+                  "X-User-Id": Cookies.get("rc_uid"),
+                  "Content-Type": "application/json",
+                },
+                method: "GET",
+              }
+            )
+              .then((response) => response.json())
+              .then((data) => {
+                delete rooms["conversations"][e.data.data._id];
+                addRoom(data.subscription);
+              })
+              .catch((err) => {
+                console.log("Error Fetching Room from server --->", err);
+              });
+            break;
+          }
+          break;
       }
-      setRooms({ ...newRooms });
-    }
-  });
+    };
+    window.addEventListener("message", handleMessageEvents, true);
+    return () => {
+      window.removeEventListener("message", handleMessageEvents, true);
+    };
+  }, [rooms]);
 
   const handleEndCreateCommunity = () => {
     setStartCreateCommunity(false);
@@ -254,7 +290,6 @@ export default function SignedLeftSidebar(props) {
   const openSortMenu = (event) => {
     setSortAnchorEl(event.currentTarget);
   };
-
   return (
     <div className="signed-left-sidebar-wrapper">
       <div className="signed-left-sidebar-header">
@@ -451,6 +486,7 @@ export default function SignedLeftSidebar(props) {
           ></CommunityListItem>
         )}
         {groupByCommunity &&
+          rooms["communities"] &&
           Object.keys(rooms["communities"]).map((community_name) => {
             return (
               <CommunityListItem
@@ -460,13 +496,15 @@ export default function SignedLeftSidebar(props) {
               ></CommunityListItem>
             );
           })}
-        {groupByCommunity && Object.keys(rooms["directMessages"]).length ? (
-          <CommunityListItem
-            community={rooms["directMessages"]}
-            key={"Direct Messages"}
-            community_name={"Direct Messages"}
-          ></CommunityListItem>
-        ) : null}
+        {groupByCommunity &&
+          rooms["directMessages"] &&
+          Object.keys(rooms["directMessages"]).length > 0 && (
+            <CommunityListItem
+              community={rooms["directMessages"]}
+              key={"Direct Messages"}
+              community_name={"Direct Messages"}
+            ></CommunityListItem>
+          )}
       </div>
       <div className="signed-left-sidebar-footer">
         <img

From 48d9f24de93b6fce15c08563f3e1b33a0f2b9588 Mon Sep 17 00:00:00 2001
From: Dhruv Jain <dhruv.jain93@gmail.com>
Date: Tue, 9 Mar 2021 22:13:24 +0530
Subject: [PATCH 3/4] [FIX] Highlight Unread Rooms

- Events do not emit if iframe is not loaded
- Load iframe in home
- Fix add room when sorting is enabled
---
 client/src/components/SignedLeftSidebar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/SignedLeftSidebar/index.js b/client/src/components/SignedLeftSidebar/index.js
index 12ded6c..ee6669e 100644
--- a/client/src/components/SignedLeftSidebar/index.js
+++ b/client/src/components/SignedLeftSidebar/index.js
@@ -442,7 +442,7 @@ export default function SignedLeftSidebar(props) {
               fetchOrganizations();
               setStartCreateChannel(true);
               handleCreateClose();
-            }}
+            }} 
           >
             <CgHashtag color="#000" className="create-menu-icons" />
             Create Channel

From 467706c655fac539e49ee1669fde9d1c91a76542 Mon Sep 17 00:00:00 2001
From: Dhruv Jain <dhruv.jain93@gmail.com>
Date: Wed, 10 Mar 2021 21:54:15 +0530
Subject: [PATCH 4/4] [FIX] Alert user when unread messages are there

---
 client/src/components/SignedLeftSidebar/index.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/components/SignedLeftSidebar/index.js b/client/src/components/SignedLeftSidebar/index.js
index ee6669e..f6eb305 100644
--- a/client/src/components/SignedLeftSidebar/index.js
+++ b/client/src/components/SignedLeftSidebar/index.js
@@ -119,6 +119,15 @@ export default function SignedLeftSidebar(props) {
   useEffect(() => {
     const handleMessageEvents = (e) => {
       switch (e.data.eventName) {
+        case "unread-changed":
+          if (typeof e.data.data === "number") {
+            document.title = `(${e.data.data}) RCforCommunity`;
+          } else if (e.data.data === "") {
+            document.title = "RCforCommunity";
+          } else {
+            document.title = "(*) RCforCommunity";
+          }
+          break;
         case "unread-changed-by-subscription":
           if (
             rooms["conversations"] &&