Feat: Added 'Online User Status' Filter to Members List (#782)

* Feat: Add 'Online User Status' Filter to Members List

* Added space between InviteButton and search bar-user status filter

* fixed lint import error

* Added Divider along with Display count and total count of members

* Updated count logic with RC

* Removed API Call to fetch status of user

---------

Co-authored-by: Zishan Ahmad <zishan.barun@gmail.com>

Author: dhairyashiil

packages/react/src/views/RoomMembers/RoomMember.js

@@ -7,9 +7,12 @@ import {
   Sidebar,
   Input,
   Popup,
+  StaticSelect,
+  Divider,
   useComponentOverrides,
   useTheme,
 } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 import RoomMemberItem from './RoomMemberItem';
 import RCContext, { useRCContext } from '../../context/RCInstance';
 import useInviteStore from '../../store/inviteStore';
@@ -37,6 +40,8 @@ const RoomMembers = ({ members }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredMembers, setFilteredMembers] = useState(members);
 
+  const [viewStatus, setViewStatus] = useState('All');
+
   useEffect(() => {
     const getUserInfo = async () => {
       try {
@@ -52,19 +57,32 @@ const RoomMembers = ({ members }) => {
   }, [RCInstance]);
 
   useEffect(() => {
+    const filtered = members.filter((member) => {
+      if (viewStatus === 'Online') {
+        return member.status === 'online';
+      }
+      return true;
+    });
+
     setFilteredMembers(
-      members.filter(
+      filtered.filter(
         (member) =>
           member.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
           member.username?.toLowerCase().includes(searchTerm.toLowerCase())
       )
     );
-  }, [searchTerm, members]);
+  }, [viewStatus, searchTerm, members]);
 
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
+  const handleSelect = (value) => {
+    setViewStatus(value);
+  };
+
+  const displayedMembers = filteredMembers.length;
+
   return (
     <ViewComponent
       title="Members"
@@ -87,33 +105,75 @@ const RoomMembers = ({ members }) => {
             <>
               {isAdmin && (
                 <Button
-                  style={{ marginTop: '10px', width: '100%' }}
+                  style={{
+                    marginTop: '10px',
+                    marginBottom: '10px',
+                    width: '100%',
+                  }}
                   onClick={async () => {
                     toggleInviteView();
                   }}
                 >
                   <Icon size="1em" name="link" /> Invite Link
                 </Button>
               )}
-              <Box css={styles.searchContainer}>
-                <Input
-                  css={styles.textInput}
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  placeholder="Search members"
-                />
-                <Icon name="magnifier" size="1.5rem" css={styles.searchIcon} />
+              <Box
+                css={css`
+                  display: flex;
+                `}
+              >
+                <Box css={styles.searchContainer}>
+                  <Input
+                    css={styles.textInput}
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder="Search members"
+                  />
+                  <Icon
+                    name="magnifier"
+                    size="1.5rem"
+                    css={styles.searchIcon}
+                  />
+                </Box>
+                <Box css={styles.filterContainer}>
+                  <Box
+                    css={css`
+                      position: absolute;
+                      z-index: 10;
+                    `}
+                  >
+                    <StaticSelect
+                      options={[
+                        { value: 'All', label: 'All' },
+                        { value: 'Online', label: 'Online' },
+                      ]}
+                      value={viewStatus}
+                      onSelect={handleSelect}
+                      placeholder={viewStatus}
+                    />
+                  </Box>
+                </Box>
+              </Box>
+              <Box
+                css={css`
+                  margin-top: 1rem;
+                  margin-bottom: 1rem;
+                `}
+              >
+                <Divider />
+              </Box>
+              <Box>
+                Showing {displayedMembers} of {displayedMembers}
               </Box>
               <Box css={styles.memberList}>
                 {filteredMembers.length > 0 ? (
                   filteredMembers.map((member) => (
-                    <>
-                      <RoomMemberItem
-                        user={member}
-                        host={host}
-                        key={member._id}
-                      />
-                    </>
+                    <RoomMemberItem
+                      user={member}
+                      host={host}
+                      userStatus={member.status}
+                      key={member._id}
+                    />
                   ))
                 ) : (
                   <Box css={styles.noMembers}>No members found</Box>

packages/react/src/views/RoomMembers/RoomMemberItem.js

@@ -1,34 +1,17 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Icon, Avatar, useTheme } from '@embeddedchat/ui-elements';
-import RCContext from '../../context/RCInstance';
 import { RoomMemberItemStyles } from './RoomMembers.styles';
 import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 import { useUserStore } from '../../store';
 
-const RoomMemberItem = ({ user, host }) => {
-  const { RCInstance } = useContext(RCContext);
-  const [userStatus, setUserStatus] = useState('');
+const RoomMemberItem = ({ user, host, userStatus }) => {
   const avatarUrl = new URL(`avatar/${user.username}`, host).toString();
   const { theme } = useTheme();
   const { mode } = useTheme();
   const styles = RoomMemberItemStyles(theme, mode);
 
-  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]);
   const setExclusiveState = useSetExclusiveState();
   const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
     setShowCurrentUserInfo: state.setShowCurrentUserInfo,

packages/react/src/views/RoomMembers/RoomMembers.styles.js

@@ -19,7 +19,13 @@ export const getRoomMemberStyles = (theme) => {
       padding: 0 0.5rem;
       border-radius: ${theme.radius};
       position: relative;
-      margin-top: 1rem;
+      width: 60%;
+    `,
+    filterContainer: css`
+      width: 40%;
+      margin-left: 0.5rem;
+      border-radius: ${theme.radius};
+      position: relative;
     `,
     textInput: css`
       flex: 1;