-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(view user articles on profile page)
- Loading branch information
Showing
18 changed files
with
560 additions
and
149 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
$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%; | ||
min-width: 600px; | ||
} | ||
.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: 120px; | ||
float: left; | ||
&__default { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
} | ||
&__content { | ||
width: 100%; | ||
height: 120px; | ||
float: right; | ||
margin: 5px; | ||
margin-bottom: 0px; | ||
&__title { | ||
margin: 2px; | ||
margin-bottom: 20px; | ||
font-weight: bolder; | ||
} | ||
&__desc { | ||
font-size: 0.9em; | ||
} | ||
&__btn { | ||
padding-top: 25px; | ||
font-size: 0.9em; | ||
margin-bottom: 0px; | ||
&__like { | ||
margin-right: 20px; | ||
} | ||
} | ||
} | ||
|
||
} | ||
.fa { | ||
margin-left: 5px; | ||
} | ||
.no-articles { | ||
text-align: center; | ||
padding-top: 10px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
}; |
3 changes: 3 additions & 0 deletions
3
src/feature/profile/userArticles/__tests__/__snapshots__/userArticlesComponent.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`<UserArtcileComponent /> should render its children 1`] = `ReactWrapper {}`; |
79 changes: 79 additions & 0 deletions
79
src/feature/profile/userArticles/__tests__/userArticleAction.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); | ||
}); |
42 changes: 42 additions & 0 deletions
42
src/feature/profile/userArticles/__tests__/userArticleReducer.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
}); | ||
}); |
33 changes: 33 additions & 0 deletions
33
src/feature/profile/userArticles/__tests__/userArticlesComponent.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
|
||
export default { | ||
store1: { | ||
userArticles: { | ||
articles: [{ | ||
id: 1, | ||
slug: 'slug', | ||
description: 'desc', | ||
}], | ||
userArticleLoading: false | ||
}, | ||
profile: { | ||
profile: { | ||
userName: 'eric', | ||
} | ||
} | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; |
Oops, something went wrong.