search results: render Mathjax in the results list and grid

* closes CERNDocumentServer/cds-rdm#198

Author: anikachurilova

docs/docs/components/results_grid.md

@@ -21,6 +21,10 @@ title: ResultsGrid
 
   An optional string to define a specific overridable id.
 
+* **onResultsRendered** `func` *optional*
+
+  An optional function to define set of actions to be performed after the component is rendered. For example: render MathJax to display mathematical equations.
+
 ## Usage when overriding
 
 ```jsx

docs/docs/components/results_list.md

@@ -17,6 +17,10 @@ title: ResultsList
 
   An optional string to define a specific overridable id.
 
+* **onResultsRendered** `func` *optional*
+
+  An optional function to define set of actions to be performed after the component is rendered. For example: render MathJax to display mathematical equations.
+
 ## Usage when overriding
 
 ```jsx

docs/docs/components/results_multi_layout.md

@@ -20,6 +20,10 @@ By default it renders results as a list.
 
   An optional string to define a specific overridable id.
 
+* **onResultsRendered** `func` *optional*
+
+  An optional function to define set of actions to be performed after the component is rendered. For example: render MathJax to display mathematical equations.
+
 ## Usage when overriding
 
 ```jsx

src/lib/components/ResultsGrid/ResultsGrid.js

@@ -7,13 +7,26 @@
  */
 
 import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import Overridable from "react-overridable";
 import { Card, Image } from "semantic-ui-react";
 import { AppContext } from "../ReactSearchKit";
 import { ShouldRender } from "../ShouldRender";
 
-function ResultsGrid({ loading, totalResults, results, resultsPerRow, overridableId }) {
+function ResultsGrid({ loading, totalResults, results, resultsPerRow, overridableId, onResultsRendered }) {
+
+  useEffect(() => {
+    if (onResultsRendered) {
+      onResultsRendered();
+    }
+
+    return () => {
+      if (onResultsRendered) {
+        onResultsRendered = null;
+      }
+    };
+  }, [onResultsRendered]);
+
   return (
     <ShouldRender condition={!loading && totalResults > 0}>
       <Element
@@ -28,6 +41,7 @@ function ResultsGrid({ loading, totalResults, results, resultsPerRow, overridabl
 ResultsGrid.propTypes = {
   resultsPerRow: PropTypes.number,
   overridableId: PropTypes.string,
+  onResultsRendered: PropTypes.func,
   /* REDUX */
   loading: PropTypes.bool.isRequired,
   totalResults: PropTypes.number.isRequired,
@@ -37,6 +51,7 @@ ResultsGrid.propTypes = {
 ResultsGrid.defaultProps = {
   resultsPerRow: 3,
   overridableId: "",
+  onResultsRendered: () => {},
 };
 
 const GridItem = ({ result, overridableId }) => {

src/lib/components/ResultsList/ResultsList.js

@@ -7,13 +7,25 @@
  */
 
 import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import Overridable from "react-overridable";
 import { Item } from "semantic-ui-react";
 import { AppContext } from "../ReactSearchKit";
 import { ShouldRender } from "../ShouldRender";
 
-function ResultsList({ loading, totalResults, results, overridableId }) {
+function ResultsList({ loading, totalResults, results, overridableId, onResultsRendered }) {
+  useEffect(() => {
+    if (onResultsRendered) {
+      onResultsRendered();
+    }
+
+    return () => {
+      if (onResultsRendered) {
+        onResultsRendered = null;
+      }
+    };
+  }, [onResultsRendered]);
+
   return (
     <ShouldRender condition={!loading && totalResults > 0}>
       <Element results={results} overridableId={overridableId} />
@@ -23,6 +35,7 @@ function ResultsList({ loading, totalResults, results, overridableId }) {
 
 ResultsList.propTypes = {
   overridableId: PropTypes.string,
+  onResultsRendered: PropTypes.func,
   /* REDUX */
   loading: PropTypes.bool.isRequired,
   totalResults: PropTypes.number.isRequired,
@@ -31,6 +44,7 @@ ResultsList.propTypes = {
 
 ResultsList.defaultProps = {
   overridableId: "",
+  onResultsRendered: () => {},
 };
 
 const ListItem = ({ result, overridableId }) => {

src/lib/components/ResultsMultiLayout/ResultsMultiLayout.js

@@ -14,17 +14,18 @@ import { ResultsGrid } from "../ResultsGrid";
 import { ResultsList } from "../ResultsList";
 import { ShouldRender } from "../ShouldRender";
 
-function ResultsMultiLayout({ loading, totalResults, currentLayout, overridableId }) {
+function ResultsMultiLayout({ loading, totalResults, currentLayout, overridableId, onResultsRendered }) {
   return (
     <ShouldRender condition={currentLayout != null && !loading && totalResults > 0}>
-      <Element layout={currentLayout} overridableId={overridableId} />
+      <Element layout={currentLayout} overridableId={overridableId} onResultsRendered={onResultsRendered} />
     </ShouldRender>
   );
 }
 
 ResultsMultiLayout.propTypes = {
   currentLayout: PropTypes.string,
   overridableId: PropTypes.string,
+  onResultsRendered: PropTypes.func,
   /* REDUX */
   loading: PropTypes.bool.isRequired,
   totalResults: PropTypes.number.isRequired,
@@ -33,20 +34,21 @@ ResultsMultiLayout.propTypes = {
 ResultsMultiLayout.defaultProps = {
   currentLayout: null,
   overridableId: "",
+  onResultsRendered: () => {},
 };
 
-const Element = ({ layout, overridableId }) => {
+const Element = ({ layout, overridableId, onResultsRendered }) => {
   const { buildUID } = useContext(AppContext);
-
   return (
     <Overridable
       id={buildUID("ResultsMultiLayout.element", overridableId)}
       layout={layout}
+      onResultsRendered={onResultsRendered}
     >
       {layout === "list" ? (
-        <ResultsList overridableId={overridableId} />
+        <ResultsList overridableId={overridableId} onResultsRendered={onResultsRendered}/>
       ) : (
-        <ResultsGrid overridableId={overridableId} />
+        <ResultsGrid overridableId={overridableId} onResultsRendered={onResultsRendered}/>
       )}
     </Overridable>
   );
@@ -55,11 +57,13 @@ const Element = ({ layout, overridableId }) => {
 Element.propTypes = {
   layout: PropTypes.string,
   overridableId: PropTypes.string,
+  onResultsRendered: PropTypes.func,
 };
 
 Element.defaultProps = {
   layout: "",
   overridableId: "",
+  onResultsRendered: () => {},
 };
 
 export default Overridable.component("ResultsMultiLayout", ResultsMultiLayout);