Scroll to an article when clicking on them within a publication.

web/src/App.js

@@ -112,6 +112,7 @@ export class App extends React.Component
                 <SearchResults ref={this._searchResultsRef}
                     seqNo = {this.state.searchSeqNo}
                     searchResults = {this.state.searchResults}
+                    type = {this.props.type}
                 />
             </div> ) ;
         }

web/src/PublicationSearchResult.js

@@ -55,10 +55,21 @@ export class PublicationSearchResult extends React.Component
         if ( this.props.data.articles ) {
             for ( let i=0 ; i < this.props.data.articles.length ; ++i ) {
                 const article = this.props.data.articles[ i ] ;
-                articles.push( <Link title="Show this article."
+                if ( this.props.onArticleClick ) {
-                    to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
+                    // forward clicks on the article to the parent
-                    dangerouslySetInnerHTML = {{ __html: article.article_title }}
+                    articles.push( <div
-                /> ) ;
+                        dangerouslySetInnerHTML = {{__html: article.article_title}}
+                        onClick = { () => this.props.onArticleClick( article.article_id ) }
+                        style = {{ cursor: "pointer" }}
+                        title = "Go to this article."
+                    /> ) ;
+                } else {
+                    // handle clicks on the article normally
+                    articles.push( <Link title="Show this article."
+                        to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
+                        dangerouslySetInnerHTML = {{ __html: article.article_title }}
+                    /> ) ;
+                }
             }
         }
 

web/src/SearchResults.js

@@ -1,4 +1,5 @@
 import React from "react" ;
+import ReactDOM from "react-dom" ;
 import "./SearchResults.css" ;
 import { PublisherSearchResult } from "./PublisherSearchResult" ;
 import { PublicationSearchResult } from "./PublicationSearchResult" ;
@@ -11,12 +12,16 @@ export class SearchResults extends React.Component
 {
 
     render() {
+
         let results ;
-        if ( this.props.searchResults && this.props.searchResults.error !== undefined )
+        if ( this.props.searchResults && this.props.searchResults.error !== undefined ) {
+            // show the error message
             results = "ERROR: " + this.props.searchResults.error ;
-        else if ( ! this.props.searchResults || this.props.searchResults.length === 0 )
+        } else if ( ! this.props.searchResults || this.props.searchResults.length === 0 ) {
+            // show that no search results were found
             results = (this.props.seqNo === 0) ? null : <div className="no-results"> No results. </div> ;
-        else if ( this.props.searchResults === "(loading)" ) {
+        } else if ( this.props.searchResults === "(loading)" ) {
+            // show the loading spinner
             results = ( <div className="loading">
                 <img id="loading" src="/images/loading.gif" alt="Loading..." style={{display:"none"}} />
                 </div> ) ;
@@ -26,19 +31,31 @@ export class SearchResults extends React.Component
                     elem.style.display = "block" ;
             }, 500 ) ;
         } else {
+            // track articles
+            let articleRefs = {} ;
+            function scrollToArticle( article_id ) {
+                const node = ReactDOM.findDOMNode( articleRefs[article_id] ) ;
+                if ( node )
+                    node.scrollIntoView() ;
+                else
+                    document.location = gAppRef.makeAppUrl( "/article/" + article_id ) ;
+            }
+            // render the search results
             results = [] ;
             this.props.searchResults.forEach( sr => {
                 if ( sr.type === "publisher" ) {
                     results.push( <PublisherSearchResult key={"publisher:"+sr.publ_id} data={sr}
-                        onDelete = { this.onDeleteSearchResult.bind( this ) }
+                        onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
                     /> ) ;
                 } else if ( sr.type === "publication" ) {
                     results.push( <PublicationSearchResult key={"publication:"+sr.pub_id} data={sr}
-                        onDelete = { this.onDeleteSearchResult.bind( this ) }
+                        onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
+                        onArticleClick = { this.props.type === "publication" ? (a) => scrollToArticle(a) : null }
                     /> ) ;
                 } else if ( sr.type === "article" ) {
                     results.push( <ArticleSearchResult key={"article:"+sr.article_id} data={sr}
-                        onDelete = { this.onDeleteSearchResult.bind( this ) }
+                        onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
+                        ref = { r => articleRefs[sr.article_id] = r }
                     /> ) ;
                 } else {
                     gAppRef.logInternalError( "Unknown search result type.", "srType = "+sr.type ) ;

web/src/index.js

@@ -10,32 +10,32 @@ import "./index.css" ;
 ReactDOM.render(
     <BrowserRouter>
         <Switch>
-            <Route path="/publishers" render={ (props) => <App {...props} key="publishers"
+            <Route path="/publishers" render={ (props) => <App {...props} type="publishers" key="publishers"
                 doSearch = { () => gAppRef._showPublishers() }
             /> } />
-            <Route path="/technique" render={ (props) => <App {...props} key="technique"
+            <Route path="/technique" render={ (props) => <App {...props} type="technique" key="technique"
                 doSearch = { () => gAppRef._showTechniqueArticles() }
             /> } />
-            <Route path="/tips" render={ (props) => <App {...props} key="tips"
+            <Route path="/tips" render={ (props) => <App {...props} type="tips" key="tips"
                 doSearch = { () => gAppRef._showTipsArticles() }
             /> } />
-            <Route path="/publisher/:publId" render={ (props) => <App {...props} key={"publ:"+props.match.params.publId}
+            <Route path="/publisher/:publId" render={ (props) => <App {...props} type="publisher" key={"publ:"+props.match.params.publId}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/publisher/"+gAppRef.props.match.params.publId, null,
                     () => gAppRef.setWindowTitleFromSearchResults( "publisher", "publ_id", gAppRef.props.match.params.publId, "publ_name" )
                 ) }
             /> } />
-            <Route path="/publication/:pubId" render={ (props) => <App {...props} key={"pub:"+props.match.params.pubId}
+            <Route path="/publication/:pubId" render={ (props) => <App {...props} type="publication" key={"pub:"+props.match.params.pubId}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/publication/"+gAppRef.props.match.params.pubId, null,
                     () => gAppRef.setWindowTitleFromSearchResults( "publication", "pub_id", gAppRef.props.match.params.pubId,
                         sr => { return PublicationSearchResult.makeDisplayName( sr ) }
                 ) ) }
             /> } />
-            <Route path="/article/:articleId" render={ (props) => <App {...props} key={"article:"+props.match.params.articleId}
+            <Route path="/article/:articleId" render={ (props) => <App {...props} type="article" key={"article:"+props.match.params.articleId}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/article/"+gAppRef.props.match.params.articleId, null,
                     () => gAppRef.setWindowTitleFromSearchResults( "article", "article_id", gAppRef.props.match.params.articleId, "article_title" )
                 ) }
             /> } />
-            <Route path="/author/:authorId" render={ (props) => <App {...props} key={"author:"+props.match.params.authorId}
+            <Route path="/author/:authorId" render={ (props) => <App {...props} type="author" key={"author:"+props.match.params.authorId}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/author/"+gAppRef.props.match.params.authorId, null,
                     () => {
                         const author = gAppRef.caches.authors[ gAppRef.props.match.params.authorId ] ;
@@ -43,13 +43,13 @@ ReactDOM.render(
                     }
                 ) }
             /> } />
-            <Route path="/tag/:tag" render={ (props) => <App {...props} key={"tag:"+props.match.params.tag}
+            <Route path="/tag/:tag" render={ (props) => <App {...props} type="tag" key={"tag:"+props.match.params.tag}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/tag/"+gAppRef.props.match.params.tag, null,
                     () => gAppRef.setWindowTitle( gAppRef.props.match.params.tag )
                 ) }
             /> } />
             <Route path="/" exact component={App} />
-            <Route path="/" render={ (props) => <App {...props} warning="Unknown URL." key="unknown-url" /> } />
+            <Route path="/" render={ (props) => <App {...props} warning="Unknown URL." type="home" key="unknown-url" /> } />
         </Switch>
     </BrowserRouter>,
     document.getElementById( "app" )