Merge pull request #54 from andela/bg-fix-bugs

fix bugs

src/__tests__/components/Chat/Chat.test.js

@@ -40,7 +40,8 @@ const props = {
   profile: {
     id: 1,
     ...user
-  }
+  },
+  isAuth: true
 };
 
 let component = '';
@@ -54,7 +55,6 @@ describe('CHAT', () => {
   beforeEach(() => {
     component = shallow(<ChatComponent state={state} {...props} />);
     component.setState(state);
-    component.setProps(state);
     input = component.find('[name="inputMessage"]');
     submitButton = component.find('#submit-chat');
     deleteButton = component.find('.delete-chat');

src/__tests__/components/Header/HeaderUserMenu.test.js

@@ -20,6 +20,5 @@ describe('<HeaderUserMenu />', () => {
       </Provider>);
 
     component.findWhere(n => n.hasClass('logout') && n.simulate('click', {}));
-    expect(component).toHaveLength(1);
   });
 });

src/__tests__/components/Profile/EditArticle.test.js

@@ -15,7 +15,9 @@ const props = {
   message: { message: 'article edited successfully' },
   match: { params: { slug: 'slug-slug-slug' } },
   editPost: jest.fn(),
-  onEditorStateChange: jest.fn()
+  onEditorStateChange: jest.fn(),
+  addTags: { response: 'okkkkk' },
+  createTag: jest.fn()
 };
 const state = {
   article: { title: 'hello', description: 'hello' },
@@ -100,4 +102,13 @@ describe('<EditArticleComponent />', () => {
     const fakeEvent = { preventDefault: () => {} };
     instance.onSubmit(fakeEvent);
   });
+
+  it('should trigger handleChange ', () => {
+    component.instance().handleChange({ target: { value: 'hello world' } });
+  });
+
+  test('Should add tag when the user is logged in', () => {
+    component.setState({ ...state });
+    component.instance().handleSubmitTag({ preventDefault: jest.fn() });
+  });
 });

src/__tests__/components/Profile/PreviewArticle.test.js

@@ -100,13 +100,4 @@ describe('<PreviewArticle />', () => {
     component.setProps({ article: state.article, message: state.message });
     component.instance().handleDelete();
   });
-
-  it('should trigger handleChange ', () => {
-    component.instance().handleChange({ target: { value: 'hello world' } });
-  });
-
-  test('Should add tag when the user is logged in', () => {
-    component.setState({ ...state });
-    component.instance().handleSubmitTag({ preventDefault: jest.fn() });
-  });
 });

src/__tests__/components/SearchArticles.test.js

@@ -35,16 +35,16 @@ describe('<SearchArticles /> component', () => {
   });
   it('it open advanced seach', () => {
     const search = component
-      .find('input[name="searchArticle"]')
-      .simulate('change', { target: { value: 'prince@gmail.com' } });
-    expect(search).toHaveLength(1);
+      .find('input[name="keyword"]')
+      .map(input => input.simulate('change', { target: { value: 'prince@gmail.com' } }));
+    expect(search).toHaveLength(2);
   });
   it('it open advanced seach', () => {
     component.setState({ display: true });
     const search = component
-      .find('input[name="searchArticle"]')
-      .simulate('change', { target: { value: 'prince@gmail.com' } });
-    expect(search).toHaveLength(1);
+      .find('input[name="keyword"]')
+      .map(input => input.simulate('change', { target: { name: 'keyword', value: 'prince@gmail.com' } }));
+    expect(search).toHaveLength(2);
   });
   it('it open advanced seach', () => {
     const search = component.find('Link[testID="link-test"]').simulate('click', {});
@@ -53,7 +53,7 @@ describe('<SearchArticles /> component', () => {
   it('it open advanced search', () => {
     component
       .find('input[name="keyword"]')
-      .simulate('change', { target: { name: 'keyword', value: 'prince@gmail.com' } });
+      .map(input => input.simulate('change', { target: { name: 'keyword', value: 'prince@gmail.com' } }));
 
     component
       .find('input[name="author"]')
@@ -70,7 +70,7 @@ describe('<SearchArticles /> component', () => {
   it('it open advanced search', () => {
     component
       .find('input[name="keyword"]')
-      .simulate('change', { target: { name: 'keyword', value: '' } });
+      .map(input => input.simulate('change', { target: { name: 'keyword', value: '' } }));
 
     component
       .find('input[name="author"]')

src/actions/articles/getPublished.js

@@ -1,9 +1,9 @@
 import { articlesType } from '../../actions-types';
 import { apiAction } from '../../helpers';
 
-export const getPublished = () => dispatch => dispatch(apiAction({
+export const getPublished = (status = 'published') => dispatch => dispatch(apiAction({
   method: 'get',
-  url: '/articles/published',
+  url: `/articles/${status}`,
   onStart: articlesType.FETCH_MY_PUBLISHED_ARTICLES_START,
   onEnd: articlesType.FETCH_MY_PUBLISHED_ARTICLES_END,
   onSuccess: articlesType.FETCH_MY_PUBLISHED_ARTICLES_SUCCESS,

src/assets/css/style.scss

@@ -249,3 +249,7 @@ header {
 .hide {
   display: none;
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}

src/components/Articles/Article/Article.js

@@ -1,6 +1,7 @@
 import 'dotenv/config';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import LazyLoad from 'react-lazyload';
@@ -174,12 +175,15 @@ export class Article extends Component {
                 <div className="articleInfo">
                   <div className="row">
                     <div className="small-screen-4 medium-screen-2 large-screen-2">
-                      <span className="avatar">
+                      <Link
+                        to={`/search?author=${article.author.username}`}
+                        className="avatar text-info bold"
+                      >
                         <img src={article.author.image || avatar} alt={article.author.lastName} />
                         <span>
                           {article.author.lastName} {article.author.firstName}
                         </span>
-                      </span>
+                      </Link>
                       <span className="inline-block">
                         <Following />
                       </span>
@@ -216,7 +220,9 @@ export class Article extends Component {
                   {article.tagList
                     ? article.tagList.map(value => (
                         <p className="tags-values" key={value}>
-                          <span className="value-tag">{value}</span>
+                          <Link to={`/search?tag=${value}`} className="value-tag">
+                            {value}
+                          </Link>
                         </p>
                     ))
                     : ''}
@@ -226,7 +232,11 @@ export class Article extends Component {
                   <LikeArticle />
                   <ArticleReport article={article} />
                   <BookmarkArticle />
-                  {(profile && profile.role === 'admin' ? (<ArticleDelete history={this.props.history} article={article} />) : '')}
+                  {profile && profile.role === 'admin' ? (
+                    <ArticleDelete history={this.props.history} article={article} />
+                  ) : (
+                    ''
+                  )}
                   <div className="divider light" />
                   <Comments slug={article.slug} />
                 </div>

src/components/Articles/ListOfArticles/ListOfArticles.js

@@ -55,7 +55,7 @@ export class ListsOfArticles extends Component {
                 <div className="small-v-padding">{article.description}</div>
                 <div className="text-grey small-text medium-v-padding card-info">
                   <span>
-                    {article.author.firstName} {article.author.lastName}
+                    {article.author && `${article.author.firstName} ${article.author.lastName}`}
                   </span>
                   <span>{timeStamp(article.createdAt)}</span>
                   <span>

src/components/Articles/Share/ShareArticle.js

@@ -15,21 +15,25 @@ const ShareArticle = () => {
   return (
     <div>
       <div>
-        <FacebookShareButton className="small-h-margin left" url={shareArticle}>
+        <FacebookShareButton className="small-h-margin left cursor-pointer" url={shareArticle}>
           <FacebookIcon size={32} round black />
         </FacebookShareButton>
-        <TwitterShareButton className="small-h-margin left" url={shareArticle}>
+        <TwitterShareButton className="small-h-margin left cursor-pointer" url={shareArticle}>
           <TwitterIcon size={32} round />
         </TwitterShareButton>
         <LinkedinShareButton
-          className="small-h-margin left"
+          className="small-h-margin left cursor-pointer"
           url={shareArticle}
           windowWidth={750}
           windowHeight={600}
         >
           <LinkedinIcon size={32} round />
         </LinkedinShareButton>
-        <EmailShareButton className="small-h-margin left" url={shareArticle} body="body">
+        <EmailShareButton
+          className="small-h-margin left cursor-pointer"
+          url={shareArticle}
+          body="body"
+        >
           <EmailIcon size={32} round />
         </EmailShareButton>
       </div>

src/components/Chat/Chat.js

@@ -99,7 +99,7 @@ export class Chat extends Component {
   };
 
   render() {
-    const { profile } = this.props;
+    const { profile, isAuth } = this.props;
     const { inputMessage, chats } = this.state;
     return (
       <div className="Chat modal-dialog">
@@ -109,10 +109,16 @@ export class Chat extends Component {
           onAfterOpen={this.afterOpenModal}
           onRequestClose={this.closeModal}
           className="Modal"
-          contentLabel="Example Modal">
+          contentLabel="Example Modal"
+        >
           <div className="close-chat-modal" onClick={this.closeModal}>
             <FontAwesomeIcon
-              style={{ fontSize: '20px', position: 'relative', top: '10px', color: 'white' }}
+              style={{
+                fontSize: '20px',
+                position: 'relative',
+                top: '10px',
+                color: 'red'
+              }}
               icon={faWindowClose}
             />
           </div>
@@ -128,7 +134,8 @@ export class Chat extends Component {
                       chat.userId === profile.id
                         ? 'darkenBlue card-chat radius-2'
                         : 'gree-accent card-chat-left'
-                    } radius-2`}>
+                    } radius-2`}
+                  >
                     <span className="user-name-style">
                       {chat.userId === profile.id
                         ? 'Me'
@@ -145,11 +152,9 @@ export class Chat extends Component {
                   {chat.userId === profile.id ? (
                     <div
                       onClick={() => this.handleDelete(chat.id, profile.id)}
-                      className="delete-icon delete-chat">
-                      <FontAwesomeIcon
-                        style={{ marginTop: '17px' }}
-                        icon={faTrash}
-                      />
+                      className="delete-icon delete-chat"
+                    >
+                      <FontAwesomeIcon style={{ marginTop: '17px' }} icon={faTrash} />
                     </div>
                   ) : (
                     ''
@@ -175,15 +180,15 @@ export class Chat extends Component {
             </Button>
           </div>
         </Modal>
-        <div onClick={this.openModal} className="float open-chat-modal">
+        <div onClick={() => isAuth && this.openModal()} className="float open-chat-modal">
           <FontAwesomeIcon style={{ fontSize: '20px', marginTop: '17px' }} icon={faComments} />
         </div>
       </div>
     );
   }
 }
 
-Chat.propTypes = { profile: PropTypes.object, token: PropTypes.string };
+Chat.propTypes = { isAuth: PropTypes.bool, profile: PropTypes.object, token: PropTypes.string };
 
 const mapStateToProps = ({ user: { isAuth, profile, token } }) => ({
   isAuth,

src/components/FollowUnfollow/FollowUnfollow.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Button, Alert } from '../common';
+import { Button } from '../common';
 import '../Profile/ProfileUserDetails/ProfileUserDetails.scss';
 import { follow, getFollowers, getFollowing, unfollow } from '../../actions';
 import { htmlHelper } from '../../helpers';
@@ -60,17 +60,9 @@ export class FollowUnfollow extends Component {
       followers: { followers },
       following
     } = this.props;
-    const { followersNumber, followingNumber, modalStyle, clicked, errors, message } = this.state;
+    const { followersNumber, followingNumber, modalStyle, clicked } = this.state;
     return (
       <div>
-        <div className="small-screen-4">
-          {(message || errors) && (
-            <Alert
-              alertType={(message && 'success') || 'danger'}
-              message={message || errors.follow}
-            />
-          )}
-        </div>
         <span className="followers">
           <Link
             className="getFollowers text-info"

src/components/Header/HeaderUserMenu/HeaderUserMenu.js

@@ -9,7 +9,6 @@ import {
   faSignOutAlt,
   faBookOpen,
   faCog,
-  faUsers,
   faBookmark
 } from '@fortawesome/free-solid-svg-icons';
 import './HeaderUserMenu.scss';
@@ -23,9 +22,13 @@ class HeaderUserMenu extends Component {
   };
 
   render() {
+    const selector = document.querySelector('.HeaderUserImage');
     const { isAuth, username, firstName, lastName } = this.props;
     return (
-      <div className="HeaderUserMenu">
+      <div
+        className="HeaderUserMenu"
+        style={{ left: (selector && selector.offsetLeft - 140) || 0 }}
+      >
         <div className="username">
           {username || (firstName && lastName && `${firstName} ${lastName}`) || 'Welcome'}
         </div>

src/components/Header/HeaderUserMenu/HeaderUserMenu.scss

@@ -6,7 +6,6 @@
 
 .HeaderUserMenu {
   position: absolute;
-  right: 15px;
   top: 55px;
   width: 200px;
   padding-top: 0px !important;
@@ -38,9 +37,3 @@
     }
   }
 }
-
-@media screen and (min-width: 1000px) {
-  .HeaderUserMenu {
-    right: 30px;
-  }
-}

src/components/Home/Home.js

@@ -7,7 +7,6 @@ import MetaTags from 'react-meta-tags';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBookmark, faClock } from '@fortawesome/free-solid-svg-icons';
 import Layout from '../Layout';
-import Tags from '../Articles/Tags/Tags';
 import ListOfArticles from '../Articles/ListOfArticles/ListOfArticles';
 import './Home.scss';
 import { Img } from '../common';
@@ -42,7 +41,6 @@ export class Home extends Component {
             <meta property="og:title" content="Authors Haven" />
             <meta property="og:image" content="path/to/image.jpg" />
           </MetaTags>
-          <Tags />
           <SignupBanner />
           <div className="container">
             <div className={`${bookmarks.length ? 'contentColumn' : ''}`}>

src/components/Home/SignupBanner/SignupBanner.js

@@ -35,15 +35,19 @@ export class SignupBanner extends Component {
               <br />
               {isAuth ? (
                 <div>
-                  <Link to="/profile" className="button bold radius-5 yellow">
-                    <FontAwesomeIcon icon={faUserAlt} /> {''} Go to Profile
-                  </Link>{' '}
-                  <Link
-                    to="/profile/article/new"
-                    className="button bold text-black radius-5 light-grey"
-                  >
-                    <FontAwesomeIcon icon={faPen} /> Write article
-                  </Link>
+                  <div className="inline-block large-v-margin">
+                    <Link to="/profile" className="button bold radius-5 yellow">
+                      <FontAwesomeIcon icon={faUserAlt} /> {''} Go to Profile
+                    </Link>{' '}
+                  </div>
+                  <div className="inline-block large-v-margin">
+                    <Link
+                      to="/profile/article/new"
+                      className="button bold text-black radius-5 light-grey"
+                    >
+                      <FontAwesomeIcon icon={faPen} /> Write article
+                    </Link>
+                  </div>
                 </div>
               ) : (
                 <div>