diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js index d82ae9f2..9e5e75f7 100644 --- a/src/short-urls/SearchBar.js +++ b/src/short-urls/SearchBar.js @@ -44,16 +44,19 @@ export class SearchBar extends React.Component {

  - {selectedTags.map(tag => listShortUrls( - { - ...shortUrlsListParams, - tags: selectedTags.filter(selectedTag => selectedTag !== tag) - } - )} - />)} + {selectedTags.map(tag => ( + listShortUrls( + { + ...shortUrlsListParams, + tags: selectedTags.filter(selectedTag => selectedTag !== tag) + } + )} + /> + ))}

)} diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index 2a1a68d5..af94ea93 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -8,6 +8,7 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from import { ShortUrlsRow } from './helpers/ShortUrlsRow' import { listShortUrls } from './reducers/shortUrlsList' import './ShortUrlsList.scss' +import qs from 'qs'; const SORTABLE_FIELDS = { dateCreated: 'Created at', @@ -64,8 +65,10 @@ export class ShortUrlsList extends React.Component { } componentDidMount() { - const { match: { params } } = this.props; - this.refreshList({ page: params.page }); + const { match: { params }, location } = this.props; + const query = qs.parse(location.search, { ignoreQueryPrefix: true }); + + this.refreshList({ page: params.page, tags: query.tag ? [query.tag] : [] }); } renderShortUrls() { diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index 0237bc07..3190e327 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -15,9 +15,13 @@ export class ShortUrlsRow extends React.Component { const { refreshList, shortUrlsListParams } = this.props; const selectedTags = shortUrlsListParams.tags || []; - return tags.map( - tag => refreshList({tags: [ ...selectedTags, tag ] })} /> - ); + return tags.map(tag => ( + refreshList({ tags: [ ...selectedTags, tag ] })} + /> + )); } render() { diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js index 5f5a79a0..7c8a421e 100644 --- a/src/tags/TagCard.js +++ b/src/tags/TagCard.js @@ -7,6 +7,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator'; import './TagCard.scss'; +import { Link } from 'react-router-dom'; const propTypes = { tag: PropTypes.string, @@ -20,7 +21,7 @@ export default class TagCard extends React.Component { state = { isDeleteModalOpen: false, isEditModalOpen: false }; render() { - const { tag, colorGenerator } = this.props; + const { tag, colorGenerator, currentServerId } = this.props; const toggleDelete = () => this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen }); @@ -41,7 +42,9 @@ export default class TagCard extends React.Component { style={{backgroundColor: colorGenerator.getColorForKey(tag)}} className="tag-card__tag-bullet" /> - {tag} + + {tag} + diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js index 1ce60416..a8e641fd 100644 --- a/src/tags/TagsList.js +++ b/src/tags/TagsList.js @@ -16,7 +16,7 @@ export class TagsList extends React.Component { } renderContent() { - const { tagsList } = this.props; + const { tagsList, match } = this.props; if (tagsList.loading) { return Loading... } @@ -40,7 +40,13 @@ export class TagsList extends React.Component { {tagsGroups.map((group, index) => (
- {group.map(tag => )} + {group.map(tag => ( + + ))}
))}