Registered remaining short URLs components in DI container

src/common/MenuLayout.js

@@ -6,11 +6,10 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import * as PropTypes from 'prop-types';
 import ShortUrlsVisits from '../visits/ShortUrlVisits';
-import CreateShortUrl from '../short-urls/CreateShortUrl';
 import './MenuLayout.scss';
 import { serverType } from '../servers/prop-types';
 
-const MenuLayout = (TagsList, ShortUrls, AsideMenu) => class MenuLayout extends React.Component {
+const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl) => class MenuLayout extends React.Component {
   static propTypes = {
     match: PropTypes.object,
     selectServer: PropTypes.func,

src/container/index.js

@@ -15,7 +15,7 @@ import { createServer, createServers, deleteServer, listServers } from '../serve
 import CreateServer from '../servers/CreateServer';
 import ServersDropdown from '../servers/ServersDropdown';
 import TagsList from '../tags/TagsList';
-import { filterTags, forceListTags } from '../tags/reducers/tagsList';
+import { filterTags, forceListTags, listTags } from '../tags/reducers/tagsList';
 import ShortUrls from '../short-urls/ShortUrls';
 import SearchBar from '../short-urls/SearchBar';
 import { listShortUrls } from '../short-urls/reducers/shortUrlsList';
@@ -34,6 +34,13 @@ import ImportServersBtn from '../servers/helpers/ImportServersBtn';
 import { ServersImporter } from '../servers/services/ServersImporter';
 import { ServersExporter } from '../servers/services/ServersExporter';
 import { ServersService } from '../servers/services/ServersService';
+import CreateShortUrl from '../short-urls/CreateShortUrl';
+import { createShortUrl, resetCreateShortUrl } from '../short-urls/reducers/shortUrlCreation';
+import TagsSelector from '../tags/helpers/TagsSelector';
+import DeleteShortUrlModal from '../short-urls/helpers/DeleteShortUrlModal';
+import { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted } from '../short-urls/reducers/shortUrlDeletion';
+import EditTagsModal from '../short-urls/helpers/EditTagsModal';
+import { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited } from '../short-urls/reducers/shortUrlTags';
 
 const bottle = new Bottle();
 
@@ -46,7 +53,7 @@ bottle.decorator('MainHeader', withRouter);
 bottle.serviceFactory('Home', () => Home);
 bottle.decorator('Home', connect(pick([ 'servers' ]), { resetSelectedServer }));
 
-bottle.serviceFactory('MenuLayout', MenuLayout, 'TagsList', 'ShortUrls', 'AsideMenu');
+bottle.serviceFactory('MenuLayout', MenuLayout, 'TagsList', 'ShortUrls', 'AsideMenu', 'CreateShortUrl');
 bottle.decorator(
   'MenuLayout',
   compose(
@@ -88,7 +95,7 @@ bottle.service('ColorGenerator', ColorGenerator, 'Storage');
 
 bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'Tag', 'ShortUrlsRowMenu');
 
-bottle.serviceFactory('ShortUrlsRowMenu', () => ShortUrlsRowMenu);
+bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'EditTagsModal');
 
 bottle.constant('axios', axios);
 bottle.service('ShlinkApiClient', ShlinkApiClient, 'axios');
@@ -108,4 +115,24 @@ bottle.service('ServersImporter', ServersImporter, 'csvjson');
 bottle.service('ServersService', ServersService, 'Storage');
 bottle.service('ServersExporter', ServersExporter, 'ServersService', 'window', 'csvjson');
 
+bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector');
+bottle.decorator('CreateShortUrl', connect(pick([ 'shortUrlCreationResult' ]), {
+  createShortUrl,
+  resetCreateShortUrl,
+}));
+
+bottle.serviceFactory('TagsSelector', TagsSelector, 'ColorGenerator');
+bottle.decorator('TagsSelector', connect(pick([ 'tagsList' ]), { listTags }));
+
+bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
+bottle.decorator('DeleteShortUrlModal', connect(
+  pick([ 'shortUrlDeletion' ]),
+  { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted }
+));
+bottle.serviceFactory('EditTagsModal', EditTagsModal, 'TagsSelector');
+bottle.decorator('EditTagsModal', connect(
+  pick([ 'shortUrlTags' ]),
+  { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
+));
+
 export default bottle.container;

src/short-urls/CreateShortUrl.js

@@ -1,20 +1,18 @@
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda';
+import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
-import { connect } from 'react-redux';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
-import TagsSelector from '../tags/helpers/TagsSelector';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
-import { createShortUrl, createShortUrlResultType, resetCreateShortUrl } from './reducers/shortUrlCreation';
+import { createShortUrlResultType } from './reducers/shortUrlCreation';
 
 const normalizeTag = pipe(trim, replace(/ /g, '-'));
 const formatDate = (date) => isNil(date) ? date : date.format();
 
-export class CreateShortUrlComponent extends React.Component {
+const CreateShortUrl = (TagsSelector) => class CreateShortUrl extends React.Component {
   static propTypes = {
     createShortUrl: PropTypes.func,
     shortUrlCreationResult: createShortUrlResultType,
@@ -122,11 +120,6 @@ export class CreateShortUrlComponent extends React.Component {
       </div>
     );
   }
-}
-
-const CreateShortUrl = connect(pick([ 'shortUrlCreationResult' ]), {
-  createShortUrl,
-  resetCreateShortUrl,
-})(CreateShortUrlComponent);
+};
 
 export default CreateShortUrl;

src/short-urls/helpers/DeleteShortUrlModal.js

@@ -1,18 +1,11 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { pick, identity } from 'ramda';
+import { identity } from 'ramda';
 import { shortUrlType } from '../reducers/shortUrlsList';
-import {
-  deleteShortUrl,
-  resetDeleteShortUrl,
-  shortUrlDeleted,
-  shortUrlDeletionType,
-} from '../reducers/shortUrlDeletion';
-import './QrCodeModal.scss';
+import { shortUrlDeletionType } from '../reducers/shortUrlDeletion';
 
-export class DeleteShortUrlModalComponent extends Component {
+export default class DeleteShortUrlModal extends React.Component {
   static propTypes = {
     shortUrl: shortUrlType,
     toggle: PropTypes.func,
@@ -94,10 +87,3 @@ export class DeleteShortUrlModalComponent extends Component {
     );
   }
 }
-
-const DeleteShortUrlModal = connect(
-  pick([ 'shortUrlDeletion' ]),
-  { deleteShortUrl, resetDeleteShortUrl, shortUrlDeleted }
-)(DeleteShortUrlModalComponent);
-
-export default DeleteShortUrlModal;

src/short-urls/helpers/EditTagsModal.js

@@ -1,19 +1,11 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import { pick } from 'ramda';
-import TagsSelector from '../../tags/helpers/TagsSelector';
-import {
-  editShortUrlTags,
-  resetShortUrlsTags,
-  shortUrlTagsType,
-  shortUrlTagsEdited,
-} from '../reducers/shortUrlTags';
+import { shortUrlTagsType } from '../reducers/shortUrlTags';
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 
-export class EditTagsModalComponent extends React.Component {
+const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     toggle: PropTypes.func.isRequired,
@@ -88,11 +80,6 @@ export class EditTagsModalComponent extends React.Component {
       </Modal>
     );
   }
-}
-
-const EditTagsModal = connect(
-  pick([ 'shortUrlTags' ]),
-  { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }
-)(EditTagsModalComponent);
+};
 
 export default EditTagsModal;

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -15,11 +15,9 @@ import { serverType } from '../../servers/prop-types';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import PreviewModal from './PreviewModal';
 import QrCodeModal from './QrCodeModal';
-import EditTagsModal from './EditTagsModal';
-import DeleteShortUrlModal from './DeleteShortUrlModal';
 import './ShortUrlsRowMenu.scss';
 
-export default class ShortUrlsRowMenu extends React.Component {
+const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
   static propTypes = {
     completeShortUrl: PropTypes.string,
     onCopyToClipboard: PropTypes.func,
@@ -105,4 +103,6 @@ export default class ShortUrlsRowMenu extends React.Component {
       </ButtonDropdown>
     );
   }
-}
+};
+
+export default ShortUrlsRowMenu;

src/tags/helpers/TagsSelector.js

@@ -1,26 +1,21 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import TagsInput from 'react-tagsinput';
 import PropTypes from 'prop-types';
 import Autosuggest from 'react-autosuggest';
-import { pick, identity } from 'ramda';
-import { listTags } from '../reducers/tagsList';
-import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
-import './TagsSelector.scss';
+import { identity } from 'ramda';
 import TagBullet from './TagBullet';
+import './TagsSelector.scss';
 
-export class TagsSelectorComponent extends React.Component {
+const TagsSelector = (colorGenerator) => class TagsSelector extends React.Component {
   static propTypes = {
     tags: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
     placeholder: PropTypes.string,
-    colorGenerator: colorGeneratorType,
     tagsList: PropTypes.shape({
       tags: PropTypes.arrayOf(PropTypes.string),
     }),
   };
   static defaultProps = {
-    colorGenerator,
     placeholder: 'Add tags to the URL',
   };
 
@@ -31,7 +26,7 @@ export class TagsSelectorComponent extends React.Component {
   }
 
   render() {
-    const { tags, onChange, placeholder, colorGenerator, tagsList } = this.props;
+    const { tags, onChange, placeholder, tagsList } = this.props;
     const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
       <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
         {getTagDisplayValue(tag)}
@@ -86,8 +81,6 @@ export class TagsSelectorComponent extends React.Component {
       />
     );
   }
-}
-
-const TagsSelector = connect(pick([ 'tagsList' ]), { listTags })(TagsSelectorComponent);
+};
 
 export default TagsSelector;

test/short-urls/CreateShortUrl.test.js

@@ -3,18 +3,20 @@ import { shallow } from 'enzyme';
 import moment from 'moment';
 import * as sinon from 'sinon';
 import { identity } from 'ramda';
-import { CreateShortUrlComponent as CreateShortUrl } from '../../src/short-urls/CreateShortUrl';
-import TagsSelector from '../../src/tags/helpers/TagsSelector';
+import createShortUrlsCreator from '../../src/short-urls/CreateShortUrl';
 import DateInput from '../../src/utils/DateInput';
 
 describe('<CreateShortUrl />', () => {
   let wrapper;
+  const TagsSelector = () => '';
   const shortUrlCreationResult = {
     loading: false,
   };
   const createShortUrl = sinon.spy();
 
   beforeEach(() => {
+    const CreateShortUrl = createShortUrlsCreator(TagsSelector);
+
     wrapper = shallow(
       <CreateShortUrl shortUrlCreationResult={shortUrlCreationResult} createShortUrl={createShortUrl} />
     );

test/short-urls/helpers/DeleteShortUrlModal.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import * as sinon from 'sinon';
-import { DeleteShortUrlModalComponent as DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
+import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlModal';
 
 describe('<DeleteShortUrlModal />', () => {
   let wrapper;