Merge pull request #406 from powerhouse-inc/319-organise-files-by-def…

…ault-alphabetically-within-in-a-folder

feat: sort folders and files alphabetically

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}

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 {

src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './document-model';
 export * from './file';
 export * from './path';
+export * from './tree-items';

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);