Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit 9b7cdd8

Browse files
dhruvjain99dhruvjain99
committed
[FIX] Highlight Unread Rooms
- Events do not emit if iframe is not loaded - Load iframe in home - Fix add room when sorting is enabled
1 parent 9799b68 commit 9b7cdd8

7 files changed

Lines changed: 90 additions & 73 deletions

File tree

‎client/src/components/ChatWindow/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
position: relative;
55
}
66

7+
.hide-chatWindow-container {
8+
display: none !important;
9+
}
10+
711
.loading-chatWindow {
812
background-color: #2f343d;
913
position: absolute;

‎client/src/components/ChatWindow/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function ChatWindow(props) {
77
useEffect(() => {
88
document.getElementsByTagName(
99
"iframe"
10-
)[0].src = `${rcApiDomain}${pathname}/?layout=embedded`;
10+
)[0].src = `${rcApiDomain}${pathname}?layout=embedded`;
1111
// eslint-disable-next-line
1212
}, []);
1313
useEffect(() => {
@@ -18,7 +18,12 @@ export default function ChatWindow(props) {
1818
);
1919
}, [pathname]);
2020
return (
21-
<div className="chatWindow-container">
21+
<div
22+
className={`chatWindow-container ${
23+
(pathname === "/home" || pathname === "/") &&
24+
"hide-chatWindow-container"
25+
}`}
26+
>
2227
<div className="loading-chatWindow hide-chatWindow"></div>
2328
<iframe
2429
src={`${rcApiDomain}/home/?layout=embedded`}

‎client/src/components/CommunityListItem/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ export default function CommunityListItem(props) {
66
return (
77
<div className="community-wrapper">
88
<div className="community-title">{community_name}</div>
9-
{community.map((room) => {
10-
// Here the second condition holds when new room is created as the response from server doesn't return open field on creation
9+
{Object.keys(community).map((roomId) => {
10+
let room = community[roomId];
1111
if (room.open || room.open === undefined)
12+
// Here the second condition holds when new room is created as the response from server doesn't return open field on creation
1213
return <RoomItem room={room} key={room._id}></RoomItem>;
14+
return null;
1315
})}
1416
</div>
1517
);

‎client/src/components/MainLayout/index.js‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -42,40 +42,23 @@ export default function MainLayout(props) {
4242
const {authState, stats} = props;
4343

4444
return (
45-
<Switch>
46-
<Route
47-
//TODO Shift this to programmatically check if repo is associated to hide activity
48-
//_community (without repo) -> custom field (not repo)
49-
//abcd (without repo) -> custom field (not repo)
50-
path={["/direct", "(.*)_community"]}
51-
render={(props) => {
52-
return (
53-
<div className="mainLayout-wrapper">
54-
<ChatWindow {...props} />
55-
</div>
56-
);
57-
}}
58-
/>
59-
<Route
60-
path={["/channel", "/group"]}
61-
render={(props) => {
62-
return (
63-
<div className="mainLayout-wrapper">
64-
<ChatWindow {...props} />
65-
<RightSidebar {...props} authState={authState} />
66-
</div>
67-
);
68-
}}
69-
/>
70-
<Route
71-
exact
72-
path={["/home", "/"]}
73-
render={(props) => {
74-
return (
75-
<Home {...props} authState={authState} stats={stats}/>
76-
);
77-
}}
78-
/>
79-
</Switch>
45+
<div className="mainLayout-wrapper">
46+
<ChatWindow {...props} />
47+
<Switch>
48+
<Route
49+
path={["/channel", "/group"]}
50+
render={(props) => {
51+
return <RightSidebar {...props} authState={authState} />;
52+
}}
53+
/>
54+
<Route
55+
exact
56+
path={["/home", "/"]}
57+
render={(props) => {
58+
return <Home {...props} authState={authState} />;
59+
}}
60+
/>
61+
</Switch>
62+
</div>
8063
);
8164
}

‎client/src/components/RoomItem/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,8 @@
2929

3030
.active-room {
3131
background-color: #41464f;
32+
}
33+
34+
.highlight-room {
35+
color: white !important;
3236
}

‎client/src/components/RoomItem/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function RoomItem({room}) {
1010
to={`/${
1111
room["t"] === "c" ? "channel" : room["t"] === "p" ? "group" : "direct"
1212
}/${room.username || room.name}`}
13-
className="room-wrapper"
13+
className={`room-wrapper ${room.alert && "highlight-room"}`}
1414
activeClassName="active-room"
1515
>
1616
<img
@@ -31,7 +31,8 @@ export default function RoomItem({room}) {
3131
)}
3232
<span className="room-name">
3333
{(room.fname && (room.fname.split(/_(.+)/)[1] || room.fname)) ||
34-
room.name || room.username}
34+
room.name ||
35+
room.username}
3536
</span>
3637
</NavLink>
3738
);

‎client/src/components/SignedLeftSidebar/index.js‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,25 @@ export default function SignedLeftSidebar(props) {
2727
const [snackbarOpen, setSnackbarOpen] = useState(false);
2828
const [snackbarSeverity, setSnackbarSeverity] = useState("success");
2929
const [snackbarText, setSnackbarText] = useState("");
30-
const [rooms, setRooms] = useState([]);
31-
const [communities, setCommunities] = useState({});
32-
const [directMessages, setDirectMessages] = useState([]);
30+
const [rooms, setRooms] = useState({
31+
conversations: {},
32+
communities: {},
33+
directMessages: {},
34+
});
3335
const [showSearch, setShowSearch] = useState(false);
3436
const [sortAnchorEl, setSortAnchorEl] = useState(null);
3537
const [groupByCommunity, setGroupByCommunity] = useState(true);
3638

37-
const sortRoomsAlphabetically = () => {
38-
let chatRooms = rooms;
39+
const sortRoomsAlphabetically = (conversations) => {
40+
let chatRooms = [];
41+
for (let roomId in conversations) {
42+
chatRooms.push(conversations[roomId]);
43+
}
3944
chatRooms.sort((a, b) => {
40-
let roomAname = a.name.split(/_(.+)/)[1] || a.name;
41-
let roomBname = b.name.split(/_(.+)/)[1] || b.name;
45+
let roomAname =
46+
(a.fname && (a.fname.split(/_(.+)/)[1] || a.fname)) || a.name;
47+
let roomBname =
48+
(b.fname && (b.fname.split(/_(.+)/)[1] || b.fname)) || b.name;
4249
roomAname = roomAname.toUpperCase();
4350
roomBname = roomBname.toUpperCase();
4451
if (roomAname < roomBname) {
@@ -49,38 +56,45 @@ export default function SignedLeftSidebar(props) {
4956
}
5057
return 0;
5158
});
52-
setChatRooms(chatRooms);
59+
formatAndSetRooms(chatRooms);
5360
};
5461

55-
const setChatRooms = (rooms) => {
62+
const formatAndSetRooms = (rooms) => {
5663
let communities = {};
57-
let directMessages = [];
64+
let directMessages = {};
65+
let conversations = {};
5866
rooms.forEach((room) => {
67+
conversations[room._id] = room;
5968
if (room["t"] === "c" || room["t"] === "p") {
6069
let community_name = room.name.split(/_(.+)/)[0];
61-
if (!communities[community_name]) communities[community_name] = [];
62-
communities[community_name].push(room);
70+
if (!communities[community_name]) communities[community_name] = {};
71+
communities[community_name][room._id] = room;
6372
} else {
64-
directMessages.push(room);
73+
directMessages[room._id] = room;
6574
}
6675
});
67-
setRooms(rooms);
68-
setCommunities(communities);
69-
setDirectMessages(directMessages);
76+
setRooms({
77+
conversations,
78+
communities,
79+
directMessages,
80+
});
7081
};
7182

7283
const addRoom = (room) => {
73-
setRooms([...rooms, room]);
84+
let newRooms = rooms;
85+
newRooms["conversations"][room._id] = room;
86+
if (document.getElementById("alpha-sort").checked) {
87+
return sortRoomsAlphabetically(newRooms["conversations"]);
88+
}
7489
if (room["t"] === "c" || room["t"] === "p") {
75-
let newCommnunities = { ...communities };
7690
let community_name = room.name.split(/_(.+)/)[0];
77-
if (!newCommnunities[community_name])
78-
newCommnunities[community_name] = [];
79-
newCommnunities[community_name].push(room);
80-
setCommunities(newCommnunities);
91+
if (!newRooms["communities"][community_name])
92+
newRooms["communities"][community_name] = {};
93+
newRooms["communities"][community_name][room._id] = room;
8194
} else {
82-
setDirectMessages([...directMessages, room]);
95+
newRooms["directMessages"][room._id] = room;
8396
}
97+
setRooms(newRooms);
8498
};
8599

86100
useEffect(() => {
@@ -95,7 +109,7 @@ export default function SignedLeftSidebar(props) {
95109
})
96110
.then((response) => response.json())
97111
.then((data) => {
98-
setChatRooms(data.update);
112+
formatAndSetRooms(data.update);
99113
})
100114
.catch((err) => {
101115
console.log("Error Fetching Rooms from server --->", err);
@@ -162,7 +176,9 @@ export default function SignedLeftSidebar(props) {
162176
{ externalCommand: "logout" },
163177
`${rcApiDomain}`
164178
);
165-
document.getElementsByClassName("loading-chatWindow")[0].classList.remove("hide-chatWindow");
179+
document
180+
.getElementsByClassName("loading-chatWindow")[0]
181+
.classList.remove("hide-chatWindow");
166182
}
167183
const loadingIcon = document.getElementById("logout-loading-icon");
168184
const logoutButton = document.getElementById("logout-menu-item");
@@ -293,7 +309,9 @@ export default function SignedLeftSidebar(props) {
293309
<Radio
294310
color="primary"
295311
id="alpha-sort"
296-
onChange={sortRoomsAlphabetically}
312+
onChange={() => {
313+
sortRoomsAlphabetically(rooms["conversations"]);
314+
}}
297315
/>
298316
</div>
299317
</div>
@@ -332,7 +350,7 @@ export default function SignedLeftSidebar(props) {
332350
organizations={organizations}
333351
setSnackbar={setSnackbar}
334352
addRoom={addRoom}
335-
rooms={rooms}
353+
rooms={rooms["conversations"]}
336354
/>
337355
)}
338356
<Snackbar
@@ -349,24 +367,24 @@ export default function SignedLeftSidebar(props) {
349367
<div className="signed-left-sidebar-body">
350368
{!groupByCommunity && (
351369
<CommunityListItem
352-
community={rooms}
370+
community={rooms["conversations"]}
353371
key={"Conversations"}
354372
community_name={"Conversations"}
355373
></CommunityListItem>
356374
)}
357375
{groupByCommunity &&
358-
Object.keys(communities).map((community_name) => {
376+
Object.keys(rooms["communities"]).map((community_name) => {
359377
return (
360378
<CommunityListItem
361-
community={communities[community_name]}
379+
community={rooms["communities"][community_name]}
362380
key={community_name}
363381
community_name={community_name}
364382
></CommunityListItem>
365383
);
366384
})}
367-
{groupByCommunity && directMessages.length > 0 ? (
385+
{groupByCommunity && Object.keys(rooms["directMessages"]).length ? (
368386
<CommunityListItem
369-
community={directMessages}
387+
community={rooms["directMessages"]}
370388
key={"Direct Messages"}
371389
community_name={"Direct Messages"}
372390
></CommunityListItem>

0 commit comments

Comments
 (0)