Merge 19fa0af into 146cb43

andela · Dec 11, 2018 · daafe66 · daafe66
2 parents 146cb43 + 19fa0af
commit daafe66
Show file tree

Hide file tree

Showing 34 changed files with 583 additions and 146 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -22,7 +22,8 @@ module.exports = {
     "react/jsx-indent": ["error", 2],
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
     curly: [2, "multi-line"],
-    "import/no-extraneous-dependencies": ["error", { devDependencies: true }]
+	"import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+	"import/no-named-as-default": 0
   },
   globals: {
     page: true,

diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 package-lock.json
 /coverage
 yarn.lock
+.env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
     "start": "serve -s dist",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint src",
-    "heroku-postbuild": "npm run build",
-    "test": "jest --coverage --env='jsdom'",
+	"heroku-postbuild": "npm run build",
+	"test": "jest",
+    "test:cov": "jest --coverage --env='jsdom'",
     "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls"
   },
   "repository": {
@@ -55,6 +56,7 @@
     "babel-loader": "^8.0.4",
     "bootstrap": "^4.1.3",
     "css-loader": "^1.0.1",
+    "dotenv-webpack": "^1.5.7",
     "expect": "^23.6.0",
     "file-loader": "^2.0.0",
     "html-loader": "^0.5.5",

diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="description" content="Authors Haven; A Social platform for the creative at heart">
-    <meta name="keywords" content="author, blog, write">
-    <meta name="author" content="Team Thanos: Andela Cohort 11">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="description"
+      content="Authors Haven; A Social platform for the creative at heart"
+    />
+    <meta name="keywords" content="author, blog, write" />
+    <meta name="author" content="Team Thanos: Andela Cohort 11" />
+
     <title>Authors Haven</title>
-</head>
-<body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
     <div id="root"></div>
-</body>
+  </body>
 </html>
diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
@@ -2,23 +2,29 @@
 
 exports[`Provider and App renders <App/> correctly 1`] = `
 <BrowserRouter>
-  <div>
-    <Header />
-    <Route
-      component={[Function]}
-      exact={true}
-      path="/"
-    />
-    <Route
-      component={[Function]}
-      path="/login"
-    />
-    <Route
-      component={[Function]}
-      path="/signup"
-    />
-    <Footer />
-  </div>
+  <Header />
+  <Route
+    component={[Function]}
+    exact={true}
+    path="/"
+  />
+  <Route
+    component={[Function]}
+    path="/login"
+  />
+  <Route
+    component={[Function]}
+    path="/signup"
+  />
+  <Route
+    component={[Function]}
+    path="/articles"
+  />
+  <Route
+    component={[Function]}
+    path="/articles/:article_id"
+  />
+  <Footer />
 </BrowserRouter>
 `;
 

diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
@@ -6,6 +6,8 @@ const ACTION_TYPE = {
   GET_USER_INPUT: 'GET_USER_INPUT',
   USER_REGISTER_SUCCESS: 'USER_REGISTER_SUCCESS',
   USER_REGISTER_FAIL: 'USER_REGISTER_FAIL',
+  FETCH_ARTICLES_SUCCESS: 'FETCH_ARTICLES_SUCCESS',
+  FETCH_ARTICLES_FAILURE: 'FETCH_ARTICLES_FAILURE',
 };
 
 export default ACTION_TYPE;
diff --git a/src/actions/articleActions.js b/src/actions/articleActions.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import ACTION_TYPE from './actionTypes';
+import APP_URL from '../utils/constants';
+
+export const fetchArticlesSuccess = articles => ({
+  type: ACTION_TYPE.FETCH_ARTICLES_SUCCESS,
+  articles,
+});
+
+export const fetchArticlesFailure = errorMessage => ({
+  type: ACTION_TYPE.FETCH_ARTICLES_FAILURE,
+  errorMessage,
+});
+
+const fetchArticlesThunk = () => dispatch => axios.get(`${APP_URL}/articles`)
+  .then((response) => {
+    dispatch(fetchArticlesSuccess(response.data.results));
+  })
+  .catch(() => {
+    dispatch(fetchArticlesFailure('Check your internet conectivity'));
+  });
+
+export default fetchArticlesThunk;
diff --git a/src/actions/loginActions/loginAction.js b/src/actions/loginActions/loginAction.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import swal from 'sweetalert2';
 import ACTION_TYPE from '../actionTypes';
 import swalMessages from '../swalAlerts';
+import APP_URL from '../../utils/constants';
 
 export const loginSuccess = response => ({
   type: ACTION_TYPE.USER_LOGIN_SUCCESS,
@@ -20,7 +21,7 @@ export const loginThunk = data => (dispatch) => {
       ...data,
     },
   };
-  return axios.post('https://ah-backend-thanos-staging.herokuapp.com/api/users/login', userdata)
+  return axios.post(`${APP_URL}/users/login`, userdata)
     .then((res) => {
       dispatch(loginSuccess(res.data.results));
       localStorage.setItem('token', res.data.results.token);

diff --git a/src/actions/loginActions/loginActions.test.js b/src/actions/loginActions/loginActions.test.js
@@ -3,6 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { loginSuccess, loginThunk, loginFailure } from './loginAction';
 import ACTION_TYPE from '../actionTypes';
+import APP_URL from '../../utils/constants';
 
 const mockStore = configureMockStore([thunk]);
 
@@ -30,7 +31,7 @@ describe('Login Actions tests', () => {
     }));
   });
   test('Login successfull', () => {
-    moxios.stubRequest('https://ah-backend-thanos-staging.herokuapp.com/api/users/login', {
+    moxios.stubRequest(`${APP_URL}/users/login`, {
       status: 200,
       responseText: { email: 'jude@gmail.com' },
     });

diff --git a/src/actions/tests/articleActions.test.js b/src/actions/tests/articleActions.test.js
@@ -0,0 +1,94 @@
+import * as moxios from 'moxios';
+import configurestore from 'redux-mock-store';
+import reduxThunk from 'redux-thunk';
+import fetchArticlesThunk, {
+  fetchArticlesSuccess,
+  fetchArticlesFailure,
+} from '../articleActions';
+import ACTION_TYPE from '../actionTypes';
+import APP_URL from '../../utils/constants';
+
+const middlewares = [reduxThunk];
+const mockStore = configurestore(middlewares);
+let store;
+describe('get articles component', () => {
+  beforeEach(() => {
+    moxios.install();
+    store = mockStore();
+  });
+
+  afterEach(() => {
+    moxios.uninstall();
+  });
+
+  it('should handel fetchArticlesFailure', () => {
+    const errorMessage = 'Check your internet conectivity';
+    moxios.stubRequest(
+      `${APP_URL}/articles`,
+      {
+        status: 400,
+        response: {
+          errors: {
+            error: '',
+          },
+        },
+      },
+    );
+    store.clearActions();
+    const expectedActions = [{ errorMessage, type: 'FETCH_ARTICLES_FAILURE' }];
+    store.dispatch(fetchArticlesThunk()).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it('should hanlde fetchArticlesSuccess', () => {
+    const mockData = {
+      results: [
+        {
+          title: '',
+          body: '',
+        },
+      ],
+    };
+    moxios.stubRequest(
+      `${APP_URL}/articles`,
+      {
+        status: 200,
+        response: mockData,
+      },
+    );
+    store.clearActions();
+    const expectedActions = [
+      { articles: [{ body: '', title: '' }], type: 'FETCH_ARTICLES_SUCCESS' },
+    ];
+    store.dispatch(fetchArticlesThunk()).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+});
+
+describe('fetchArticleSucess', () => {
+  it('should create an action on successful fetching of all articles', () => {
+    const article = {
+      title: 'training a dragon',
+      body: 'how to train a dragon',
+    };
+    const expectedAction = {
+      type: ACTION_TYPE.FETCH_ARTICLES_SUCCESS,
+      articles: article,
+    };
+    expect(fetchArticlesSuccess(article)).toEqual(expectedAction);
+  });
+});
+
+describe('fetchArticlesFailure', () => {
+  it('should create an action on failure to fetch all articles', () => {
+    const msg = 'no internet connection';
+
+    const expectedAction = {
+      type: ACTION_TYPE.FETCH_ARTICLES_FAILURE,
+      errorMessage: msg,
+    };
+    expect(fetchArticlesFailure(msg)).toEqual(expectedAction);
+  });
+});
diff --git a/src/actions/tests/userActions.test.js b/src/actions/tests/userActions.test.js
@@ -5,6 +5,7 @@ import actionTypes from '../actionTypes';
 import {
   signupSuccessful, signupFail, getUserInput, userSignup,
 } from '../userActions';
+import APP_URL from '../../utils/constants';
 
 const mockStore = configureMockStore([thunk]);
 
@@ -50,7 +51,7 @@ describe('Test User actions', () => {
   });
 
   test('UserSignup Action Pass', () => {
-    moxios.stubRequest('https://ah-backend-thanos-staging.herokuapp.com/api/users', {
+    moxios.stubRequest(`${APP_URL}/users`, {
       status: 200,
       responseText: {
         email: 'johndoe@example.com',
@@ -68,7 +69,7 @@ describe('Test User actions', () => {
   });
 
   test('UserSignup Action Fail', () => {
-    moxios.stubRequest('https://ah-backend-thanos-staging.herokuapp.com/api/users', {
+    moxios.stubRequest(`${APP_URL}/users`, {
       status: 400,
       responseText: {
         email: ['user with this email already exists'],

diff --git a/src/actions/userActions.js b/src/actions/userActions.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import swal from 'sweetalert2';
 import actionTypes from './actionTypes';
 import swalMessages from './swalAlerts';
+import APP_URL from '../utils/constants';
 
 export const signupSuccessful = response => ({
   type: actionTypes.USER_REGISTER_SUCCESS,
@@ -20,7 +21,7 @@ export const getUserInput = payload => ({
 
 export const userSignup = freshUser => (dispatch) => {
   swal.showLoading();
-  return axios.post('https://ah-backend-thanos-staging.herokuapp.com/api/users', freshUser)
+  return axios.post(`${APP_URL}/users`, freshUser)
     .then((response) => {
       dispatch(signupSuccessful({
         results: response.data.results,

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -7,20 +7,22 @@ import LoginPage from '../../containers/LoginPage';
 import Header from '../Header';
 import { Footer } from '../Footer';
 import SignUpPageConnected from '../../containers/SignUpPage';
+import Articles from '../../containers/Articles';
 
 library.add(faSearch);
 
 const App = () => (
   <BrowserRouter>
-    <div>
+    <React.Fragment>
       <Header />
       <Route exact path="/" component={Home} />
       <Route path="/login" component={LoginPage} />
       <Route path="/signup" component={SignUpPageConnected} />
+      <Route path="/articles" component={Articles} />
+      <Route path="/articles/:article_id" component={Articles} />
       <Footer />
-    </div>
+    </React.Fragment>
   </BrowserRouter>
 );
 
-
 export default App;