Fix/search notes

src/components/NotePage/NoteList/NoteItem.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../../lib/styled/styleFunctions'
 import cc from 'classcat'
 import { setTransferrableNoteData } from '../../../lib/dnd'
+import HighlightText from '../../atoms/HighlightText'
 
 export const StyledNoteListItem = styled.div`
   margin: 0;
@@ -76,21 +77,41 @@ type NoteItemProps = {
   note: NoteDoc
   active: boolean
   storageId: string
+  search: string
   basePathname: string
   focusList: () => void
 }
 
-export default ({ storageId, note, active, basePathname }: NoteItemProps) => {
+export default ({
+  storageId,
+  note,
+  active,
+  basePathname,
+  search
+}: NoteItemProps) => {
   const href = `${basePathname}/${note._id}`
 
   const contentPreview = useMemo(() => {
-    return (
-      note.content
-        .trim()
+    const trimmedContent = note.content.trim()
+    const searchFirstIndex = trimmedContent
+      .toLowerCase()
+      .indexOf(search.toLowerCase())
+
+    if (search !== '' && searchFirstIndex !== -1) {
+      const contentToHighlight = trimmedContent
+        .substring(searchFirstIndex)
         .split('\n')
-        .shift() || 'Empty note'
-    )
-  }, [note.content])
+        .shift()
+
+      return contentToHighlight == null ? (
+        'Empty note'
+      ) : (
+        <HighlightText text={contentToHighlight} search={search} />
+      )
+    }
+
+    return trimmedContent.split('\n').shift() || 'Empty note'
+  }, [note.content, search])
 
   const handleDragStart = useCallback(
     (event: React.DragEvent) => {
@@ -107,16 +128,16 @@ export default ({ storageId, note, active, basePathname }: NoteItemProps) => {
     >
       <Link href={href}>
         <div className='container'>
-          <div className='title'>{note.title}</div>
+          <div className='title'>
+            <HighlightText text={note.title} search={search} />
+          </div>
           {note.title.length === 0 && <div className='title'>No title</div>}
           <div className='date'>DD days ago</div>
           <div className='preview'>{contentPreview}</div>
           {note.tags.length > 0 && (
             <div className='tag-area'>
               {note.tags.map(tag => (
-                <span className='tag' key={tag}>
-                  {tag}
-                </span>
+                <HighlightText key={tag} text={tag} search={search} />
               ))}
             </div>
           )}

src/components/NotePage/NoteList/NoteList.tsx

@@ -1,4 +1,9 @@
-import React, { useCallback, KeyboardEvent, useRef } from 'react'
+import React, {
+  useCallback,
+  KeyboardEvent,
+  useRef,
+  ChangeEventHandler
+} from 'react'
 import NoteItem from './NoteItem'
 import { NoteDoc } from '../../../lib/db/types'
 import styled from '../../../lib/styled'
@@ -65,23 +70,34 @@ export const StyledNoteListContainer = styled.div`
 
 type NoteListProps = {
   storageId: string
+  currentNoteIndex: number
+  search: string
   notes: NoteDoc[]
   createNote: () => Promise<void>
-  basePathname: string
-  currentNoteIndex: number
-  navigateUp: () => void
+  setSearchInput: (input: string) => void
   navigateDown: () => void
+  navigateUp: () => void
+  basePathname: string
 }
 
 const NoteList = ({
   notes,
-  currentNoteIndex,
   createNote,
   storageId,
   basePathname,
-  navigateUp,
-  navigateDown
+  search,
+  currentNoteIndex,
+  setSearchInput,
+  navigateDown,
+  navigateUp
 }: NoteListProps) => {
+  const updateSearchInput: ChangeEventHandler<HTMLInputElement> = useCallback(
+    event => {
+      setSearchInput(event.target.value)
+    },
+    [setSearchInput]
+  )
+
   const handleListKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
@@ -101,15 +117,14 @@ const NoteList = ({
   const focusList = useCallback(() => {
     listRef.current!.focus()
   }, [])
-
   return (
     <StyledNoteListContainer>
       <div className='control'>
         <div className='searchInput'>
           <input
             className='input'
-            value={''}
-            onChange={() => {}}
+            value={search}
+            onChange={updateSearchInput}
             placeholder='Search Notes'
           />
           <Icon className='icon' path={mdiMagnify} />
@@ -129,11 +144,18 @@ const NoteList = ({
                 storageId={storageId}
                 basePathname={basePathname}
                 focusList={focusList}
+                search={search}
               />
             </li>
           )
         })}
-        {notes.length === 0 && ''}
+        {notes.length === 0 ? (
+          search.trim() === '' ? (
+            <li className='empty'>No notes</li>
+          ) : (
+            <li className='empty'>No notes could be found.</li>
+          )
+        ) : null}
       </ul>
     </StyledNoteListContainer>
   )

src/components/NotePage/NotePage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react'
+import React, { useMemo, useCallback, useState } from 'react'
 import NoteList from './NoteList'
 import styled from '../../lib/styled'
 import NoteDetail from './NoteDetail'
@@ -41,7 +41,8 @@ export default () => {
     if (storageId == null) return undefined
     return db.storageMap[storageId]
   }, [db.storageMap, storageId])
-
+  const router = useRouter()
+  const [search, setSearchInput] = useState<string>('')
   const currentPathnameWithoutNoteId = usePathnameWithoutNoteId()
 
   const notes = useMemo((): NoteDoc[] => {
@@ -78,20 +79,29 @@ export default () => {
     return []
   }, [currentStorage, routeParams])
 
-  const router = useRouter()
+  const filteredNotes = useMemo(() => {
+    if (search.trim() === '') return notes
+    const regex = new RegExp(search, 'i')
+    return notes.filter(
+      note =>
+        note.tags.join().match(regex) ||
+        note.title.match(regex) ||
+        note.content.match(regex)
+    )
+  }, [search, notes])
 
   const currentNoteIndex = useMemo(() => {
-    for (let i = 0; i < notes.length; i++) {
-      if (notes[i]._id === noteId) {
+    for (let i = 0; i < filteredNotes.length; i++) {
+      if (filteredNotes[i]._id === noteId) {
         return i
       }
     }
     return 0
-  }, [notes, noteId])
+  }, [filteredNotes, noteId])
 
   const currentNote = useMemo(() => {
-    return notes[currentNoteIndex]
-  }, [notes, currentNoteIndex])
+    return filteredNotes[currentNoteIndex]
+  }, [filteredNotes, currentNoteIndex])
 
   const createNote = useCallback(async () => {
     if (storageId == null || routeParams.name === 'storages.trashCan') {
@@ -108,22 +118,6 @@ export default () => {
     })
   }, [db, routeParams, storageId])
 
-  const naviagateUp = useCallback(() => {
-    if (currentNoteIndex > 0) {
-      router.push(
-        currentPathnameWithoutNoteId + `/${notes[currentNoteIndex - 1]._id}`
-      )
-    }
-  }, [notes, currentNoteIndex, router, currentPathnameWithoutNoteId])
-
-  const naviagateDown = useCallback(() => {
-    if (currentNoteIndex < notes.length - 1) {
-      router.push(
-        currentPathnameWithoutNoteId + `/${notes[currentNoteIndex + 1]._id}`
-      )
-    }
-  }, [notes, currentNoteIndex, router, currentPathnameWithoutNoteId])
-
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
   const updateNoteListWidth = useCallback(
     (leftWidth: number) => {
@@ -182,20 +176,40 @@ export default () => {
     [storageId, db]
   )
 
+  const navigateUp = useCallback(() => {
+    if (currentNoteIndex > 0) {
+      router.push(
+        currentPathnameWithoutNoteId +
+          `/${filteredNotes[currentNoteIndex - 1]._id}`
+      )
+    }
+  }, [filteredNotes, currentNoteIndex, router, currentPathnameWithoutNoteId])
+
+  const navigateDown = useCallback(() => {
+    if (currentNoteIndex < filteredNotes.length - 1) {
+      router.push(
+        currentPathnameWithoutNoteId +
+          `/${filteredNotes[currentNoteIndex + 1]._id}`
+      )
+    }
+  }, [filteredNotes, currentNoteIndex, router, currentPathnameWithoutNoteId])
+
   return storageId != null ? (
     <TwoPaneLayout
       style={{ height: '100%' }}
       defaultLeftWidth={generalStatus.noteListWidth}
       left={
         <FileDropZone style={{ height: '100%' }} onDrop={importDrop}>
           <NoteList
+            search={search}
+            setSearchInput={setSearchInput}
             storageId={storageId}
-            notes={notes}
+            notes={filteredNotes}
             createNote={createNote}
             basePathname={currentPathnameWithoutNoteId}
+            navigateDown={navigateDown}
+            navigateUp={navigateUp}
             currentNoteIndex={currentNoteIndex}
-            navigateUp={naviagateUp}
-            navigateDown={naviagateDown}
           />
         </FileDropZone>
       }

src/components/atoms/HighlightText.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react'
+import styled from '../../lib/styled'
+
+const HighlightContainer = styled.span`
+  .highlighted {
+    background: rgba(3, 197, 136, 0.6);
+  }
+`
+
+interface HighlightTextProps {
+  text: string
+  search: string
+}
+
+function HighlightText(props: HighlightTextProps) {
+  const { text, search } = props
+  return useMemo(() => {
+    if (search.trim() === '') return <>{text}</>
+    const searchRegex = new RegExp(`(${search})`, 'gi')
+    const parts = text.split(searchRegex)
+
+    return (
+      <HighlightContainer>
+        {parts.map((part, i) =>
+          part.toLowerCase() === search.toLowerCase() ? (
+            <span key={i} className='highlighted'>
+              {part}
+            </span>
+          ) : (
+            <React.Fragment key={i}>{part}</React.Fragment>
+          )
+        )}
+      </HighlightContainer>
+    )
+  }, [text, search])
+}
+
+export default HighlightText