From 43ab25bebeda8d81d0787afea8227dabd8fba8e5 Mon Sep 17 00:00:00 2001
From: Till Prochaska <1512805+tillprochaska@users.noreply.github.com>
Date: Sun, 25 Aug 2024 17:43:33 +0200
Subject: [PATCH 1/4] Split up render method in PdfViewerSearch

This is just a small refactoring to make it easier to adjust this method.
---
 ui/src/viewers/PdfViewerSearch.jsx | 90 ++++++++++++++++--------------
 1 file changed, 49 insertions(+), 41 deletions(-)

diff --git a/ui/src/viewers/PdfViewerSearch.jsx b/ui/src/viewers/PdfViewerSearch.jsx
index ec9188a9df..76f33a0f7d 100644
--- a/ui/src/viewers/PdfViewerSearch.jsx
+++ b/ui/src/viewers/PdfViewerSearch.jsx
@@ -48,7 +48,7 @@ class PdfViewerSearch extends Component {
   }
 
   render() {
-    const { page, dir, result } = this.props;
+    const { result } = this.props;
 
     if (result.total === undefined) {
       return <SectionLoading />;
@@ -56,47 +56,55 @@ class PdfViewerSearch extends Component {
 
     return (
       <div className="pages">
-        {result.total === 0 && (
-          <>
-            <div
-              className={c(
-                Classes.CALLOUT,
-                Classes.INTENT_WARNING,
-                `${Classes.ICON}-search`
-              )}
-            >
-              <FormattedMessage
-                id="document.search.no_match"
-                defaultMessage="No single page within this document matches all your search terms."
-              />
-            </div>
-            {this.props.children}
-          </>
+        {result.total === 0 ? this.renderEmptyState() : this.renderResults()}
+      </div>
+    );
+  }
+
+  renderResults() {
+    const { page, dir, result } = this.props;
+
+    return (
+      <ul>
+        {result.results.map((res) => (
+          <li key={`page-${res.id}`}>
+            <p dir={dir}>
+              <Link
+                to={this.getResultLink(res)}
+                className={classNames({ active: page === res.index })}
+              >
+                <span
+                  className={c(Classes.ICON, `${Classes.ICON}-document`)}
+                />
+                <FormattedMessage
+                  id="document.pdf.search.page"
+                  defaultMessage="Page {page}"
+                  values={{
+                    page: res.getProperty('index'),
+                  }}
+                />
+              </Link>
+            </p>
+            <SearchHighlight highlight={res.highlight} />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  renderEmptyState() {
+    return (
+      <div
+        className={c(
+          Classes.CALLOUT,
+          Classes.INTENT_WARNING,
+          `${Classes.ICON}-search`
         )}
-        <ul>
-          {result.results.map((res) => (
-            <li key={`page-${res.id}`}>
-              <p dir={dir}>
-                <Link
-                  to={this.getResultLink(res)}
-                  className={classNames({ active: page === res.index })}
-                >
-                  <span
-                    className={c(Classes.ICON, `${Classes.ICON}-document`)}
-                  />
-                  <FormattedMessage
-                    id="document.pdf.search.page"
-                    defaultMessage="Page {page}"
-                    values={{
-                      page: res.getProperty('index'),
-                    }}
-                  />
-                </Link>
-              </p>
-              <SearchHighlight highlight={res.highlight} />
-            </li>
-          ))}
-        </ul>
+      >
+        <FormattedMessage
+          id="document.search.no_match"
+          defaultMessage="No single page within this document matches all your search terms."
+        />
       </div>
     );
   }

From 1655faf6956a293bffea132bce3a2b4f0e0b42a1 Mon Sep 17 00:00:00 2001
From: Till Prochaska <1512805+tillprochaska@users.noreply.github.com>
Date: Sun, 25 Aug 2024 17:43:43 +0200
Subject: [PATCH 2/4] Rename fetchPage to fetchSearchResults
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… because that is what it actually does -- it doesn’t load a page from the document, it loads a list of pages that contain the search terms.
---
 ui/src/viewers/PdfViewerSearch.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/viewers/PdfViewerSearch.jsx b/ui/src/viewers/PdfViewerSearch.jsx
index 76f33a0f7d..fed0cd892c 100644
--- a/ui/src/viewers/PdfViewerSearch.jsx
+++ b/ui/src/viewers/PdfViewerSearch.jsx
@@ -17,13 +17,13 @@ class PdfViewerSearch extends Component {
   }
 
   componentDidMount() {
-    this.fetchPage();
+    this.fetchSearchResults();
   }
 
   componentDidUpdate(prevProps) {
     const { query } = this.props;
     if (!query.sameAs(prevProps.query)) {
-      this.fetchPage();
+      this.fetchSearchResults();
     }
   }
 
@@ -40,7 +40,7 @@ class PdfViewerSearch extends Component {
     return `#${queryString.stringify(hashQuery)}`;
   }
 
-  fetchPage() {
+  fetchSearchResults() {
     const { query, result } = this.props;
     if (!!query.getString('q') && result.shouldLoad) {
       this.props.queryEntities({ query });

From e3883a2fb41fe7fe4f0cc431a50ed1339b347e5e Mon Sep 17 00:00:00 2001
From: Till Prochaska <1512805+tillprochaska@users.noreply.github.com>
Date: Sun, 25 Aug 2024 17:43:54 +0200
Subject: [PATCH 3/4] Implement infinite scrolling for document search results

Fixes #3320
---
 ui/src/viewers/PdfViewerSearch.jsx | 63 ++++++++++++++++++------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/ui/src/viewers/PdfViewerSearch.jsx b/ui/src/viewers/PdfViewerSearch.jsx
index fed0cd892c..a66ed40c47 100644
--- a/ui/src/viewers/PdfViewerSearch.jsx
+++ b/ui/src/viewers/PdfViewerSearch.jsx
@@ -4,7 +4,11 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import queryString from 'query-string';
-import { SectionLoading, SearchHighlight } from 'components/common';
+import {
+  SectionLoading,
+  SearchHighlight,
+  QueryInfiniteLoad,
+} from 'components/common';
 import { Classes } from '@blueprintjs/core';
 import c from 'classnames';
 import { queryEntities } from 'actions';
@@ -62,33 +66,40 @@ class PdfViewerSearch extends Component {
   }
 
   renderResults() {
-    const { page, dir, result } = this.props;
+    const { page, dir, result, query } = this.props;
 
     return (
-      <ul>
-        {result.results.map((res) => (
-          <li key={`page-${res.id}`}>
-            <p dir={dir}>
-              <Link
-                to={this.getResultLink(res)}
-                className={classNames({ active: page === res.index })}
-              >
-                <span
-                  className={c(Classes.ICON, `${Classes.ICON}-document`)}
-                />
-                <FormattedMessage
-                  id="document.pdf.search.page"
-                  defaultMessage="Page {page}"
-                  values={{
-                    page: res.getProperty('index'),
-                  }}
-                />
-              </Link>
-            </p>
-            <SearchHighlight highlight={res.highlight} />
-          </li>
-        ))}
-      </ul>
+      <>
+        <ul>
+          {result.results.map((res) => (
+            <li key={`page-${res.id}`}>
+              <p dir={dir}>
+                <Link
+                  to={this.getResultLink(res)}
+                  className={classNames({ active: page === res.index })}
+                >
+                  <span
+                    className={c(Classes.ICON, `${Classes.ICON}-document`)}
+                  />
+                  <FormattedMessage
+                    id="document.pdf.search.page"
+                    defaultMessage="Page {page}"
+                    values={{
+                      page: res.getProperty('index'),
+                    }}
+                  />
+                </Link>
+              </p>
+              <SearchHighlight highlight={res.highlight} />
+            </li>
+          ))}
+        </ul>
+        <QueryInfiniteLoad
+          query={query}
+          result={result}
+          fetch={queryEntities}
+        />
+      </>
     );
   }
 

From fb105f8dfd4131ead67f0b2e6da3edb74a54190a Mon Sep 17 00:00:00 2001
From: Till Prochaska <1512805+tillprochaska@users.noreply.github.com>
Date: Sun, 25 Aug 2024 17:44:00 +0200
Subject: [PATCH 4/4] Remove useless code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I’m not sure what exactly the intention here was originally, but it didn’t have any effect in its current version. `page` and `res.index` would always be undefined and as a result, the `active` class was applied to every single link. The `active` class doesn’t apply any styles.

Probably this is just leftover from a previous iteration of the UI, so I’ve removed this.
---
 ui/src/viewers/PdfViewerSearch.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/ui/src/viewers/PdfViewerSearch.jsx b/ui/src/viewers/PdfViewerSearch.jsx
index a66ed40c47..9843aac016 100644
--- a/ui/src/viewers/PdfViewerSearch.jsx
+++ b/ui/src/viewers/PdfViewerSearch.jsx
@@ -66,7 +66,7 @@ class PdfViewerSearch extends Component {
   }
 
   renderResults() {
-    const { page, dir, result, query } = this.props;
+    const { dir, result, query } = this.props;
 
     return (
       <>
@@ -74,10 +74,7 @@ class PdfViewerSearch extends Component {
           {result.results.map((res) => (
             <li key={`page-${res.id}`}>
               <p dir={dir}>
-                <Link
-                  to={this.getResultLink(res)}
-                  className={classNames({ active: page === res.index })}
-                >
+                <Link to={this.getResultLink(res)}>
                   <span
                     className={c(Classes.ICON, `${Classes.ICON}-document`)}
                   />