PR fixes

silverstripe · Jan 13, 2025 · 3f3c20c · 3f3c20c
1 parent 2f89af0
commit 3f3c20c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 45 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/HistoryViewer/HistoryViewer.js b/client/src/components/HistoryViewer/HistoryViewer.js
@@ -176,20 +176,23 @@ class HistoryViewer extends Component {
 
     // Ensure `page` is a valid number
     if (typeof page !== 'number' || isNaN(page) || page < 1) {
+      console.warn(`Invalid page number: ${page}. Page number must be a positive integer.`);
       return;
     }
 
     // Ensure the callback function is defined and callable
     if (typeof onSetPage === 'function') {
       onSetPage(page);
+    } else {
+      console.warn('onSetPage is not a function or not provided.');
     }
   }
 
   /**
    * Increases the current page number.
    *
-   * Note: We're using a custom pagination component with 1-based indexing instead of
-   * Griddle's default. The `page` property is already 1-based, so we add 1 to go to the next page.
+   * Note: We're using a custom pagination component with 1-based indexing instead of Griddle's default.
+   * The `page` property is already 1-based, so we add 1 to go to the next page.
    */
   handleNextPage() {
     const { page } = this.props;
@@ -201,8 +204,8 @@ class HistoryViewer extends Component {
   /**
    * Decreases the current page number.
    *
-   * Note: We use a custom pagination component with 1-based indexing instead of
-   * Griddle's default GridPagination since it's no longer available.
+   * Note: We use a custom pagination component with 1-based indexing instead of Griddle's default GridPagination
+   * since it's no longer available.
    * The `page` property is already 1-based, so we subtract 1 to go to the previous page.
    * Decrementing is prevented if the page is 1 or lower.
    */
@@ -303,10 +306,10 @@ class HistoryViewer extends Component {
    *
    * See: ThumbnailView.js
    *
-   * @returns {JSX|null} - Returns the pagination component or `null` if not necessary.
+   * * @returns {JSX|null} - Returns the pagination component or `null` if not necessary.
    */
   renderPagination() {
-    const { limit, page, versions } = this.props;
+    const { limit, page, versions, setPage } = this.props;
 
     if (!versions) {
       return null;
@@ -329,7 +332,7 @@ class HistoryViewer extends Component {
           <li className={`page-item ${page === 1 ? 'disabled' : ''}`}>
             <button
               className="page-link"
-              onClick={page > 1 ? () => this.handleSetPage(page - 1) : null}
+              onClick={() => this.handlePrevPage()}
               disabled={page === 1}
             >
               {i18n._t('HistoryViewer.PREVIOUS', 'Previous')}
@@ -351,7 +354,7 @@ class HistoryViewer extends Component {
           <li className={`page-item ${page === maxPage ? 'disabled' : ''}`}>
             <button
               className="page-link"
-              onClick={page < maxPage ? () => this.handleSetPage(page + 1) : null}
+              onClick={() => this.handleNextPage()}
               disabled={page === maxPage}
             >
               {i18n._t('HistoryViewer.NEXT', 'Next')}

diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss
@@ -151,44 +151,49 @@
   }
 }
 
-.griddle-footer {
+.history-viewer {
   display: flex;
   justify-content: center;
   margin-top: 20px;
-}
-
-.pagination {
-  display: flex;
-  list-style: none;
-  padding: 0;
-}
-
-.page-item {
-  margin: 0 5px;
-}
-
-.page-link {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #007bff;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.page-link:hover {
-  background-color: #f0f0f0;
-}
+  width: 100%;
 
-.page-item.disabled .page-link {
-  color: #6c757d;
-  cursor: not-allowed;
-}
+  &__pagination {
+    display: flex;
+    list-style: none;
+    padding: 0;
+
+    &-item {
+      margin: 0 5px;
+
+      &--disabled {
+        .history-viewer__pagination-link {
+          color: #6c757d;
+          cursor: not-allowed;
+        }
+      }
+
+      &--active {
+        .history-viewer__pagination-link {
+          background-color: #007bff;
+          color: #fff;
+          border-color: #007bff;
+        }
+      }
+    }
 
-.page-item.active .page-link {
-  background-color: #007bff;
-  color: #fff;
-  border-color: #007bff;
+    &-link {
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      background-color: #fff;
+      color: #007bff;
+      cursor: pointer;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+  }
 }