cozy-sharing 5.0.0 → 6.0.1

package/src/components/ShareByEmail.jsx

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
 
-import { withClient } from 'cozy-client'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Alerter from 'cozy-ui/transpiled/react/Alerter'
-import { translate } from 'cozy-ui/transpiled/react/I18n'
 
 import ShareSubmit from './Sharesubmit'
 import ShareTypeSelect from './Sharetypeselect'
@@ -16,38 +16,38 @@ import styles from '../share.styl'
 import { getSuccessMessage } from '../helpers/successMessage'
 import { getOrCreateFromArray } from '../helpers/contacts'
 import { isReadOnlySharing } from '../state'
-export class ShareByEmail extends Component {
-  constructor(props) {
-    super(props)
-    this.initialState = {
-      recipients: [],
-      loading: false
-    }
-    this.state = { ...this.initialState }
-  }
-
-  state = { ...this.initialState }
 
-  reset = () => {
-    this.setState({ ...this.initialState })
+export const ShareByEmail = ({
+  contacts,
+  groups,
+  document,
+  sharingDesc,
+  onShare,
+  createContact,
+  documentType,
+  currentRecipients,
+  sharing
+}) => {
+  const client = useClient()
+  const { t } = useI18n()
+  const [recipients, setRecipients] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [selectedOption, setSelectedOption] = useState()
+
+  const reset = () => {
+    setRecipients([])
+    setLoading(false)
   }
 
-  onChange = value => {
-    this.setState(state => ({
-      ...state,
-      selectedOption: value
-    }))
+  const onChange = value => {
+    setSelectedOption(value)
   }
 
-  onSubmit = () => {
-    this.sendSharingLink()
-  }
-
-  onRecipientPick = recipient => {
+  const onRecipientPick = recipient => {
     let contactsToAdd
     if (recipient._type === Group.doctype) {
       const groupId = recipient.id
-      contactsToAdd = this.props.contacts.data.filter(contact => {
+      contactsToAdd = contacts.data.filter(contact => {
         const contactGroupIds = get(
           contact,
           'relationships.groups.data',
@@ -66,45 +66,26 @@ export class ShareByEmail extends Component {
           (contact.email && contact.email.length > 0) ||
           (contact.cozy && contact.cozy.length > 0)
       )
-      .filter(contact => !this.state.recipients.find(r => r === contact))
+      .filter(contact => !recipients.find(r => r === contact))
 
-    this.setState(state => ({
-      ...state,
-      recipients: [...state.recipients, ...filtered]
-    }))
+    setRecipients([...recipients, ...filtered])
   }
 
-  onRecipientRemove = recipient => {
-    const idx = this.state.recipients.findIndex(r => r === recipient)
-    this.setState(state => ({
-      ...state,
-      recipients: [
-        ...state.recipients.slice(0, idx),
-        ...state.recipients.slice(idx + 1)
-      ]
-    }))
+  const onRecipientRemove = recipient => {
+    const idx = recipients.findIndex(r => r === recipient)
+    setRecipients([...recipients.slice(0, idx), ...recipients.slice(idx + 1)])
   }
 
-  share = async () => {
-    const {
-      document,
-      sharingDesc,
-      onShare,
-      createContact,
-      documentType,
-      client,
-      t
-    } = this.props
-    const { recipients, selectedOption } = this.state
+  const share = async () => {
     if (recipients.length === 0) {
       return
     }
 
     // we can't use currentRecipients prop in getSuccessMessage because it may use
     // the updated prop to count the new recipients
-    const recipientsBefore = this.props.currentRecipients
+    const recipientsBefore = currentRecipients
 
-    this.setState(state => ({ ...state, loading: true }))
+    setLoading(true)
     try {
       const contacts = await getOrCreateFromArray(
         client,
@@ -129,16 +110,15 @@ export class ShareByEmail extends Component {
       Alerter.success(
         t(...getSuccessMessage(recipientsBefore, contacts, documentType))
       )
-      this.reset()
+      reset()
     } catch (err) {
       Alerter.error('Error.generic')
-      this.reset()
+      reset()
       throw err
     }
   }
 
-  getSharingOptions = () => {
-    const { t, sharing, document } = this.props
+  const getSharingOptions = () => {
     const isSharingReadOnly = sharing
       ? isReadOnlySharing(sharing, document._id)
       : false
@@ -156,43 +136,38 @@ export class ShareByEmail extends Component {
     }
     return isSharingReadOnly ? [readOnly] : [readWrite, readOnly]
   }
-  render() {
-    const { contacts, documentType, groups, t } = this.props
-    const { recipients } = this.state
-
-    return (
-      <div className={styles['coz-form-group']}>
-        <div className={styles['coz-form']}>
-          <ShareRecipientsInput
-            label={t(`${documentType}.share.shareByEmail.email`)}
-            placeholder={
-              recipients.length === 0
-                ? t(`${documentType}.share.shareByEmail.emailPlaceholder`)
-                : ''
-            }
-            onFocus={this.onInputFocus}
-            onPick={recipient => this.onRecipientPick(recipient)}
-            onRemove={recipient => this.onRecipientRemove(recipient)}
-            contacts={contacts}
-            groups={groups}
-            recipients={recipients}
-          />
-        </div>
+
+  const showShareControl = recipients.length > 0
+
+  return (
+    <div className={styles['coz-form-group']}>
+      <div className={styles['coz-form']}>
+        <ShareRecipientsInput
+          placeholder={
+            recipients.length === 0
+              ? t(`${documentType}.share.shareByEmail.emailPlaceholder`)
+              : ''
+          }
+          onPick={recipient => onRecipientPick(recipient)}
+          onRemove={recipient => onRecipientRemove(recipient)}
+          contacts={contacts}
+          groups={groups}
+          recipients={recipients}
+        />
+      </div>
+      {showShareControl && (
         <div className={styles['share-type-control']}>
-          <ShareTypeSelect
-            options={this.getSharingOptions()}
-            onChange={this.onChange}
-          />
+          <ShareTypeSelect options={getSharingOptions()} onChange={onChange} />
           <ShareSubmit
             label={t(`${documentType}.share.shareByEmail.send`)}
-            onSubmit={this.share}
-            loading={this.state.loading}
+            onSubmit={share}
+            loading={loading}
             disabled={recipients.length === 0}
           />
         </div>
-      </div>
-    )
-  }
+      )}
+    </div>
+  )
 }
 
 ShareByEmail.propTypes = {
@@ -208,4 +183,4 @@ ShareByEmail.propTypes = {
   sharing: PropTypes.object
 }
 
-export default translate()(withClient(ShareByEmail))
+export default ShareByEmail

package/src/components/ShareByEmail.spec.jsx

@@ -1,6 +1,12 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import { ShareByEmail } from './ShareByEmail'
+import AppLike from '../../test/AppLike'
+import { act } from 'react-dom/test-utils'
+
+jest.mock('../helpers/contacts', () => ({
+  getOrCreateFromArray: (client, recipients) => recipients
+}))
 
 describe('ShareByEmailComponent', () => {
   it('shoud call share if submited', async () => {
@@ -9,7 +15,6 @@ describe('ShareByEmailComponent', () => {
       contacts: {
         data: []
       },
-      t: x => x,
       groups: { data: [] },
       documentType: 'Files',
       onShare: onShare,
@@ -19,15 +24,38 @@ describe('ShareByEmailComponent', () => {
       sharingDesc: 'test',
       createContact: jest.fn()
     }
-    const comp = mount(<ShareByEmail {...props} />)
-    comp.instance().onRecipientPick({ id: 1, email: 'quentin@cozycloud.cc' })
-    await comp.instance().share()
-    expect(onShare).toHaveBeenCalledWith({
-      description: props.sharingDesc,
-      document: props.document,
-      openSharing: true,
-      readOnlyRecipients: [],
-      recipients: [{ id: 1, email: 'quentin@cozycloud.cc' }]
+    const root = render(
+      <AppLike>
+        <ShareByEmail {...props} />
+      </AppLike>
+    )
+
+    act(() => {
+      fireEvent.change(root.getByPlaceholderText('Add contacts or groups'), {
+        target: { value: 'quentin@cozycloud.cc' }
+      })
+    })
+
+    act(() => {
+      fireEvent.keyPress(root.getByPlaceholderText('Add contacts or groups'), {
+        key: 'Enter',
+        code: 'Enter',
+        charCode: 13
+      })
+    })
+
+    act(() => {
+      fireEvent.click(root.getByRole('button', { name: 'Send' }))
+    })
+
+    await waitFor(() => {
+      expect(onShare).toHaveBeenCalledWith({
+        description: props.sharingDesc,
+        document: props.document,
+        openSharing: true,
+        readOnlyRecipients: [],
+        recipients: [{ email: 'quentin@cozycloud.cc' }]
+      })
     })
   })
 })