From a869e5357e93516dc06eca559f1a2d657a206c01 Mon Sep 17 00:00:00 2001
From: ilyasmez <ilyas.amezouar@homeday.de>
Date: Tue, 8 Dec 2020 19:26:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Allow=20searching=20by=20gitmoji=20?=
 =?UTF-8?q?description=20(#641)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Allow searching by description

* 💬  Change the search placeholder

* 📸 Update snapshots

* :ok_hand: Fix the test label

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

* :ok_hand: Refactor duplicate .toLowercase, as suggested by @johannchopin

* :ok_hand: Change the search placeholder as suggested by @johannchopin

Co-authored-by: Vinícius Hoyer <contact@vhoyer.dev>
---
 .../__snapshots__/pages.spec.js.snap          |  2 +-
 src/components/GitmojiList/Toolbar/index.js   |  2 +-
 .../__snapshots__/gitmojiList.spec.js.snap    |  2 +-
 .../GitmojiList/__tests__/gitmojiList.spec.js | 19 ++++++++++++++++---
 src/components/GitmojiList/index.js           | 11 ++++++++---
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/__snapshots__/pages.spec.js.snap b/src/__tests__/__snapshots__/pages.spec.js.snap
index 74b52f5..663cd13 100644
--- a/src/__tests__/__snapshots__/pages.spec.js.snap
+++ b/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}
         />
diff --git a/src/components/GitmojiList/Toolbar/index.js b/src/components/GitmojiList/Toolbar/index.js
index bb3c638..b234d1c 100644
--- a/src/components/GitmojiList/Toolbar/index.js
+++ b/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}
     />
diff --git a/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap b/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
index 3d61f32..dc7ec75 100644
--- a/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
+++ b/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}
       />
diff --git a/src/components/GitmojiList/__tests__/gitmojiList.spec.js b/src/components/GitmojiList/__tests__/gitmojiList.spec.js
index ad937e2..43e001c 100644
--- a/src/components/GitmojiList/__tests__/gitmojiList.spec.js
+++ b/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)
diff --git a/src/components/GitmojiList/index.js b/src/components/GitmojiList/index.js
index 6d21aee..0d46f15 100644
--- a/src/components/GitmojiList/index.js
+++ b/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(() => {