Merge pull request #91 from djcruz93/ftr-notification

murtaza98 · web-flow · commit 7e21d2445dad · 2021-03-15T09:31:42.000+05:30
Notification on new message
diff --git a/client/public/chime.mp3 b/client/public/chime.mp3
diff --git a/client/public/door.mp3 b/client/public/door.mp3
diff --git a/client/public/index.html b/client/public/index.html
@@ -24,6 +24,8 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <audio id="custom-sound-chime" src="/chime.mp3"></audio>
+    <audio id="custom-sound-door" src="/door.mp3"></audio>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git 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
@@ -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
@@ -6,10 +6,12 @@ export default function CommunityListItem(props) {
   return (
     <div className="community-wrapper">
       <div className="community-title">{community_name}</div>
-      {community.map((room) => {
-        // Here the second condition holds when new room is created as the response from server doesn't return open field on creation
+      {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>
   );
diff --git 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} stats={stats} />;
+          }}
+        />
+      </Switch>
+    </div>
   );
 }
diff --git 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;
 }
diff --git 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
@@ -31,7 +31,8 @@ export default function RoomItem({room}) {
         )}
         <span className="room-name">
           {(room.fname && (room.fname.split(/_(.+)/)[1] || room.fname)) ||
-            room.name || room.username}
+            room.name ||
+            room.username}
         </span>
       </NavLink>
     );
diff --git a/client/src/components/SignedLeftSidebar/index.js b/client/src/components/SignedLeftSidebar/index.js

Original file line number	Diff line number	Diff line change
`@@ -29,4 +29,8 @@`
`29`	`29`
`30`	`30`	`.active-room {`
`31`	`31`	`background-color: #41464f;`
	`32`	`+}`
	`33`	`+`
	`34`	`+.highlight-room {`
	`35`	`+ color: white !important;`
`32`	`36`	`}`