added dropdown

Author: smritidoneria

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

@@ -4,19 +4,20 @@ import {
   Box,
   Button,
   Icon,
-  Sidebar,
-  Input,
   Popup,
+  Sidebar,
   useComponentOverrides,
   useTheme,
 } from '@embeddedchat/ui-elements';
+
 import RoomMemberItem from './RoomMemberItem';
 import RCContext, { useRCContext } from '../../context/RCInstance';
 import useInviteStore from '../../store/inviteStore';
 import InviteMembers from './InviteMembers';
 import { getRoomMemberStyles } from './RoomMembers.styles';
 import LoadingIndicator from '../MessageAggregators/common/LoadingIndicator';
 import useSetExclusiveState from '../../hooks/useSetExclusiveState';
+import NoMessagesIndicator from '../MessageAggregators/common/NoMessageIndicator';
 
 const RoomMembers = ({ members }) => {
   const { RCInstance } = useContext(RCContext);
@@ -30,17 +31,29 @@ const RoomMembers = ({ members }) => {
   const [isLoading, setIsLoading] = useState(true);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
-
   const [userInfo, setUserInfo] = useState(null);
   const setExclusiveState = useSetExclusiveState();
-
   const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('All');
   const [filteredMembers, setFilteredMembers] = useState(members);
 
+  const filterOptions = [
+    { value: 'All', label: 'All' },
+    { value: 'Online', label: 'Online' },
+    { value: 'Offline', label: 'Offline' },
+  ];
+  const iconName = 'Members';
+  const noMessageInfo = 'No Members Found';
+
+  const handleInputChange = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
   useEffect(() => {
     const getUserInfo = async () => {
       try {
         const res = await RCInstance.me();
+        console.log('User info:', res);
         setUserInfo(res);
         setIsLoading(false);
       } catch (error) {
@@ -55,22 +68,48 @@ const RoomMembers = ({ members }) => {
     setFilteredMembers(
       members.filter(
         (member) =>
-          member.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          member.username?.toLowerCase().includes(searchTerm.toLowerCase())
+          (member.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            member.username
+              ?.toLowerCase()
+              .includes(searchTerm.toLowerCase())) &&
+          (statusFilter === 'All' ||
+            (statusFilter === 'Online' && member.status === 'online') ||
+            (statusFilter === 'Offline' && member.status === 'offline'))
       )
     );
-  }, [searchTerm, members]);
+  }, [searchTerm, statusFilter, members]);
+  console.log('filtered', filteredMembers);
 
+  const handleFilterSelect = (val) => {
+    setStatusFilter(val);
+  };
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
+
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
   return (
     <ViewComponent
       title="Members"
-      iconName="members"
+      iconName={iconName}
       onClose={() => setExclusiveState(null)}
-      style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }}
+      style={{
+        width: '400px',
+        padding: 0,
+        zIndex: window.innerWidth <= 780 ? 1 : null,
+      }}
+      filterProps={{
+        isFile: false,
+        options: filterOptions,
+        value: statusFilter,
+        handleFilterSelect,
+      }}
+      noMessageInfo="No Files Found"
+      searchProps={{
+        isSearch: true,
+        handleInputChange,
+        placeholder: 'Search members',
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -95,28 +134,26 @@ const RoomMembers = ({ members }) => {
                   <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>
-              <Box css={styles.memberList}>
+              <Box
+                css={
+                  filteredMembers.length > 0
+                    ? styles.memberList
+                    : styles.noMembers
+                }
+              >
                 {filteredMembers.length > 0 ? (
                   filteredMembers.map((member) => (
-                    <>
-                      <RoomMemberItem
-                        user={member}
-                        host={host}
-                        key={member._id}
-                      />
-                    </>
+                    <RoomMemberItem
+                      user={member}
+                      host={host}
+                      key={member._id}
+                    />
                   ))
                 ) : (
-                  <Box css={styles.noMembers}>No members found</Box>
+                  <NoMessagesIndicator
+                    iconName={iconName}
+                    message={noMessageInfo}
+                  />
                 )}
               </Box>
             </>

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

@@ -41,9 +41,13 @@ export const getRoomMemberStyles = (theme) => {
       margin-top: 1rem;
     `,
     noMembers: css`
-      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       color: ${theme.colors.textSecondary};
-      margin-top: 1rem;
+      height: 100%;
+      text-align: center;
     `,
   };
 

packages/ui-elements/src/components/Sidebar/SidebarContent.js

@@ -43,7 +43,7 @@ const SidebarContent = ({
             style={{
               position: 'relative',
               marginBottom: '0.5rem',
-              width: isFile ? '60%' : '100%',
+              width: '60%',
             }}
             ref={searchContainerRef}
           >
@@ -57,20 +57,19 @@ const SidebarContent = ({
             <Icon name="magnifier" size="1.25rem" css={styles.noInfoIcon} />
           </Box>
         )}
-        {isFile && (
-          <Box>
-            <StaticSelect
-              style={{
-                position: 'relative',
-                marginBottom: '0.5rem',
-              }}
-              isFile={isFile}
-              options={options}
-              value={value}
-              onSelect={handleFilterSelect}
-            />
-          </Box>
-        )}
+
+        <Box>
+          <StaticSelect
+            style={{
+              position: 'relative',
+              marginBottom: '0.5rem',
+            }}
+            isFile={isFile}
+            options={options}
+            value={value}
+            onSelect={handleFilterSelect}
+          />
+        </Box>
       </Box>
       {children}
     </Box>

packages/ui-elements/src/components/StaticSelect/StaticSelect.js

@@ -93,14 +93,7 @@ const StaticSelect = ({
         <Icon name="chevron-down" />
       </Box>
 
-      {isOpen && !isFile && (
-        <ListBox
-          options={options}
-          onSelect={handleSelect}
-          value={internalValue}
-        />
-      )}
-      {isOpen && isFile && (
+      {isOpen && (
         <Box css={styles.fileTypeSelect}>
           <ListBox
             options={options}