this.searchTermChanged(e.target.value)}
- value={this.state.searchTerm}
- />
-
this.searchTermChanged('')}
- id="search-bar__close"
- >
- ×
+
+
+
this.searchTermChanged(e.target.value)}
+ value={this.state.searchTerm}
+ />
+
+
this.searchTermChanged('')}
+ id="search-bar__close"
+ >
+ ×
+
+
+ {selectedTag && (
+
+ Filtering by tag:
+
+ listShortUrls({ ...shortUrlsListParams, tags: undefined })}
+ />
+
+ )}
);
}
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 1bd00332..0683c72a 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,14 +1,12 @@
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty } from 'ramda';
+import { isEmpty, pick } from 'ramda';
import React from 'react';
import { connect } from 'react-redux';
-import Tag from '../utils/Tag';
import { ShortUrlsRow } from './helpers/ShortUrlsRow';
import { listShortUrls } from './reducers/shortUrlsList';
import './ShortUrlsList.scss';
-import { pick } from 'ramda';
export class ShortUrlsList extends React.Component {
refreshList = extraParams => {
@@ -110,17 +108,14 @@ export class ShortUrlsList extends React.Component {
}
return shortUrlsList.map(shortUrl => (
-
+
));
}
-
- static renderTags(tags) {
- if (isEmpty(tags)) {
- return
No tags;
- }
-
- return tags.map(tag =>
);
- }
}
export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 5c5fafa1..d2bef438 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -1,12 +1,22 @@
+import { isEmpty } from 'ramda';
import React from 'react';
import Moment from 'react-moment';
-import { ShortUrlsList } from '../ShortUrlsList';
+import Tag from '../../utils/Tag';
+import './ShortUrlsRow.scss';
import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
-import './ShortUrlsRow.scss'
export class ShortUrlsRow extends React.Component {
state = { displayMenu: false, copiedToClipboard: false };
+ renderTags(tags) {
+ if (isEmpty(tags)) {
+ return
No tags;
+ }
+
+ const { refreshList } = this.props;
+ return tags.map(tag =>
refreshList({ tags: [tag] })} />);
+ }
+
render() {
const { shortUrl, selectedServer } = this.props;
const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
@@ -22,18 +32,18 @@ export class ShortUrlsRow extends React.Component {
{completeShortUrl}
|
-
+ |
{shortUrl.originalUrl}
+ |
+ {this.renderTags(shortUrl.tags)} |
+ {shortUrl.visitsCount} |
+
Copied short URL!
- |
- {ShortUrlsList.renderTags(shortUrl.tags)} |
- {shortUrl.visitsCount} |
-
- {this.props.text}
-
- );
+export default function Tag (
+ {
+ colorGenerator,
+ text,
+ clearable,
+ onClick = () => ({}),
+ onClose = () => ({})
}
+) {
+ return (
+
+ {text}
+ {clearable && ×}
+
+ );
}
Tag.defaultProps = {
- ColorGenerator
+ colorGenerator: ColorGenerator
};
diff --git a/src/utils/Tag.scss b/src/utils/Tag.scss
index 2c7a1f73..24a838e3 100644
--- a/src/utils/Tag.scss
+++ b/src/utils/Tag.scss
@@ -1,7 +1,21 @@
.tag {
color: #fff;
+ cursor: pointer;
}
.tag:not(:last-child) {
margin-right: 3px;
}
+
+.tag__close-selected-tag.tag__close-selected-tag {
+ font-size: inherit;
+ color: inherit;
+ opacity: 1;
+ cursor: pointer;
+ margin-left: 5px;
+}
+
+.tag__close-selected-tag.tag__close-selected-tag:hover {
+ color: inherit;
+ opacity: 1;
+}
|