Updates based on finalized spreadsheet format

chawes13 · May 28, 2020 · 83a6438 · 83a6438
1 parent eb6ca44
commit 83a6438
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 35 deletions.
diff --git a/src/js/config.js b/src/js/config.js
@@ -3,3 +3,5 @@
 export function isProduction() {
   return process.env.NODE_ENV === 'production'
 }
+
+export const DEFAULT_GROUP_NAME = 'None'
diff --git a/src/js/main/contacts/components/FacetedSearch/reducer.js b/src/js/main/contacts/components/FacetedSearch/reducer.js
@@ -56,11 +56,12 @@ function reducer(state, action) {
     }
     case 'initialize-searchable': {
       const grouped = groupContacts(action.payload, state.sortOption)
+      const sorted = sortContactGroups(grouped, state.sortOption)
       return {
         ...state,
         searchableContactGroups: grouped,
         resultGroups: performFacetedSearch({
-          contactGroups: grouped,
+          contactGroups: sorted,
           query: state.searchQuery,
           filter: state.filterOption,
         }),

diff --git a/src/js/main/contacts/components/FacetedSearch/utils.js b/src/js/main/contacts/components/FacetedSearch/utils.js
@@ -1,23 +1,26 @@
 import { trim, includes, toLower } from 'lodash'
 import { filterObjectValues } from 'utils'
+import { DEFAULT_GROUP_NAME } from 'config'
 
 export function performFacetedSearch({ query, filter, contactGroups }) {
   const normalizedQuery = trim(toLower(query))
   return filterObjectValues(contactGroups, (contact) => {
     return (
       (filter === '' || contact.shift === filter) &&
-      (query === '' ||
-        includes(
-          toLower(`${contact.firstName} ${contact.lastName}`),
-          normalizedQuery
-        ))
+      (query === '' || includes(toLower(contact.name), normalizedQuery))
     )
   })
 }
 
 export function sortContactGroups(contactGroups) {
   return Object.keys(contactGroups)
-    .sort()
+    .sort((a, b) => {
+      // Push default group to very end
+      if (a === DEFAULT_GROUP_NAME) return 1
+      if (b === DEFAULT_GROUP_NAME) return -1
+      if (a === b) return 0
+      return a.toUpperCase() > b.toUpperCase() ? 1 : -1
+    })
     .reduce((acc, key) => {
       acc[key] = contactGroups[key]
       return acc

diff --git a/src/js/main/contacts/views/Contacts.js b/src/js/main/contacts/views/Contacts.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 import * as Types from 'types'
 import { api } from 'api'
 import { Spinner } from '@launchpadlab/lp-components'
 import { EmptyState } from 'components'
 import { ContactCard, FacetedSearch } from '../components'
-import { isEmpty, map, sortBy } from 'lodash'
+import { isEmpty, map, compact } from 'lodash'
 import { getDataFromCache } from 'utils'
 
 const propTypes = {}
@@ -19,6 +19,10 @@ function fetchFilterOptions() {
   return api.get('/contacts/filter-options')
 }
 
+function getContactDetails(contact) {
+  return compact([contact.home, contact.shift]).join(' - ')
+}
+
 function Contacts() {
   const [state, setState] = useState(Types.LoadingStates.LOADING)
   const [contacts, setContacts] = useState(null)
@@ -48,10 +52,6 @@ function Contacts() {
     fetchFilterOptions().then(setFilterOptions)
   }, [])
 
-  const sortedContacts = useMemo(() => {
-    return sortBy(contacts, 'lastName')
-  }, [contacts])
-
   if (state === Types.LoadingStates.LOADING) return <Spinner />
   if (state === Types.LoadingStates.FAILURE)
     return <EmptyState className="error" message="Oops! Something went wrong" />
@@ -60,7 +60,7 @@ function Contacts() {
     <div>
       <FacetedSearch
         label="search"
-        initialResults={sortedContacts}
+        initialResults={contacts}
         filterOptions={filterOptions}
       >
         {(resultGroups) => {
@@ -72,21 +72,18 @@ function Contacts() {
                 <div key={groupName} className="contact-blocks">
                   <h3>{groupName}</h3>
                   <ul>
-                    {results.map((contact) => (
-                      <li
-                        key={
-                          contact.firstName +
-                          contact.lastName +
-                          contact.phoneNumber
-                        }
-                      >
-                        <ContactCard
-                          name={`${contact.firstName} ${contact.lastName}`}
-                          phoneNumber={contact.phoneNumber}
-                          details={`${contact.house} - ${contact.shift}`}
-                        />
-                      </li>
-                    ))}
+                    {results.map(
+                      (contact) =>
+                        contact.phoneNumber && (
+                          <li key={contact.name + contact.phoneNumber}>
+                            <ContactCard
+                              name={contact.name}
+                              phoneNumber={contact.phoneNumber}
+                              details={getContactDetails(contact)}
+                            />
+                          </li>
+                        )
+                    )}
                   </ul>
                 </div>
               ))}

diff --git a/src/js/main/types.js b/src/js/main/types.js
@@ -22,5 +22,5 @@ export const SearchStates = {
 
 export const CustomSortOptions = {
   NAME: 'name',
-  HOUSE: 'house',
+  HOME: 'home',
 }
diff --git a/src/js/utils/groupContactsBy.js b/src/js/utils/groupContactsBy.js
@@ -1,8 +1,14 @@
-import { isArray, groupBy, flatMap } from 'lodash'
+import { isArray, groupBy, flatMap, mapKeys } from 'lodash'
+import { DEFAULT_GROUP_NAME } from 'config'
 
 function groupContactsBy(collection, option) {
   const contactsArray = getContacts(collection)
-  return groupBy(contactsArray, option)
+  const groupedContacts = groupBy(contactsArray, option)
+
+  return mapKeys(groupedContacts, (value, key) => {
+    if (!key) return DEFAULT_GROUP_NAME
+    return key
+  })
 }
 
 // ----- PRIVATE -----

diff --git a/src/js/utils/groupContactsByName.js b/src/js/utils/groupContactsByName.js
@@ -3,7 +3,7 @@ import groupContactsBy from './groupContactsBy'
 
 function groupContactsByName(collection) {
   return groupContactsBy(collection, (contact) => {
-    const letter = contact.lastName?.charAt(0) || contact.firstName.charAt(0)
+    const letter = contact.name?.charAt(0)
     return toUpper(letter)
   })
 }

diff --git a/src/scss/components/_empty-state.scss b/src/scss/components/_empty-state.scss
@@ -3,7 +3,6 @@ Empty State
 -----------------------*/
 
 .empty-state{
-	background-color: $grey-light;
 	@include center;
 	@include rem(padding, 30px);
 	max-width: 600px;
@@ -16,4 +15,4 @@ Empty State
 		@include rem(padding, 12px);
 		max-width: 50px;
 	}
-}
+}