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

Converted TagsList component into functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-04-26 11:48:08 +02:00
parent 6bddaaa055
commit 09b8bd501d
1 changed files with 66 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/tags/TagsList.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import { splitEvery } from 'ramda'; import { splitEvery } from 'ramda';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Message from '../utils/Message'; import Message from '../utils/Message';
@ -7,78 +7,74 @@ import SearchField from '../utils/SearchField';
const { ceil } = Math; const { ceil } = Math;
const TAGS_GROUPS_AMOUNT = 4; const TAGS_GROUPS_AMOUNT = 4;
const TagsList = (TagCard) => class TagsList extends React.Component { const propTypes = {
static propTypes = { filterTags: PropTypes.func,
filterTags: PropTypes.func, forceListTags: PropTypes.func,
forceListTags: PropTypes.func, tagsList: PropTypes.shape({
tagsList: PropTypes.shape({ loading: PropTypes.bool,
loading: PropTypes.bool, error: PropTypes.bool,
error: PropTypes.bool, filteredTags: PropTypes.arrayOf(PropTypes.string),
filteredTags: PropTypes.arrayOf(PropTypes.string), }),
}), match: PropTypes.object,
match: PropTypes.object, };
const TagsList = (TagCard) => {
const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
useEffect(() => {
forceListTags();
}, []);
const renderContent = () => {
if (tagsList.loading) {
return <Message noMargin loading />;
}
if (tagsList.error) {
return (
<div className="col-12">
<div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
</div>
);
}
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
return <Message>No tags found</Message>;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
return (
<React.Fragment>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
<TagCard
key={tag}
tag={tag}
currentServerId={match.params.serverId}
/>
))}
</div>
))}
</React.Fragment>
);
};
return (
<React.Fragment>
{!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
<div className="row">
{renderContent()}
</div>
</React.Fragment>
);
}; };
componentDidMount() { TagListComp.propTypes = propTypes;
const { forceListTags } = this.props;
forceListTags(); return TagListComp;
}
renderContent() {
const { tagsList, match } = this.props;
if (tagsList.loading) {
return <Message noMargin loading />;
}
if (tagsList.error) {
return (
<div className="col-12">
<div className="bg-danger p-2 text-white text-center">Error loading tags :(</div>
</div>
);
}
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
return <Message>No tags found</Message>;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
return (
<React.Fragment>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
<TagCard
key={tag}
tag={tag}
currentServerId={match.params.serverId}
/>
))}
</div>
))}
</React.Fragment>
);
}
render() {
const { filterTags } = this.props;
return (
<React.Fragment>
{!this.props.tagsList.loading &&
<SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
}
<div className="row">
{this.renderContent()}
</div>
</React.Fragment>
);
}
}; };
export default TagsList; export default TagsList;