mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Created different functions which load tags always or only once

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-28 22:47:46 +02:00
parent 0b089e24de
commit 1519f89318
3 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/tags/TagsList.js
View file

@ -4,7 +4,7 @@ import { pick, splitEvery } from 'ramda';
import PropTypes from 'prop-types';
import MuttedMessage from '../utils/MuttedMessage';
import SearchField from '../utils/SearchField';
import { filterTags, listTags } from './reducers/tagsList';
import { filterTags, forceListTags } from './reducers/tagsList';
import TagCard from './TagCard';
const { ceil } = Math;
@ -13,7 +13,7 @@ const TAGS_GROUP_SIZE = 4;
export class TagsListComponent extends React.Component {
static propTypes = {
filterTags: PropTypes.func,
listTags: PropTypes.func,
forceListTags: PropTypes.func,
tagsList: PropTypes.shape({
loading: PropTypes.bool,
}),
@ -21,9 +21,9 @@ export class TagsListComponent extends React.Component {
};
componentDidMount() {
const { listTags } = this.props;
const { forceListTags } = this.props;
listTags();
forceListTags(true);
}
renderContent() {
@ -86,6 +86,6 @@ export class TagsListComponent extends React.Component {
}
}
const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
const TagsList = connect(pick([ 'tagsList' ]), { forceListTags, filterTags })(TagsListComponent);
export default TagsList;

12
src/tags/reducers/tagsList.js
View file

@ -1,4 +1,4 @@
import { reject } from 'ramda';
import { isEmpty, reject } from 'ramda';
import shlinkApiClient from '../../api/ShlinkApiClient';
import { TAG_DELETED } from './tagDelete';
import { TAG_EDITED } from './tagEdit';
@ -68,7 +68,13 @@ export default function reducer(state = defaultState, action) {
}
}
export const _listTags = (shlinkApiClient) => async (dispatch) => {
export const _listTags = (shlinkApiClient, force = false) => async (dispatch, getState) => {
const { tagsList } = getState();
if (!force && (tagsList.loading || !isEmpty(tagsList.tags))) {
return;
}
dispatch({ type: LIST_TAGS_START });
try {
@ -82,6 +88,8 @@ export const _listTags = (shlinkApiClient) => async (dispatch) => {
export const listTags = () => _listTags(shlinkApiClient);
export const forceListTags = () => _listTags(shlinkApiClient, true);
export const filterTags = (searchTerm) => ({
type: FILTER_TAGS,
searchTerm,

16
src/utils/TagsSelector.js
View file

@ -15,16 +15,12 @@ const propTypes = {
};
export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
const renderTag = (props) => {
const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
return (
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
{getTagDisplayValue(tag)}
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
</span>
);
};
const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
{getTagDisplayValue(tag)}
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
</span>
);
return (
<TagsInput