✨ Allow searching by gitmoji description (#641)

* ✨ Allow searching by description

* 💬  Change the search placeholder

* 📸 Update snapshots

* 👌 Fix the test label

Co-authored-by: Vinícius Hoyer <contact@vhoyer.dev>

* 👌 Refactor duplicate .toLowercase, as suggested by @johannchopin

* 👌 Change the search placeholder as suggested by @johannchopin

Co-authored-by: Vinícius Hoyer <contact@vhoyer.dev>

src/__tests__/__snapshots__/pages.spec.js.snap

@@ -473,7 +473,7 @@ exports[`Pages Index should render the page 1`] = `
           className="searchInput"
           name="searchInput"
           onChange={[Function]}
-          placeholder="Search a Gitmoji by :code:"
+          placeholder="Search your gitmoji..."
           type="text"
           value={null}
         />

src/components/GitmojiList/Toolbar/index.js

@@ -14,7 +14,7 @@ const Toolbar = (props: Props): Element<'div'> => (
       className={styles.searchInput}
       name="searchInput"
       onChange={(event) => props.setSearchInput(event.target.value)}
-      placeholder="Search a Gitmoji by :code:"
+      placeholder="Search your gitmoji..."
       type="text"
       value={props.searchInput}
     />

src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap

@@ -18,7 +18,7 @@ exports[`GitmojiList should render the component 1`] = `
         className="searchInput"
         name="searchInput"
         onChange={[Function]}
-        placeholder="Search a Gitmoji by :code:"
+        placeholder="Search your gitmoji..."
         type="text"
         value={null}
       />

src/components/GitmojiList/__tests__/gitmojiList.spec.js

@@ -9,15 +9,28 @@ describe('GitmojiList', () => {
     expect(wrapper).toMatchSnapshot()
   })
 
-  describe('when user search the bug gitmoji', () => {
-    it('should filter the GitmojiList and find the bug gitmoji', () => {
+  describe('when user search the fire gitmoji', () => {
+    it('should filter the GitmojiList and find the fire gitmoji by code', () => {
       const wrapper = renderer.create(<GitmojiList {...stubs.props} />)
       const instance = wrapper.root
 
       renderer.act(() => {
         instance
           .findByType('input')
-          .props.onChange({ target: { value: 'Bug' } })
+          .props.onChange({ target: { value: 'Fire' } })
+      })
+
+      expect(instance.findAllByType('article').length).toEqual(1)
+    })
+
+    it('should filter the GitmojiList and find the fire gitmoji by description', () => {
+      const wrapper = renderer.create(<GitmojiList {...stubs.props} />)
+      const instance = wrapper.root
+
+      renderer.act(() => {
+        instance
+          .findByType('input')
+          .props.onChange({ target: { value: 'remove' } })
       })
 
       expect(instance.findAllByType('article').length).toEqual(1)

src/components/GitmojiList/index.js

@@ -18,9 +18,14 @@ type Props = {
 const GitmojiList = (props: Props): Element<'div'> => {
   const [searchInput, setSearchInput] = React.useState(null)
   const gitmojis = searchInput
-    ? props.gitmojis.filter((gitmoji) =>
-        gitmoji.code.includes(searchInput.toLowerCase())
-      )
+    ? props.gitmojis.filter(({ code, description }) => {
+        const lowerCasedSearch = searchInput.toLowerCase()
+
+        return (
+          code.includes(lowerCasedSearch) ||
+          description.toLowerCase().includes(lowerCasedSearch)
+        )
+      })
     : props.gitmojis
 
   React.useEffect(() => {