Merge 7b04eef into c2e80b5

src/actions/__tests__/searchActions.spec.js

@@ -106,9 +106,9 @@ describe('get articles actions', () => {
           tags: 'show',
         },
         updateFields: {
-          categories: [],
-          authors: [],
-          tags: [],
+          categories: ['technology', 'lifstyle'],
+          authors: ['monday', 'tuesday'],
+          tags: ['javascript', 'react'],
         },
         searchResults: [],
       },
@@ -122,7 +122,7 @@ describe('get articles actions', () => {
   it('adds new articles to the store', () => {
     nock(url)
       .post('/articles/search/filter?searchQuery=on&limit=2000')
-      .reply(200, [{ a: 'b' }, { c: 'd' }]);
+      .reply(200, { data: { articles: [{}, {}] } });
     return store.dispatch(getFilteredArticles())
       .then(() => {
         expect(store.getActions()).toMatchSnapshot();

src/components/Header/Header.js

@@ -36,7 +36,7 @@ export class Header extends Component {
 
   handleKeyUp = (e) => {
     if (e.keyCode === 13) {
-      if (e.target.value.length) {
+      if (e.target.value.length && e.target.value.length > 1) {
         this.props.updateSearchQuery(e.target.value);
         this.props.getFilteredArticles(e.target.value);
         this.props.updatePageNumber(1);

src/views/SearchPage/Filter.scss → src/views/SearchPage/Filter/Filter.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   margin: 0 0 0 100px;
+  position: fixed;
   h3 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 200;

src/views/SearchPage/FilterComponents.js → src/views/SearchPage/Filter/FilterComponents.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { PropTypes } from 'prop-types';
-import Icon from '../../components/Icon';
+import Icon from '@Components/Icon';
 
 
 const displaySelection = (selections, IconClick, filtername) => (

src/views/SearchPage/Filter/index.js

@@ -0,0 +1,3 @@
+import Filter from './Filter';
+
+export default Filter;

src/views/SearchPage/Pager.js → src/views/SearchPage/Pager/Pager.js

@@ -33,17 +33,27 @@ export class Pager extends Component {
     const { page } = filters;
     const articles = filters.searchResults;
     const totalArticles = articles.length;
-    const pages = Math.ceil(totalArticles / 20);
+    const pages = Math.ceil(totalArticles / 30);
     if (page < pages) {
       this.updatePageNumber(page + 1);
     }
   }
 
   displayPages(pages) {
     const result = [];
+    const { filters: { page } } = this.props;
     for (let i = 1; i <= pages; i += 1) {
-      const page = <Page key={i} handleChange={this.updatePageNumber}>{i}</Page>;
-      result.push(page);
+      const pagenumber = (
+        <Page
+          key={i}
+          handleChange={this.updatePageNumber}
+          index={i}
+          selected={i === page}
+        >
+          {i}
+        </Page>
+      );
+      result.push(pagenumber);
     }
     return result;
   }
@@ -52,7 +62,7 @@ export class Pager extends Component {
     const { filters } = this.props;
     const articles = filters.searchResults;
     const totalArticles = articles.length;
-    const pages = Math.ceil(totalArticles / 20);
+    const pages = Math.ceil(totalArticles / 30);
     const { searchQuery } = filters;
 
     return (
@@ -104,9 +114,9 @@ Arrows.propTypes = {
 };
 
 export const Page = (props) => {
-  const { children, handleChange } = props;
+  const { children, handleChange, selected } = props;
   return (
-    <div className="page-container" onClick={() => { handleChange(children); }}>
+    <div className={`page-container ${selected ? 'active' : ''}`} onClick={() => { handleChange(children); }}>
       <p>{ children }</p>
     </div>
   );
@@ -115,6 +125,7 @@ export const Page = (props) => {
 Page.propTypes = {
   children: PropTypes.number.isRequired,
   handleChange: PropTypes.func.isRequired,
+  selected: PropTypes.bool.isRequired,
 };
 
 export default connectComponent(Pager, { updatePageNumber });

src/views/SearchPage/Pager.scss → src/views/SearchPage/Pager/Pager.scss

@@ -40,6 +40,9 @@
   &:hover {
     background-color: rgba(255, 200, 0, 0.5)
   }
+  &.active {
+    background-color: rgb(255, 200, 0)
+  }
   p {
     padding-top: 2px;
     text-align: center;

src/views/SearchPage/Pager/index.js

@@ -0,0 +1,3 @@
+import Pager from './Pager';
+
+export default Pager;

src/views/SearchPage/SearchBody.js → src/views/SearchPage/SearchBody/SearchBody.js

@@ -13,8 +13,8 @@ export class SearchBody extends Component {
       return 'No result found for this search';
     }
     const { page } = filters;
-    const start = (page - 1) * 20;
-    const end = start + 20 > articles.length ? (articles.length) : start + 20;
+    const start = (page - 1) * 30;
+    const end = start + 30 > articles.length ? (articles.length) : start + 30;
     const displayResults = articles.slice(start, end);
     const cards = displayResults.map((article, index) => (
       <div className="padding">
@@ -33,19 +33,19 @@ export class SearchBody extends Component {
     const items = this.articleDisplay();
     if (items === 'No result found for this search') {
       return (
-        <div>
+        <div className="no-result">
           <h2> No result found for this search</h2>
         </div>
       );
     } if (!items.length) {
       return (
-        <div>
+        <div className="loading">
           <h2> Loading...</h2>
         </div>
       );
     }
     return (
-      <div>
+      <div className="articles-container">
         {items}
       </div>
     );

src/views/SearchPage/SearchBody.scss → src/views/SearchPage/SearchBody/SearchBody.scss

@@ -17,3 +17,15 @@
 .padding {
   margin: 20px;
 }
+
+.articles-container{
+  margin-left: 160px;
+}
+
+.no-result{
+  min-height: 70vh;
+}
+
+.loading{
+  min-height: 70vh;
+}

src/views/SearchPage/SearchBody/index.js

@@ -0,0 +1,3 @@
+import SearchBody from './SearchBody';
+
+export default SearchBody;

src/views/SearchPage/SearchPage.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Footer from '@Components/Footer';
-import Filter from './Filter';
-import SearchBody from './SearchBody';
-import Pager from './Pager';
+import Filter from './Filter/Filter';
+import SearchBody from './SearchBody/SearchBody';
+import Pager from './Pager/Pager';
 import './SearchPage.scss';
 
 const SearchPage = () => (

src/views/SearchPage/SearchPage.scss

@@ -6,13 +6,18 @@
   'footer  footer  footer  footer';
 
   .header {
-    grid-area: header
+    grid-area: header;
+    position: sticky;
+    top: 56px;
+    background-color: white;
   }
   .filter {
-    grid-area: filter
+    grid-area: filter;
+    margin: 0 0 60px 0;
   }
   .body {
-    grid-area: body
+    grid-area: body;
+    margin: 0 0 60px 150px;
   }
   .footer {
     grid-area: footer;

src/views/SearchPage/SearchPage.spec.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Filter from '@Views/SearchPage/Filter';
-import Pager from '@Views/SearchPage/Pager';
-import Footer from '@Components/Footer';
 import SearchPage from './';
 
 let wrapper;
@@ -39,16 +36,4 @@ describe('SearchPage component test', () => {
   it('should render a .footer class', () => {
     expect(wrapper.find('.header')).toHaveLength(1);
   });
-
-  it('should render a Filter element', () => {
-    expect(wrapper.find(Filter)).toHaveLength(1);
-  });
-
-  it('should render a Filter element', () => {
-    expect(wrapper.find(Pager)).toHaveLength(1);
-  });
-
-  it('should render a Filter element', () => {
-    expect(wrapper.find(Footer)).toHaveLength(1);
-  });
 });