Merge f3abf0c into 46aa6f7

src/app/reducers/index.js

@@ -13,6 +13,7 @@ import socialReducer from '../../feature/auth/socialLogin/SocialReducer';
 import bookmarkReducer from '../../feature/bookmark/bookmarkReducer';
 import getSingleArticle from '../../feature/articles/getSingleArticle/GetSingleArticleReducer';
 import searchResult from '../../feature/articles/SearchArticle/SearchReducer';
+import userArticles from '../../feature/profile/userArticles/UserArticlesReducer';
 
 export default combineReducers({
   login: loginReducer,
@@ -28,5 +29,6 @@ export default combineReducers({
   social: socialReducer,
   comment: commentReducer,
   bookmarking: bookmarkReducer,
-  searchResult
+  searchResult,
+  userArticles,
 });

src/feature/articles/SearchArticle/SearchForm.js

@@ -37,7 +37,6 @@ export class SearchForm extends Component {
   onSearch = event => {
     event.preventDefault();
     const { query, keyword } = this.state;
-    console.log(query);
     const { searchAction } = this.props;
     searchAction(query, keyword);
   }

src/feature/articles/SearchArticle/__tests__/SearchComponent.test.js

@@ -29,7 +29,6 @@ describe('Testing search component', () => {
       <Search />
     </Provider>
   );
-  console.log(Wrapper.instance());
   it('should render the component', () => {
     expect(Wrapper.exists()).toBe(true);
   });

src/feature/comment/CommentAction.js

@@ -65,8 +65,7 @@ export const fetchComments = (articleSlug, page, limit) => async (dispatch) => {
       .get(`${BACKEND_URL}/articles/${articleSlug}/comments?page=${p}&limit=${l}`);
     const { data } = res;
     const comments = data.data;
-    if (comments && (p < data.pages)) {
-      dispatch(hasMore(true));
+    if (comments && (p <= data.pages)) {
       dispatch(commentFetchSuccess(comments));
     } else {
       dispatch(hasMore(false));

src/feature/comment/CommentComponent.js

@@ -124,12 +124,12 @@ export class Comment extends Component {
       commentBtn,
       commentId
     } = this.state;
-    const { slug } = this.props;
+    const { slug, user } = this.props;
     if (commentBtn === 'Comment') {
       this.props.publish(input, slug);
       this.setState({
         isEditing: false,
-        display: true,
+        display: user,
       });
       this.inputRef.current.value = '';
     } else {
@@ -242,9 +242,9 @@ export class Comment extends Component {
                             type="button"
                             className="comments-thread__wrapper__fetch__div__commentator__username"
                           >
-                            {this.state.display
-                              ? user
-                              : comment.Commenter.userName}
+                            {comment.Commenter.userName
+                              ? comment.Commenter.userName
+                              : user}
                           </button>
                           <span className="comments-thread__wrapper__fetch__div__commentator__time">
                             {

src/feature/comment/__test__/CommentAction.spec.js

@@ -52,16 +52,13 @@ describe('Action types', () => {
 
     const expectedAction = actionTypes.COMMENT_FETCH_SUCCESS;
     const expectedActionLoading = actionTypes.COMMENT_LOADING;
-    const expectedActionHasmore = actionTypes.COMMENT_HASMORE;
 
     return store.dispatch(fetchComments(slug, 1, 2)).then(() => {
       const dispatchedActions = store.getActions();
 
       const dispatchedTypes = dispatchedActions.map(action => action.type);
       expect(dispatchedTypes[0]).toEqual(expectedActionLoading);
-      expect(dispatchedActions[1].type).toEqual(expectedActionHasmore);
-      expect(dispatchedActions[2].type).toEqual(expectedAction);
-
+      expect(dispatchedActions[1].type).toEqual(expectedAction);
     });
   });
   it('Should dispatch COMMENT_LOADING and COMMENT_HASMORE action types', async () => {

src/feature/profile/userArticles/UserArticleAction.js

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import * as articleTypes from './userArticleTypes';
+import { BACKEND_URL } from '../../../app/common/config/appConfig';
+
+export const fetchArticleSuccess = (articles) => ({
+  type: articleTypes.FETCH_ARTICLE_SUCCESS,
+  articles,
+});
+
+export const fetchArticleFail = (error) => ({
+  type: articleTypes.FETCH_ARTICLE_FAIL,
+  error,
+});
+
+export const articleLoading = () => ({
+  type: articleTypes.FETCH_ARTICLE_LOADING,
+});
+
+export const fetchArticles = (author) => async (dispatch) => {
+  try {
+    dispatch(articleLoading());
+    const res = await axios
+      .get(`${BACKEND_URL}/articles?author=${author}`);
+    dispatch(fetchArticleSuccess(res.data.articles));
+  } catch (err) {
+    const error = (await err.response)
+      ? err.response.data.error
+      : 'Something went wrong';
+    dispatch(fetchArticleFail(error));
+  }
+};

src/feature/profile/userArticles/UserArticles.scss

@@ -0,0 +1,59 @@
+$font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+$box-border: thin rgb(250, 250, 250) solid;
+$box-shadow: 0px 0px 1px 1px rgb(218, 218, 218);
+
+.user-articles-thread {
+    font-family: $font-family;
+    margin: 0 15% 0 15%;
+}
+.user-articles-thread__div {
+    display: flex;
+    border: $box-border;
+    margin-bottom: 15px;
+    &:hover {
+        box-shadow: $box-shadow;
+        cursor: pointer;
+    }
+    &__img {
+        margin: 5px;
+        width: 20%;
+        height: 100px;
+        float: left;
+        &__default {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+    &__content {
+        width: 100%;
+        height: 100px;
+        float: right;
+        margin: 5px;
+        margin-bottom: 0px;
+        &__title {
+            margin: 2px;
+            margin-bottom: 20px;
+            font-weight: bolder;
+        }
+        &__desc {
+            font-size: 0.9em;
+        }
+        &__btn {
+            margin-top: 15px;
+            font-size: 0.9em;
+            margin-bottom: 0px;
+            &__like {
+                margin-right: 20px;
+            }
+        }
+    }
+
+}
+.fa {
+    margin-left: 5px;
+}
+.comments-thread__wrapper__fetch__div {
+    text-align: center;
+    padding-top: 10px;
+}

src/feature/profile/userArticles/UserArticlesReducer.js

@@ -0,0 +1,30 @@
+import * as actionTypes from './userArticleTypes';
+
+const initialState = {
+  userArticleLoading: false,
+  articles: [],
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case actionTypes.FETCH_ARTICLE_SUCCESS:
+      return {
+        ...state,
+        articles: [...action.articles],
+        userArticleLoading: false,
+      };
+    case actionTypes.FETCH_ARTICLE_LOADING:
+      return {
+        ...state,
+        userArticleLoading: true,
+      };
+    case actionTypes.FETCH_ARTICLE_FAIL:
+      return {
+        ...state,
+        userArticleLoading: false,
+        error: action.error,
+      };
+    default:
+      return state;
+  }
+};

src/feature/profile/userArticles/__tests__/__snapshots__/userArticlesComponent.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserArtcileComponent /> should render its children 1`] = `ReactWrapper {}`;

src/feature/profile/userArticles/__tests__/userArticleAction.spec.js

@@ -0,0 +1,79 @@
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import Enzyme from 'enzyme';
+import axios from 'axios';
+import moxios from 'moxios';
+import promiseMiddleware from 'redux-promise-middleware';
+import Adapter from 'enzyme-adapter-react-16';
+import * as actionTypes from '../userArticleTypes';
+import {
+  fetchArticles
+} from '../UserArticleAction';
+
+Enzyme.configure({ adapter: new Adapter() });
+const middleware = [thunk, promiseMiddleware];
+const mockStore = configureMockStore(middleware);
+const store = mockStore({});
+
+describe('Action types', () => {
+  beforeEach(() => {
+    moxios.install(axios);
+    // storage = window.localStorage.setItem('token', 'hey malaba');
+  });
+  afterEach(() => {
+    moxios.uninstall();
+    store.clearActions();
+  });
+  it('Should dispatch FETCH_ARTICLE_LOADING, FETCH_ARTICLE_SUCCESS action types', async () => {
+    moxios.wait(() => {
+      const req = moxios.requests.mostRecent();
+      req.respondWith({
+        status: 200,
+        response: {
+          data: {
+            data: {
+              articles: [{
+                id: 1,
+                slug: 'slug',
+                description: 'desc',
+              }],
+            },
+          },
+        }
+      });
+    });
+
+    const expectedActionLoading = actionTypes.FETCH_ARTICLE_LOADING;
+    const expectedAction = actionTypes.FETCH_ARTICLE_SUCCESS;
+
+    return store.dispatch(fetchArticles('eric')).then(() => {
+      const dispatchedActions = store.getActions();
+
+      const dispatchedTypes = dispatchedActions.map(action => action.type);
+      expect(dispatchedTypes[0]).toEqual(expectedActionLoading);
+      expect(dispatchedActions[1].type).toEqual(expectedAction);
+    });
+  });
+  it('Should dispatch FETCH_ARTICLE_LOADING, FETCH_ARTICLE_FAIL action types',
+    async () => {
+      moxios.wait(() => {
+        const req = moxios.requests.mostRecent();
+        req.respondWith({
+          status: 404,
+          response: {
+            error: 'Something wrong happened'
+          }
+        });
+      });
+      const expectedActionLoading = actionTypes.FETCH_ARTICLE_LOADING;
+      const expectedAction = actionTypes.FETCH_ARTICLE_FAIL;
+
+      return store.dispatch(fetchArticles()).then(() => {
+        const dispatchedActions = store.getActions();
+
+        const dispatchedTypes = dispatchedActions.map(action => action.type);
+        expect(dispatchedTypes[0]).toEqual(expectedActionLoading);
+        expect(dispatchedTypes[1]).toEqual(expectedAction);
+      });
+    });
+});

src/feature/profile/userArticles/__tests__/userArticleReducer.spec.js

@@ -0,0 +1,42 @@
+import article from '../UserArticlesReducer';
+import * as actionTypes from '../userArticleTypes';
+
+describe('CommentReducer', () => {
+  const initialState = {
+    articles: [{
+      id: 1,
+      slug: 'slug',
+      description: 'desc',
+    }],
+  };
+
+  it('Should test FETCH_ARTICLE_SUCCESS action type', () => {
+    const action = {
+      type: actionTypes.FETCH_ARTICLE_SUCCESS,
+      articles: initialState.articles,
+      userArticleLoading: false,
+    };
+    const reducer = article([{
+      id: 1,
+      slug: 'slug',
+      description: 'desc',
+    }], action);
+    expect(reducer.articles).toBeTruthy();
+  });
+  it('Should test if articles are being loaded', () => {
+    const action = {
+      type: actionTypes.FETCH_ARTICLE_LOADING,
+      userArticleLoading: true,
+    };
+    const reducer = article(initialState.articles, action);
+    expect(reducer.userArticleLoading).toBeTruthy();
+  });
+  it('Should return COMMENT_FETCH_ERROR action type', () => {
+    const action = {
+      type: actionTypes.FETCH_ARTICLE_FAIL,
+      error: 'An error occured',
+    };
+    const reducer = article(initialState, action);
+    expect(reducer.error).toEqual('An error occured');
+  });
+});

src/feature/profile/userArticles/__tests__/userArticlesComponent.spec.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import promiseMiddleware from 'redux-promise-middleware';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { createMemoryHistory } from 'history';
+import UserArtcileComponent from '../userArticlesComponent';
+import stores from '../mockData';
+
+Enzyme.configure({ Adapter: new Adapter() });
+const middlewares = [thunk, promiseMiddleware];
+const mockStore = configureStore(middlewares);
+const history = createMemoryHistory('articles/');
+
+const store1 = mockStore(stores.store1);
+
+const wrapper1 = mount(
+  <UserArtcileComponent history={history} store={store1} />
+);
+
+describe('<UserArtcileComponent />', () => {
+  it('should render its children', async () => {
+    expect(wrapper1.exists()).toBe(true);
+    expect(wrapper1).toMatchSnapshot();
+  });
+  it('Should redirect to view single Article', async () => {
+    const article = wrapper1
+      .find('.user-articles-thread__div');
+    article.simulate('click');
+    expect(article.length).toBe(1);
+  });
+});

src/feature/profile/userArticles/mockData.js

@@ -0,0 +1,18 @@
+
+export default {
+  store1: {
+    userArticles: {
+      articles: [{
+        id: 1,
+        slug: 'slug',
+        description: 'desc',
+      }],
+      userArticleLoading: false
+    },
+    profile: {
+      profile: {
+        userName: 'eric',
+      }
+    }
+  }
+};

src/feature/profile/userArticles/userArticleTypes.js

@@ -0,0 +1,3 @@
+export const FETCH_ARTICLE_SUCCESS = 'FETCH_ARTICLE_SUCCESS';
+export const FETCH_ARTICLE_FAIL = 'FETCH_ARTICLE_FAIL';
+export const FETCH_ARTICLE_LOADING = 'FETCH_ARTICLE_LOADING';