cozy-ui 63.0.0 → 64.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [64.0.0](https://github.com/cozy/cozy-ui/compare/v63.0.0...v64.0.0) (2022-04-26)
+
+
+### Features
+
+* Add AddContactDialog to add a contact from the contact list ([7333bf9](https://github.com/cozy/cozy-ui/commit/7333bf9))
+* Add ContactsList locales and HOC to get them ([e315f40](https://github.com/cozy/cozy-ui/commit/e315f40))
+
+
+### BREAKING CHANGES
+
+* the app must now have `POST` permission on `io.cozy.contacts` doctype to use `ContactsListModal`
+
 # [63.0.0](https://github.com/cozy/cozy-ui/compare/v62.12.0...v63.0.0) (2022-04-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "63.0.0",
+  "version": "64.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

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,52 @@
+import { Typography } from '@material-ui/core'
+import React from 'react'
+
+import { Media, Img, Bd } from '../../Media'
+import Icon from '../../Icon'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import TextField from '../../MuiCozyTheme/TextField'
+
+import { withContactsListLocales } from '../withContactsListLocales'
+import styles from './styles.styl'
+
+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={true}
+            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={true}
+            name="familyName"
+            label={t('familyName')}
+            onChange={handleChange}
+          />
+        </Bd>
+      </Media>
+    </>
+  )
+}
+
+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 { FixedDialog } from '../../CozyDialogs'
+import AddContactTitle from './AddContactTitle'
+import AddContactContent from './AddContactContent'
+import AddContactActions from './AddContactActions'
+import { handleSubmit } from './helpers'
+
+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,69 @@
+import React from 'react'
+
+import { Contact } from 'cozy-doctypes'
+
+import ContactsList from '../ContactsList'
+import Spinner from '../Spinner'
+import EmptyMessage from './EmptyMessage'
+
+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 = Contact.getDisplayName(contact)
+
+    if (!displayName) {
+      return false
+    }
+
+    return displayName.toLowerCase().includes(f)
+  })
+}
+
+const ContactsListContent = ({
+  filter,
+  contacts,
+  emptyMessage,
+  onItemClick,
+  dismissAction
+}) => {
+  const loading =
+    (contacts.fetchStatus === 'loading' ||
+      contacts.fetchStatus === 'pending') &&
+    !contacts.lastFetch
+
+  const filterContacts = mkFilter(filter)
+  const filteredContacts = filterContacts(contacts.data)
+
+  const handleItemClick = contact => {
+    if (!onItemClick) {
+      return
+    }
+
+    onItemClick(contact)
+    dismissAction()
+  }
+
+  if (loading) {
+    return (
+      <div className="u-mv-2">
+        <Spinner size="xxlarge" />
+      </div>
+    )
+  }
+
+  if (filteredContacts.length === 0) {
+    return <EmptyMessage>{emptyMessage}</EmptyMessage>
+  }
+
+  return (
+    <ContactsList contacts={filteredContacts} onItemClick={handleItemClick} />
+  )
+}
+
+export default ContactsListContent

package/react/ContactsListModal/DemoProvider.jsx

@@ -42,6 +42,8 @@ mockClient.plugins = {
   }
 }
 
+mockClient.save = () => ({ data: contacts[0] })
+
 const Wrapper = ({ children }) => {
   return <CozyProvider client={mockClient}>{children}</CozyProvider>
 }

package/react/ContactsListModal/MobileHeader.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import CozyTheme from '../CozyTheme'
+import Icon from '../Icon'
+import PreviousIcon from '../Icons/Previous'
+import Paper from '../Paper'
+import IconButton from '@material-ui/core/IconButton'
+import Input from '@material-ui/core/Input'
+
+const barStyle = {
+  height: 48
+}
+
+const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
+  return (
+    <CozyTheme variant="inverted">
+      <Paper
+        square
+        elevation={0}
+        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+        style={barStyle}
+      >
+        <IconButton className="u-mr-half" onClick={onDismiss}>
+          <Icon icon={PreviousIcon} />
+        </IconButton>
+        <Input
+          type="text"
+          placeholder={placeholder}
+          value={filter}
+          onChange={onChange}
+          autoFocus
+          fullWidth
+          disableUnderline
+        />
+      </Paper>
+    </CozyTheme>
+  )
+}
+
+export default MobileHeader

package/react/ContactsListModal/index.jsx

@@ -1,14 +1,11 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import compose from 'lodash/flowRight'
-import IconButton from '@material-ui/core/IconButton'
-import Input from '@material-ui/core/Input'
+import cx from 'classnames'
 import TextField from '@material-ui/core/TextField'
 
-import { Contact } from 'cozy-doctypes'
-import { Q, withClient, fetchPolicies, queryConnect } from 'cozy-client'
+import { Q, fetchPolicies, useClient, useQuery } from 'cozy-client'
+
 import { DialogTitle, DialogContent } from '../Dialog'
-import Paper from '../Paper'
 import CozyTheme from '../CozyTheme'
 import {
   TopAnchoredDialog,
@@ -17,80 +14,44 @@ import {
 } from '../CozyDialogs'
 import useRealtime from '../hooks/useRealtime'
 import useEventListener from '../hooks/useEventListener.js'
-import PreviousIcon from '../Icons/Previous'
 import useBreakpoints from '../hooks/useBreakpoints'
-
-import ContactsList from '../ContactsList'
-import Spinner from '../Spinner'
-import styles from './styles.styl'
+import Button from '../Buttons'
+import PlusIcon from '../Icons/Plus'
 import Icon from '../Icon'
-import AddContactButton from './AddContactButton'
-import EmptyMessage from './EmptyMessage'
+import MobileHeader from './MobileHeader'
+import ContactsListContent from './ContactsListContent'
+import AddContactDialog from './AddContact/AddContactDialog'
 
-import cx from 'classnames'
+import styles from './styles.styl'
 
 const thirtySeconds = 30000
 const olderThan30s = fetchPolicies.olderThan(thirtySeconds)
 
-const mkFilter = filterStr => contacts => {
-  if (!filterStr) {
-    return contacts
+const contactsQuery = {
+  definition: Q('io.cozy.contacts').UNSAFE_noLimit(),
+  options: {
+    as: 'contacts',
+    fetchPolicy: olderThan30s
   }
-
-  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 = Contact.getDisplayName(contact)
-
-    if (!displayName) {
-      return false
-    }
-
-    return displayName.toLowerCase().includes(f)
-  })
 }
 
-const barStyle = {
-  height: 48
-}
-
-const ContactsListModal = props => {
-  const { isMobile } = useBreakpoints()
-  const {
-    onItemClick,
-    placeholder,
-    addContactLabel,
-    emptyMessage,
-    contacts,
-    client,
-    ...rest
-  } = props
-
+const ContactsListModal = ({
+  onItemClick,
+  placeholder,
+  addContactLabel,
+  emptyMessage,
+  dismissAction
+}) => {
   const [filter, setFilter] = useState('')
-
-  const handleFilterChange = e => {
-    setFilter(e.target.value)
-  }
-
-  const filterContacts = mkFilter(filter)
-
-  const handleItemClick = contact => {
-    if (!onItemClick) {
-      return
-    }
-
-    onItemClick(contact)
-    rest.dismissAction()
-  }
-
-  const loading =
-    (contacts.fetchStatus === 'loading' ||
-      contacts.fetchStatus === 'pending') &&
-    !contacts.lastFetch
-
-  const filteredContacts = filterContacts(contacts.data)
-
+  const [showAddDialog, setShowAddDialog] = useState(false)
+  const { isMobile } = useBreakpoints()
+  const { dialogProps, dialogTitleProps } = useCozyDialog({
+    size: 'large',
+    open: true,
+    onClose: dismissAction
+  })
+  const client = useClient()
+  const contacts = useQuery(contactsQuery.definition, contactsQuery.options)
   useRealtime(
     client,
     {
@@ -101,19 +62,16 @@ const ContactsListModal = props => {
     },
     []
   )
-
   useEventListener(document, 'resume', contacts.fetch)
 
-  const { dialogProps, dialogTitleProps } = useCozyDialog({
-    size: 'large',
-    open: true,
-    onClose: props.dismissAction
-  })
+  const handleFilterChange = e => {
+    setFilter(e.target.value)
+  }
 
   return (
     <TopAnchoredDialog {...dialogProps}>
       <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
-        <DialogCloseButton onClick={props.dismissAction} />
+        <DialogCloseButton onClick={dismissAction} />
       </CozyTheme>
       <DialogTitle
         {...dialogTitleProps}
@@ -122,29 +80,12 @@ const ContactsListModal = props => {
         })}
       >
         {isMobile ? (
-          <>
-            <CozyTheme variant="inverted">
-              <Paper
-                square
-                elevation={0}
-                className="u-flex u-flex-items-center u-pr-3 u-pl-half"
-                style={barStyle}
-              >
-                <IconButton className="u-mr-half" onClick={rest.dismissAction}>
-                  <Icon icon={PreviousIcon} />
-                </IconButton>
-                <Input
-                  type="text"
-                  placeholder={placeholder}
-                  value={filter}
-                  onChange={handleFilterChange}
-                  autoFocus
-                  fullWidth
-                  disableUnderline
-                />
-              </Paper>
-            </CozyTheme>
-          </>
+          <MobileHeader
+            filter={filter}
+            placeholder={placeholder}
+            onChange={handleFilterChange}
+            onDismiss={dismissAction}
+          />
         ) : (
           <TextField
             variant="outlined"
@@ -160,27 +101,31 @@ const ContactsListModal = props => {
       <DialogContent className="u-p-0">
         <div className="dialogContentInner">
           <div className={styles.ContactsListModal__addContactContainer}>
-            <AddContactButton
+            <Button
               className={isMobile && 'u-mt-1'}
+              variant="secondary"
+              theme="secondary"
               label={addContactLabel}
+              startIcon={<Icon icon={PlusIcon} />}
+              onClick={setShowAddDialog}
             />
           </div>
-          {loading && (
-            <div className="u-mv-2">
-              <Spinner size="xxlarge" />
-            </div>
-          )}
-          {!loading && filteredContacts.length === 0 && (
-            <EmptyMessage>{emptyMessage}</EmptyMessage>
-          )}
-          {!loading && filteredContacts.length > 0 && (
-            <ContactsList
-              contacts={filteredContacts}
-              onItemClick={handleItemClick}
-            />
-          )}
+          <ContactsListContent
+            filter={filter}
+            contacts={contacts}
+            onItemClick={onItemClick}
+            emptyMessage={emptyMessage}
+            dismissAction={dismissAction}
+          />
         </div>
       </DialogContent>
+      {showAddDialog && (
+        <AddContactDialog
+          onListClose={dismissAction}
+          onCreate={onItemClick}
+          onClose={() => setShowAddDialog(false)}
+        />
+      )}
     </TopAnchoredDialog>
   )
 }
@@ -189,13 +134,4 @@ ContactsListModal.propTypes = {
   onItemClick: PropTypes.func
 }
 
-export default compose(
-  withClient,
-  queryConnect({
-    contacts: {
-      query: () => Q('io.cozy.contacts').UNSAFE_noLimit(),
-      as: 'contacts',
-      fetchPolicy: olderThan30s
-    }
-  })
-)(ContactsListModal)
+export default ContactsListModal

package/react/ContactsListModal/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Cancel",
+  "save": "Save",
+  "newContact": "New contact",
+  "coordinates": "Coordinates",
+  "givenName": "Firstname",
+  "familyName": "Lastname"
+}

package/react/ContactsListModal/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Annuler",
+  "save": "Enregistrer",
+  "newContact": "Nouveau contact",
+  "coordinates": "Coordonnées",
+  "givenName": "Prénom",
+  "familyName": "Nom"
+}

package/react/ContactsListModal/withContactsListLocales.jsx

@@ -0,0 +1,11 @@
+import withLocales from '../I18n/withLocales'
+
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export const withContactsListLocales = withLocales(locales)

package/transpiled/react/ContactsListModal/AddContact/AddContactActions.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from "cozy-ui/transpiled/react/Buttons";
+import { withContactsListLocales } from "cozy-ui/transpiled/react/ContactsListModal/withContactsListLocales";
+
+var AddContactActions = function AddContactActions(_ref) {
+  var t = _ref.t,
+      onCancel = _ref.onCancel,
+      onSave = _ref.onSave;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    label: t('cancel'),
+    onClick: onCancel
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: t('save'),
+    onClick: onSave
+  }));
+};
+
+export default withContactsListLocales(AddContactActions);