Multiple search answers

components/browseArchives/index.js

@@ -56,9 +56,10 @@ class BrowseArchives extends React.Component {
     const searchResults = interviewData.reduce((filtered, interview) => {
       const findTerm = this.termIsInInterview(term, interview);
       const matchedIndex = findTerm.foundIndex;
+      const { matchingQuestionAnswerPositions } = findTerm;
 
       if (findTerm.found) {
-        filtered.push({ ...interview, matchedIndex });
+        filtered.push({ ...interview, matchedIndex, matchingQuestionAnswerPositions });
       }
 
       return filtered;
@@ -159,6 +160,7 @@ class BrowseArchives extends React.Component {
     const matchesName = interview.name.toLowerCase().includes(lcTerm);
     const { interviewData } = this.state;
     let foundIndex = 0;
+    let positionInAnswer = -1;
 
     if (matchesName) {
       return {
@@ -176,6 +178,8 @@ class BrowseArchives extends React.Component {
       };
     }
 
+    const matchingQuestionAnswerPositions = [];
+
     const matchingQuestions = interview.interview
       .filter((question, questionIndex) => {
         if (question.answer === null) {
@@ -186,6 +190,13 @@ class BrowseArchives extends React.Component {
 
         if (index !== -1 && interview.activeIndex !== -1) {
           foundIndex = questionIndex;
+          positionInAnswer = index;
+          matchingQuestionAnswerPositions.push({ 
+            id: question.question,
+            strpos: index,
+            answer: question.answer,
+            index: questionIndex,
+          });
         }
 
         return index !== -1;
@@ -195,10 +206,15 @@ class BrowseArchives extends React.Component {
       interviewData,
     });
 
+    // eslint-disable-next-line
+    console.log(matchingQuestionAnswerPositions);
+
     if (matchingQuestions.length > 0) {
       return {
         found: true,
         foundIndex,
+        positionInAnswer,
+        matchingQuestionAnswerPositions,
       };
     }
 

components/searchResults/index.js

@@ -16,12 +16,20 @@ const SearchResults = (props) => {
   // sort array alphabetically
   const sortedInterviews = props.data.sort((a, b) => a.name.localeCompare(b.name));
 
-  const trimText = (text, length) => {
+  const trimText = (text, strpos, length) => {
+    let offset = 0;
+    let firstEclipses = '';
+
     if (text === null) {
       return '';
     }
 
-    return text.length <= length ? text : `${text.substr(0, length)}...`;
+    if (strpos > length && strpos !== -1 && length > 50) {
+      offset = strpos - length;
+      firstEclipses = '<p>...';
+    }
+
+    return text.length <= length ? text : `${firstEclipses}${text.substr(offset, length + offset)}...`;
   };
 
   const highlightTerm = (text) => {
@@ -30,25 +38,12 @@ const SearchResults = (props) => {
     return text.replace(regex, `<span>${cleanTerm}</span>`);
   };
 
-  const processText = (text, length = 500) => highlightTerm(trimText(text, length));
-
-  const findFirstQuestion = (interview) => {
-    let { answer } = interview.interview[interview.matchedIndex];
-    let id = interview.interview[interview.matchedIndex].question;
-
-    if (answer === null) {
-      const firstNonNullAnswer = interview.interview.find(question => question.answer !== null);
-      id = firstNonNullAnswer.question;
-      // eslint-disable-next-line
-      answer = firstNonNullAnswer.answer;
-    }
+  const processText = (text, strpos, length = 500) => highlightTerm(trimText(text, strpos, length));
 
+  const findQuestion = (answer) => {
+    const { id } = answer;
     const { text } = props.questions.find(question => question.id === id);
-
-    return {
-      question: text,
-      answer: processText(answer),
-    };
+    return text;
   };
 
   const interviewNameContainsTerm = (name, searchTerm) =>
@@ -69,12 +64,17 @@ const SearchResults = (props) => {
                   <img src={`${publicRuntimeConfig.subDirPath}/static/img/right-chevron-icon.svg`} alt="right chevron icon" />
                 </div>
               </div>
-              <h5>{interview.matchedIndex + 1})&nbsp;
-                { findFirstQuestion(interview).question }
-              </h5>
-              <div>
-                { Parser(findFirstQuestion(interview).answer) }
-              </div>
+
+              { interview.matchingQuestionAnswerPositions.map(match => (
+                <div>
+                  <h5>{match.index + 1})&nbsp;
+                    { findQuestion(match) }
+                  </h5>
+                  <div>
+                    { Parser(processText(match.answer, match.strpos)) }
+                  </div>
+                </div>
+              ))}
             </button>
           </li>
         ))