Skip to content

feat(Sorting): Add default files sort order to folders-files ascending #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 28, 2025
Merged

feat(Sorting): Add default files sort order to folders-files ascending #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
1 change: 0 additions & 1 deletion frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/contexts/FileNavigationContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createContext, useContext, useEffect, useRef, useState } from "react";
import { useFiles } from "./FilesContext";
import sortFiles from "../utils/sortFiles";

const FileNavigationContext = createContext();

Expand All @@ -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(() => {
Expand All @@ -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]);
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/utils/sortFiles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;