From 39438162d0a2a19676458e74a6e25439aa5902f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladan=20Tomi=C4=87?= <tomic.vladan.mail@gmail.com>
Date: Fri, 8 Dec 2023 13:49:39 +0100
Subject: [PATCH 1/2] fix: list view (#565)

---
 .../Views/DriveListView/DriveListView.tsx     | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Views/DriveListView/DriveListView.tsx b/src/components/Views/DriveListView/DriveListView.tsx
index 0e8ee5cf..4194ae43 100644
--- a/src/components/Views/DriveListView/DriveListView.tsx
+++ b/src/components/Views/DriveListView/DriveListView.tsx
@@ -24,18 +24,39 @@ const DriveListView: FC<DriveListViewProps> = ({
 }) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const startIndex = page * rowsPerPage;
-  const endIndex = startIndex + rowsPerPage;
+
+  const folderLength = directories.length;
+  const folderStartIndex =
+    page * rowsPerPage > folderLength ? folderLength : page * rowsPerPage;
+  const folderEndIndex =
+    folderStartIndex + rowsPerPage > folderLength
+      ? folderLength
+      : folderStartIndex + rowsPerPage;
+
+  const someFoldersAreDisplayed = folderEndIndex - folderStartIndex > 0;
+  const fileStartIndex = someFoldersAreDisplayed
+    ? 0
+    : page * rowsPerPage - folderLength;
+  const fileEndIndex = someFoldersAreDisplayed
+    ? rowsPerPage - (folderEndIndex - folderStartIndex)
+    : fileStartIndex + rowsPerPage;
 
   const { pageDirectories, pageFiles } = useMemo(
     () => ({
-      pageDirectories: (directories || []).slice(startIndex, endIndex),
-      pageFiles: (files || []).slice(
-        startIndex - directories.length,
-        endIndex - directories.length
+      pageDirectories: (directories || []).slice(
+        folderStartIndex,
+        folderEndIndex
       ),
+      pageFiles: (files || []).slice(fileStartIndex, fileEndIndex),
     }),
-    [directories, files, startIndex, endIndex]
+    [
+      directories,
+      files,
+      folderStartIndex,
+      folderEndIndex,
+      fileStartIndex,
+      fileEndIndex,
+    ]
   );
 
   const handlePageUp = () => {

From ede9d1d66a5895d90bd5088d1feecae33bae7a2a Mon Sep 17 00:00:00 2001
From: Vladan <tomic.vladan.mail@gmail.com>
Date: Thu, 14 Dec 2023 13:51:02 +0100
Subject: [PATCH 2/2] fix: list view sorting

---
 src/components/Views/DriveListView/DriveListView.tsx | 12 ++++++------
 src/pages/drive/index.tsx                            |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Views/DriveListView/DriveListView.tsx b/src/components/Views/DriveListView/DriveListView.tsx
index 4194ae43..6e45a525 100644
--- a/src/components/Views/DriveListView/DriveListView.tsx
+++ b/src/components/Views/DriveListView/DriveListView.tsx
@@ -11,6 +11,7 @@ import { UpdateDriveProps } from '@interfaces/handlers';
 interface DriveListViewProps extends UpdateDriveProps {
   directories: DirectoryItem[];
   files: FileItem[];
+  driveSort: string;
   directoryOnClick: (directory: DirectoryItem) => void;
   fileOnClick: (data: FileItem) => void;
 }
@@ -18,6 +19,7 @@ interface DriveListViewProps extends UpdateDriveProps {
 const DriveListView: FC<DriveListViewProps> = ({
   directories,
   files,
+  driveSort,
   directoryOnClick,
   fileOnClick,
   updateDrive,
@@ -26,12 +28,8 @@ const DriveListView: FC<DriveListViewProps> = ({
   const [rowsPerPage, setRowsPerPage] = useState(10);
 
   const folderLength = directories.length;
-  const folderStartIndex =
-    page * rowsPerPage > folderLength ? folderLength : page * rowsPerPage;
-  const folderEndIndex =
-    folderStartIndex + rowsPerPage > folderLength
-      ? folderLength
-      : folderStartIndex + rowsPerPage;
+  const folderStartIndex = Math.min(page * rowsPerPage, folderLength);
+  const folderEndIndex = Math.min(folderStartIndex + rowsPerPage, folderLength);
 
   const someFoldersAreDisplayed = folderEndIndex - folderStartIndex > 0;
   const fileStartIndex = someFoldersAreDisplayed
@@ -49,9 +47,11 @@ const DriveListView: FC<DriveListViewProps> = ({
       ),
       pageFiles: (files || []).slice(fileStartIndex, fileEndIndex),
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       directories,
       files,
+      driveSort,
       folderStartIndex,
       folderEndIndex,
       fileStartIndex,
diff --git a/src/pages/drive/index.tsx b/src/pages/drive/index.tsx
index 9d9db7ed..e2669639 100644
--- a/src/pages/drive/index.tsx
+++ b/src/pages/drive/index.tsx
@@ -409,6 +409,7 @@ const Drive: FC = () => {
                     <DriveListView
                       directories={handleSort(directories)}
                       files={handleSort(files)}
+                      driveSort={driveSort}
                       directoryOnClick={handleDirectoryOnClick}
                       fileOnClick={handleFileOnClick}
                       updateDrive={handleUpdateDrive}