Merge pull request #104 from RonLek/away-user-avatar

[NEW] Adds away user status in people tab

Author: murtaza98

client/public/away.png

@@ -69,25 +69,25 @@
   line-height: 25px;
 }
 
-.online-users-grid {
+.users-grid {
   width: 100% !important;
   margin-bottom: 20px !important;
 }
 
-.online-users-grid-item {
+.users-grid-item {
   display: flex;
   align-items: flex-start;
   position: relative;
 }
 
-.online-status {
+.user-status {
   width: 10px;
   height: 10px;
   z-index: 2;
   position: absolute;
 }
 
-.online-user-avatar {
+.user-avatar {
   width: 30px;
   z-index: 1;
   margin-left: 5px;

client/src/components/RoomInfo/index.css

@@ -181,25 +181,55 @@ export default function RoomInfo(props) {
         <div className="roominfo-wrapper">
           {!isNotAccessible ? (
             <>
-              <Grid container spacing={2} className="online-users-grid">
+              <Grid container spacing={2} className="users-grid">
                 {roomMembers
                   .filter(
-                    (user, index) => user.status === "online" && index <= 25
+                    (user, index) =>
+                      (user.status === "online" || user.status === "away") &&
+                      index <= 25
                   )
+                  .sort((a, b) => {
+                    // Sorts first by status and then alphabetically
+                    return (
+                      -a.status.localeCompare(b.status) ||
+                      a.name.localeCompare(b.name)
+                    );
+                  })
                   .map((user) => {
                     return (
                       <Grid
                         key={user.username}
                         item
                         xs={2}
-                        className="online-users-grid-item"
+                        className="users-grid-item"
                       >
-                        <img className="online-status" src="/online.png" alt="online"/>
-                        <img
-                          className="online-user-avatar"
-                          src={`${rcApiDomain}/avatar/${user.username}`}
-                          alt={user.username}
-                        />
+                        {user.status === "online" ? (
+                          <>
+                            <img
+                              className="user-status"
+                              src="/online.png"
+                              alt="online"
+                            />
+                            <img
+                              className="user-avatar"
+                              src={`${rcApiDomain}/avatar/${user.username}`}
+                              alt={user.username}
+                            />
+                          </>
+                        ) : (
+                          <>
+                            <img
+                              className="user-status"
+                              src="/away.png"
+                              alt="away"
+                            />
+                            <img
+                              className="user-avatar"
+                              src={`${rcApiDomain}/avatar/${user.username}`}
+                              alt={user.username}
+                            />
+                          </>
+                        )}
                       </Grid>
                     );
                   })}