From 2d8a41a982e9d8a25ca23b7a762d32447c4741e7 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 25 Nov 2017 15:44:10 -0800
Subject: [PATCH] Add highlighting to search results as mocked.

---
 .../DocumentPreview/DocumentPreview.js        | 11 ++++--
 app/components/Highlight/Highlight.js         | 34 +++++++++++++++++++
 app/components/Highlight/index.js             |  3 ++
 package.json                                  | 33 ++++++++++++------
 yarn.lock                                     |  8 +++++
 5 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 app/components/Highlight/Highlight.js
 create mode 100644 app/components/Highlight/index.js

diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js
index 089df2a9..244162aa 100644
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
+import Highlight from 'components/Highlight';
 import StarredIcon from 'components/Icon/StarredIcon';
 import PublishingInfo from './components/PublishingInfo';
 
@@ -84,12 +85,18 @@ class DocumentPreview extends Component {
   };
 
   render() {
-    const { document, showCollection, innerRef, ...rest } = this.props;
+    const {
+      document,
+      showCollection,
+      innerRef,
+      highlight,
+      ...rest
+    } = this.props;
 
     return (
       <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
         <h3>
-          {document.title}
+          <Highlight text={document.title} highlight={highlight} />
           {document.starred ? (
             <a onClick={this.unstar}>
               <StyledStar solid />
diff --git a/app/components/Highlight/Highlight.js b/app/components/Highlight/Highlight.js
new file mode 100644
index 00000000..2acdbcf0
--- /dev/null
+++ b/app/components/Highlight/Highlight.js
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import replace from 'string-replace-to-array';
+import styled from 'styled-components';
+import { color } from 'shared/styles/constants';
+
+type Props = {
+  highlight: ?string,
+  text: string,
+  caseSensitive?: boolean,
+};
+
+function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
+  return (
+    <span {...rest}>
+      {highlight
+        ? replace(
+            text,
+            new RegExp(
+              (highlight || '').replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'),
+              caseSensitive ? 'g' : 'gi'
+            ),
+            (tag, index) => <Mark key={index}>{tag}</Mark>
+          )
+        : text}
+    </span>
+  );
+}
+
+const Mark = styled.mark`
+  background: ${color.yellow};
+`;
+
+export default Highlight;
diff --git a/app/components/Highlight/index.js b/app/components/Highlight/index.js
new file mode 100644
index 00000000..99f31953
--- /dev/null
+++ b/app/components/Highlight/index.js
@@ -0,0 +1,3 @@
+// @flow
+import Highlight from './Highlight';
+export default Highlight;
diff --git a/package.json b/package.json
index 42896346..3321b05f 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,8 @@
   "main": "index.js",
   "scripts": {
     "clean": "rimraf dist",
-    "build:webpack":
-      "NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:analyze":
-      "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
+    "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
+    "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
     "build": "npm run clean && npm run build:webpack",
     "start": "NODE_ENV=production node index.js",
     "dev": "NODE_ENV=development nodemon --watch server index.js",
@@ -20,23 +18,35 @@
     "sequelize:migrate": "sequelize db:migrate",
     "test": "npm run test:app && npm run test:server",
     "test:app": "jest",
-    "test:server":
-      "jest --config=server/.jestconfig.json --runInBand --forceExit",
+    "test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
     "precommit": "lint-staged"
   },
   "lint-staged": {
-    "*.js": ["eslint --fix", "git add"]
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
   },
   "jest": {
     "verbose": false,
-    "roots": ["app"],
+    "roots": [
+      "app"
+    ],
     "moduleNameMapper": {
       "^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
       "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
     },
-    "moduleFileExtensions": ["js", "jsx", "json"],
-    "moduleDirectories": ["node_modules"],
-    "modulePaths": ["app"],
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "modulePaths": [
+      "app"
+    ],
     "setupFiles": [
       "raf/polyfill",
       "<rootDir>/setupJest.js",
@@ -158,6 +168,7 @@
     "slate-trailing-block": "^0.2.4",
     "slug": "0.9.1",
     "string-hash": "^1.1.0",
+    "string-replace-to-array": "^1.0.3",
     "style-loader": "^0.18.2",
     "styled-components": "^2.2.3",
     "styled-components-grid": "^1.0.0-preview.15",
diff --git a/yarn.lock b/yarn.lock
index 2fe7d461..11b1e4a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8355,6 +8355,14 @@ string-length@^1.0.0, string-length@^1.0.1:
   dependencies:
     strip-ansi "^3.0.0"
 
+string-replace-to-array@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/string-replace-to-array/-/string-replace-to-array-1.0.3.tgz#c93eba999a5ee24d731aebbaf5aba36b5f18f7bf"
+  dependencies:
+    invariant "^2.2.1"
+    lodash.flatten "^4.2.0"
+    lodash.isstring "^4.0.1"
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"