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

34
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,8 +7,7 @@ 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({
@ -19,15 +18,13 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
match: PropTypes.object, match: PropTypes.object,
}; };
componentDidMount() { const TagsList = (TagCard) => {
const { forceListTags } = this.props; const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
useEffect(() => {
forceListTags(); forceListTags();
} }, []);
renderContent() {
const { tagsList, match } = this.props;
const renderContent = () => {
if (tagsList.loading) { if (tagsList.loading) {
return <Message noMargin loading />; return <Message noMargin loading />;
} }
@ -63,22 +60,21 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
))} ))}
</React.Fragment> </React.Fragment>
); );
} };
render() {
const { filterTags } = this.props;
return ( return (
<React.Fragment> <React.Fragment>
{!this.props.tagsList.loading && {!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
<SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
}
<div className="row"> <div className="row">
{this.renderContent()} {renderContent()}
</div> </div>
</React.Fragment> </React.Fragment>
); );
} };
TagListComp.propTypes = propTypes;
return TagListComp;
}; };
export default TagsList; export default TagsList;