+ {!this.props.tagsList.loading && (
+
+ )}
{this.renderContent()}
@@ -64,4 +74,4 @@ export class TagsList extends React.Component {
}
}
-export default connect(pick(['tagsList']), { listTags })(TagsList);
+export default connect(pick(['tagsList']), { listTags, filterTags })(TagsList);
diff --git a/src/tags/reducers/tagsList.js b/src/tags/reducers/tagsList.js
index e48aa7ee..d2d7c819 100644
--- a/src/tags/reducers/tagsList.js
+++ b/src/tags/reducers/tagsList.js
@@ -6,9 +6,11 @@ import { TAG_EDITED } from './tagEdit';
const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
+const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
const defaultState = {
tags: [],
+ filteredTags: [],
loading: false,
error: false,
};
@@ -30,20 +32,31 @@ export default function reducer(state = defaultState, action) {
case LIST_TAGS:
return {
tags: action.tags,
+ filteredTags: action.tags,
loading: false,
error: false,
};
case TAG_DELETED:
return {
...state,
+ // FIXME This should be optimized somehow...
tags: reject(tag => tag === action.tag, state.tags),
+ filteredTags: reject(tag => tag === action.tag, state.filteredTags),
};
case TAG_EDITED:
+ const renameTag = tag => tag === action.oldName ? action.newName : tag;
return {
...state,
- tags: state.tags.map(
- tag => tag === action.oldName ? action.newName : tag
- ).sort(),
+ // FIXME This should be optimized somehow...
+ tags: state.tags.map(renameTag).sort(),
+ filteredTags: state.filteredTags.map(renameTag).sort(),
+ };
+ case FILTER_TAGS:
+ return {
+ ...state,
+ filteredTags: state.tags.filter(
+ tag => tag.toLowerCase().match(action.searchTerm),
+ ),
};
default:
return state;
@@ -61,3 +74,8 @@ export const _listTags = ShlinkApiClient => async dispatch => {
}
};
export const listTags = () => _listTags(ShlinkApiClient);
+
+export const filterTags = searchTerm => ({
+ type: FILTER_TAGS,
+ searchTerm,
+});
diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
index 77a569b9..b2474647 100644
--- a/src/utils/SearchField.js
+++ b/src/utils/SearchField.js
@@ -2,10 +2,17 @@ import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
import PropTypes from 'prop-types';
+import classnames from 'classnames';
import './SearchField.scss';
const propTypes = {
onChange: PropTypes.func.isRequired,
+ className: PropTypes.string,
+ placeholder: PropTypes.string,
+};
+const defaultProps = {
+ className: '',
+ placeholder: 'Search...',
};
export default class SearchField extends React.Component {
@@ -31,12 +38,14 @@ export default class SearchField extends React.Component {
}
render() {
+ const { className, placeholder } = this.props;
+
return (
-