diff --git a/client/public/chime.mp3 b/client/public/chime.mp3 new file mode 100644 index 0000000..a874282 Binary files /dev/null and b/client/public/chime.mp3 differ diff --git a/client/public/door.mp3 b/client/public/door.mp3 new file mode 100644 index 0000000..fedb4d9 Binary files /dev/null and b/client/public/door.mp3 differ diff --git a/client/public/index.html b/client/public/index.html index 64eb1f1..59a234c 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -24,6 +24,8 @@ + +
", err); }); }, []); + useEffect(() => { + if (Notification.permission === "default") { + Notification.requestPermission(); + } + const handleMessageEvents = (e) => { + switch (e.data.eventName) { + case "notification": + const { fromOpenedRoom, hasFocus, notification } = e.data.data; + const { title, text, payload } = notification; + const { name, type } = payload; + if (fromOpenedRoom && hasFocus) { + break; + } + let noty = new Notification(`${title}`, { + body: `${text}`, + }); + noty.onclick = function () { + let newUnreadUrl = `/${ + type === "c" ? "channel" : type === "p" ? "group" : "direct" + }/${type === "d" ? title : name}`; + history.push(newUnreadUrl); + window.focus(); + }; + break; + 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"] && + 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 }); + } else if ( + rooms["conversations"] && + !rooms["conversations"][e.data.data._id] + ) { + document.getElementById("custom-sound-door").play(); + addRoom(e.data.data); + } + if (rooms["conversations"] && + rooms["conversations"][e.data.data._id] && e.data.data.unread > 0) { + document.getElementById("custom-sound-chime").play(); + } + 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) => { + }); + break; + } + break; + } + }; + window.addEventListener("message", handleMessageEvents, true); + return () => { + window.removeEventListener("message", handleMessageEvents, true); + }; + }, [rooms]); + const handleEndCreateChannel = () => { setStartCreateChannel(false); }; @@ -147,7 +256,6 @@ export default function SignedLeftSidebar(props) { }); setOrganizations(organizations); } catch (error) { - console.log(error); } }; @@ -162,7 +270,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"); @@ -185,7 +295,6 @@ export default function SignedLeftSidebar(props) { window.location = "/login"; }) .catch((err) => { - console.log("Error logging out --->", err); loadingIcon.classList.add("hide-logout-loading"); logoutButton.classList.remove("disable-click"); document @@ -202,7 +311,6 @@ export default function SignedLeftSidebar(props) { const openSortMenu = (event) => { setSortAnchorEl(event.currentTarget); }; - return (
@@ -293,7 +401,9 @@ export default function SignedLeftSidebar(props) { { + sortRoomsAlphabetically(rooms["conversations"]); + }} />
@@ -332,7 +442,7 @@ export default function SignedLeftSidebar(props) { organizations={organizations} setSnackbar={setSnackbar} addRoom={addRoom} - rooms={rooms} + rooms={rooms["conversations"]} /> )} {!groupByCommunity && ( )} {groupByCommunity && - Object.keys(communities).map((community_name) => { + rooms["communities"] && + Object.keys(rooms["communities"]).map((community_name) => { return ( ); })} - {groupByCommunity && directMessages.length > 0 ? ( - - ) : null} + {groupByCommunity && + rooms["directMessages"] && + Object.keys(rooms["directMessages"]).length > 0 && ( + + )}