Converted TagsList component into functional component

This commit is contained in:
Alejandro Celaya 2020-04-26 11:48:08 +02:00
parent 6bddaaa055
commit 09b8bd501d

View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { splitEvery } from 'ramda';
import PropTypes from 'prop-types';
import Message from '../utils/Message';
@ -7,8 +7,7 @@ import SearchField from '../utils/SearchField';
const { ceil } = Math;
const TAGS_GROUPS_AMOUNT = 4;
const TagsList = (TagCard) => class TagsList extends React.Component {
static propTypes = {
const propTypes = {
filterTags: PropTypes.func,
forceListTags: PropTypes.func,
tagsList: PropTypes.shape({
@ -17,17 +16,15 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
filteredTags: PropTypes.arrayOf(PropTypes.string),
}),
match: PropTypes.object,
};
componentDidMount() {
const { forceListTags } = this.props;
};
const TagsList = (TagCard) => {
const TagListComp = ({ filterTags, forceListTags, tagsList, match }) => {
useEffect(() => {
forceListTags();
}
renderContent() {
const { tagsList, match } = this.props;
}, []);
const renderContent = () => {
if (tagsList.loading) {
return <Message noMargin loading />;
}
@ -63,22 +60,21 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
))}
</React.Fragment>
);
}
render() {
const { filterTags } = this.props;
};
return (
<React.Fragment>
{!this.props.tagsList.loading &&
<SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />
}
{!tagsList.loading && <SearchField className="mb-3" placeholder="Search tags..." onChange={filterTags} />}
<div className="row">
{this.renderContent()}
{renderContent()}
</div>
</React.Fragment>
);
}
};
TagListComp.propTypes = propTypes;
return TagListComp;
};
export default TagsList;