feat(users): Fetch Articles on Landing Page

- Creates ActionType for fetchArticles page feature
- Creates Actions for fetchArticles page feature
- Creates Reducer for fetchArticles page feature

[Delivers #167994897]

.gitignore

@@ -3,6 +3,8 @@ node_modules
 dist
 .DS_Store
 examples
+yarn-error.log
+yarn.lock
 
 #cypress
 cypress/fixtures

package.json

@@ -86,6 +86,7 @@
     "prettier-eslint-cli": "^5.0.0",
     "pretty-quick": "^1.11.1",
     "purgecss-webpack-plugin": "^1.5.0",
+    "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.3",
     "sass-loader": "^7.1.0",
     "webpack": "^4.39.1",

src/components/ArticleRow/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ArtricleRow = ({ props }) => {
+  const { props: component } = props;
+  return (
+    <div
+      className="w-full flex flex-col items-center
+      lg:flex-row lg:h-80 lg:justify-between"
+    >
+      {component[0] || ''}
+      {component[0] || ''}
+      {component[0] || ''}
+    </div>
+  );
+};
+
+export default ArtricleRow;

src/config/index.js

@@ -0,0 +1,3 @@
+export default {
+  apiUrl: 'https://errorswag-staging.herokuapp.com/api/v1'
+};

src/pages/LandingPage/index.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { fetchArticlesAction } from '../../store/modules/landingPage/actions/index';
+
+const LandingPage = () => {
+  const [page, setPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [limit, setLimit] = useState(12);
+  const [articles, setArticles] = useState([]);
+  useEffect(() => {
+    fetchArticlesAction({ page, limit });
+  }, [page]);
+};
+
+export const mapDispatchToProps = dispatch => ({
+  fetchArticles: ({ page, limit }) =>
+    dispatch(fetchArticlesAction({ page, limit }))
+});
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(LandingPage);

src/store/index.js

@@ -1,14 +1,10 @@
-import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import rootReducer from '@modules/';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import rootReducer from './modules/auth/reducer';
 
-const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const middlewares = [thunkMiddleware];
+const middlewares = applyMiddleware(thunkMiddleware);
 
-const store = createStore(
-  rootReducer,
-  {},
-  storeEnhancers(applyMiddleware(...middlewares))
-);
+const store = createStore(rootReducer, composeWithDevTools(middlewares));
 
 export default store;

src/store/modules/landingPage/actionTypes/index.js

@@ -0,0 +1,3 @@
+export const FETCHARTICLES_PENDING = 'FETCHARTICLES_PENDING';
+export const FETCHARTICLES_SUCCESS = 'FETCHARTICLES_SUCCESS';
+export const FETCHARTICLES_FAILURE = 'FETCHARTICLES_FAILURE';

src/store/modules/landingPage/actions/index.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+import {
+  FETCHARTICLES_FAILURE,
+  FETCHARTICLES_PENDING,
+  FETCHARTICLES_SUCCESS
+} from '../actionTypes/index';
+import config from '../../../../config';
+
+export const fetchArticlesPending = () => ({
+  type: FETCHARTICLES_PENDING,
+  payload: {
+    status: 'fetchPending',
+    error: null,
+    articles: []
+  }
+});
+
+export const fetchArticlesSuccess = articles => ({
+  type: FETCHARTICLES_SUCCESS,
+  payload: {
+    status: 'fetchSuccess',
+    error: null,
+    articles
+  }
+});
+
+export const fetchArticlesFailure = error => ({
+  type: FETCHARTICLES_FAILURE,
+  payload: {
+    status: 'fetchFailure',
+    error,
+    articles: []
+  }
+});
+
+export const fetchArticlesAction = ({ limit, page }) => async dispatch => {
+  dispatch(fetchArticlesPending());
+  try {
+    const response = await axios({
+      method: 'get',
+      url: `${config.apiUrl}/articles/popular?page=${page}$limit=${limit}`
+    });
+
+    const { data } = response.data;
+    console.log('this is the response from the database', data);
+    dispatch(fetchArticlesSuccess(data));
+  } catch ({ response }) {
+    const { message } = response.data;
+    dispatch(fetchArticlesFailure(message));
+  }
+};

src/store/modules/landingPage/index.js

@@ -0,0 +1,7 @@
+export const landingPage = {
+  status: 'rest',
+  error: null,
+  articles: []
+};
+
+export default landingPage;

src/store/modules/landingPage/reducer/index.js

@@ -0,0 +1,17 @@
+import {
+  FETCHARTICLES_PENDING,
+  FETCHARTICLES_FAILURE,
+  FETCHARTICLES_SUCCESS
+} from '../actionTypes/index';
+import initialState from '../index';
+
+const fetchArticlesTypes = [
+  FETCHARTICLES_PENDING,
+  FETCHARTICLES_SUCCESS,
+  FETCHARTICLES_FAILURE
+];
+const fetcharticlesReducers = (state = initialState, { type, payload }) => {
+  return fetchArticlesTypes.includes(type) ? { ...state, ...payload } : state;
+};
+
+export default fetcharticlesReducers;