mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +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 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;

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 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,

16
src/utils/TagsSelector.js
View file

@ -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; <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
{getTagDisplayValue(tag)}
return ( {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
<span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}> </span>
{getTagDisplayValue(tag)} );
{!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
</span>
);
};
return ( return (
<TagsInput <TagsInput