feat(search/filter): Users can search and/or filter Articles

-Search by title, author, tag
-Filter by title, author, tag
-Search/Filter by any two, or all three above

[Starts #161348769]

package.json

@@ -64,6 +64,7 @@
     "dotenv-webpack": "^1.5.7",
     "expect": "^23.6.0",
     "file-loader": "^2.0.0",
+    "history": "^4.7.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",

src/__snapshots__/index.test.js.snap

@@ -3,8 +3,50 @@
 exports[`Provider and App renders <Provider/> correctly 1`] = `<App />`;
 
 exports[`Provider and App renders <Provider/> correctly 2`] = `
-<BrowserRouter>
-  <withRouter(Header) />
+<Router
+  history={
+    Object {
+      "action": "POP",
+      "block": [Function],
+      "createHref": [Function],
+      "go": [Function],
+      "goBack": [Function],
+      "goForward": [Function],
+      "length": 1,
+      "listen": [Function],
+      "location": Object {
+        "hash": "",
+        "pathname": "/",
+        "search": "",
+        "state": undefined,
+      },
+      "push": [Function],
+      "replace": [Function],
+    }
+  }
+>
+  <Connect(Header)
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  />
   <Switch>
     <Route
       component={[Function]}
@@ -35,7 +77,11 @@ exports[`Provider and App renders <Provider/> correctly 2`] = `
       component={[Function]}
       path="/profiles/edit"
     />
+    <Route
+      component={[Function]}
+      path="/search"
+    />
   </Switch>
   <Footer />
-</BrowserRouter>
+</Router>
 `;

src/actions/actionTypes.js

@@ -20,11 +20,15 @@ const ACTION_TYPE = {
   GET_PROFILE_ERROR: 'GET_PROFILE_ERROR',
   EDIT_PROFILE: 'EDIT_PROFILE',
   UPLOAD_IMAGE: 'UPLOAD_IMAGE',
-
   GET_RATING_SUCCESS: 'GET_RATING_SUCCESS',
   POST_RATING_SUCCESS: 'POST_RATING_SUCCESS',
   POST_RATING_FAILED: 'POST_RATING_FAILED',
   POST_RATING_DATA: 'POST_RATING_DATA',
+  SAVE_SEARCH_QUERY: 'SAVE_SEARCH_QUERY',
+  CLEAR_SEARCH_QUERY: 'CLEAR_SEARCH_QUERY',
+  SAVE_SEARCH_RESULTS: 'SAVE_SEARCH_RESULTS',
+  SEARCH_FAILED: 'SEARCH_FAILED',
+  UPDATE_FILTER_FIELD: 'UPDATE_FILTER_FIELD',
 };
 
 export default ACTION_TYPE;

src/actions/ratingActions/ratingActions.test.js

@@ -53,7 +53,7 @@ describe('Login Actions tests', () => {
     moxios.stubRequest(`${APP_URL}/articles/7/rating`, statusData(200, { message: 'ok' }));
     store.dispatch(postRating(7)).then(() => {
       expect(store.getActions()).toEqual(expect.objectContaining(
-        actionTypesData(ACTION_TYPE.POST_RATING_SUCCESS, { message: 'ok' }),
+        [actionTypesData(ACTION_TYPE.POST_RATING_SUCCESS, { message: 'ok' })],
       ));
     });
   });

src/actions/searchActions.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+import ACTION_TYPE from './actionTypes';
+
+const saveSearchQueryAction = payload => ({
+  type: ACTION_TYPE.SAVE_SEARCH_QUERY,
+  payload,
+});
+
+const saveSearchResultsAction = payload => ({
+  type: ACTION_TYPE.SAVE_SEARCH_RESULTS,
+  payload,
+});
+
+export const updateFilterFieldAction = payload => ({
+  type: ACTION_TYPE.UPDATE_FILTER_FIELD,
+  payload,
+});
+
+export const fetchSearchArticlesThunk = url => dispatch => axios.get(url)
+  .then((response) => {
+    dispatch(saveSearchResultsAction(response.data.results));
+  })
+  .catch(() => {});
+
+export default saveSearchQueryAction;

src/actions/tests/searchActions.test.js

@@ -0,0 +1,39 @@
+import moxios from 'moxios';
+import configureMockStore from 'redux-mock-store';
+import reduxThunk from 'redux-thunk';
+import { fetchSearchArticlesThunk } from '../searchActions';
+import APP_URL from '../../utils/constants';
+import ACTION_TYPE from '../actionTypes';
+import { sampleListOfArticles } from '../../commons/initialStates';
+
+describe('Search Actions', () => {
+  let store;
+  let url;
+
+  beforeEach(() => {
+    moxios.install();
+    const mockStore = configureMockStore([reduxThunk]);
+    store = mockStore({});
+    url = `${APP_URL}/articles?title=dragon`;
+  });
+
+  afterEach(() => {
+    moxios.uninstall();
+  });
+
+  test('search articles thunk', () => {
+    moxios.stubRequest(url, {
+      status: 200,
+      responseText: sampleListOfArticles,
+    });
+    const expectedActions = [{
+      type: ACTION_TYPE.SAVE_SEARCH_RESULTS,
+      payload: sampleListOfArticles,
+    }];
+    store.dispatch((fetchSearchArticlesThunk(url)))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      })
+      .catch(() => {});
+  });
+});

src/commons/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();

src/commons/initialStates.js

@@ -46,6 +46,13 @@ const initialState = {
     },
   },
   ratingReducer: {},
+  searchReducer: {
+    searchArticles: [],
+    searchQuery: '',
+    title: '',
+    tag: '',
+    author: '',
+  },
 };
 
 export const sampleArticle = {
@@ -85,4 +92,10 @@ export const initialStateWithSample2 = {
   article: sampleArticle2,
 };
 
+export const sampleListOfArticles = [
+  sampleArticle, { ...sampleArticle, id: 2 }, { ...sampleArticle, id: 3 },
+  { ...sampleArticle, id: 4 }, { ...sampleArticle, id: 5 }, { ...sampleArticle, id: 6 },
+  { ...sampleArticle, id: 7 }, { ...sampleArticle, id: 8 }, { ...sampleArticle, id: 9 },
+];
+
 export default initialState;

src/components/App/index.js

@@ -1,34 +1,39 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import {
+  Router, Route, Switch,
+} from 'react-router-dom';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import history from '../../commons/history';
 import Home from '../Home';
-import Login from '../Login/index';
-import Header from '../Header';
+import LoginPage from '../../containers/LoginPage';
+import Header from '../../containers/Header';
 import { Footer } from '../Footer';
 import SignUpPageConnected from '../../containers/SignUpPage';
 import Articles from '../../containers/Articles';
 import ArticlePageConnected from '../../containers/ArticlePage';
 import ProfileConnected from '../../containers/profiles/profiles';
 import EditProfilePageConnected from '../../containers/profiles/editProfile';
+import SearchPage from '../../containers/SearchPage';
 
 library.add(faSearch);
 const App = () => (
-  <BrowserRouter>
+  <Router history={history}>
     <React.Fragment>
-      <Header />
+      <Header history={history} />
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route path="/login" component={Login} />
+        <Route path="/login" component={LoginPage} />
         <Route path="/signup" component={SignUpPageConnected} />
         <Route path="/articles" component={Articles} />
         <Route path="/article/:articleId" component={ArticlePageConnected} />
         <Route path="/profile" component={ProfileConnected} />
         <Route path="/profiles/edit" component={EditProfilePageConnected} />
+        <Route path="/search" component={SearchPage} />
       </Switch>
       <Footer />
     </React.Fragment>
-  </BrowserRouter>
+  </Router>
 );
 
 export default App;

src/components/Filter/__snapshots__/index.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Filter /> component should render correctly 1`] = `
+<Filter
+  onChange={[MockFunction]}
+  onClick={[MockFunction]}
+  searchQuery="test"
+>
+  <div
+    className="container filter-box pt-3 text-center"
+  >
+    <h6>
+      Search or Filter by:
+    </h6>
+    <input
+      className="p-1 m-1"
+      id="title"
+      name="title"
+      onChange={[MockFunction]}
+      placeholder="Title"
+      type="text"
+    />
+    <input
+      className="p-1 m-1"
+      id="tag"
+      name="tag"
+      onChange={[MockFunction]}
+      placeholder="Tag"
+      type="text"
+    />
+    <input
+      className="p-1 m-1"
+      id="author"
+      name="author"
+      onChange={[MockFunction]}
+      placeholder="Author"
+      type="text"
+    />
+    <button
+      className="btn btn-primary btn-sm"
+      id="btFilter"
+      onClick={[MockFunction]}
+      type="button"
+    >
+      Filter
+    </button>
+  </div>
+</Filter>
+`;

src/components/Filter/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Filter = ({ searchQuery, onChange, onClick }) => {
+  const renderInputElement = (id, placeholder) => (
+    <input
+      type="text"
+      name={id}
+      id={id}
+      placeholder={placeholder}
+      className="p-1 m-1"
+      onChange={onChange}
+    />
+  );
+
+  return (
+    <div className="container filter-box pt-3 text-center">
+      <h6>Search or Filter by:</h6>
+      {renderInputElement('title', 'Title', searchQuery)}
+      {renderInputElement('tag', 'Tag')}
+      {renderInputElement('author', 'Author')}
+      <button
+        type="button"
+        id="btFilter"
+        onClick={onClick}
+        className="btn btn-primary btn-sm"
+      >
+        Filter
+      </button>
+    </div>
+  );
+};
+
+Filter.propTypes = {
+  searchQuery: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default Filter;

src/components/Filter/index.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Filter from '.';
+
+describe('<Filter /> component', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Filter searchQuery="test" onChange={jest.fn()} onClick={jest.fn()} />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});