andela / ah-commando-frontend / 411

pending completion

Build # 411

Build Type

Pull #37

travis-ci

Committed by

web-flow

Commit Message

feat(articles tags): display articles with tag
- rebase and fix merge conflict
[Delivers #167190403]

Pull Request Pull Request #37: Display all Articles With a Specific Tag

Run Details

241 of 322 branches covered (74.84%)

Branch coverage included in aggregate %.

47 of 47 new or added lines in 5 files covered. (100.0%)

898 of 1007 relevant lines covered (89.18%)

6.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

65.08

/src/views/Articles/ReadArticle/ReadArticle.js

/* eslint-disable react/no-unused-prop-types */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import ReactHtmlParser from 'react-html-parser';
import { withRouter } from 'react-router-dom';
import swal from '@sweetalert/with-react';
import Loader from 'react-loader-spinner';
import { readArticle, deleteAnArticle } from '@Actions/Articles';
import { getArticlesWithTagFromDb } from '@Actions/tagAction';
import connectComponent from '@Lib/connect-component';
import Icon from '@Components/Icon';
import { convertToHtml, isEmpty } from '@Utils/';
import './ReadArticle.scss';

export class ReadArticle extends Component {
  componentDidMount = async () => {
    const {
      getSingleArticle,
      match: {
        params: {
          slug,
        },
      },
    } = this.props;
    await getSingleArticle(slug);
  }

  parseArticleBody = article => {
    if (!article) {
      return null;
    }
    try {
      return convertToHtml(JSON.parse(article));
    } catch (e) {
      return article;
    }
  }

  editArticle = () => {
    const { history, article: { slug } } = this.props;
    history.push(`/articles/${slug}/edit`);
  }

  isMyArticle = () => {
    const {
      article,
      auth: {
        isAuthenticated,
        user: {
          id,
        },
      },
    } = this.props;
    const authorId = !isEmpty(article) ? article.authorId : 0;

    return isAuthenticated && (authorId === id);
  }

  deleteArticle = () => {
    swal({
      text: 'Are you sure? Once deleted, this cannot be undone!',
      icon: 'warning',
      buttons: true,
      dangerMode: true,
    })
      .then((willDelete) => {
        if (willDelete) {
          const { article: { slug }, history, deleteArticle } = this.props;
          deleteArticle(slug, history);
        }
      });
  }

  handleTagClick = async (tag) => {
    const { getArticlesTag, history } = this.props;
    await getArticlesTag(tag, history);
  }

  render = () => {
    const {
      ui: { loading },
      article: {
        title,
        description,
        author,
        createdAt,
        readTime,
        image,
        articleBody,
        Tags,
        likesCount,
        dislikesCount,
        comment,
      },
    } = this.props;

    const tags = Tags ? Tags.map((tag, i) => (
      <li className="liTag" key={i}>
        <p onClick={() => this.handleTagClick(tag.name)}>{tag.name}</p>
      </li>
    )) : null;
    const body = this.parseArticleBody(articleBody);

    const loader = (
      <div data-test="loader" className="loader">
        <Loader
          type="ThreeDots"
          color="#ffa500"
          height={150}
          width={150}
        />
      </div>
    );

    return (
      <>
        {loading ? loader : (
          <div className="read-article">
            <div className="article-header vertical-center">
              <h1 className="title">{title}</h1>
              <p className="description">{description}</p>
              <div className="article-user center">
                <div className="article-user-details">
                  <div className="article-img-div center">
                    <img
                      src={
                        author && author.image !== null ? author.image
                          : 'https://res.cloudinary.com/drdje1skj/image/upload/v1567427029/profile-placeholder_gvxkia.gif'
                      }
                      alt="profile pic"
                    />
                  </div>
                  <div className="article-details-div center">
                    <div className="vertical-center name-date">
                      <p className="author-name">{author ? author.username : 'Loading...'}</p>
                      <p className="created-date">{moment(createdAt).format('MMM DD, YYYY')}</p>
                    </div>
                    <div className="vertical-center read-time">
                      <p>{`${readTime || 0} min${readTime > 1 ? 's' : ''} read`}</p>
                      {this.isMyArticle() && (
                        <button
                          data-test="edit-article"
                          type="button"
                          onClick={this.editArticle}
                        >
                          Edit Article
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="main-article-image-div">
              <img
                src={image}
                alt=""
              />
            </div>
            <main className="center">
              <article>
                {ReactHtmlParser(body)}
              </article>
            </main>
            <div className="article-tag-div">
              <ul>
                {tags}
              </ul>
            </div>
            <div className="article-stats-div">
              <div className="center like-count">
                <Icon name="likes" />
                <p className="icon-label">{likesCount}</p>
                <Icon name="dislikes" />
                <p className="icon-label">{dislikesCount}</p>
              </div>
              <div className="comment-delete">
                <Icon name="comments" />
                <p className="icon-label">{comment ? comment.length : 0}</p>
                {this.isMyArticle() && (
                  <button
                    className="delete-icon"
                    type="button"
                    onClick={this.deleteArticle}
                  >
                    <Icon name="trash" />
                  </button>
                )}
              </div>
            </div>
          </div>
        )}
      </>
    );
  };
}

ReadArticle.propTypes = {
  getSingleArticle: PropTypes.func.isRequired,
  deleteArticle: PropTypes.func.isRequired,
  match: PropTypes.shape().isRequired,
  article: PropTypes.shape().isRequired,
  history: PropTypes.shape().isRequired,
  auth: PropTypes.shape().isRequired,
  ui: PropTypes.shape().isRequired,
  getArticlesTag: PropTypes.func.isRequired,
};

export default connectComponent(
  withRouter(ReadArticle), {
    getSingleArticle: slug => readArticle(slug),
    deleteArticle: (slug, history) => deleteAnArticle(slug, history),
    getArticlesTag: getArticlesWithTagFromDb,
  },
);

1	/* eslint-disable react/no-unused-prop-types */
2	/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
3	import React, { Component } from 'react';
4	import PropTypes from 'prop-types';
5	import moment from 'moment';
6	import ReactHtmlParser from 'react-html-parser';
7	import { withRouter } from 'react-router-dom';
8	import swal from '@sweetalert/with-react';
9	import Loader from 'react-loader-spinner';
10	import { readArticle, deleteAnArticle } from '@Actions/Articles';
11	import { getArticlesWithTagFromDb } from '@Actions/tagAction';
12	import connectComponent from '@Lib/connect-component';
13	import Icon from '@Components/Icon';
14	import { convertToHtml, isEmpty } from '@Utils/';
15	import './ReadArticle.scss';
16
17	export class ReadArticle extends Component {
18	componentDidMount = async () => {	4✔
19	const {
20	getSingleArticle,
21	match: {
22	params: {
23	slug,
24	},
25	},
26	} = this.props;	1✔
27	await getSingleArticle(slug);	1✔
28	}
29
30	parseArticleBody = article => {	4✔
31	if (!article) {	5✔
32	return null;	4✔
33	}
34	try {	1✔
35	return convertToHtml(JSON.parse(article));	1✔
36	} catch (e) {
37	return article;	1✔
38	}
39	}
40
41	editArticle = () => {	4✔
42	const { history, article: { slug } } = this.props;	1✔
43	history.push(`/articles/${slug}/edit`);	1✔
44	}
45
46	isMyArticle = () => {	4✔
47	const {
48	article,
49	auth: {
50	isAuthenticated,
51	user: {
52	id,
53	},
54	},
55	} = this.props;	8✔
56	const authorId = !isEmpty(article) ? article.authorId : 0;	8!
57
58	return isAuthenticated && (authorId === id);	8✔
59	}
60
61	deleteArticle = () => {	4✔
62	swal({	×
63	text: 'Are you sure? Once deleted, this cannot be undone!',
64	icon: 'warning',
65	buttons: true,
66	dangerMode: true,
67	})
68	.then((willDelete) => {
69	if (willDelete) {	×
70	const { article: { slug }, history, deleteArticle } = this.props;	×
71	deleteArticle(slug, history);	×
72	}
73	});
74	}
75
76	handleTagClick = async (tag) => {	4✔
77	const { getArticlesTag, history } = this.props;	×
78	await getArticlesTag(tag, history);	×
79	}
80
81	render = () => {	4✔
82	const {
83	ui: { loading },
84	article: {
85	title,
86	description,
87	author,
88	createdAt,
89	readTime,
90	image,
91	articleBody,
92	Tags,
93	likesCount,
94	dislikesCount,
95	comment,
96	},
97	} = this.props;	4✔
98
99	const tags = Tags ? Tags.map((tag, i) => (	4!
100	<li className="liTag" key={i}>	×
101	<p onClick={() => this.handleTagClick(tag.name)}>{tag.name}</p>	×
102	</li>
103	)) : null;
104	const body = this.parseArticleBody(articleBody);	4✔
105
106	const loader = (
107	<div data-test="loader" className="loader">	4✔
108	<Loader
109	type="ThreeDots"
110	color="#ffa500"
111	height={150}
112	width={150}
113	/>
114	</div>
115	);
116
117	return (	4✔
118	<>
119	{loading ? loader : (	4!
120	<div className="read-article">
121	<div className="article-header vertical-center">
122	<h1 className="title">{title}</h1>
123	<p className="description">{description}</p>
124	<div className="article-user center">
125	<div className="article-user-details">
126	<div className="article-img-div center">
127	<img
128	src={
129	author && author.image !== null ? author.image	8!
130	: 'https://res.cloudinary.com/drdje1skj/image/upload/v1567427029/profile-placeholder_gvxkia.gif'
131	}
132	alt="profile pic"
133	/>
134	</div>
135	<div className="article-details-div center">
136	<div className="vertical-center name-date">
137	<p className="author-name">{author ? author.username : 'Loading...'}</p>	4!
138	<p className="created-date">{moment(createdAt).format('MMM DD, YYYY')}</p>
139	</div>
140	<div className="vertical-center read-time">
141	<p>{`${readTime \|\| 0} min${readTime > 1 ? 's' : ''} read`}</p>	12!
142	{this.isMyArticle() && (	4!
143	<button
144	data-test="edit-article"
145	type="button"
146	onClick={this.editArticle}
147	>
148	Edit Article
149	</button>
150	)}
151	</div>
152	</div>
153	</div>
154	</div>
155	</div>
156	<div className="main-article-image-div">
157	<img
158	src={image}
159	alt=""
160	/>
161	</div>
162	<main className="center">
163	<article>
164	{ReactHtmlParser(body)}
165	</article>
166	</main>
167	<div className="article-tag-div">
168	<ul>
169	{tags}
170	</ul>
171	</div>
172	<div className="article-stats-div">
173	<div className="center like-count">
174	<Icon name="likes" />
175	<p className="icon-label">{likesCount}</p>
176	<Icon name="dislikes" />
177	<p className="icon-label">{dislikesCount}</p>
178	</div>
179	<div className="comment-delete">
180	<Icon name="comments" />
181	<p className="icon-label">{comment ? comment.length : 0}</p>	4!
182	{this.isMyArticle() && (	4!
183	<button
184	className="delete-icon"
185	type="button"
186	onClick={this.deleteArticle}
187	>
188	<Icon name="trash" />
189	</button>
190	)}
191	</div>
192	</div>
193	</div>
194	)}
195	</>
196	);
197	};
198	}
199
200	ReadArticle.propTypes = {	2✔
201	getSingleArticle: PropTypes.func.isRequired,
202	deleteArticle: PropTypes.func.isRequired,
203	match: PropTypes.shape().isRequired,
204	article: PropTypes.shape().isRequired,
205	history: PropTypes.shape().isRequired,
206	auth: PropTypes.shape().isRequired,
207	ui: PropTypes.shape().isRequired,
208	getArticlesTag: PropTypes.func.isRequired,
209	};
210
211	export default connectComponent(
212	withRouter(ReadArticle), {
213	getSingleArticle: slug => readArticle(slug),	×
214	deleteArticle: (slug, history) => deleteAnArticle(slug, history),	×
215	getArticlesTag: getArticlesWithTagFromDb,
216	},
217	);

andela / ah-commando-frontend / 411

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous