change layout of files search sidebar from col to row

RocketChat · Jan 3, 2025 · 6834c16 · 6834c16
1 parent 8f6d3f9
commit 6834c16
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 45 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -689,21 +689,22 @@ export default class EmbeddedChatApi {
     }
   }
 
-  async getAllFiles(isChannelPrivate = false, typeGroup = "") {
+  async getAllFiles(isChannelPrivate = false, typeGroup: string) {
     const roomType = isChannelPrivate ? "groups" : "channels";
     try {
       const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
-      const response = await fetch(
-        `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}&typeGroup=${typeGroup}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Auth-Token": authToken,
-            "X-User-Id": userId,
-          },
-          method: "GET",
-        }
-      );
+      const url =
+        typeGroup === ""
+          ? `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}`
+          : `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}&typeGroup=${typeGroup}`;
+      const response = await fetch(url, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "GET",
+      });
       return await response.json();
     } catch (err) {
       console.error(err);

diff --git a/packages/react/src/views/MessageAggregators/FileGallery.js b/packages/react/src/views/MessageAggregators/FileGallery.js
@@ -39,7 +39,7 @@ const FileGallery = () => {
 
   useEffect(() => {
     const fetchAllFiles = async () => {
-      const res = await RCInstance.getAllFiles(isChannelPrivate);
+      const res = await RCInstance.getAllFiles(isChannelPrivate, '');
       if (res?.files) {
         const sortedFiles = res.files.sort(
           (a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt)
@@ -55,7 +55,7 @@ const FileGallery = () => {
     setIsFetching(true);
     let res;
     val === 'all'
-      ? (res = await RCInstance.getAllFiles(isChannelPrivate))
+      ? (res = await RCInstance.getAllFiles(isChannelPrivate, ''))
       : (res = await RCInstance.getAllFiles(isChannelPrivate, val));
     if (res?.files) {
       const sortedFiles = res.files.sort(

diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js
@@ -34,11 +34,16 @@ export const getSidebarContentStyles = (theme) => {
       padding: 0 0.5rem;
       border-radius: ${theme.radius};
       position: relative;
-      margin: 0 1rem 1rem;
       &.focused {
         outline: 1px solid ${theme.colors.ring};
       }
     `,
+    filesHeader: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 1px 1rem 0;
+    `,
 
     textInput: css`
       border: none;

diff --git a/packages/ui-elements/src/components/Sidebar/SidebarContent.js b/packages/ui-elements/src/components/Sidebar/SidebarContent.js
@@ -36,39 +36,42 @@ const SidebarContent = ({
 
   return (
     <Box css={styles.content} style={style}>
-      {isSearch && (
-        <Box
-          css={styles.searchContainer}
-          style={{
-            position: 'relative',
-            margin: '0.5rem',
-          }}
-          ref={searchContainerRef}
-        >
-          <Input
-            placeholder={placeholder}
-            onChange={handleInputChange}
-            css={styles.textInput}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          <Icon name="magnifier" size="1.25rem" css={styles.noInfoIcon} />
-        </Box>
-      )}
-      {isFile && (
-        <Box>
-          <StaticSelect
+      <Box css={styles.filesHeader}>
+        {isSearch && (
+          <Box
+            css={styles.searchContainer}
             style={{
               position: 'relative',
-              margin: '0.5rem',
+              marginBottom: '0.5rem',
+              width: isFile ? '60%' : '100%',
             }}
-            isFile={isFile}
-            options={options}
-            value={value}
-            onSelect={handleFilterSelect}
-          />
-        </Box>
-      )}
+            ref={searchContainerRef}
+          >
+            <Input
+              placeholder={placeholder}
+              onChange={handleInputChange}
+              css={styles.textInput}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+            <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>
       {children}
     </Box>
   );