cozy-sharing 5.0.0 → 6.0.0

package/dist/components/ShareByEmail.js

@@ -1,28 +1,13 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-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';
 import { Group } from '../models';
@@ -58,122 +43,113 @@ var styles = {
 import { getSuccessMessage } from '../helpers/successMessage';
 import { getOrCreateFromArray } from '../helpers/contacts';
 import { isReadOnlySharing } from '../state';
-export var ShareByEmail = /*#__PURE__*/function (_Component) {
-  _inherits(ShareByEmail, _Component);
-
-  var _super = _createSuper(ShareByEmail);
-
-  function ShareByEmail(props) {
-    var _this;
-
-    _classCallCheck(this, ShareByEmail);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "state", _objectSpread({}, _this.initialState));
-
-    _defineProperty(_assertThisInitialized(_this), "reset", function () {
-      _this.setState(_objectSpread({}, _this.initialState));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          selectedOption: value
+export var ShareByEmail = function ShareByEmail(_ref) {
+  var contacts = _ref.contacts,
+      groups = _ref.groups,
+      document = _ref.document,
+      sharingDesc = _ref.sharingDesc,
+      onShare = _ref.onShare,
+      createContact = _ref.createContact,
+      documentType = _ref.documentType,
+      currentRecipients = _ref.currentRecipients,
+      sharing = _ref.sharing;
+  var client = useClient();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      recipients = _useState2[0],
+      setRecipients = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedOption = _useState6[0],
+      setSelectedOption = _useState6[1];
+
+  var reset = function reset() {
+    setRecipients([]);
+    setLoading(false);
+  };
+
+  var onChange = function onChange(value) {
+    setSelectedOption(value);
+  };
+
+  var onRecipientPick = function onRecipientPick(recipient) {
+    var contactsToAdd;
+
+    if (recipient._type === Group.doctype) {
+      var groupId = recipient.id;
+      contactsToAdd = contacts.data.filter(function (contact) {
+        var contactGroupIds = get(contact, 'relationships.groups.data', []).map(function (group) {
+          return group._id;
         });
+        return contactGroupIds.includes(groupId);
       });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onSubmit", function () {
-      _this.sendSharingLink();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onRecipientPick", function (recipient) {
-      var contactsToAdd;
-
-      if (recipient._type === Group.doctype) {
-        var groupId = recipient.id;
-        contactsToAdd = _this.props.contacts.data.filter(function (contact) {
-          var contactGroupIds = get(contact, 'relationships.groups.data', []).map(function (group) {
-            return group._id;
-          });
-          return contactGroupIds.includes(groupId);
-        });
-      } else {
-        contactsToAdd = [recipient];
-      }
+    } else {
+      contactsToAdd = [recipient];
+    }
 
-      var filtered = contactsToAdd.filter(function (contact) {
-        return contact.email && contact.email.length > 0 || contact.cozy && contact.cozy.length > 0;
-      }).filter(function (contact) {
-        return !_this.state.recipients.find(function (r) {
-          return r === contact;
-        });
-      });
-
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          recipients: [].concat(_toConsumableArray(state.recipients), _toConsumableArray(filtered))
-        });
+    var filtered = contactsToAdd.filter(function (contact) {
+      return contact.email && contact.email.length > 0 || contact.cozy && contact.cozy.length > 0;
+    }).filter(function (contact) {
+      return !recipients.find(function (r) {
+        return r === contact;
       });
     });
+    setRecipients([].concat(_toConsumableArray(recipients), _toConsumableArray(filtered)));
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "onRecipientRemove", function (recipient) {
-      var idx = _this.state.recipients.findIndex(function (r) {
-        return r === recipient;
-      });
-
-      _this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          recipients: [].concat(_toConsumableArray(state.recipients.slice(0, idx)), _toConsumableArray(state.recipients.slice(idx + 1)))
-        });
-      });
+  var onRecipientRemove = function onRecipientRemove(recipient) {
+    var idx = recipients.findIndex(function (r) {
+      return r === recipient;
     });
+    setRecipients([].concat(_toConsumableArray(recipients.slice(0, idx)), _toConsumableArray(recipients.slice(idx + 1))));
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "share", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$props, document, sharingDesc, onShare, createContact, documentType, client, t, _this$state, recipients, selectedOption, recipientsBefore, contacts, readWriteRecipients, readOnlyRecipients;
+  var share = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var recipientsBefore, _contacts, readWriteRecipients, readOnlyRecipients;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _this$props = _this.props, document = _this$props.document, sharingDesc = _this$props.sharingDesc, onShare = _this$props.onShare, createContact = _this$props.createContact, documentType = _this$props.documentType, client = _this$props.client, t = _this$props.t;
-              _this$state = _this.state, recipients = _this$state.recipients, selectedOption = _this$state.selectedOption;
-
               if (!(recipients.length === 0)) {
-                _context.next = 4;
+                _context.next = 2;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 4:
+            case 2:
               // we can't use currentRecipients prop in getSuccessMessage because it may use
               // the updated prop to count the new recipients
-              recipientsBefore = _this.props.currentRecipients;
-
-              _this.setState(function (state) {
-                return _objectSpread(_objectSpread({}, state), {}, {
-                  loading: true
-                });
-              });
-
-              _context.prev = 6;
-              _context.next = 9;
+              recipientsBefore = currentRecipients;
+              setLoading(true);
+              _context.prev = 4;
+              _context.next = 7;
               return getOrCreateFromArray(client, recipients, createContact);
 
-            case 9:
-              contacts = _context.sent;
+            case 7:
+              _contacts = _context.sent;
               readWriteRecipients = [];
               readOnlyRecipients = [];
 
               if (selectedOption === 'readOnly') {
-                readOnlyRecipients = contacts;
+                readOnlyRecipients = _contacts;
               } else {
-                readWriteRecipients = contacts;
+                readWriteRecipients = _contacts;
               }
 
-              _context.next = 15;
+              _context.next = 13;
               return onShare({
                 document: document,
                 recipients: readWriteRecipients,
@@ -182,104 +158,77 @@ export var ShareByEmail = /*#__PURE__*/function (_Component) {
                 openSharing: readWriteRecipients.length > 0
               });
 
-            case 15:
-              Alerter.success(t.apply(void 0, _toConsumableArray(getSuccessMessage(recipientsBefore, contacts, documentType))));
-
-              _this.reset();
-
-              _context.next = 24;
+            case 13:
+              Alerter.success(t.apply(void 0, _toConsumableArray(getSuccessMessage(recipientsBefore, _contacts, documentType))));
+              reset();
+              _context.next = 22;
               break;
 
-            case 19:
-              _context.prev = 19;
-              _context.t0 = _context["catch"](6);
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](4);
               Alerter.error('Error.generic');
-
-              _this.reset();
-
+              reset();
               throw _context.t0;
 
-            case 24:
+            case 22:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[6, 19]]);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "getSharingOptions", function () {
-      var _this$props2 = _this.props,
-          t = _this$props2.t,
-          sharing = _this$props2.sharing,
-          document = _this$props2.document;
-      var isSharingReadOnly = sharing ? isReadOnlySharing(sharing, document._id) : false;
-      var readWrite = {
-        value: 'readWrite',
-        label: t('Share.type.two-way'),
-        desc: t('Share.type.desc.two-way'),
-        disabled: false
-      };
-      var readOnly = {
-        value: 'readOnly',
-        label: t('Share.type.one-way'),
-        desc: t('Share.type.desc.one-way'),
-        disabled: false
-      };
-      return isSharingReadOnly ? [readOnly] : [readWrite, readOnly];
-    });
+      }, _callee, null, [[4, 17]]);
+    }));
 
-    _this.initialState = {
-      recipients: [],
-      loading: false
+    return function share() {
+      return _ref2.apply(this, arguments);
     };
-    _this.state = _objectSpread({}, _this.initialState);
-    return _this;
-  }
-
-  _createClass(ShareByEmail, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          contacts = _this$props3.contacts,
-          documentType = _this$props3.documentType,
-          groups = _this$props3.groups,
-          t = _this$props3.t;
-      var recipients = this.state.recipients;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles['coz-form-group']
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles['coz-form']
-      }, /*#__PURE__*/React.createElement(ShareRecipientsInput, {
-        label: t("".concat(documentType, ".share.shareByEmail.email")),
-        placeholder: recipients.length === 0 ? t("".concat(documentType, ".share.shareByEmail.emailPlaceholder")) : '',
-        onFocus: this.onInputFocus,
-        onPick: function onPick(recipient) {
-          return _this2.onRecipientPick(recipient);
-        },
-        onRemove: function onRemove(recipient) {
-          return _this2.onRecipientRemove(recipient);
-        },
-        contacts: contacts,
-        groups: groups,
-        recipients: recipients
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles['share-type-control']
-      }, /*#__PURE__*/React.createElement(ShareTypeSelect, {
-        options: this.getSharingOptions(),
-        onChange: this.onChange
-      }), /*#__PURE__*/React.createElement(ShareSubmit, {
-        label: t("".concat(documentType, ".share.shareByEmail.send")),
-        onSubmit: this.share,
-        loading: this.state.loading,
-        disabled: recipients.length === 0
-      })));
-    }
-  }]);
-
-  return ShareByEmail;
-}(Component);
+  }();
+
+  var getSharingOptions = function getSharingOptions() {
+    var isSharingReadOnly = sharing ? isReadOnlySharing(sharing, document._id) : false;
+    var readWrite = {
+      value: 'readWrite',
+      label: t('Share.type.two-way'),
+      desc: t('Share.type.desc.two-way'),
+      disabled: false
+    };
+    var readOnly = {
+      value: 'readOnly',
+      label: t('Share.type.one-way'),
+      desc: t('Share.type.desc.one-way'),
+      disabled: false
+    };
+    return isSharingReadOnly ? [readOnly] : [readWrite, readOnly];
+  };
+
+  var showShareControl = recipients.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['coz-form-group']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['coz-form']
+  }, /*#__PURE__*/React.createElement(ShareRecipientsInput, {
+    placeholder: recipients.length === 0 ? t("".concat(documentType, ".share.shareByEmail.emailPlaceholder")) : '',
+    onPick: function onPick(recipient) {
+      return onRecipientPick(recipient);
+    },
+    onRemove: function onRemove(recipient) {
+      return onRecipientRemove(recipient);
+    },
+    contacts: contacts,
+    groups: groups,
+    recipients: recipients
+  })), showShareControl && /*#__PURE__*/React.createElement("div", {
+    className: styles['share-type-control']
+  }, /*#__PURE__*/React.createElement(ShareTypeSelect, {
+    options: getSharingOptions(),
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(ShareSubmit, {
+    label: t("".concat(documentType, ".share.shareByEmail.send")),
+    onSubmit: share,
+    loading: loading,
+    disabled: recipients.length === 0
+  })));
+};
 ShareByEmail.propTypes = {
   currentRecipients: PropTypes.arrayOf(PropTypes.object),
   contacts: contactsResponseType.isRequired,
@@ -292,4 +241,4 @@ ShareByEmail.propTypes = {
   // We can display this component without having created the sharing yet
   sharing: PropTypes.object
 };
-export default translate()(withClient(ShareByEmail));
+export default ShareByEmail;

package/dist/components/ShareByEmail.spec.js

@@ -1,11 +1,20 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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', function () {
+  return {
+    getOrCreateFromArray: function getOrCreateFromArray(client, recipients) {
+      return recipients;
+    }
+  };
+});
 describe('ShareByEmailComponent', function () {
   it('shoud call share if submited', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var onShare, props, comp;
+    var onShare, props, root;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -15,9 +24,6 @@ describe('ShareByEmailComponent', function () {
               contacts: {
                 data: []
               },
-              t: function t(x) {
-                return x;
-              },
               groups: {
                 data: []
               },
@@ -29,27 +35,40 @@ describe('ShareByEmailComponent', function () {
               sharingDesc: 'test',
               createContact: jest.fn()
             };
-            comp = mount( /*#__PURE__*/React.createElement(ShareByEmail, props));
-            comp.instance().onRecipientPick({
-              id: 1,
-              email: 'quentin@cozycloud.cc'
+            root = render( /*#__PURE__*/React.createElement(AppLike, null, /*#__PURE__*/React.createElement(ShareByEmail, props)));
+            act(function () {
+              fireEvent.change(root.getByPlaceholderText('Add contacts or groups'), {
+                target: {
+                  value: 'quentin@cozycloud.cc'
+                }
+              });
             });
-            _context.next = 6;
-            return comp.instance().share();
-
-          case 6:
-            expect(onShare).toHaveBeenCalledWith({
-              description: props.sharingDesc,
-              document: props.document,
-              openSharing: true,
-              readOnlyRecipients: [],
-              recipients: [{
-                id: 1,
-                email: 'quentin@cozycloud.cc'
-              }]
+            act(function () {
+              fireEvent.keyPress(root.getByPlaceholderText('Add contacts or groups'), {
+                key: 'Enter',
+                code: 'Enter',
+                charCode: 13
+              });
+            });
+            act(function () {
+              fireEvent.click(root.getByRole('button', {
+                name: 'Send'
+              }));
+            });
+            _context.next = 8;
+            return waitFor(function () {
+              expect(onShare).toHaveBeenCalledWith({
+                description: props.sharingDesc,
+                document: props.document,
+                openSharing: true,
+                readOnlyRecipients: [],
+                recipients: [{
+                  email: 'quentin@cozycloud.cc'
+                }]
+              });
             });
 
-          case 7:
+          case 8:
           case "end":
             return _context.stop();
         }