at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,90 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { translate } from 'react-i18next'
+import ClipDragSource from './ClipDragSource'
+import RecentFeed from './RecentFeed'
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'
+
+export class ClipArticlesPopup extends React.Component {
+  static propTypes = {
+    hidePopup: PropTypes.func.isRequired,
+    clipArticles: PropTypes.func.isRequired,
+    articles: PropTypes.array.isRequired,
+    recentClipFeeds: PropTypes.array.isRequired,
+    getRecentClipFeeds: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired
+  }
+
+  hidePopupFromOutside = (e) => {
+    if (e.target === e.currentTarget) this.hidePopup()
+  }
+
+  hidePopup = () => {
+    this.props.hidePopup()
+  }
+
+  onSubmit = () => {
+    this.hidePopup()
+  }
+
+  componentWillMount = () => {
+    this.props.getRecentClipFeeds()
+  }
+
+  onRecentFeedClick = (feed) => {
+    this.props.clipArticles(feed.id)
+    this.props.hidePopup()
+  }
+
+  render() {
+    const { t, articles, recentClipFeeds } = this.props
+
+    return (
+      <Modal
+        isOpen
+        toggle={this.hidePopup}
+        backdrop={false}
+        modalClassName="pointer-events-none"
+      >
+        <ModalHeader toggle={this.hidePopup}>
+          {t('searchTab.clipPopup.header')}
+        </ModalHeader>
+        <ModalBody>
+          <div className="text-center">
+            <p>{t('searchTab.clipPopup.hint1')}</p>
+
+            <div className="draggable-container">
+              <ClipDragSource articles={articles} />
+            </div>
+
+            {recentClipFeeds && recentClipFeeds.length > 0 && (
+              <div className="mt-2">
+                <p className="mb-2">{t('searchTab.clipPopup.hint2')}</p>
+                <div className="d-flex justify-content-center flex-wrap">
+                  {recentClipFeeds.map((feed) => {
+                    return (
+                      <RecentFeed
+                        onRecentFeedClick={this.onRecentFeedClick}
+                        key={feed.id}
+                        feed={feed}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="light" onClick={this.hidePopup}>
+            {t('common:commonWords.Cancel')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+export default translate(['tabsContent', 'common'], { wait: true })(
+  ClipArticlesPopup
+)