Merge pull request #161 from Saifullah-dev/140-feat-files-default-sor…

…t-order feat(Sorting): Add default files sort order to folders-files ascending
Saifullah-dev · Jan 28, 2025 · 3cb3f26 · 3cb3f26
2 parents c5f1352 + 569fcfc
commit 3cb3f26
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -113,7 +113,6 @@ type File = {
 | `layout`               | "list" \| "grid"                                                                                                               | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid".                                                                                                                                                                                                                                                                       |
 | `maxFileSize`          | number                                                                                                                         | For limiting the maximum upload file size in bytes.                                                                                                                                                                                                                                                                                                                                     |
 | `onCopy`               | (files: Array<[File](#-file-structure)>) => void                                                                               | (Optional) A callback function triggered when one or more files or folders are copied providing copied files as an argument. Use this function to perform custom actions on copy event.                                                                                                                                                                                                 |
-|                        |
 | `onCut`                | (files: Array<[File](#-file-structure)>) => void                                                                               | (Optional) A callback function triggered when one or more files or folders are cut, providing the cut files as an argument. Use this function to perform custom actions on the cut event.                                                                                                                                                                                               |
 | `onCreateFolder`       | (name: string, parentFolder: [File](#-file-structure)) => void                                                                 | A callback function triggered when a new folder is created. Use this function to update the files state to include the new folder under the specified parent folder using create folder API call to your server.                                                                                                                                                                        |
 | `onDelete`             | (files: Array<[File](#-file-structure)>) => void                                                                               | A callback function is triggered when one or more files or folders are deleted.                                                                                                                                                                                                                                                                                                         |

diff --git a/frontend/README.md b/frontend/README.md
@@ -113,7 +113,6 @@ type File = {
 | `layout`               | "list" \| "grid"                                                                                                               | Specifies the default layout style for the file manager. Can be either "list" or "grid". Default value is "grid".                                                                                                                                                                                                                                                                       |
 | `maxFileSize`          | number                                                                                                                         | For limiting the maximum upload file size in bytes.                                                                                                                                                                                                                                                                                                                                     |
 | `onCopy`               | (files: Array<[File](#-file-structure)>) => void                                                                               | (Optional) A callback function triggered when one or more files or folders are copied providing copied files as an argument. Use this function to perform custom actions on copy event.                                                                                                                                                                                                 |
-|                        |
 | `onCut`                | (files: Array<[File](#-file-structure)>) => void                                                                               | (Optional) A callback function triggered when one or more files or folders are cut, providing the cut files as an argument. Use this function to perform custom actions on the cut event.                                                                                                                                                                                               |
 | `onCreateFolder`       | (name: string, parentFolder: [File](#-file-structure)) => void                                                                 | A callback function triggered when a new folder is created. Use this function to update the files state to include the new folder under the specified parent folder using create folder API call to your server.                                                                                                                                                                        |
 | `onDelete`             | (files: Array<[File](#-file-structure)>) => void                                                                               | A callback function is triggered when one or more files or folders are deleted.                                                                                                                                                                                                                                                                                                         |

diff --git a/frontend/src/contexts/FileNavigationContext.jsx b/frontend/src/contexts/FileNavigationContext.jsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { useFiles } from "./FilesContext";
+import sortFiles from "../utils/sortFiles";
 
 const FileNavigationContext = createContext();
 
@@ -13,7 +14,8 @@ export const FileNavigationProvider = ({ children, initialPath }) => {
   useEffect(() => {
     if (Array.isArray(files) && files.length > 0) {
       setCurrentPathFiles(() => {
-        return files.filter((file) => file.path === `${currentPath}/${file.name}`);
+        const currPathFiles = files.filter((file) => file.path === `${currentPath}/${file.name}`);
+        return sortFiles(currPathFiles);
       });
 
       setCurrentFolder(() => {
@@ -24,7 +26,7 @@ export const FileNavigationProvider = ({ children, initialPath }) => {
 
   useEffect(() => {
     if (!isMountRef.current && Array.isArray(files) && files.length > 0) {
-      setCurrentPath(files.some((file) => file.path === initialPath) ? initialPath : '');
+      setCurrentPath(files.some((file) => file.path === initialPath) ? initialPath : "");
       isMountRef.current = true;
     }
   }, [initialPath, files]);

diff --git a/frontend/src/utils/sortFiles.js b/frontend/src/utils/sortFiles.js
@@ -0,0 +1,12 @@
+const sortAscending = (files) => files.sort((a, b) => a.name.localeCompare(b.name));
+
+const sortFiles = (items) => {
+  const folders = items.filter((file) => file.isDirectory);
+  const files = items.filter((file) => !file.isDirectory);
+  const sortedFolders = sortAscending(folders);
+  const sortedFiles = sortAscending(files);
+
+  return [...sortedFolders, ...sortedFiles];
+};
+
+export default sortFiles;