✨ Add gitmoji search (#635)

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

@@ -457,12 +457,28 @@ exports[`Pages Index should render the page 1`] = `
     />
   </div>
   <div
-    className="row center-xs"
+    className="row"
     id="gitmoji-list"
   >
     <style>
       .adhesive-bandage { background-color: #fbcfb7 }.alembic { background-color: #7f39fb }.alien { background-color: #c5e763 }.ambulance { background-color: #fb584a }.animation { background-color: #ffdb3a }.arrow-down { background-color: #ef5350 }.arrow-up { background-color: #00e676 }.art { background-color: #ff7281 }.beers { background-color: #fbb64b }.bento { background-color: #ff5864 }.bookmark { background-color: #80deea }.boom { background-color: #f94f28 }.bug { background-color: #8cd842 }.building-construction { background-color: #ffe55f }.bulb { background-color: #ffce49 }.busts-in-silhouette { background-color: #ffce49 }.camera-flash { background-color: #00a9f0 }.card-file-box { background-color: #c5e763 }.chart-with-upwards-trend { background-color: #cedae6 }.children-crossing { background-color: #ffce49 }.clown-face { background-color: #ff7281 }.construction-worker { background-color: #64b5f6 }.construction { background-color: #ffb74d }.egg { background-color: #77e856 }.fire { background-color: #ff9d44 }.globe-with-meridians { background-color: #e7f4ff }.goal-net { background-color: #c7cb12 }.green-heart { background-color: #c5e763 }.hammer { background-color: #ffc400 }.heavy-minus-sign { background-color: #ef5350 }.heavy-plus-sign { background-color: #00e676 }.iphone { background-color: #40c4ff }.label { background-color: #cb63e6 }.lipstick { background-color: #80deea }.lock { background-color: #ffce49 }.loud-sound { background-color: #23b4d2 }.mag { background-color: #ffe55f }.memo { background-color: #00e676 }.mute { background-color: #e6ebef }.ok-hand { background-color: #c5e763 }.package { background-color: #fdd0ae }.page-facing-up { background-color: #d9e3e8 }.passport-control { background-color: #4dc6dc }.pencil { background-color: #ffce49 }.pencil2 { background-color: #ffce49 }.poop { background-color: #a78674 }.pushpin { background-color: #39c2f1 }.recycle { background-color: #77e856 }.rewind { background-color: #56d1d8 }.rocket { background-color: #00a9f0 }.rotating-light { background-color: #536dfe }.see-no-evil { background-color: #8bdfe7 }.seedling { background-color: #c5e763 }.sparkles { background-color: #ffe55f }.speech-balloon { background-color: #cedae6 }.tada { background-color: #f74d5f }.triangular-flag-on-post { background-color: #ffce49 }.truck { background-color: #ef584a }.twisted-rightwards-arrows { background-color: #56d1d8 }.wastebasket { background-color: #d9e3e8 }.wheelchair { background-color: #00b1fb }.white-check-mark { background-color: #77e856 }.wrench { background-color: #ffc400 }.zap { background-color: #40c4ff }
     </style>
+    <div
+      className="col-xs-12"
+    >
+      <div
+        className="container"
+      >
+        <input
+          className="searchInput"
+          name="searchInput"
+          onChange={[Function]}
+          placeholder="Search a Gitmoji by :code:"
+          type="text"
+          value={null}
+        />
+      </div>
+    </div>
     <article
       className="emoji col-xs-12 col-sm-6 col-md-3"
     >

src/components/GitmojiList/Gitmoji/index.js

@@ -1,4 +1,5 @@
-import React from 'react'
+// @flow
+import React, { type Element } from 'react'
 
 import styles from './styles.module.css'
 
@@ -9,7 +10,7 @@ type Props = {
   name: string,
 }
 
-const Gitmoji = (props: Props) => (
+const Gitmoji = (props: Props): Element<'article'> => (
   <article className={`${styles.emoji} col-xs-12 col-sm-6 col-md-3`}>
     <div className={styles.card}>
       <header className={`${props.name} ${styles.cardHeader}`}>

src/components/GitmojiList/Toolbar/index.js

@@ -0,0 +1,24 @@
+// @flow
+import React, { type Element } from 'react'
+
+import styles from './styles.module.css'
+
+type Props = {
+  searchInput: ?string,
+  setSearchInput: Function,
+}
+
+const Toolbar = (props: Props): Element<'div'> => (
+  <div className={styles.container}>
+    <input
+      className={styles.searchInput}
+      name="searchInput"
+      onChange={(event) => props.setSearchInput(event.target.value)}
+      placeholder="Search a Gitmoji by :code:"
+      type="text"
+      value={props.searchInput}
+    />
+  </div>
+)
+
+export default Toolbar

src/components/GitmojiList/Toolbar/styles.module.css

@@ -0,0 +1,15 @@
+.searchInput {
+  border-radius: 4px;
+  border: 0;
+  box-shadow: 0 2px 4px 0 var(--cardShadow);
+  flex: 1;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1.5rem;
+  outline: none;
+  padding: 1rem;
+}
+
+.container {
+  display: flex;
+}

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

@@ -2,12 +2,28 @@
 
 exports[`GitmojiList should render the component 1`] = `
 <div
-  className="row center-xs"
+  className="row"
   id="gitmoji-list"
 >
   <style>
     .adhesive-bandage { background-color: #fbcfb7 }.alembic { background-color: #7f39fb }.alien { background-color: #c5e763 }.ambulance { background-color: #fb584a }.animation { background-color: #ffdb3a }.arrow-down { background-color: #ef5350 }.arrow-up { background-color: #00e676 }.art { background-color: #ff7281 }.beers { background-color: #fbb64b }.bento { background-color: #ff5864 }.bookmark { background-color: #80deea }.boom { background-color: #f94f28 }.bug { background-color: #8cd842 }.building-construction { background-color: #ffe55f }.bulb { background-color: #ffce49 }.busts-in-silhouette { background-color: #ffce49 }.camera-flash { background-color: #00a9f0 }.card-file-box { background-color: #c5e763 }.chart-with-upwards-trend { background-color: #cedae6 }.children-crossing { background-color: #ffce49 }.clown-face { background-color: #ff7281 }.construction-worker { background-color: #64b5f6 }.construction { background-color: #ffb74d }.egg { background-color: #77e856 }.fire { background-color: #ff9d44 }.globe-with-meridians { background-color: #e7f4ff }.goal-net { background-color: #c7cb12 }.green-heart { background-color: #c5e763 }.hammer { background-color: #ffc400 }.heavy-minus-sign { background-color: #ef5350 }.heavy-plus-sign { background-color: #00e676 }.iphone { background-color: #40c4ff }.label { background-color: #cb63e6 }.lipstick { background-color: #80deea }.lock { background-color: #ffce49 }.loud-sound { background-color: #23b4d2 }.mag { background-color: #ffe55f }.memo { background-color: #00e676 }.mute { background-color: #e6ebef }.ok-hand { background-color: #c5e763 }.package { background-color: #fdd0ae }.page-facing-up { background-color: #d9e3e8 }.passport-control { background-color: #4dc6dc }.pencil { background-color: #ffce49 }.pencil2 { background-color: #ffce49 }.poop { background-color: #a78674 }.pushpin { background-color: #39c2f1 }.recycle { background-color: #77e856 }.rewind { background-color: #56d1d8 }.rocket { background-color: #00a9f0 }.rotating-light { background-color: #536dfe }.see-no-evil { background-color: #8bdfe7 }.seedling { background-color: #c5e763 }.sparkles { background-color: #ffe55f }.speech-balloon { background-color: #cedae6 }.tada { background-color: #f74d5f }.triangular-flag-on-post { background-color: #ffce49 }.truck { background-color: #ef584a }.twisted-rightwards-arrows { background-color: #56d1d8 }.wastebasket { background-color: #d9e3e8 }.wheelchair { background-color: #00b1fb }.white-check-mark { background-color: #77e856 }.wrench { background-color: #ffc400 }.zap { background-color: #40c4ff }
   </style>
+  <div
+    className="col-xs-12"
+  >
+    <div
+      className="container"
+    >
+      <input
+        className="searchInput"
+        name="searchInput"
+        onChange={[Function]}
+        placeholder="Search a Gitmoji by :code:"
+        type="text"
+        value={null}
+      />
+    </div>
+  </div>
   <article
     className="emoji col-xs-12 col-sm-6 col-md-3"
   >

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

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

src/components/GitmojiList/index.js

@@ -3,6 +3,7 @@ import React, { type Element } from 'react'
 import Clipboard from 'clipboard'
 
 import Gitmoji from './Gitmoji'
+import Toolbar from './Toolbar'
 import emojiColorsMap from './emojiColorsMap'
 
 type Props = {
@@ -15,6 +16,13 @@ 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
+
   React.useEffect(() => {
     const clipboard = new Clipboard(
       '.gitmoji-clipboard-emoji, .gitmoji-clipboard-code'
@@ -40,7 +48,7 @@ const GitmojiList = (props: Props): Element<'div'> => {
   }, [])
 
   return (
-    <div className="row center-xs" id="gitmoji-list">
+    <div className="row" id="gitmoji-list">
       <style>
         {Object.entries(emojiColorsMap)
           .map(
@@ -49,15 +57,23 @@ const GitmojiList = (props: Props): Element<'div'> => {
           .reduce((memo, value) => memo + value, '')}
       </style>
 
-      {props.gitmojis.map((gitmoji, index) => (
-        <Gitmoji
-          code={gitmoji.code}
-          description={gitmoji.description}
-          emoji={gitmoji.emoji}
-          key={index}
-          name={gitmoji.name}
-        />
-      ))}
+      <div className="col-xs-12">
+        <Toolbar searchInput={searchInput} setSearchInput={setSearchInput} />
+      </div>
+
+      {gitmojis.length === 0 ? (
+        <h2>No gitmojis found for search: {searchInput}</h2>
+      ) : (
+        gitmojis.map((gitmoji, index) => (
+          <Gitmoji
+            code={gitmoji.code}
+            description={gitmoji.description}
+            emoji={gitmoji.emoji}
+            key={index}
+            name={gitmoji.name}
+          />
+        ))
+      )}
     </div>
   )
 }