Feature Request: Search box above section list octokatherine#277

Add new SectionFilter component to filter slugs based on section names
Update SectionsColumn to display filtered sections
Add units tests for SectionFilter component

components/SectionFilter.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+
+const SectionFilter = ({ sectionSlugs, getTemplate, filterSections }) => {
+  const [section, setSection] = useState('')
+
+  const getAutoCompleteResults = (section) => {
+    const suggestedSlugs = sectionSlugs.filter((slug) => {
+      return getTemplate(slug).name.toLowerCase().includes(section.toLowerCase())
+    })
+
+    return suggestedSlugs.length ? suggestedSlugs : [undefined]
+  }
+
+  useEffect(() => {
+    if (!section) {
+      filterSections([])
+      return
+    }
+
+    const suggestedSlugs = getAutoCompleteResults(section)
+
+    filterSections(suggestedSlugs)
+  }, [section])
+
+  return (
+    <input
+      type="text"
+      placeholder="Search for a section"
+      className="mb-3 space-y-3 w-full py-2 pl-3 pr-6 bg-white dark:bg-gray-200 rounded-md shadow cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
+      data-testid="slugs-filter"
+      value={section}
+      onChange={(e) => setSection(e.target.value)}
+    />
+  )
+}
+
+export default SectionFilter

components/SectionsColumn.js

@@ -15,6 +15,7 @@ import Image from 'next/image'
 import useLocalStorage from '../hooks/useLocalStorage'
 import { SortableItem } from './SortableItem'
 import CustomSection from './CustomSection'
+import SectionFilter from './SectionFilter'
 
 const kebabCaseToTitleCase = (str) => {
   return str
@@ -50,6 +51,7 @@ export const SectionsColumn = ({
   const [addAction, setAddAction] = useState(false)
   const [currentSlugList, setCurrentSlugList] = useState([])
   const [slugsFromPreviousSession, setSlugsFromPreviousSession] = useState([])
+  const [filteredSlugs, setFilteredSlugs] = useState([])
   const { saveBackup, deleteBackup } = useLocalStorage()
 
   useEffect(() => {
@@ -163,6 +165,10 @@ export const SectionsColumn = ({
 
   let alphabetizedSectionSlugs = sectionSlugs.sort()
 
+  const filterSections = (suggestedSlugs) => {
+    setFilteredSlugs(suggestedSlugs)
+  }
+
   return (
     <div className="sections w-80">
       <h3 className="px-1 text-sm font-medium border-b-2 border-transparent text-emerald-500 whitespace-nowrap focus:outline-none">
@@ -235,29 +241,47 @@ export const SectionsColumn = ({
           setAddAction={setAddAction}
           setTemplates={setTemplates}
         />
+        <SectionFilter
+          sectionSlugs={sectionSlugs}
+          getTemplate={getTemplate}
+          filterSections={filterSections}
+        />
         <ul className="mb-12 space-y-3">
           {
             (pageRefreshed && slugsFromPreviousSession.indexOf('title-and-description') == -1
               ? sectionSlugs.push('title-and-description')
               : ' ',
-            (alphabetizedSectionSlugs = sectionSlugs.sort()),
+            (alphabetizedSectionSlugs = !filteredSlugs.length
+              ? sectionSlugs.sort()
+              : filteredSlugs.sort()),
             pageRefreshed || addAction
               ? (alphabetizedSectionSlugs = [...new Set(alphabetizedSectionSlugs)])
               : ' ',
             alphabetizedSectionSlugs.map((s) => {
-              const template = getTemplate(s)
-              if (template) {
+              if (s === undefined) {
                 return (
-                  <li key={s}>
-                    <button
-                      className="flex items-center block w-full h-full py-2 pl-3 pr-6 bg-white dark:bg-gray-200 rounded-md shadow cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
-                      type="button"
-                      onClick={(e) => onAddSection(e, s)}
-                    >
-                      <span>{template.name}</span>
-                    </button>
-                  </li>
+                  <h4
+                    className="mb-3 text-xs leading-6 text-gray-900 dark:text-gray-300"
+                    key="unavailable-section"
+                  >
+                    The section you're looking for is unavailable
+                  </h4>
                 )
+              } else {
+                const template = getTemplate(s)
+                if (template) {
+                  return (
+                    <li key={s}>
+                      <button
+                        className="flex items-center block w-full h-full py-2 pl-3 pr-6 bg-white dark:bg-gray-200 rounded-md shadow cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
+                        type="button"
+                        onClick={(e) => onAddSection(e, s)}
+                      >
+                        <span>{template.name}</span>
+                      </button>
+                    </li>
+                  )
+                }
               }
             }))
           }

components/__tests__/SectionFilter.test.js

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import SectionFilter from '../SectionFilter'
+
+import { en_EN } from '../../data/section-templates-en_EN'
+
+jest.mock('next-i18next', () => ({
+  useTranslation: () => ({ t: jest.fn() }),
+}))
+
+describe('<SectionFilter />', () => {
+  const props = {
+    sectionSlugs: ['api', 'appendix'],
+    getTemplate: (slug) => en_EN.find((t) => t.slug === slug),
+    filterSections: jest.fn(),
+  }
+
+  it('should render', () => {
+    const { container } = render(<SectionFilter {...props} />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should call the callBack function with suggested slugs', () => {
+    render(<SectionFilter {...props} />)
+
+    const input = screen.getByTestId('slugs-filter')
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'text')
+    expect(input).toHaveAttribute('placeholder', 'Search for a section')
+
+    userEvent.type(input, 'app')
+    expect(screen.getByTestId('slugs-filter')).toHaveValue('app')
+
+    expect(props.filterSections).toHaveBeenCalledTimes(5)
+    expect(props.filterSections).toHaveBeenNthCalledWith(1, [])
+    expect(props.filterSections).toHaveBeenNthCalledWith(2, [])
+    expect(props.filterSections).toHaveBeenNthCalledWith(3, ['api', 'appendix'])
+    expect(props.filterSections).toHaveBeenNthCalledWith(4, ['api', 'appendix'])
+    expect(props.filterSections).toHaveBeenNthCalledWith(5, ['appendix'])
+  })
+})