See more content is now searchable (#1709)

__tests__/components/benefit_card_test.js

@@ -43,7 +43,6 @@ describe("BenefitCard", () => {
       currentLanguage: "en",
       veteranBenefitIds: [],
       familyBenefitIds: [],
-      searchString: "",
       favouriteBenefits: [],
       showFavourite: true
     };
@@ -58,7 +57,8 @@ describe("BenefitCard", () => {
       benefitEligibility: benefitEligibilityFixture,
       multipleChoiceOptions: multipleChoiceOptionsFixture,
       benefitExamples: benefitExamplesFixture,
-      questions: questionsFixture
+      questions: questionsFixture,
+      searchString: ""
     };
     props.store = mockStore(reduxData);
 

__tests__/components/benefit_expansion_test.js

@@ -37,7 +37,8 @@ describe("BenefitExpansion", () => {
       patronType: "veteran",
       serviceType: "CAF",
       statusAndVitals: "",
-      serviceHealthIssue: ""
+      serviceHealthIssue: "",
+      searchString: ""
     };
     props.reduxState = reduxData;
     props.store = mockStore(reduxData);

__tests__/components/benefit_list_test.js

@@ -34,7 +34,8 @@ describe("BenefitList", () => {
       eligibilityPaths: eligibilityPathsFixture,
       multipleChoiceOptions: multipleChoiceOptionsFixture,
       needs: needsFixture,
-      selectedNeeds: {}
+      selectedNeeds: {},
+      searchString: ""
     };
     props.store = mockStore(reduxData);
   });

__tests__/components/example_bullets_test.js

@@ -12,7 +12,8 @@ describe("ExampleBullets", () => {
     props = {
       t: x => x,
       benefit: benefitsFixture[0],
-      benefitExamples: benefitExamplesFixture
+      benefitExamples: benefitExamplesFixture,
+      searchString: ""
     };
   });
 

__tests__/components/favourites_test.js

@@ -67,7 +67,8 @@ describe("Favourites", () => {
       areaOffices: areaOfficesFixture,
       selectedAreaOffice: areaOfficesFixture[0],
       closestAreaOffice: areaOfficesFixture[0],
-      multipleChoiceOptions: multipleChoiceOptionsFixture
+      multipleChoiceOptions: multipleChoiceOptionsFixture,
+      searchString: ""
     };
     props.store = mockStore(reduxData);
   });

__tests__/selectors/benefits_test.js

@@ -15,6 +15,7 @@ import needsFixture from "../fixtures/needs_complex";
 import enIdx from "../fixtures/lunr_index_english";
 import frIdx from "../fixtures/lunr_index_french";
 import nextStepsFixture from "../fixtures/nextSteps_complex";
+import benefitExamplesFixture from "../fixtures/benefitExamples";
 
 describe("Benefits Selectors", () => {
   let props;
@@ -37,6 +38,7 @@ describe("Benefits Selectors", () => {
       patronType: "",
       searchString: "",
       serviceType: "",
+      benefitExamples: benefitExamplesFixture,
       nextSteps: nextStepsFixture
     };
   });
@@ -266,6 +268,13 @@ describe("Benefits Selectors", () => {
           .reverse()
       ).toEqual(rankedScores);
     });
+
+    it("returns a results if user searches see more content", () => {
+      state.searchString = "inpatient";
+      expect(getFilteredBenefits(state, props).map(x => x.vacNameEn)).toEqual([
+        "Disability Benefits"
+      ]);
+    });
   });
 
   describe("getFilteredNextSteps", () => {

components/benefit_cards.js

@@ -152,6 +152,7 @@ const mapStateToProps = reduxState => {
   return {
     needs: reduxState.needs,
     selectedNeeds: reduxState.selectedNeeds,
+    searchString: reduxState.searchString,
     benefits: reduxState.benefits
   };
 };

components/benefit_list.js

@@ -90,7 +90,6 @@ export class BenefitList extends React.Component {
           currentLanguage={currentLanguage}
           key={benefit.id}
           showFavourite={showFavourites}
-          searchString={searchString}
           store={store}
         />
       ))

components/example_bullets.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { css } from "emotion";
 import { globalTheme } from "../theme";
+import Highlighter from "react-highlight-words";
 
 const margin = css`
   padding-left: 20px;
@@ -21,7 +22,8 @@ const root = css`
 `;
 export class ExampleBullets extends React.Component {
   getExampleBullets = () => {
-    const { benefitExamples, benefit, t } = this.props;
+    const { benefitExamples, benefit, t, searchString } = this.props;
+    const searchWords = searchString.split(/\s+/);
     const lang = t("current-language-code") === "en" ? "english" : "french";
     return benefitExamples
       .filter(x => {
@@ -31,7 +33,15 @@ export class ExampleBullets extends React.Component {
         return false;
       })
       .map((x, i) => {
-        return <li key={i}>{x[lang]}</li>;
+        return (
+          <li key={i}>
+            <Highlighter
+              searchWords={searchWords}
+              autoEscape={true}
+              textToHighlight={x[lang]}
+            />
+          </li>
+        );
       });
   };
 
@@ -53,13 +63,15 @@ export class ExampleBullets extends React.Component {
 
 const mapStateToProps = reduxState => {
   return {
-    benefitExamples: reduxState.benefitExamples
+    benefitExamples: reduxState.benefitExamples,
+    searchString: reduxState.searchString
   };
 };
 
 ExampleBullets.propTypes = {
   benefit: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired,
+  searchString: PropTypes.string.isRequired,
   benefitExamples: PropTypes.array.isRequired
 };
 

store.js

@@ -27,19 +27,26 @@ airtableConstants.tableNames.forEach(tableName => {
 
 // REDUCERS
 export const reducer = (state = initialState, action) => {
-  let benefits;
-  let language;
-  let enIdx;
-  let frIdx;
-  let newState;
+  let benefits, benefitExamples, language, enIdx, frIdx, newState;
 
   switch (action.type) {
     case "INDEX_BENEFITS":
       benefits = state.benefits;
+      benefitExamples = state.benefitExamples;
+      benefits.forEach(x => {
+        if (x.benefitExamples) {
+          const releventExamples = benefitExamples.filter(
+            y => x.benefitExamples.indexOf(y.id) > -1
+          );
+          x.benefitExamplesEn = releventExamples.map(y => y.english).join(" ");
+          x.benefitExamplesFr = releventExamples.map(y => y.french).join(" ");
+        }
+      });
       enIdx = lunr(function() {
         this.ref("id");
         this.field("vacNameEn");
         this.field("oneLineDescriptionEn");
+        this.field("benefitExamplesEn");
         benefits.forEach(function(doc) {
           this.add(doc);
         }, this);
@@ -50,6 +57,7 @@ export const reducer = (state = initialState, action) => {
         this.use(lunr.fr);
         this.field("vacNameFr");
         this.field("oneLineDescriptionFr");
+        this.field("benefitExamplesFr");
         benefits.forEach(function(doc) {
           this.add(doc);
         }, this);