Refactor sidebar components

RocketChat · Mar 11, 2024 · c3a4ec8 · c3a4ec8
1 parent 5185f6a
commit c3a4ec8
Show file tree

Hide file tree

Showing 9 changed files with 317 additions and 399 deletions.
diff --git a/packages/react/src/components/AllThreads/AllThreads.js b/packages/react/src/components/AllThreads/AllThreads.js
@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import classes from './AllThreads.module.css';
 import { Icon } from '../Icon';
 import { Box } from '../Box';
-import { ActionButton } from '../ActionButton';
 import {
   useMessageStore,
   useUserStore,
@@ -14,6 +13,7 @@ import { MessageMetrics } from '../Message/MessageMetrics';
 import MessageAvatarContainer from '../Message/MessageAvatarContainer';
 import MessageBodyContainer from '../Message/MessageBodyContainer';
 import MessageHeader from '../Message/MessageHeader';
+import Sidebar from '../Sidebar/Sidebar';
 
 const MessageCss = css`
   display: flex;
@@ -65,115 +65,86 @@ const AllThreads = () => {
   );
 
   return (
-    <Box className={classes.component}>
-      <Box className={classes.wrapContainer}>
-        <Box style={{ padding: '16px' }}>
-          <Box
-            css={css`
-              display: flex;
-            `}
-          >
-            <h3 style={{ display: 'contents' }}>
-              <Icon
-                name="thread"
-                size="1.25rem"
-                style={{ padding: '0px 20px 20px 0px' }}
-              />
-              <Box
-                css={css`
-                  width: 100%;
-                  color: #4a4a4a;
-                `}
-              >
-                Threads
-              </Box>
-              <ActionButton onClick={toggleShowAllThreads} ghost size="small">
-                <Icon name="cross" size="1.25rem" />
-              </ActionButton>
-            </h3>
-          </Box>
+    <Sidebar
+      title="Threads"
+      iconName="thread"
+      setShowWindow={setShowAllThreads}
+    >
+      <Box
+        className={classes.searchContainer}
+        style={{ border: '2px solid #ddd', position: 'relative' }}
+      >
+        <input
+          placeholder="Search Messages"
+          onChange={handleInputChange}
+          className={classes.textInput}
+        />
 
+        <Icon
+          name="magnifier"
+          size="1.25rem"
+          style={{ padding: '0.125em', cursor: 'pointer' }}
+        />
+      </Box>
+
+      <Box
+        style={{
+          flex: '1',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
+          alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
+        }}
+      >
+        {filteredThreads.length === 0 ? (
           <Box
-            className={classes.searchContainer}
-            style={{ border: '2px solid #ddd', position: 'relative' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              color: '#4a4a4a',
+            }}
           >
-            <input
-              placeholder="Search Messages"
-              onChange={handleInputChange}
-              className={classes.textInput}
-            />
-
-            <Icon
-              name="magnifier"
-              size="1.25rem"
-              style={{ padding: '0.125em', cursor: 'pointer' }}
-            />
+            <Icon name="magnifier" size="3rem" style={{ padding: '0.5rem' }} />
+            <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+              No threads found
+            </span>
           </Box>
-        </Box>
-
-        <Box
-          style={{
-            flex: '1',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
-            alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
-          }}
-        >
-          {filteredThreads.length === 0 ? (
-            <Box
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                color: '#4a4a4a',
-              }}
-            >
-              <Icon
-                name="magnifier"
-                size="3rem"
-                style={{ padding: '0.5rem' }}
-              />
-              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                No threads found
-              </span>
-            </Box>
-          ) : (
-            filteredThreads.map(
-              (message) =>
-                !message.t &&
-                message.tcount && (
-                  <Box
-                    key={message._id}
-                    css={MessageCss}
-                    onClick={handleOpenThread(message)}
-                  >
-                    {showAvatar && (
-                      <MessageAvatarContainer
-                        message={message}
-                        sequential={false}
-                        isStarred={false}
-                      />
-                    )}
-                    <MessageBodyContainer>
-                      <MessageHeader message={message} isTimeStamped={false} />
+        ) : (
+          filteredThreads.map(
+            (message) =>
+              !message.t &&
+              message.tcount && (
+                <Box
+                  key={message._id}
+                  css={MessageCss}
+                  onClick={handleOpenThread(message)}
+                >
+                  {showAvatar && (
+                    <MessageAvatarContainer
+                      message={message}
+                      sequential={false}
+                      isStarred={false}
+                    />
+                  )}
+                  <MessageBodyContainer>
+                    <MessageHeader message={message} isTimeStamped={false} />
 
-                      <MessageBody>
-                        {message.attachments && message.attachments.length > 0
-                          ? message.file.name
-                          : message.msg}
-                      </MessageBody>
+                    <MessageBody>
+                      {message.attachments && message.attachments.length > 0
+                        ? message.file.name
+                        : message.msg}
+                    </MessageBody>
 
-                      <MessageMetrics message={message} isReplyButton={false} />
-                    </MessageBodyContainer>
-                  </Box>
-                )
-            )
-          )}
-        </Box>
+                    <MessageMetrics message={message} isReplyButton={false} />
+                  </MessageBodyContainer>
+                </Box>
+              )
+          )
+        )}
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 

diff --git a/packages/react/src/components/RoomInformation/RoomInformation.js b/packages/react/src/components/RoomInformation/RoomInformation.js
@@ -2,11 +2,9 @@ import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import { Avatar } from '../Avatar/Avatar';
 import RCContext from '../../context/RCInstance';
-import classes from './RoomInformation.module.css';
 import { useChannelStore } from '../../store';
-import { Icon } from '../Icon';
 import { Box } from '../Box';
-import { ActionButton } from '../ActionButton';
+import Sidebar from '../Sidebar/Sidebar';
 
 const Roominfo = () => {
   const { RCInstance } = useContext(RCContext);
@@ -17,41 +15,17 @@ const Roominfo = () => {
     (state) => state.setShowChannelinfo
   );
 
-  const toggleshowRoominfo = () => {
-    setShowChannelinfo(false);
-  };
-
   const getChannelAvatarURL = (channelname) => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
   };
-  return (
-    <Box className={classes.component} style={{ padding: '16px' }}>
-      <Box
-        css={css`
-          display: flex;
-        `}
-      >
-        <h3 style={{ display: 'contents' }}>
-          <Icon
-            name="info"
-            size="1.25rem"
-            style={{ padding: '0px 20px 20px 0px' }}
-          />
-          <Box
-            css={css`
-              width: 100%;
-              color: #4a4a4a;
-            `}
-          >
-            Room Information
-          </Box>
-          <ActionButton onClick={toggleshowRoominfo} ghost size="small">
-            <Icon name="cross" size="1.25rem" />
-          </ActionButton>
-        </h3>
-      </Box>
 
+  return (
+    <Sidebar
+      title="Room Information"
+      iconName="info"
+      setShowWindow={setShowChannelinfo}
+    >
       <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />
       <Box
         css={css`
@@ -81,7 +55,7 @@ const Roominfo = () => {
           {channelInfo.description}
         </Box>
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 export default Roominfo;
diff --git a/packages/react/src/components/RoomMembers/RoomMember.js b/packages/react/src/components/RoomMembers/RoomMember.js
@@ -10,6 +10,7 @@ import { Button } from '../Button';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
+import Sidebar from '../Sidebar/Sidebar';
 
 const RoomMembers = ({ members }) => {
   const { RCInstance } = useContext(RCContext);
@@ -43,20 +44,11 @@ const RoomMembers = ({ members }) => {
   if (showInvite) return <InviteMembers inviteData={inviteData} />;
 
   return (
-    <Box className={classes.modal} style={{ padding: '16px' }}>
-      <Box style={{ display: 'flex' }}>
-        <h3 style={{ display: 'contents' }}>
-          <Icon
-            name="members"
-            size="1.25rem"
-            style={{ padding: '0px 20px 20px 0px' }}
-          />
-          <Box style={{ color: '#4a4a4a', width: '80%' }}>Members</Box>
-          <ActionButton onClick={toggleShowMembers} ghost size="small">
-            <Icon name="cross" size="1.25rem" />
-          </ActionButton>
-        </h3>
-      </Box>
+    <Sidebar
+      title="Members"
+      iconName="members"
+      setShowWindow={toggleShowMembers}
+    >
       <Box className={classes.container}>
         {members.map((member) => (
           <RoomMemberItem user={member} host={host} key={member._id} />
@@ -74,7 +66,7 @@ const RoomMembers = ({ members }) => {
           <Icon size="1em" name="link" /> Invite Link
         </Button>
       )}
-    </Box>
+    </Sidebar>
   );
 };
 export default RoomMembers;