at the end of the day, it was inevitable

frontend/app/components/App/TabsContent/SearchTab/SearchSubTab/ClipArticles/ClipDragSource.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TYPES } from '../../../../../../redux/modules/appState/sidebar'
+import { Interpolate } from 'react-i18next'
+import { DragSource } from 'react-dnd'
+
+const source = {
+  beginDrag (props, monitor, component) {
+    setTimeout(() => {
+      component.setState({
+        isDragging: true
+      })
+    }, 0)
+    return {
+      type: TYPES.CLIP_ARTICLE
+    }
+  },
+
+  endDrag (props, monitor, component) {
+    component.setState({
+      isDragging: false
+    })
+  }
+}
+
+/**
+ * Specifies which props to inject into component from Drag n Drop.
+ */
+function collect (connect) {
+  return {
+    // Call this function inside render()
+    // to let React DnD handle the drag events:
+    connectDragSource: connect.dragSource()
+  }
+}
+
+export class ClipDragSource extends React.Component {
+
+  static propTypes = {
+    articles: PropTypes.array.isRequired,
+    connectDragSource: PropTypes.func.isRequired
+  };
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      isDragging: false
+    }
+  }
+
+  render () {
+
+    const style = {
+      visibility: this.state.isDragging ? 'hidden' : 'visible'
+    }
+
+    return this.props.connectDragSource(
+      <div className="draggable-item" style={style}>
+        <span className="drag-handle" />
+        <Interpolate
+          i18nKey='searchTab.clipPopup.clippedArticles'
+          count={this.props.articles.length}
+        />
+      </div>
+    )
+  }
+}
+
+export default DragSource(TYPES.CLIP_ARTICLE, source, collect)(ClipDragSource)