User status feature (#537)

* getStatus endpoint * status icon online * integrate * refactor status icons * lint fixes
RocketChat · Apr 9, 2024 · f31b805 · f31b805
1 parent 123d5f7
commit f31b805
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 3 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -1044,4 +1044,21 @@ export default class EmbeddedChatApi {
     const data = await response.json();
     return data;
   }
+
+  async getUserStatus(reqUserId: string) {
+    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+    const response = await fetch(
+      `${this.host}/api/v1/users.getStatus?userId=${reqUserId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+      }
+    );
+    const data = response.json();
+    return data;
+  }
 }
diff --git a/packages/react/src/components/Icon/icons/Away.js b/packages/react/src/components/Icon/icons/Away.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Away = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#FAB005"
+    {...props}
+  >
+    <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M14.586,16l-3.293-3.293 C11.105,12.519,11,12.265,11,12V7c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v4.586l3,3c0.39,0.39,0.39,1.024,0,1.414l0,0 C15.61,16.39,14.976,16.39,14.586,16z" />
+  </svg>
+);
+
+export default Away;
diff --git a/packages/react/src/components/Icon/icons/Busy.js b/packages/react/src/components/Icon/icons/Busy.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Busy = (props) => (
+  <svg
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    className="si-glyph si-glyph-circle-remove"
+    fill="#c75765"
+    {...props}
+  >
+    <g stroke="none" strokeWidth="1" fill="#c75765" fillRule="evenodd">
+      <path
+        d="M8.021,1.097 C3.625,1.097 0.063,4.655 0.063,9.04 C0.063,13.428 3.625,16.985 8.021,16.985 C12.416,16.985 15.979,13.427 15.979,9.04 C15.979,4.654 12.415,1.097 8.021,1.097 L8.021,1.097 Z M10.271617,9.9995909 L5.728383,9.9995909 C4.77186126,9.9995909 4,10.0510388 4,9.00003127 C4,7.9471863 4.77186126,8.00047164 5.728383,8.00047164 L10.271617,8.00047164 C11.2281387,8.00047164 12,7.94626758 12,9.00003127 C12,10.0510388 11.2281387,9.9995909 10.271617,9.9995909 L10.271617,9.9995909 Z"
+        fill="#c75765"
+        className="si-glyph-fill"
+      />
+    </g>
+  </svg>
+);
+
+export default Busy;
diff --git a/packages/react/src/components/Icon/icons/Offline.js b/packages/react/src/components/Icon/icons/Offline.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Offline = (props) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+      stroke="#000000"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Offline;
diff --git a/packages/react/src/components/Icon/icons/Online.js b/packages/react/src/components/Icon/icons/Online.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Online = (props) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 36 36"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    role="img"
+    className="iconify iconify--twemoji"
+    preserveAspectRatio="xMidYMid meet"
+    {...props}
+  >
+    <circle fill="#78B159" cx="18" cy="18" r="14" />
+  </svg>
+);
+
+export default Online;
diff --git a/packages/react/src/components/Icon/icons/index.js b/packages/react/src/components/Icon/icons/index.js
@@ -48,6 +48,10 @@ import ChevronLeft from './ChevronLeft';
 import Key from './Key';
 import Attachment from './Attachment';
 import CircleArrowDown from './CircleArrowDown';
+import Online from './Online';
+import Offline from './Offline';
+import Away from './Away';
+import Busy from './Busy';
 
 const icons = {
   file: File,
@@ -100,6 +104,10 @@ const icons = {
   key: Key,
   attachment: Attachment,
   'circle-arrow-down': CircleArrowDown,
+  online: Online,
+  offline: Offline,
+  away: Away,
+  busy: Busy,
 };
 
 export default icons;
diff --git a/packages/react/src/components/RoomMembers/RoomMemberItem.js b/packages/react/src/components/RoomMembers/RoomMemberItem.js
@@ -1,23 +1,90 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import RCContext from '../../context/RCInstance';
+import { Icon } from '../Icon';
 
 const RoomMemberItem = ({ user, host }) => {
+  const { RCInstance } = useContext(RCContext);
+  const [userStatus, setUserStatus] = useState('');
   const avatarUrl = new URL(`avatar/${user.username}`, host).toString();
+
+  useEffect(() => {
+    const getStatus = async () => {
+      try {
+        const res = await RCInstance.getUserStatus(user._id);
+        if (res.success) {
+          setUserStatus(res.status);
+        }
+      } catch (err) {
+        console.error('Error fetching user status', err);
+      }
+    };
+
+    getStatus();
+  }, [RCInstance]);
+
   return (
     <div
       style={{
         width: '100%',
         paddingBottom: '8px',
         paddingTop: '8px',
         display: 'flex',
+        alignItems: 'center',
       }}
     >
       <img
         src={avatarUrl}
         alt="avatar"
-        style={{ height: '1.5rem', marginLeft: '0.5rem' }}
+        style={{ height: '1.5rem', marginRight: '0.5rem' }}
       />
-      <span style={{ marginLeft: '1.2rem' }}>{user.username}</span>
+      <span style={{ display: 'flex', alignItems: 'center' }}>
+        {userStatus === 'online' && (
+          <Icon
+            name="online"
+            size="1.25rem"
+            style={{
+              padding: '0.125em',
+              marginRight: '0.5rem',
+              alignSelf: 'center',
+            }}
+          />
+        )}
+        {userStatus === 'offline' && (
+          <Icon
+            name="offline"
+            size="1.25rem"
+            style={{
+              padding: '0.125em',
+              marginRight: '0.5rem',
+              alignSelf: 'center',
+            }}
+          />
+        )}
+        {userStatus === 'away' && (
+          <Icon
+            name="away"
+            size="1.25rem"
+            style={{
+              padding: '0.125em',
+              marginRight: '0.5rem',
+              alignSelf: 'center',
+            }}
+          />
+        )}
+        {userStatus === 'busy' && (
+          <Icon
+            name="busy"
+            size="1.25rem"
+            style={{
+              padding: '0.125em',
+              marginRight: '0.5rem',
+              alignSelf: 'center',
+            }}
+          />
+        )}
+        <span>{user.username}</span>
+      </span>
     </div>
   );
 };