Implement tag and title search

BoostIO · Dec 22, 2020 · a3c0de4 · a3c0de4
1 parent c359ddd
commit a3c0de4
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 23 deletions.
diff --git a/src/components/molecules/SearchModalNoteResultItem.tsx b/src/components/molecules/SearchModalNoteResultItem.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import styled from '../../lib/styled'
 import { NoteDoc } from '../../lib/db/types'
 import Icon from '../atoms/Icon'
@@ -12,13 +12,16 @@ import {
   getSearchResultKey,
   MAX_SEARCH_PREVIEW_LINE_LENGTH,
   SearchResult,
+  TagSearchResult,
 } from '../../lib/search/search'
 import { SearchMatchHighlight } from '../PreferencesModal/styled'
 import { escapeRegExp } from '../../lib/string'
 import cc from 'classcat'
 
 interface SearchModalNoteResultItemProps {
   note: NoteDoc
+  titleSearchResult: string | null
+  tagSearchResults: TagSearchResult[]
   selectedItemId: string
   searchResults: SearchResult[]
   navigateToNote: (noteId: string) => void
@@ -32,6 +35,8 @@ interface SearchModalNoteResultItemProps {
 
 const SearchModalNoteResultItem = ({
   note,
+  titleSearchResult,
+  tagSearchResults,
   searchResults,
   navigateToNote,
   selectedItemId,
@@ -42,7 +47,7 @@ const SearchModalNoteResultItem = ({
     navigateToNote(note._id)
   }, [navigateToNote, note._id])
 
-  const highlightMatchedTerm = useCallback((line, matchStr) => {
+  const highlightMatchedTerm = useCallback((line: string, matchStr: string) => {
     const parts = line.split(new RegExp(`(${escapeRegExp(matchStr)})`, 'gi'))
     return (
       <span>
@@ -57,7 +62,7 @@ const SearchModalNoteResultItem = ({
     )
   }, [])
   const beautifyPreviewLine = useCallback(
-    (line, matchStr) => {
+    (line: string, matchStr: string) => {
       const multiline = matchStr.indexOf('\n') != -1
       const beautifiedLine =
         line.substring(0, MAX_SEARCH_PREVIEW_LINE_LENGTH) +
@@ -101,6 +106,13 @@ const SearchModalNoteResultItem = ({
 
   const titleIsEmpty = note.title.trim().length === 0
 
+  const searchedTagNameMatchStringMap = useMemo(() => {
+    return tagSearchResults.reduce<Map<string, string>>((map, searchResult) => {
+      map.set(searchResult.tagName, searchResult.matchString)
+      return map
+    }, new Map())
+  }, [tagSearchResults])
+
   return (
     <Container>
       <MetaContainer onClick={navigate}>
@@ -109,7 +121,11 @@ const SearchModalNoteResultItem = ({
             <Icon path={mdiTextBoxOutline} />
           </div>
           <div className={cc(['title', titleIsEmpty && 'empty'])}>
-            {titleIsEmpty ? 'Untitled' : note.title}
+            {titleIsEmpty
+              ? 'Untitled'
+              : titleSearchResult != null
+              ? highlightMatchedTerm(note.title, titleSearchResult)
+              : note.title}
           </div>
         </div>
         <div className='meta'>
@@ -120,7 +136,21 @@ const SearchModalNoteResultItem = ({
           {note.tags.length > 0 && (
             <div className='tags'>
               <Icon className='icon' path={mdiTagMultiple} />{' '}
-              {note.tags.map((tag) => tag).join(', ')}
+              {note.tags.map((tag) => {
+                const matchedString = searchedTagNameMatchStringMap.get(tag)
+                if (matchedString == null) {
+                  return (
+                    <span className='tags__item' key={tag}>
+                      {tag}
+                    </span>
+                  )
+                }
+                return (
+                  <span className='tags__item' key={tag}>
+                    {highlightMatchedTerm(tag, matchedString)}
+                  </span>
+                )
+              })}
             </div>
           )}
         </div>
@@ -140,18 +170,18 @@ const SearchModalNoteResultItem = ({
                 onDoubleClick={() =>
                   navigateToEditorFocused(
                     note._id,
-                    result.lineNum - 1,
+                    result.lineNumber - 1,
                     result.matchColumn
                   )
                 }
               >
-                <SearchResultLeft title={result.lineStr}>
+                <SearchResultLeft title={result.lineString}>
                   <code>
-                    {beautifyPreviewLine(result.lineStr, result.matchStr)}
+                    {beautifyPreviewLine(result.lineString, result.matchString)}
                   </code>
                 </SearchResultLeft>
                 <SearchResultRight>
-                  <code>{result.lineNum}</code>
+                  <code>{result.lineNumber}</code>
                 </SearchResultRight>
               </SearchResultItem>
             ))}
@@ -244,6 +274,12 @@ const MetaContainer = styled.div`
         margin-right: 4px;
         flex-shrink: 0;
       }
+      & > .tags__item {
+        margin-right: 5px;
+        &:not(:last-child)::after {
+          content: ',';
+        }
+      }
     }
   }
   &:last-child {

diff --git a/src/components/organisms/SearchModal.tsx b/src/components/organisms/SearchModal.tsx
@@ -29,6 +29,7 @@ import {
   SearchResult,
   SEARCH_DEBOUNCE_TIMEOUT,
   MERGE_SAME_LINE_RESULTS_INTO_ONE,
+  TagSearchResult,
 } from '../../lib/search/search'
 import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
 import CodeMirror from 'codemirror'
@@ -99,14 +100,35 @@ const SearchModal = ({ storage }: SearchModalProps) => {
           return
         }
         const matchDataContent = getMatchData(note.content, regex)
-        // todo: [komediruzecki-04/12/2020] Use title and tag search to find those elements too, once found
-        //  we can highlight them too
-        // const matchDataTitle = getMatchData(note.title, regex)
-        // const matchDataTags = getMatchData(note.tags.join(), regex)
-        if (matchDataContent && matchDataContent.length > 0) {
+
+        const titleMatchResult = note.title.match(regex)
+
+        const titleSearchResult =
+          titleMatchResult != null ? titleMatchResult[0] : null
+        const tagSearchResults = note.tags.reduce<TagSearchResult[]>(
+          (searchResults, tagName) => {
+            const matchResult = tagName.match(regex)
+            if (matchResult != null) {
+              searchResults.push({
+                tagName,
+                matchString: matchResult[0],
+              })
+            }
+            return searchResults
+          },
+          []
+        )
+
+        if (
+          titleSearchResult ||
+          tagSearchResults.length > 0 ||
+          matchDataContent.length > 0
+        ) {
           const noteResultKey = excludeNoteIdPrefix(note._id)
           noteToSearchResultMap[noteResultKey] = matchDataContent
           searchResultData.push({
+            titleSearchResult,
+            tagSearchResults,
             note: note,
             results: matchDataContent,
           })
@@ -201,7 +223,7 @@ const SearchModal = ({ storage }: SearchModalProps) => {
         return
       }
       const focusLocation = {
-        line: searchResults[selectedIdx].lineNum - 1,
+        line: searchResults[selectedIdx].lineNumber - 1,
         ch:
           searchResults[selectedIdx].matchColumn +
           searchResults[selectedIdx].matchLength,
@@ -236,7 +258,7 @@ const SearchModal = ({ storage }: SearchModalProps) => {
         selectedItemId && !Number.isNaN(parseInt(selectedItemId))
           ? parseInt(selectedItemId)
           : -1
-      addMarkers(codeMirror, searchResults[0].matchStr, selectedItemIdNum)
+      addMarkers(codeMirror, searchResults[0].matchString, selectedItemIdNum)
       if (selectedItemIdNum != -1) {
         focusEditorOnSelectedItem(codeMirror, searchResults, selectedItemIdNum)
       }
@@ -288,6 +310,8 @@ const SearchModal = ({ storage }: SearchModalProps) => {
                       ? selectedItemId
                       : '-1'
                   }
+                  titleSearchResult={result.titleSearchResult}
+                  tagSearchResults={result.tagSearchResults}
                   searchResults={result.results}
                   updateSelectedItem={updateSelectedItems}
                   navigateToNote={navigateToNote}

diff --git a/src/lib/search/search.ts b/src/lib/search/search.ts
@@ -3,14 +3,21 @@ import { EditorPosition } from '../CodeMirror'
 
 export interface SearchResult {
   id: string
-  lineStr: string
-  matchStr: string
+  lineString: string
+  matchString: string
   matchColumn: number
   matchLength: number
-  lineNum: number
+  lineNumber: number
+}
+
+export interface TagSearchResult {
+  tagName: string
+  matchString: string
 }
 
 export interface NoteSearchData {
+  titleSearchResult: string | null
+  tagSearchResults: TagSearchResult[]
   results: SearchResult[]
   note: NoteDoc
 }
@@ -48,7 +55,7 @@ function getMatchDataFromGlobalColumn(
   }
 }
 
-export function getMatchData(text: string, searchTerm: RegExp) {
+export function getMatchData(text: string, searchTerm: RegExp): SearchResult[] {
   const data: SearchResult[] = []
 
   let resultId = 0
@@ -73,11 +80,11 @@ export function getMatchData(text: string, searchTerm: RegExp) {
     }
     data.push({
       id: `${resultId++}`,
-      lineStr: lines[pos.line],
-      lineNum: pos.line + 1,
+      lineString: lines[pos.line],
+      lineNumber: pos.line + 1,
       matchLength: matchStr.length,
       matchColumn: pos.ch,
-      matchStr: matchStr,
+      matchString: matchStr,
     })
   }
   return data