From 74aa081a2b01325101321f5baffe14b523e9b53b Mon Sep 17 00:00:00 2001
From: Guillermo Puente <guillermo.ps09@gmail.com>
Date: Thu, 27 Jun 2024 15:16:08 -0400
Subject: [PATCH] feat: sort folders and files alphabetically

---
 src/components/folder-view.tsx  | 3 ++-
 src/hooks/useDrivesContainer.ts | 8 ++++++--
 src/utils/index.ts              | 1 +
 src/utils/tree-items.ts         | 4 ++++
 4 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/tree-items.ts

diff --git a/src/components/folder-view.tsx b/src/components/folder-view.tsx
index cd58ee18..8e724220 100644
--- a/src/components/folder-view.tsx
+++ b/src/components/folder-view.tsx
@@ -6,6 +6,7 @@ import { useFileOptions } from 'src/hooks/useFileOptions';
 import { useFolderContent } from 'src/hooks/useFolderContent';
 import { useFolderOptions } from 'src/hooks/useFolderOptions';
 import { useOnDropEvent } from 'src/hooks/useOnDropEvent';
+import { sortTreeItemsByLabel } from 'src/utils';
 import { twMerge } from 'tailwind-merge';
 import { ContentSection } from './content';
 import FileContentView from './file-content-view';
@@ -86,7 +87,7 @@ export const FolderView: React.FC<IProps> = ({
                     )}
                 >
                     <FileContentView
-                        files={files}
+                        files={files.sort(sortTreeItemsByLabel)}
                         onFileDeleted={onFileDeleted}
                         decodedDriveID={decodedDriveID}
                         onFileSelected={onFileSelected}
diff --git a/src/hooks/useDrivesContainer.ts b/src/hooks/useDrivesContainer.ts
index afd1b700..16e476bd 100644
--- a/src/hooks/useDrivesContainer.ts
+++ b/src/hooks/useDrivesContainer.ts
@@ -25,7 +25,7 @@ import {
 import path from 'path';
 import { useTranslation } from 'react-i18next';
 import { useModal } from 'src/components/modal';
-import { getLastIndexFromPath } from 'src/utils';
+import { getLastIndexFromPath, sortTreeItemsByLabel } from 'src/utils';
 import { v4 as uuid } from 'uuid';
 import { useDocumentDriveServer } from './useDocumentDriveServer';
 import { useNavigateToItemId } from './useNavigateToItemId';
@@ -337,7 +337,11 @@ export function useDrivesContainer() {
             };
         });
 
-        return [driveNode, ...fileItems, ...folderItems];
+        return [
+            driveNode,
+            ...fileItems,
+            ...folderItems.sort(sortTreeItemsByLabel),
+        ];
     }
 
     return {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 9db11597..ca4a88c3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './document-model';
 export * from './file';
 export * from './path';
+export * from './tree-items';
diff --git a/src/utils/tree-items.ts b/src/utils/tree-items.ts
new file mode 100644
index 00000000..12ad7a16
--- /dev/null
+++ b/src/utils/tree-items.ts
@@ -0,0 +1,4 @@
+import { TreeItem } from '@powerhousedao/design-system';
+
+export const sortTreeItemsByLabel = (a: TreeItem, b: TreeItem) =>
+    a.label.localeCompare(b.label);