Add pagination and improve the ui

server/src/main/java/com/github/awrb/solr/services/data/SolrQueryParams.java

@@ -1,5 +1,7 @@
 package com.github.awrb.solr.services.data;
 
+import org.apache.solr.common.StringUtils;
+import org.apache.solr.common.params.CursorMarkParams;
 import org.apache.solr.common.params.ModifiableSolrParams;
 import org.apache.solr.common.params.SolrParams;
 
@@ -15,7 +17,9 @@ public class SolrQueryParams {
     private String reviewerName = MATCH_ALL;
     private String summary = MATCH_ALL;
     private String asin = MATCH_ALL;
+    private int start;
     private Sort sort = Sort.DESC;
+    private String nextCursorMark;
 
     private int rows = DEFAULT_ROW_COUNT;
 
@@ -27,6 +31,10 @@ public class SolrQueryParams {
         this.reviewText = reviewText;
     }
 
+    public void setNextCursorMark(String nextCursorMark) {
+        this.nextCursorMark = nextCursorMark;
+    }
+
     public void setRows(int rows) {
         this.rows = rows;
     }
@@ -47,11 +55,25 @@ public class SolrQueryParams {
         this.sort = sort;
     }
 
+    public void setStart(int start) {
+        this.start = start;
+    }
+
     public SolrParams toSolrParams() {
         ModifiableSolrParams params = new ModifiableSolrParams();
         params.set("q", buildQ());
         params.set("rows", rows);
+
+        if (start > 0) {
+            params.set("start", start);
+        }
+
+//        params.set(CursorMarkParams.CURSOR_MARK_PARAM, "*");
+//        if (!StringUtils.isEmpty(nextCursorMark)) {
+//            ModifiableSolrParams set = params.set(CursorMarkParams.CURSOR_MARK_NEXT, nextCursorMark);
+//        }
 //        params.set("sort", "overall " + sort.label);
+        
         System.out.println(params.toQueryString());
         return params;
     }
@@ -67,6 +89,7 @@ public class SolrQueryParams {
                 .append(" asin:")
                 .append(asin)
                 .append(")");
+
         // The query string ends up looking like this: (reviewText:* reviewerName:* summary:*)
         // OR between parameters
         System.out.println(sb.toString());

ui/solr/src/components/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import SearchBar from "./SearchBar";
 import SearchResult from "./SearchResult";
+import PageArrows from "./PageArrows";
 import SortSelect from "./SortSelect";
 import solr from "../api/solr";
 import { List, CircularProgress, Grid } from "@material-ui/core";
@@ -12,6 +13,9 @@ import PaginationSelect from "./PaginationSelect";
 const useStyles = makeStyles({
   loader: { margin: 20 },
   select: { marginLeft: "3vw" },
+  center: {
+    marginLeft: "50%",
+  },
 });
 
 const App = () => {
@@ -21,6 +25,7 @@ const App = () => {
   const [term, setTerm] = useState("");
   const [sort, setSort] = useState(Constants.DESC);
   const [rows, setRows] = useState(10);
+  const [page, setPage] = useState(1);
 
   const classes = useStyles();
 
@@ -34,14 +39,20 @@ const App = () => {
       [Constants.SORT]: sort,
     };
 
+    if (page > 1) {
+      params[Constants.START] = (page - 1) * rows;
+    }
+
+    const searchTerm = "*" + term + "*";
+
     if (filter === Constants.REVIEW_TEXT) {
-      params[Constants.REVIEW_TEXT] = term;
+      params[Constants.REVIEW_TEXT] = searchTerm;
     } else if (filter === Constants.REVIEWER_NAME) {
-      params[Constants.REVIEWER_NAME] = term;
+      params[Constants.REVIEWER_NAME] = searchTerm;
     } else if (filter === Constants.SUMMARY) {
-      params[Constants.SUMMARY] = term;
+      params[Constants.SUMMARY] = searchTerm;
     } else {
-      params[Constants.ASIN] = term;
+      params[Constants.ASIN] = searchTerm;
     }
 
     return params;
@@ -60,12 +71,13 @@ const App = () => {
         {results.map((result) => (
           <SearchResult
             key={result.id}
-            summary={result.summary[0]}
-            reviewText={result.reviewText[0]}
-            author={result.reviewerName[0]}
-            time={result.reviewTime[0]}
+            summary={result.summary}
+            reviewText={result.reviewText}
+            author={result.reviewerName}
+            time={result.reviewTime}
             asin={result.asin}
-            rating={result.overall[0]}
+            rating={result.overall}
+            query={term}
           />
         ))}
       </List>
@@ -101,6 +113,25 @@ const App = () => {
       </Grid>
       {loading && <CircularProgress className={classes.loader} />}
       {!loading && results.length > 0 && renderResults()}
+      <div className={classes.center}>
+        {results.length > 0 && (
+          <PageArrows
+            currentPage={page}
+            onClickBack={() => {
+              if (page === 1) {
+                return;
+              } else {
+                setPage(page - 1);
+              }
+              onSubmit();
+            }}
+            onClickNext={() => {
+              setPage(page + 1);
+              onSubmit();
+            }}
+          />
+        )}
+      </div>
     </React.Fragment>
   );
 };

ui/solr/src/components/PageArrows.js

@@ -0,0 +1,21 @@
+import { Grid, Typography } from "@material-ui/core";
+import { NavigateBefore, NavigateNext } from "@material-ui/icons";
+import React from "react";
+
+const PageArrows = ({ onClickBack, onClickNext, currentPage }) => {
+  return (
+    <Grid container>
+      <Grid item>
+        <NavigateBefore onClick={onClickBack} />
+      </Grid>
+      <Grid item style={{ marginTop: 5 }}>
+        {currentPage}
+      </Grid>
+      <Grid item>
+        <NavigateNext onClick={onClickNext} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default PageArrows;

ui/solr/src/components/RatingStars.js

@@ -0,0 +1,17 @@
+import { Grid } from "@material-ui/core";
+import { Star } from "@material-ui/icons";
+import React from "react";
+
+const RatingStars = ({ className, rating }) => {
+  return (
+    <Grid className={className} item>
+      {Array(rating)
+        .fill()
+        .map((i) => (
+          <Star style={{ color: "#FFDF00" }} />
+        ))}
+    </Grid>
+  );
+};
+
+export default RatingStars;

ui/solr/src/components/SearchBar.js

@@ -3,7 +3,6 @@ import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import InputBase from "@material-ui/core/InputBase";
 import IconButton from "@material-ui/core/IconButton";
-import MenuIcon from "@material-ui/icons/Menu";
 import SearchIcon from "@material-ui/icons/Search";
 
 const useStyles = makeStyles((theme) => ({
@@ -34,10 +33,6 @@ const SearchBar = ({ onSubmit, onChange, value }) => {
       component="form"
       className={classes.root}
     >
-      <IconButton className={classes.iconButton} aria-label="menu">
-        <MenuIcon />
-      </IconButton>
-
       <InputBase
         value={value}
         onChange={(e) => onChange(e.target.value)}

ui/solr/src/components/SearchResult.js

@@ -1,5 +1,29 @@
-import { Divider, ListItem, Paper, Typography } from "@material-ui/core";
+import {
+  Divider,
+  Grid,
+  ListItem,
+  makeStyles,
+  Paper,
+  Typography,
+} from "@material-ui/core";
 import React from "react";
+import RatingStars from "./RatingStars";
+
+const useStyles = makeStyles({
+  bottomCell: {
+    marginTop: 15,
+    marginBottom: 15,
+  },
+  date: {
+    color: "#808080",
+    margin: 0,
+  },
+  grid: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
 
 const SearchResult = ({
   key,
@@ -9,22 +33,40 @@ const SearchResult = ({
   time,
   asin,
   rating,
+  query,
 }) => {
+  const classes = useStyles();
+
+  const getHighlightedText = () => {
+    const parts = reviewText.split(new RegExp(`(${query})`, "gi"));
+    return (
+      <span>
+        {parts.map((part) =>
+          part.toLowerCase() === query.toLowerCase() ? <b>{part}</b> : part
+        )}
+      </span>
+    );
+  };
+
   return (
     <ListItem key={key}>
-      <Paper>
-        <Typography variant="h5">{summary}</Typography>
-        <Typography variant="body">{reviewText}</Typography>
-        <div style={{ marginTop: 30 }}>
-          <Divider />
-          <Typography variant="body">{author}</Typography>
-          <Divider />
-          <Typography variant="body">{time}</Typography>
-          <Divider />
-          <Typography variant="body">{`Rating ${rating}`}</Typography>
-          <Divider />
-          <Typography variant="body">{`ASIN ${asin}`}</Typography>
-        </div>
+      <Paper elevation="4">
+        <Grid container spacing={6}>
+          <Grid className={classes.grid} item>
+            <Typography variant="h5">{summary}</Typography>
+          </Grid>
+          <RatingStars className={classes.grid} rating={rating} />
+          <Grid className={classes.grid} item>
+            <Typography className={classes.date} variant="body">
+              {time}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Typography variant="body">{getHighlightedText()}</Typography>
+        <Divider className={classes.bottomCell} />
+        <Typography variant="body">{author}</Typography>
+        <Divider className={classes.bottomCell} />
+        <Typography variant="body">{`ASIN ${asin}`}</Typography>
       </Paper>
     </ListItem>
   );

ui/solr/src/constants.js

@@ -6,6 +6,7 @@ export const ROWS = "rows";
 export const ASC = "ASC";
 export const DESC = "DESC";
 export const SORT = "sort";
+export const START = "start";
 
 export const CONSTANTS = {
   REVIEWER_NAME,
@@ -16,6 +17,7 @@ export const CONSTANTS = {
   DESC,
   ASC,
   SORT,
+  START,
 };
 
 export default CONSTANTS;