at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,60 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { translate } from 'react-i18next'
|
||||
import ExportFeedsTableRow from './ExportFeedsTableRow'
|
||||
import LoadersAdvanced from '../../../../common/Loader/Loader'
|
||||
import { Table, Card, CardBody } from 'reactstrap'
|
||||
|
||||
class ExportFeedsTable extends React.Component {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
tableData: PropTypes.array.isRequired,
|
||||
showPopup: PropTypes.func.isRequired,
|
||||
unexportFeed: PropTypes.func.isRequired,
|
||||
goToFeed: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
tableData,
|
||||
isLoading,
|
||||
showPopup,
|
||||
unexportFeed,
|
||||
goToFeed,
|
||||
t
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Card className="main-card mb-3">
|
||||
{isLoading && <LoadersAdvanced />}
|
||||
<CardBody>
|
||||
<Table striped bordered className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('exportTab.feedName')}</th>
|
||||
<th>{t('exportTab.exportWith')}</th>
|
||||
<th>{t('exportTab.actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tableData.map((feed) => {
|
||||
return (
|
||||
<ExportFeedsTableRow
|
||||
key={feed.id}
|
||||
feed={feed}
|
||||
showPopup={showPopup}
|
||||
unexportFeed={unexportFeed}
|
||||
goToFeed={goToFeed}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(ExportFeedsTable)
|
||||
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Interpolate, translate } from 'react-i18next';
|
||||
import Select from 'react-select';
|
||||
import { Modal, ModalBody, ModalFooter, Button, ModalHeader } from 'reactstrap';
|
||||
|
||||
class ExportFeedsTableRow extends React.Component {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
feed: PropTypes.object.isRequired,
|
||||
showPopup: PropTypes.func.isRequired,
|
||||
unexportFeed: PropTypes.func.isRequired,
|
||||
goToFeed: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
format: 'rss',
|
||||
modal: false
|
||||
};
|
||||
}
|
||||
|
||||
showExportPopup = () => {
|
||||
this.props.showPopup(this.props.feed, this.state.format);
|
||||
};
|
||||
|
||||
toggle = () => {
|
||||
this.setState((prev) => ({ modal: !prev.modal }));
|
||||
};
|
||||
|
||||
exportOptions = [
|
||||
{ label: 'RSS 2.0', value: 'rss' },
|
||||
{ label: 'Atom 1.0', value: 'atom' },
|
||||
{ label: 'TSV', value: 'tsv' },
|
||||
{ label: 'HTML', value: 'html' }
|
||||
];
|
||||
|
||||
onChangeFormat = (format) => {
|
||||
this.setState({
|
||||
format: format
|
||||
});
|
||||
};
|
||||
|
||||
onDeleteClick = () => {
|
||||
this.setState({ modal: false });
|
||||
this.props.unexportFeed(this.props.feed.id);
|
||||
};
|
||||
|
||||
goToFeed = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.goToFeed(this.props.feed.id);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { feed, t } = this.props;
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
<Button
|
||||
color="link"
|
||||
className={`feed-icon font-size-lg p-0 feed-type-mixed ${feed.class}`}
|
||||
onClick={this.goToFeed}
|
||||
>
|
||||
{feed.name}
|
||||
</Button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<Select
|
||||
options={this.exportOptions}
|
||||
value={this.state.format}
|
||||
simpleValue
|
||||
onChange={this.onChangeFormat}
|
||||
clearable={false}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<Button
|
||||
size="sm"
|
||||
color="primary"
|
||||
className="border-0 mr-2"
|
||||
onClick={this.showExportPopup}
|
||||
>
|
||||
{t('exportTab.export')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
outline
|
||||
size="sm"
|
||||
color="secondary"
|
||||
className="border-0"
|
||||
onClick={this.toggle}
|
||||
>
|
||||
{t('exportTab.delete')}
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
isOpen={this.state.modal}
|
||||
toggle={this.toggle}
|
||||
backdrop="static"
|
||||
>
|
||||
<ModalHeader toggle={this.toggle}>
|
||||
{t('exportTab.confirm')}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<p>
|
||||
<Interpolate
|
||||
t={t}
|
||||
i18nKey="exportTab.exportDeleteMessage"
|
||||
feedName={feed.name}
|
||||
/>
|
||||
</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="light" onClick={this.toggle}>
|
||||
{t('common:commonWords.Cancel')}
|
||||
</Button>
|
||||
<Button color="danger" onClick={this.onDeleteClick}>
|
||||
{t('common:commonWords.Delete')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(ExportFeedsTableRow);
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { translate } from 'react-i18next';
|
||||
import config from '../../../../../appConfig';
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
|
||||
class ExportPopup extends React.Component {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
feed: PropTypes.object.isRequired,
|
||||
hidePopup: PropTypes.func.isRequired,
|
||||
exportFormat: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
hidePopup = () => {
|
||||
this.props.hidePopup();
|
||||
};
|
||||
|
||||
hidePopupFromOutside = (e) => {
|
||||
if (e.target === e.currentTarget) this.hidePopup();
|
||||
};
|
||||
|
||||
exportOptions = {
|
||||
rss: 'RSS 2.0',
|
||||
atom: 'Atom 1.0',
|
||||
tsv: 'TSV',
|
||||
html: 'HTML'
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, feed, exportFormat } = this.props;
|
||||
|
||||
const href = `${config.apiUrl}/feed/${feed.id}.${exportFormat}`;
|
||||
|
||||
return (
|
||||
<Modal isOpen toggle={this.hidePopup} backdrop="static" size="lg">
|
||||
<ModalHeader toggle={this.hidePopup}>
|
||||
{this.exportOptions[exportFormat] + ' ' + t('exportTab.export')}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<div className="mb-4">
|
||||
<p>{t('exportTab.exportPopup.line1')}</p>
|
||||
<p className="text-muted font-size-xs mb-2">
|
||||
({t('exportTab.exportPopup.line2')})
|
||||
</p>
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
className="font-weight-bold"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{href}
|
||||
</a>
|
||||
</div>
|
||||
<p className="mb-2">{t('exportTab.exportPopup.line3')}</p>
|
||||
<Table striped>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">n</th>
|
||||
<td>{t('exportTab.exportPopup.param1')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">ext</th>
|
||||
<td>{t('exportTab.exportPopup.param2')}</td>
|
||||
</tr>
|
||||
{exportFormat !== 'tsv' && (
|
||||
<tr>
|
||||
<th scope="row">img</th>
|
||||
<td>{t('exportTab.exportPopup.param3')}</td>
|
||||
</tr>
|
||||
)}
|
||||
{exportFormat !== 'tsv' && exportFormat !== 'html' && (
|
||||
<tr>
|
||||
<th scope="row">text_format</th>
|
||||
<td>{t('exportTab.exportPopup.param4')}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="light" onClick={this.hidePopup}>
|
||||
{t('exportTab.close')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(ExportPopup);
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { translate } from 'react-i18next'
|
||||
import ExportFeedsTable from './ExportFeedsTable'
|
||||
import ExportPopup from './ExportPopup'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import reduxConnect from '../../../../../redux/utils/connect'
|
||||
import { compose } from 'redux'
|
||||
import { setDocumentData } from '../../../../../common/helper'
|
||||
|
||||
class ExportSubTab extends React.Component {
|
||||
static propTypes = {
|
||||
exportFeedsState: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired,
|
||||
history: PropTypes.object.isRequired,
|
||||
t: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setDocumentData('title', 'Export | Share')
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
setDocumentData('title')
|
||||
}
|
||||
|
||||
componentWillMount = () => {
|
||||
this.props.actions.loadExportedFeeds()
|
||||
};
|
||||
|
||||
goToFeed = (feedId) => {
|
||||
const {
|
||||
history,
|
||||
actions: { getFeedResults }
|
||||
} = this.props
|
||||
history.push('/app/search/search')
|
||||
getFeedResults({ page: 1 }, feedId)
|
||||
};
|
||||
|
||||
render () {
|
||||
const { t, exportFeedsState, actions } = this.props
|
||||
return (
|
||||
<div>
|
||||
<p className="text-muted mb-3">{t('exportTab.topMessage')}</p>
|
||||
|
||||
<ExportFeedsTable
|
||||
isLoading={exportFeedsState.isLoading}
|
||||
tableData={exportFeedsState.tableData}
|
||||
showPopup={actions.showExportPopup}
|
||||
unexportFeed={actions.unexportFeed}
|
||||
goToFeed={this.goToFeed}
|
||||
/>
|
||||
|
||||
{exportFeedsState.popupVisible && (
|
||||
<ExportPopup
|
||||
feed={exportFeedsState.selectedFeed}
|
||||
hidePopup={actions.hideExportPopup}
|
||||
exportFormat={exportFeedsState.exportFormat}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const applyDecorators = compose(
|
||||
withRouter,
|
||||
reduxConnect('exportFeedsState', ['appState', 'share', 'exportFeeds']),
|
||||
translate(['tabsContent'], { wait: true })
|
||||
)
|
||||
export default applyDecorators(ExportSubTab)
|
||||
Reference in New Issue
Block a user