homeflowjs 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/property-results-pagination/property-results-pagination-item.component.jsx

@@ -13,21 +13,45 @@ export default function PropertyResultsPaginationItem({
   LeftChevron,
   RightChevron,
 }) {
-  const activeClassName = (className) => (
-    currentPage === pageNumber ? `${className}--active` : ''
-  );
+  const activeClassName = (className) =>
+    currentPage === pageNumber ? `${className}--active` : '';
+
+  const pageLink = () => {
+    if (window.location.pathname.includes('page-')) {
+      return window.location.pathname.replace(/page-\d+/, `page-${pageNumber}`);
+    }
+    return `${window.location.pathname}/page-${pageNumber}`;
+  };
+
   return (
-    <li className={`property-results-pagination__item ${activeClassName('property-results-pagination__item')}`}>
-      <a href={`${window.location.pathname}/page-${pageNumber}`} className={`property-results-pagination__link ${activeClassName('property-results-pagination__link')}`}>
+    <li
+      className={`property-results-pagination__item ${activeClassName(
+        'property-results-pagination__item'
+      )}`}
+    >
+      <a
+        href={pageLink()}
+        className={`property-results-pagination__link ${activeClassName(
+          'property-results-pagination__link'
+        )}`}
+      >
         {previous && (
           <>
             {!noChevrons && <LeftChevron />}
-            {!noPrevOrNextText && <span className="property-results-pagination__link-prev-text">Previous</span>}
+            {!noPrevOrNextText && (
+              <span className="property-results-pagination__link-prev-text">
+                Previous
+              </span>
+            )}
           </>
         )}
         {next && (
           <>
-            {!noPrevOrNextText && <span className="property-results-pagination__link-next-text">Next</span>}
+            {!noPrevOrNextText && (
+              <span className="property-results-pagination__link-next-text">
+                Next
+              </span>
+            )}
             {!noChevrons && <RightChevron />}
           </>
         )}

package/properties/property-results-pagination/property-results-pagination.component.jsx

@@ -22,78 +22,110 @@ export default function PropertyResultsPagination({
     current_page: currentPage,
     has_next_page: hasNextPage,
     has_prev_page: hasPrevPage,
-    total_count: totalCount,
     page_count: pageCount,
   } = pagination;
 
   /**
-   * Generates an array of pagination increments (the middle numbers in the pagination)
-   * based on the current page and total page count.
-   * For example the 2,3,4 and 5 in < 1 ... 2 - 3 - 4 - 5 ... 29 >
-   *
+   * Generates an array of pagination with ellipsis '...' where appropriate
    * @example
    * currentPage = 1;
-   * pageCount = 100;
-   * 'Should output: [2, 3, 4, 5]'
+   * pageCount = 1;
+   * paginationIncrements = 4;
+   * 'Should output: [1]'
    *
    * currentPage = 1;
    * pageCount = 5;
-   *'Should output: [2, 3, 4]'
+   * paginationIncrements = 4;
+   *'Should output: ['1', '2', '3', '4', '5']'
+   *
+   * currentPage = 1;
+   * pageCount = 3;
+   * paginationIncrements = 4;
+   *'Should output:  ['1', '2','3']'
+   *
+   * currentPage = 1;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   *'Should output: ['1', '2', '3', '4', '5', '...', '100']'
    *
    * currentPage = 2;
    * pageCount = 100;
-   *'Should output: [2, 3, 4, 5]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '2', '3', '4', '5', '...', '100']'
    *
    * currentPage = 3;
    * pageCount = 100;
-   *'Should output: [ 3, 4, 5, 6]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '3', '4', '5', '6', '...', '100']'
    *
-   * currentPage = 100;
+   * currentPage = 99;
    * pageCount = 100;
-   * 'Should output: [ 96, 97, 98, 99]'
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '96', '97', '98', '99', '100']'
    *
-   * currentPage = 3;
-   * pageCount = 3;
-   * 'Should output: [ 2 ]'
+   * currentPage = 96;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...', '96', '97', '98', '99', '100']'
    *
-   * currentPage = 1;
-   * pageCount = 3;
-   * 'Should output: [ 2 ]'
-   * @returns {number[]} An array of page numbers for pagination.
+   * currentPage = 100;
+   * pageCount = 100;
+   * paginationIncrements = 4;
+   * 'Should output: ['1', '...','96','97', '98', '99', '100']'
+   *
+   * @returns {string[]} An array of strings for pagination.
    */
-  const getPaginationIncrements = () => {
-    if (pageCount === 1) return [];
-
-    const pagination = [];
-    let startIncrement = currentPage;
-    let endIncrement = currentPage + paginationIncrements;
-    if (currentPage === 1) {
-      startIncrement++;
-      endIncrement++;
+  const generatePagination = () => {
+    if (pageCount === 1) return ['1'];
+
+    let pages = [];
+
+    if (pageCount <= paginationIncrements + 1) {
+      for (let i = 1; i <= pageCount; i++) {
+        pages.push(i.toString());
+      }
+      return pages;
     }
 
-    if (endIncrement >= pageCount) {
-      endIncrement = pageCount;
+    if (currentPage > 1 && currentPage !== 2) {
+      pages.push('1', '...');
     }
 
-    // If on the final page
-    if (currentPage === pageCount) {
-      startIncrement = pageCount >= paginationIncrements
-        ? currentPage - paginationIncrements : currentPage - (paginationIncrements - currentPage);
-      endIncrement = currentPage;
+    if (currentPage === 2) {
+      pages.push('1');
     }
 
-    for (let i = startIncrement; i < endIncrement; i++) {
-      pagination.push(i);
+    const getStart = () => {
+      if (currentPage + paginationIncrements >= pageCount)
+        return pageCount - paginationIncrements;
+      return Math.max(currentPage, 1);
+    };
+
+    const getEnd = () => {
+      if (currentPage + paginationIncrements >= pageCount) return pageCount;
+      if (currentPage === 1) return paginationIncrements + 1;
+      return Math.min(currentPage + (paginationIncrements - 1), pageCount);
+    };
+
+    const start = getStart();
+    const end = getEnd();
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i.toString());
+    }
+
+    if (end < pageCount) {
+      pages.push('...', pageCount.toString());
     }
-    return pagination;
+
+    return pages;
   };
 
   return (
     <div className="property-results-pagination" {...otherProps}>
       <ul className="property-results-pagination__links">
         {/* Previous page */}
-        {hasPrevPage && (!noChevrons && !noPrevOrNextText) && (
+        {hasPrevPage && !noChevrons && !noPrevOrNextText && (
           <PropertyResultsPaginationItem
             previous
             pageNumber={currentPage - 1}
@@ -102,45 +134,28 @@ export default function PropertyResultsPagination({
           />
         )}
 
-        {/* First page */}
-        {pageCount > 1 && (
-          <PropertyResultsPaginationItem pageNumber={1} currentPage={currentPage} />
-        )}
-
-        {/* Ellipsis */}
-        {totalCount > paginationIncrements && (
-          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
-            <span className="property-results-pagination__ellipsis">&hellip;</span>
-          </li>
-        )}
-
-        {/* Pagination increments */}
-        {getPaginationIncrements().map((pageNumber) => (
-          <PropertyResultsPaginationItem
-            key={pageNumber}
-            pageNumber={pageNumber}
-            currentPage={currentPage}
-          />
-        ))}
-
-        {/* Ellipsis */}
-        {totalCount > paginationIncrements && (
-          <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
-            <span className="property-results-pagination__ellipsis">&hellip;</span>
-          </li>
-        )}
-
-        {/* Total page count */}
-        {showIfPageCountIsOne && pageCount !== 0 ? (
-          <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
-        ) : (
-          pageCount > 1 && (
-            <PropertyResultsPaginationItem pageNumber={pageCount} currentPage={currentPage} />
-          )
-        )}
-
-        {/* Previous page */}
-        {hasNextPage && (!noChevrons && !noPrevOrNextText) && (
+        {generatePagination().map((page) => {
+          if (page === '...') {
+            // Ellipsis
+            return (
+              <li className="property-results-pagination__item property-results-pagination__item--ellipsis">
+                <span className="property-results-pagination__ellipsis">
+                  &hellip;
+                </span>
+              </li>
+            );
+          }
+          return (
+            <PropertyResultsPaginationItem
+              key={page}
+              pageNumber={parseInt(page, 10)}
+              currentPage={currentPage}
+            />
+          );
+        })}
+
+        {/* Next page */}
+        {hasNextPage && !noChevrons && !noPrevOrNextText && (
           <PropertyResultsPaginationItem
             next
             pageNumber={currentPage + 1}