From aed59da37efdbf6acfb70dca4164d81de12d3705 Mon Sep 17 00:00:00 2001 From: Roughtron Date: Sun, 4 Feb 2018 02:39:26 +0500 Subject: [PATCH 1/3] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81?= =?UTF-8?q?=D0=B0=D1=82=D1=8C=20articles=20=D0=BD=D0=B0=20=D1=81=D1=82?= =?UTF-8?q?=D1=80=D1=83=D0=BA=D1=82=D1=83=D1=80=D1=83=20=D0=BA=D0=BB=D1=8E?= =?UTF-8?q?=D1=87->=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D0=B5,=20?= =?UTF-8?q?=D0=B0=D0=BD=D0=B0=D0=BB=D0=BE=D0=B3=D0=B8=D1=87=D0=BD=D0=BE=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Article/index.js | 26 ++++++++++++++++++-------- src/components/ArticleList.js | 26 +++++++++++++------------- src/components/Filters/Select.js | 13 +++++++------ src/reducer/articles.js | 14 ++++++++++++-- src/selectors/index.js | 12 ++++++------ 5 files changed, 56 insertions(+), 35 deletions(-) diff --git a/src/components/Article/index.js b/src/components/Article/index.js index a3e834e..49fc235 100644 --- a/src/components/Article/index.js +++ b/src/components/Article/index.js @@ -5,15 +5,13 @@ import CSSTransition from 'react-addons-css-transition-group' import {connect} from 'react-redux' import CommentList from '../CommentList' import {deleteArticle} from '../../AC' +import {createFiltratedArticlesSelector} from '../../selectors' import './style.css' class Article extends PureComponent { static propTypes = { - article: PropTypes.shape({ - title: PropTypes.string.isRequired, - text: PropTypes.string, - comments: PropTypes.array - }).isRequired, + id: PropTypes.string.isRequired, + article: PropTypes.object.isRequired, isOpen: PropTypes.bool, toggleOpen: PropTypes.func } @@ -30,6 +28,9 @@ class Article extends PureComponent { render() { console.log('---', 'rerendering') const {article, isOpen, toggleOpen} = this.props + + if(!Object.keys(article).length) return null + const body = isOpen && (
{article.text}
@@ -63,8 +64,8 @@ class Article extends PureComponent { } handleDelete = () => { - const {deleteArticle,article} = this.props - deleteArticle(article.id) + const {deleteArticle, id} = this.props + deleteArticle(id) } increment = () => this.setState({ @@ -85,5 +86,14 @@ class Article extends PureComponent { } +const mapStateToProps = (state, ownProps) => { + const filtratedArticlesSelector = createFiltratedArticlesSelector() + return (state, ownProps) => { + return { + article: filtratedArticlesSelector(state, ownProps) + } + } +} + -export default connect(null, { deleteArticle })(Article) \ No newline at end of file +export default connect(mapStateToProps, { deleteArticle })(Article) \ No newline at end of file diff --git a/src/components/ArticleList.js b/src/components/ArticleList.js index bc1c261..2bde063 100644 --- a/src/components/ArticleList.js +++ b/src/components/ArticleList.js @@ -3,39 +3,39 @@ import PropTypes from 'prop-types' import Article from './Article' import Accordion from './common/Accordion' import {connect} from 'react-redux' -import {filtratedArticlesSelector} from '../selectors' +import {articlesSelector} from '../selectors' class ArticleList extends Accordion { render() { console.log('---', 'rerendering article list') const {articles} = this.props - if (!articles.length) return

No Articles

- const articleElements = articles.map((article) =>
  • -
    -
    • ) + if (!Object.keys(articles).length) return

    No Articles

    + + const articleElements = Object.keys(articles).map(id => +
    ) return ( -
      +
      {articleElements} -
    +
    ) } } ArticleList.defaultProps = { - articles: [] + articles: {} } ArticleList.propTypes = { - articles: PropTypes.array.isRequired + articles: PropTypes.object.isRequired } export default connect(state => { console.log('---', 'connect updated') return { - articles: filtratedArticlesSelector(state) + articles: articlesSelector(state) } })(ArticleList) \ No newline at end of file diff --git a/src/components/Filters/Select.js b/src/components/Filters/Select.js index 1a91857..659ad41 100644 --- a/src/components/Filters/Select.js +++ b/src/components/Filters/Select.js @@ -3,21 +3,22 @@ import PropTypes from 'prop-types' import Select from 'react-select' import { connect } from 'react-redux' import { changeSelection } from '../../AC' +import { articlesSelector, filtersSelector } from '../../selectors' import 'react-select/dist/react-select.css' class SelectFilter extends Component { static propTypes = { - articles: PropTypes.array.isRequired + articles: PropTypes.object.isRequired }; handleChange = selected => this.props.changeSelection(selected.map(option => option.value)) render() { const { articles, selected } = this.props - const options = articles.map(article => ({ - label: article.title, - value: article.id + const options = Object.keys(articles).map(id => ({ + label: articles[id].title, + value: id })) return