Merge pull request #37 from andela/ft/167190403-articles-from-tag

Display all Articles With a Specific Tag

src/actions/__tests__/__snapshots__/tagAction.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tag action tag action test tagAction should return expected value 1`] = `[Function]`;
+
+exports[`tag action test view articles with tag action should display articles with tag 1`] = `
+Array [
+  Object {
+    "payload": Array [],
+    "tag": Object {},
+    "type": "GET_ARTICLES_WITH_TAG",
+  },
+]
+`;

src/actions/__tests__/tagAction.spec.js

@@ -0,0 +1,51 @@
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import nock from 'nock';
+import { getArticlesWithTagFromDb } from '@Actions/tagAction';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+const url = 'https://a-haven-staging.herokuapp.com/api/v1';
+
+
+describe('tag action', () => {
+  describe('tag action test', () => {
+    const tag = {
+      articleTag: 'javascript',
+    };
+
+    const history = {
+      push: jest.fn(),
+    };
+
+    it('tagAction should return expected value', () => {
+      expect(getArticlesWithTagFromDb(tag, history)).toMatchSnapshot();
+    });
+  });
+
+  describe('test view articles with tag action', () => {
+    let store;
+    const response = {
+      articles: [],
+    };
+
+    beforeEach(() => {
+      store = mockStore({});
+    });
+
+    afterEach(() => {
+      nock.cleanAll();
+    });
+
+    it('should display articles with tag', () => {
+      nock(url)
+        .post('/articles/tag/get-article')
+        .reply(200, response);
+
+      return store.dispatch(getArticlesWithTagFromDb({}, { push: jest.fn() }))
+        .then(() => {
+          expect(store.getActions()).toMatchSnapshot();
+        });
+    });
+  });
+});

src/actions/tagAction.js

@@ -0,0 +1,28 @@
+import { GET_ARTICLES_WITH_TAG } from '@Actions/types';
+import swal from '@sweetalert/with-react';
+import { axiosInstance } from '@Utils/';
+
+
+export const getArticlesWithTag = (payload, tag) => ({
+  type: GET_ARTICLES_WITH_TAG,
+  payload,
+  tag,
+});
+
+export const getArticlesWithTagFromDb = (tag, history) => async dispatch => {
+  try {
+    const response = await axiosInstance.post('/articles/tag/get-article', { tag: { articleTag: tag } });
+
+    if (response.status === 200) {
+      dispatch(getArticlesWithTag(response.data.articles, tag));
+      history.push('/tags');
+    }
+  } catch (err) {
+    swal({
+      text: err.response.data.error,
+      icon: 'error',
+      buttons: false,
+      timer: 4000,
+    });
+  }
+};

src/actions/types/index.js

@@ -37,3 +37,5 @@ export const UPDATE_SUB = 'UPDATE_SUB';
 export const UPDATE_CATEGORY_ARTICLES = 'UPDATE_CATEGORY_ARTICLES';
 export const UPDATE_CATEGORY = 'UPDATE_CATEGORY';
 export const UPDATE_MENU_ITEM = 'UPDATE_MENU_ITEM';
+
+export const GET_ARTICLES_WITH_TAG = 'GET_ARTICLES_WITH_TAG';

src/e2e/articlesTag.js

@@ -0,0 +1,18 @@
+module.exports = {
+  '@tag': ['articlesTag'],
+  'User should be able to see articles list on clicking a tag': (browser) => {
+    browser
+      .url('http://localhost:9090/articles/Regional-Group-Manager')
+      .pause(3000)
+      .assert.visible('div[class="read-article"]')
+      .pause(500)
+      .moveToElement('div[class="comment-delete"]', 10, 10)
+      .waitForElementVisible('div[class="article-tag-div"]')
+      .pause(3000)
+      .click('li[class="liTag"]')
+      .pause(3000)
+      .waitForElementVisible('articlesList')
+      .pause(3000)
+      .end();
+  },
+};

src/reducers/__snapshots__/tagReducer.spec.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tag reducer test should return new state 1`] = `
+Object {
+  "articles": Array [
+    Object {},
+  ],
+  "suppliedTag": undefined,
+}
+`;

src/reducers/index.js

@@ -8,6 +8,7 @@ import searchReducer from './searchReducer';
 import notifications from './notifications';
 import { articleReducer } from './Articles';
 import categoryReducer from './categoriesReducer';
+import tagReducer from './tagReducer';
 
 const reducers = combineReducers({
   ui: uiReducer,
@@ -19,6 +20,7 @@ const reducers = combineReducers({
   article: articleReducer,
   notifications,
   category: categoryReducer,
+  tag: tagReducer,
 });
 
 export default reducers;

src/reducers/tagReducer.js

@@ -0,0 +1,19 @@
+export const initState = {
+  articles: [],
+  suppliedTag: '',
+};
+
+const tagReducer = (state = initState, action) => {
+  switch (action.type) {
+    case 'GET_ARTICLES_WITH_TAG':
+      return {
+        ...state,
+        articles: action.payload,
+        suppliedTag: action.tag,
+      };
+    default:
+      return state;
+  }
+};
+
+export default tagReducer;

src/reducers/tagReducer.spec.js

@@ -0,0 +1,16 @@
+import { GET_ARTICLES_WITH_TAG } from '@Actions/types';
+import tagReducer, { initState } from './tagReducer';
+
+describe('tag reducer test', () => {
+  it('should return initial state', () => {
+    expect(tagReducer(undefined, {})).toEqual(initState);
+  });
+
+  it('should return new state', () => {
+    expect(tagReducer(initState, {
+      type: GET_ARTICLES_WITH_TAG,
+      payload: [{}],
+      suppliedTag: 'travel',
+    })).toMatchSnapshot();
+  });
+});

src/views/App.js

@@ -14,6 +14,7 @@ import ReadArticle from '@Views/Articles/ReadArticle';
 import EditArticle from '@Views/Articles/EditArticle';
 import Profile from '@Views/ProfilePage';
 import NotFound from '@Views/404';
+import ArticleTags from './ArticlesTag/ArticlesTag';
 import './app.scss';
 
 const App = () => (
@@ -32,6 +33,7 @@ const App = () => (
         <Route exact path="/articles/:slug" component={ReadArticle} />
         <Route exact path="/articles/:slug/edit" component={EditArticle} />
         <Route exact path="/articles" component={CategoryPage} />
+        <Route exact path="/tags" component={ArticleTags} />
         <Route component={NotFound} />
       </Switch>
     </div>

src/views/Articles/ReadArticle/ReadArticle.js

@@ -1,3 +1,5 @@
+/* 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';
@@ -6,6 +8,7 @@ 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/';
@@ -70,6 +73,11 @@ export class ReadArticle extends Component {
       });
   }
 
+  handleTagClick = async (tag) => {
+    const { getArticlesTag, history } = this.props;
+    await getArticlesTag(tag, history);
+  }
+
   render = () => {
     const {
       ui: { loading },
@@ -81,15 +89,18 @@ export class ReadArticle extends Component {
         readTime,
         image,
         articleBody,
-        tagList,
+        Tags,
         likesCount,
         dislikesCount,
         comment,
       },
     } = this.props;
-    const tags = tagList ? tagList.split(' ')
-      .filter(tag => tag.length > 0)
-      .map((tag, i) => (<li key={i}><p>{tag}</p></li>)) : null;
+
+    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 = (
@@ -129,13 +140,13 @@ export class ReadArticle extends Component {
                     <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>
+                        <button
+                          data-test="edit-article"
+                          type="button"
+                          onClick={this.editArticle}
+                        >
+                          Edit Article
+                        </button>
                       )}
                     </div>
                   </div>
@@ -169,13 +180,13 @@ export class ReadArticle extends Component {
                 <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>
+                  <button
+                    className="delete-icon"
+                    type="button"
+                    onClick={this.deleteArticle}
+                  >
+                    <Icon name="trash" />
+                  </button>
                 )}
               </div>
             </div>
@@ -194,11 +205,13 @@ ReadArticle.propTypes = {
   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,
   },
 );

src/views/Articles/ReadArticle/ReadArticle.scss

@@ -196,3 +196,8 @@
     align-items: center;
   }
 }
+
+.liTag :hover {
+  cursor: pointer;
+  transform: scale(1.2);
+}