Feature: Contact Filtering in Header (Fragment Communication Example)

packages/fragment-contacts/app/Contacts/index.js

@@ -8,21 +8,37 @@ import ContactPropType from '../PropTypes/Contact'
 
 import './styles.scss'
 
-const withContacts = compose(
+const withLogic = compose(
+  withState('filter', 'setFilter', ''),
   withState('contacts', 'setContacts', []),
   didSubscribe(props => {
-    fetch('https://randomuser.me/api/?results=20')
+    fetch('https://randomuser.me/api/?results=30')
       .then(response => response.json())
       .then(data => data.results)
       .then(props.setContacts)
+
+    const setFilter = event =>
+      props.setFilter(event.detail.value)
+
+    window.addEventListener('fragment-header::contactsFilterChange', setFilter)
+
+    return () => window.removeEventListener('fragment-header::contactsFilterChange', setFilter)  
   })
-);
+)
+
+const byName = filter => contact => {
+  const fullname = `${contact.name.first} ${contact.name.last}`
+  return fullname.toLowerCase().includes(filter.toLowerCase())
+}
 
 const Contacts = ({
+  filter,
   contacts
 }) => (
   <div className="contacts">
-    {contacts.map((contact, index) => (
+    {contacts
+    .filter(byName(filter))
+    .map((contact, index) => (
       <Contact
         key={index}
         contact={contact}
@@ -32,11 +48,13 @@ const Contacts = ({
 )
 
 Contacts.propTypes = {
+  filter: PropTypes.string,
   contacts: PropTypes.arrayOf(ContactPropType)
 }
 
 Contacts.defaultProps = {
+  filter: '',
   contacts: []
 }
 
-export default attach(withContacts)(Contacts)
+export default attach(withLogic)(Contacts)

packages/fragment-header/app/ContactsFilterInput/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Input from '../Input'
+
+const ContactsFilterInput = () => (
+  <Input
+    placeholder="Filter contacts"
+    onChange={event => {
+      const externalEvent = new CustomEvent('fragment-header::contactsFilterChange', {
+        detail: {
+          value: event.target.value
+        }
+      })
+
+      window.dispatchEvent(externalEvent)
+    }}
+  />
+)
+
+export default ContactsFilterInput

packages/fragment-header/app/Header/index.js

@@ -5,11 +5,12 @@ import { attach } from 'proppy-react'
 
 import Logo from '../Logo'
 import NavItem from '../NavItem'
+import ContactsFilterInput from '../ContactsFilterInput'
 
 import './styles.scss'
 
 const withHeaderState = compose(
-  withState('active', 'setActive', 1),
+  withState('active', 'setActive', 0),
   withProps({ items: [ 0, 1, 2 ,3 ] })
 )
 
@@ -19,17 +20,22 @@ const Header = ({
   setActive
 }) => (
   <div className="header">
-    <Logo/>
-    {
-      items.map((item, index) => (
-        <NavItem
-          key={index}
-          index={index}
-          active={index === active}
-          onClick={setActive}
-        />
-      ))
-    }
+    <div className="header__left">
+      <Logo/>
+      {
+        items.map((_item, index) => (
+          <NavItem
+            key={index}
+            index={index}
+            active={index === active}
+            onClick={setActive}
+          />
+        ))
+      }
+    </div>
+    <div className="header__right">
+      <ContactsFilterInput/>
+    </div>
   </div>
 )
 

packages/fragment-header/app/Header/styles.scss

@@ -10,4 +10,11 @@
     height: 80px;
     padding: 0 30px;
     background: #5e81ac;
-}
+    justify-content: space-between;
+
+    &__left,
+    &__right {
+        display: flex;
+        align-items: center;
+    }
+}

packages/fragment-header/app/Input/index.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import './styles.scss'
+
+const Input = props => <input {...props} className="Header__Input"/>
+
+export default Input

packages/fragment-header/app/Input/styles.scss

@@ -0,0 +1,13 @@
+.Header__Input {
+    height: 2rem;
+    background: transparent;
+    border: none;
+    border-bottom: .1rem solid #81a1c1;
+    width: 250px;
+    outline: none;
+    color: lighten(#81a1c1, 10%);
+
+    &::-webkit-input-placeholder {
+        color: lighten(#81a1c1, 10%);
+    }
+}