mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Created different functions which load tags always or only once
This commit is contained in:
parent
0b089e24de
commit
1519f89318
3 changed files with 21 additions and 17 deletions
|
@ -4,7 +4,7 @@ import { pick, splitEvery } from 'ramda';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import MuttedMessage from '../utils/MuttedMessage';
|
import MuttedMessage from '../utils/MuttedMessage';
|
||||||
import SearchField from '../utils/SearchField';
|
import SearchField from '../utils/SearchField';
|
||||||
import { filterTags, listTags } from './reducers/tagsList';
|
import { filterTags, forceListTags } from './reducers/tagsList';
|
||||||
import TagCard from './TagCard';
|
import TagCard from './TagCard';
|
||||||
|
|
||||||
const { ceil } = Math;
|
const { ceil } = Math;
|
||||||
|
@ -13,7 +13,7 @@ const TAGS_GROUP_SIZE = 4;
|
||||||
export class TagsListComponent extends React.Component {
|
export class TagsListComponent extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
filterTags: PropTypes.func,
|
filterTags: PropTypes.func,
|
||||||
listTags: PropTypes.func,
|
forceListTags: PropTypes.func,
|
||||||
tagsList: PropTypes.shape({
|
tagsList: PropTypes.shape({
|
||||||
loading: PropTypes.bool,
|
loading: PropTypes.bool,
|
||||||
}),
|
}),
|
||||||
|
@ -21,9 +21,9 @@ export class TagsListComponent extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { listTags } = this.props;
|
const { forceListTags } = this.props;
|
||||||
|
|
||||||
listTags();
|
forceListTags(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderContent() {
|
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;
|
export default TagsList;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { reject } from 'ramda';
|
import { isEmpty, reject } from 'ramda';
|
||||||
import shlinkApiClient from '../../api/ShlinkApiClient';
|
import shlinkApiClient from '../../api/ShlinkApiClient';
|
||||||
import { TAG_DELETED } from './tagDelete';
|
import { TAG_DELETED } from './tagDelete';
|
||||||
import { TAG_EDITED } from './tagEdit';
|
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 });
|
dispatch({ type: LIST_TAGS_START });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
@ -82,6 +88,8 @@ export const _listTags = (shlinkApiClient) => async (dispatch) => {
|
||||||
|
|
||||||
export const listTags = () => _listTags(shlinkApiClient);
|
export const listTags = () => _listTags(shlinkApiClient);
|
||||||
|
|
||||||
|
export const forceListTags = () => _listTags(shlinkApiClient, true);
|
||||||
|
|
||||||
export const filterTags = (searchTerm) => ({
|
export const filterTags = (searchTerm) => ({
|
||||||
type: FILTER_TAGS,
|
type: FILTER_TAGS,
|
||||||
searchTerm,
|
searchTerm,
|
||||||
|
|
|
@ -15,16 +15,12 @@ const propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
|
export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
|
||||||
const renderTag = (props) => {
|
const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
|
||||||
const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
|
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
|
||||||
{getTagDisplayValue(tag)}
|
{getTagDisplayValue(tag)}
|
||||||
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
|
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TagsInput
|
<TagsInput
|
||||||
|
|
Loading…
Reference in a new issue