refactoring: APAing summary.

client/src/components/ContactsMultiSelect.js

@@ -0,0 +1,82 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { omit } from 'lodash';
+import MultiSelect from 'components/MultiSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function ContactsMultiSelect({
+  contacts,
+  defaultText = <T id={'all_customers'} />,
+  buttonProps,
+
+  onCustomerSelected: onContactSelected,
+  ...selectProps
+}) {
+  const [selectedContacts, setSelectedContacts] = useState({});
+
+  const isContactSelect = useCallback(
+    (id) => typeof selectedContacts[id] !== 'undefined',
+    [selectedContacts],
+  );
+
+  const contactRenderer = useCallback(
+    (contact, { handleClick }) => (
+      <MenuItem
+        icon={isContactSelect(contact.id) ? 'tick' : 'blank'}
+        text={contact.display_name}
+        key={contact.id}
+        onClick={handleClick}
+      />
+    ),
+    [isContactSelect],
+  );
+
+  const countSelected = useMemo(() => Object.values(selectedContacts).length, [
+    selectedContacts,
+  ]);
+
+  const onContactSelect = useCallback(
+    ({ id }) => {
+      const selected = {
+        ...(isContactSelect(id)
+          ? {
+              ...omit(selectedContacts, [id]),
+            }
+          : {
+              ...selectedContacts,
+              [id]: true,
+            }),
+      };
+      setSelectedContacts({ ...selected });
+      onContactSelected && onContactSelected(selected);
+    },
+    [
+      setSelectedContacts,
+      selectedContacts,
+      isContactSelect,
+      onContactSelected,
+    ],
+  );
+
+  return (
+    <MultiSelect
+      items={contacts}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={contactRenderer}
+      popoverProps={{ minimal: true }}
+      filterable={true}
+      onItemSelect={onContactSelect}
+    >
+      <Button
+        text={
+          countSelected === 0 ? (
+            defaultText
+          ) : (
+            <T id={'selected_customers'} values={{ count: countSelected }} />
+          )
+        }
+        {...buttonProps}
+      />
+    </MultiSelect>
+  );
+}