From 569fcfced723cca4e95d2729b2833ae65efdb178 Mon Sep 17 00:00:00 2001 From: Saifullah-dev Date: Wed, 29 Jan 2025 03:26:15 +0500 Subject: [PATCH] feat(Sorting): Add default files sort to folder-files ascending order --- README.md | 1 - frontend/README.md | 1 - frontend/src/contexts/FileNavigationContext.jsx | 6 ++++-- frontend/src/utils/sortFiles.js | 12 ++++++++++++ 4 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 frontend/src/utils/sortFiles.js diff --git a/README.md b/README.md index 72a2839..8e4d55d 100644 --- 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 index 55c6f69..5ec605d 100644 --- 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 index 507d6cc..3b12122 100644 --- 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 new file mode 100644 index 0000000..252273b --- /dev/null +++ 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;