cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/ContactsList/helpers.js

@@ -0,0 +1,132 @@
+import get from 'lodash/get'
+
+export function buildLastNameFirst(contact) {
+  const givenName =
+    contact.name && contact.name.givenName
+      ? contact.name.givenName.toUpperCase()
+      : ''
+  const familyName =
+    contact.name && contact.name.familyName
+      ? contact.name.familyName.toUpperCase()
+      : ''
+
+  if (!givenName && !familyName && contact.fullname) {
+    return contact.fullname.toUpperCase().trim()
+  } else {
+    return `${familyName} ${givenName}`.trim()
+  }
+}
+
+export const sortLastNameFirst = (contact, comparedContact) => {
+  const nameA = buildLastNameFirst(contact)
+  const nameB = buildLastNameFirst(comparedContact)
+  return nameA.localeCompare(nameB)
+}
+
+export const sortContacts = contacts => contacts.sort(sortLastNameFirst)
+
+/**
+ * Build header for a contact (first letter of last name)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+const makeHeader = (contact, t) => {
+  if (contact.me) return t('me')
+
+  const name = buildLastNameFirst(contact)
+  return name[0] || t('empty')
+}
+
+/**
+ * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
+ * @param {object} contact
+ * @param {function} t translation function
+ * @returns {string} header
+ */
+const makeHeaderForIndexedContacts = (contact, t) => {
+  if (contact.me) return t('me')
+  if (contact.cozyMetadata?.favorite) return t('favorite')
+
+  const index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '')
+  const hasIndex = index !== null && index.length > 0
+
+  if (hasIndex) {
+    const firstLetterWithoutAccent = index[0]
+      .normalize('NFD')
+      .replace(/\p{Diacritic}/gu, '')
+    return firstLetterWithoutAccent
+  }
+
+  return t('empty')
+}
+
+/**
+ * @typedef {Object.<string, Object>} CategorizedContactsResult
+ */
+
+/**
+ * Categorize contacts by first letter of last name
+ * Expl.: all contacts with A as first letter will be in A category
+ * @param {object[]} contacts io.cozy.contacts documents
+ * @param {function} t translation function
+ * @returns {CategorizedContactsResult} Categorized contacts
+ */
+export const categorizeContacts = (contacts, t) =>
+  contacts.reduce((acc, contact) => {
+    const header = makeHeader(contact, t)
+    acc[header] = acc[header] || []
+    acc[header].push(contact)
+    return acc
+  }, {})
+
+/**
+ * Sort headers (first letter of last name) alphabetically and put 'me' and 'empty' first
+ * @param {CategorizedContactsResult} categorized categorized contacts
+ * @param {function} t translation function
+ * @returns {string[]}
+ */
+export const sortHeaders = (categorized, t) => {
+  const headers = Object.keys(categorized)
+  const notEmptyAndMyselfHeaders = headers.filter(
+    header => header !== t('empty') && header !== t('me')
+  )
+  const notEmptyAndMyselfSorted = notEmptyAndMyselfHeaders.slice().sort()
+
+  if (headers.length === notEmptyAndMyselfHeaders.length) {
+    return notEmptyAndMyselfSorted
+  }
+
+  const headersSorted = []
+  if (headers.includes(t('me'))) {
+    headersSorted.push(t('me'))
+  }
+  if (headers.includes(t('empty'))) {
+    headersSorted.push(t('empty'))
+  }
+
+  return headersSorted.concat(notEmptyAndMyselfSorted)
+}
+
+/**
+ * Counts how many contacts are categorized by first letter and store it in `groupCounts`
+ * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
+ * Also store first letters and store them in `groupLabels`
+ * @param {array} contacts - Array of io.cozy.contact documents
+ * @returns {object}
+ */
+export const makeGroupLabelsAndCounts = (contacts, t) => {
+  return contacts.reduce(
+    (acc, contact) => {
+      const header = makeHeaderForIndexedContacts(contact, t)
+      if (!acc.groupLabels.includes(header)) {
+        acc.groupLabels.push(header)
+      }
+      const idx = acc.groupLabels.indexOf(header)
+      const val = acc.groupCounts[idx] || 0
+      acc.groupCounts[idx] = val + 1
+      return acc
+    },
+    { groupLabels: [], groupCounts: [] }
+  )
+}

package/react/ContactsList/helpers.spec.js

@@ -0,0 +1,150 @@
+import {
+  sortLastNameFirst,
+  sortHeaders,
+  makeGroupLabelsAndCounts
+} from './helpers'
+
+const t = x => x
+
+describe('Sort contacts', () => {
+  describe('By Last Name', () => {
+    it('should sort contact by last name', () => {
+      const contacts = [
+        { name: { givenName: '', familyName: '' } },
+        { name: { givenName: 'A', familyName: 'A' } },
+        { name: { givenName: 'B', familyName: 'A' } },
+        { name: { givenName: 'A', familyName: 'B' } },
+        { name: { givenName: 'B', familyName: 'B' } },
+        { name: { givenName: 'A', familyName: '' } },
+        { name: { givenName: 'B', familyName: '' } },
+        { name: { givenName: 'A', familyName: 'C' } },
+        { name: { givenName: 'C', familyName: 'B' } },
+        { name: { givenName: 'B', familyName: 'C' } },
+        { name: { givenName: '', familyName: 'B' } },
+        { name: { givenName: '', familyName: 'A' } }
+      ]
+      const sortedContact = [...contacts].sort(sortLastNameFirst)
+      expect(sortedContact).toEqual([
+        { name: { givenName: '', familyName: '' } },
+        { name: { givenName: 'A', familyName: '' } },
+        { name: { givenName: '', familyName: 'A' } },
+        { name: { givenName: 'A', familyName: 'A' } },
+        { name: { givenName: 'B', familyName: 'A' } },
+        { name: { givenName: 'B', familyName: '' } },
+        { name: { givenName: '', familyName: 'B' } },
+        { name: { givenName: 'A', familyName: 'B' } },
+        { name: { givenName: 'B', familyName: 'B' } },
+        { name: { givenName: 'C', familyName: 'B' } },
+        { name: { givenName: 'A', familyName: 'C' } },
+        { name: { givenName: 'B', familyName: 'C' } }
+      ])
+    })
+
+    it('should work with incomplete data', () => {
+      const contacts = [
+        { name: { givenName: '' } },
+        { name: { givenName: 'A' } },
+        { name: { givenName: 'A', familyName: 'A' } },
+        { name: { givenName: 'B', familyName: 'A' } },
+        { name: { familyName: 'B' } },
+        { name: { familyName: 'C' } },
+        { name: { givenName: 'B', familyName: 'B' } },
+        { name: { givenName: 'A', familyName: '' } },
+        { name: { givenName: 'B', familyName: '' } },
+        { name: { givenName: 'A', familyName: 'C' } },
+        { name: { givenName: 'C', familyName: 'B' } },
+        { name: { givenName: 'B', familyName: 'C' } },
+        { name: { givenName: '', familyName: 'B' } },
+        { name: { givenName: '', familyName: 'A' } }
+      ]
+      const sortedContact = [...contacts].sort(sortLastNameFirst)
+      expect(sortedContact).toEqual([
+        { name: { givenName: '' } },
+        { name: { givenName: 'A' } },
+        { name: { givenName: 'A', familyName: '' } },
+        { name: { givenName: '', familyName: 'A' } },
+        { name: { givenName: 'A', familyName: 'A' } },
+        { name: { givenName: 'B', familyName: 'A' } },
+        { name: { familyName: 'B' } },
+        { name: { givenName: 'B', familyName: '' } },
+        { name: { givenName: '', familyName: 'B' } },
+        { name: { givenName: 'B', familyName: 'B' } },
+        { name: { givenName: 'C', familyName: 'B' } },
+        { name: { familyName: 'C' } },
+        { name: { givenName: 'A', familyName: 'C' } },
+        { name: { givenName: 'B', familyName: 'C' } }
+      ])
+    })
+  })
+})
+
+describe('sortHeaders', () => {
+  const t = jest.fn(x => x)
+  it('should return headers sorted', () => {
+    const contacts = {
+      F: [],
+      B: [],
+      H: []
+    }
+
+    const sortedHeaders = sortHeaders(contacts, t)
+
+    expect(sortedHeaders).toEqual(['B', 'F', 'H'])
+  })
+
+  it('Should sort in the following order "me", "empty", "A", "..."', () => {
+    const contacts = {
+      F: [],
+      B: [],
+      me: [],
+      H: [],
+      empty: []
+    }
+
+    const sortedHeaders = sortHeaders(contacts, t)
+
+    expect(sortedHeaders).toEqual(['me', 'empty', 'B', 'F', 'H'])
+  })
+})
+
+describe('makeGroupLabelsAndCounts', () => {
+  it('should returns labels and counts', () => {
+    const contacts = [
+      { name: 'Alex', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Alan', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
+      { name: 'Cleo', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Cloé', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Clotilde', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      { name: 'Constant', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
+      {
+        name: 'Christophe',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' }
+      },
+      { name: 'Bernard', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Baptiste', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
+      { name: 'Xavier', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'X' } },
+      { name: 'Zorro', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Z' } },
+      { name: '', indexes: { byFamilyNameGivenNameEmailCozyUrl: '' } },
+      { name: {}, indexes: { byFamilyNameGivenNameEmailCozyUrl: {} } },
+      { name: 'John', indexes: { byFamilyNameGivenNameEmailCozyUrl: null } },
+      {
+        name: 'Connor',
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: undefined }
+      },
+      { name: 'Àlbert', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'À' } },
+      {
+        name: 'Alice',
+        me: true,
+        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Alice' }
+      },
+      { name: 'Èllen', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'È' } }
+    ]
+
+    const res = makeGroupLabelsAndCounts(contacts, t)
+
+    expect(res).toStrictEqual({
+      groupLabels: ['A', 'C', 'B', 'X', 'Z', 'empty', 'me', 'E'],
+      groupCounts: [3, 5, 2, 1, 1, 4, 1, 1]
+    })
+  })
+})

package/react/ContactsList/index.js

@@ -0,0 +1,3 @@
+import ContactsList from './ContactsList'
+
+export default ContactsList

package/react/ContactsList/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "empty": "EMPTY",
+  "me": "me",
+  "favorite": "favorites"
+}

package/react/ContactsList/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "empty": "VIDE",
+  "me": "moi",
+  "favorite": "favoris"
+}

package/react/ContactsList/locales/ru.json

@@ -0,0 +1,5 @@
+{
+  "empty": "ПУСТО",
+  "me": "я",
+  "favorite": "избранное"
+}

package/react/ContactsList/locales/vi.json

@@ -0,0 +1,5 @@
+{
+  "empty": "TRỐNG",
+  "me": "tôi",
+  "favorite": "yêu thích"
+}

package/react/ContactsList/locales/withContactsListLocales.jsx

@@ -0,0 +1,14 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}
+
+export default withOnlyLocales(locales)

package/react/ContactsList/styles.styl

@@ -0,0 +1,35 @@
+@require 'settings/breakpoints.styl'
+
+.contact
+    color var(--secondaryTextColor)
+
+    +small-screen()
+        height auto
+
+.contact--clickable
+    cursor pointer
+
+.contact-phone
+    flex 0 0 12rem
+
+.contact-cozyurl
+    flex 0 0 12rem
+
+.contact-email
+    flex-basis 30%
+
+.contact-myself
+    color var(--secondaryTextColor)
+    padding-left .5rem
+
+.contact-identity
+    flex-basis 30%
+
+    +small-screen()
+        flex 1 1 auto
+
+.contact-firstname
+    margin-left 1rem
+
+.contact-avatar
+    flex-shrink 0

package/react/ContactsListModal/AddContact/AddContactActions.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Button from '../../Buttons'
+import { withContactsListLocales } from '../withContactsListLocales'
+
+const AddContactActions = ({ t, onCancel, onSave }) => {
+  return (
+    <>
+      <Button variant="secondary" label={t('cancel')} onClick={onCancel} />
+      <Button label={t('save')} onClick={onSave} />
+    </>
+  )
+}
+
+export default withContactsListLocales(AddContactActions)

package/react/ContactsListModal/AddContact/AddContactContent.jsx

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './styles.styl'
+import Icon from '../../Icon'
+import PeopleIcon from '../../Icons/People'
+import TextField from '../../TextField'
+import Typography from '../../Typography'
+import { Media, Img, Bd } from '../../deprecated/Media'
+import { withContactsListLocales } from '../withContactsListLocales'
+
+const AddContactContent = ({ t, setContactValues }) => {
+  const handleChange = ev => {
+    const { name, value } = ev.target
+    setContactValues(v => ({ ...v, [name]: value }))
+  }
+
+  return (
+    <>
+      <Typography variant="h5">{t('coordinates')}</Typography>
+      <Media>
+        <Img className={styles.icon}>
+          <Icon icon={PeopleIcon} />
+        </Img>
+        <Bd className="u-mr-1">
+          <TextField
+            className="u-mt-1"
+            variant="outlined"
+            fullWidth
+            id="givenName"
+            name="givenName"
+            label={t('givenName')}
+            onChange={handleChange}
+          />
+        </Bd>
+      </Media>
+      <Media>
+        <Bd className="u-ml-3 u-mr-1">
+          <TextField
+            className="u-mt-1"
+            variant="outlined"
+            fullWidth
+            id="familyName"
+            name="familyName"
+            label={t('familyName')}
+            onChange={handleChange}
+          />
+        </Bd>
+      </Media>
+    </>
+  )
+}
+
+AddContactContent.propTypes = {
+  t: PropTypes.func,
+  setContactValues: PropTypes.func
+}
+
+export default withContactsListLocales(AddContactContent)

package/react/ContactsListModal/AddContact/AddContactDialog.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+
+import AddContactActions from './AddContactActions'
+import AddContactContent from './AddContactContent'
+import AddContactTitle from './AddContactTitle'
+import { handleSubmit } from './helpers'
+import { FixedDialog } from '../../CozyDialogs'
+
+const AddContactDialog = ({ onListClose, onCreate, onClose }) => {
+  const [contactValues, setContactValues] = useState({})
+  const client = useClient()
+
+  return (
+    <FixedDialog
+      open={true}
+      onClose={onClose}
+      title={<AddContactTitle />}
+      content={<AddContactContent setContactValues={setContactValues} />}
+      actions={
+        <AddContactActions
+          onCancel={onClose}
+          onSave={() =>
+            handleSubmit({
+              client,
+              contactValues,
+              onCreate,
+              onListClose
+            })
+          }
+        />
+      }
+    />
+  )
+}
+
+export default AddContactDialog

package/react/ContactsListModal/AddContact/AddContactTitle.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { withContactsListLocales } from '../withContactsListLocales'
+
+const AddContactTitle = ({ t }) => {
+  return <>{t('newContact')}</>
+}
+
+export default withContactsListLocales(AddContactTitle)

package/react/ContactsListModal/AddContact/helpers.js

@@ -0,0 +1,18 @@
+export const handleSubmit = async ({
+  client,
+  contactValues,
+  onCreate,
+  onListClose
+}) => {
+  const { givenName, familyName } = contactValues
+
+  if (!givenName && !familyName) return
+
+  const { data: contact } = await client.save({
+    _type: 'io.cozy.contacts',
+    name: { familyName, givenName }
+  })
+
+  onCreate(contact)
+  onListClose()
+}

package/react/ContactsListModal/AddContact/helpers.spec.js

@@ -0,0 +1,74 @@
+import { createMockClient } from 'cozy-client'
+
+import { handleSubmit } from './helpers'
+
+const client = createMockClient({})
+client.save = jest.fn(x => ({ data: x }))
+const onCreate = jest.fn()
+const onListClose = jest.fn()
+
+describe('handleSubmit', () => {
+  it('should not create the contact if no givenName of familyName', async () => {
+    await handleSubmit({ contactValues: {}, client, onCreate, onListClose })
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(onListClose).not.toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is only the givenName', async () => {
+    await handleSubmit({
+      contactValues: { givenName: 'John' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: undefined,
+        givenName: 'John'
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is only the familyName', async () => {
+    await handleSubmit({
+      contactValues: { familyName: 'Connor' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: 'Connor',
+        givenName: undefined
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is the givenName and familyName', async () => {
+    await handleSubmit({
+      contactValues: { givenName: 'John', familyName: 'Connor' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: 'Connor',
+        givenName: 'John'
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+})

package/react/ContactsListModal/AddContact/styles.styl

@@ -0,0 +1,2 @@
+.icon
+  margin 1rem 1.5rem 0 0.5rem

package/react/ContactsListModal/ContactsListContent.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { models } from 'cozy-client'
+const { getDisplayName } = models.contact
+
+import EmptyMessage from './EmptyMessage'
+import { withContactsListLocales } from './withContactsListLocales'
+import ContactsList from '../ContactsList'
+import Spinner from '../Spinner'
+import { useI18n } from '../providers/I18n'
+
+const mkFilter = filterStr => contacts => {
+  if (!filterStr) {
+    return contacts
+  }
+
+  const f = filterStr.toLowerCase()
+
+  // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
+  return contacts.filter(contact => {
+    const displayName = getDisplayName(contact)
+
+    if (!displayName) {
+      return false
+    }
+
+    return displayName.toLowerCase().includes(f)
+  })
+}
+
+const ContactsListContent = ({
+  filter,
+  contacts,
+  emptyMessage,
+  onItemClick,
+  dismissAction
+}) => {
+  const { t } = useI18n()
+
+  const loading =
+    (contacts.fetchStatus === 'loading' ||
+      contacts.fetchStatus === 'pending') &&
+    !contacts.lastFetch
+
+  const filterContacts = mkFilter(filter)
+  const filteredContacts = filterContacts(contacts.data)
+  const selfEmptyMessage = emptyMessage ?? t('emptyContact')
+
+  const handleItemClick = contact => {
+    if (!onItemClick) {
+      return
+    }
+
+    onItemClick(contact)
+    dismissAction()
+  }
+
+  if (loading) {
+    return (
+      <div className="u-mv-2 u-ta-center">
+        <Spinner size="xxlarge" />
+      </div>
+    )
+  }
+
+  if (filteredContacts.length === 0) {
+    return <EmptyMessage>{selfEmptyMessage}</EmptyMessage>
+  }
+
+  return (
+    <ContactsList contacts={filteredContacts} onItemClick={handleItemClick} />
+  )
+}
+
+export default withContactsListLocales(ContactsListContent)