Dbuggerx · dependabot · Jun 30, 2019 · Jul 1, 2019 · Jul 1, 2019 · Jul 1, 2019
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -26,6 +26,7 @@ e2e_tests:
     - yarn build
     - yarn e2e
   artifacts:
+    when: on_failure
     paths:
       - testcafe/screenshots/latest
       - testcafe/screenshots/diffs

diff --git a/README.md b/README.md
@@ -11,4 +11,6 @@ For now, I would ask to please consider the technical aspects involved, like:
 * [Re-ducks](https://github.com/alexnm/re-ducks) modular architecture
 * CSS Grid
 * Styles created using [SASS](https://sass-lang.com/) with the [BEM methodology](http://getbem.com/);
-* [Typescript](https://www.typescriptlang.org)
+* [Typescript](https://www.typescriptlang.org)
+* Testing with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+* End-to-end tests using [TestCafe](https://devexpress.github.io/testcafe/documentation/getting-started/) and [gherkin-testcafe](https://github.com/Dbuggerx/gherkin-testcafe)
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "path-to-regexp": "^3.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-hot-loader": "^4.11.1",
+    "react-hot-loader": "^4.12.0",
     "react-redux": "^7.1.0",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
@@ -73,6 +73,7 @@
     "eslint-plugin-jest": "^22.7.1",
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "file-loader": "^4.0.0",
     "gherkin-testcafe": "https://github.com/Dbuggerx/gherkin-testcafe.git",
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -96,7 +97,7 @@
     "stylelint-webpack-plugin": "^0.10.5",
     "testcafe": "^1.2.1",
     "typescript": "^3.5.2",
-    "webpack": "^4.35.0",
+    "webpack": "^4.35.2",
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2",

diff --git a/src/components/BookCard/BookCard.scss b/src/components/BookCard/BookCard.scss
@@ -4,7 +4,7 @@
 .book-card {
   $card-border: solid 1px get($colors, border);
 
-  font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;
+  font-family: $default-font-family;
   border: $card-border;
   border-radius: get($spaces, border-radius);
   box-shadow: 0 2px 4px get($colors, greys, 2000);

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -9,7 +9,7 @@
   vertical-align: middle;
   position: relative;
   width: 100%;
-  font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;
+  font-family: $default-font-family;
 
   &__button {
     @extend %input-color;

diff --git a/src/components/Info/Info.scss b/src/components/Info/Info.scss
@@ -0,0 +1,6 @@
+@import '../scss/variables';
+
+/* @define info */
+.info {
+  font-family: $default-font-family;
+}
diff --git a/src/components/Info/index.tsx b/src/components/Info/index.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import './Info.scss';
+
+const Info = () => (
+  <div className="info">
+    <h2>This is still a work in progress</h2>
+    For now, I would ask to please consider the technical aspects involved, like:
+    <ul>
+      <li>Server side rendering</li>
+      <li>Code Splitting</li>
+      <li>NodeJS / Express API</li>
+      <li>
+        <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">
+          React
+        </a>{' '}
+        best practices
+      </li>
+      <li>
+        <a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
+          Redux
+        </a>{' '}
+        (static and dynamic imported)
+      </li>
+      <li>
+        <a
+          href="https://redux-observable.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Redux-Observable
+        </a>{' '}
+        middleware, powered by RxJs (with dynamic imported epics)
+      </li>
+      <li>
+        <a
+          href="https://github.com/alexnm/re-ducks"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Re-ducks
+        </a>{' '}
+        modular architecture
+      </li>
+      <li>
+        styles created using{' '}
+        <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">
+          SASS
+        </a>{' '}
+        with the{' '}
+        <a href="http://getbem.com/" target="_blank" rel="noopener noreferrer">
+          BEM methodology
+        </a>
+      </li>
+      <li>CSS Grid</li>
+      <li>
+        <a
+          href="https://www.typescriptlang.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Typescript
+        </a>
+      </li>
+      <li>
+        <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">
+          Sass
+        </a>{' '}
+        styles
+      </li>
+      <li>
+        Testing with{' '}
+        <a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">
+          Jest
+        </a>{' '}
+        and{' '}
+        <a
+          href="https://testing-library.com/docs/react-testing-library/intro"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          React Testing Library
+        </a>
+      </li>
+      <li>
+        End-to-end tests using{' '}
+        <a
+          href="https://devexpress.github.io/testcafe/documentation/getting-started/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          TestCafe
+        </a>{' '}
+        and{' '}
+        <a
+          href="https://github.com/Dbuggerx/gherkin-testcafe"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          gherkin-testcafe
+        </a>
+      </li>
+    </ul>
+  </div>
+);
+
+Info.displayName = 'Info';
+
+export default Info;
diff --git a/src/components/MainLayout/MainLayout.scss b/src/components/MainLayout/MainLayout.scss
@@ -16,7 +16,7 @@ body,
     'search .'
     'books info'
     'pagination info';
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: $default-font-family;
   height: 100vh;
   width: 100vw;
 

diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './MainLayout.scss';
+import Info from '../Info';
 
 type Props = {
   loadingBooks: boolean;
@@ -19,103 +20,7 @@ const MainLayout = (props: Props) => (
     <div className="main-layout__search">{props.searchForm}</div>
     <div className="main-layout__pagination">{props.pagination}</div>
     <div className="main-layout__info">
-      <h2>This is still a work in progress</h2>
-      For now, I would ask to please consider the technical aspects involved, like:
-      <ul>
-        <li>Server side rendering</li>
-        <li>Code Splitting</li>
-        <li>NodeJS / Express API</li>
-        <li>
-          <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">
-            React
-          </a>{' '}
-          best practices
-        </li>
-        <li>
-          <a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
-            Redux
-          </a>{' '}
-          (static and dynamic imported)
-        </li>
-        <li>
-          <a
-            href="https://redux-observable.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux-Observable
-          </a>{' '}
-          middleware, powered by RxJs (with dynamic imported epics)
-        </li>
-        <li>
-          <a
-            href="https://github.com/alexnm/re-ducks"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Re-ducks
-          </a>{' '}
-          modular architecture
-        </li>
-        <li>
-          styles created using{' '}
-          <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">
-            SASS
-          </a>{' '}
-          with the{' '}
-          <a href="http://getbem.com/" target="_blank" rel="noopener noreferrer">
-            BEM methodology
-          </a>
-        </li>
-        <li>CSS Grid</li>
-        <li>
-          <a
-            href="https://www.typescriptlang.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Typescript
-          </a>
-        </li>
-        <li>
-          <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">
-            Sass
-          </a>{' '}
-          styles
-        </li>
-        <li>
-          Testing with{' '}
-          <a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">
-            Jest
-          </a>{' '}
-          and{' '}
-          <a
-            href="https://testing-library.com/docs/react-testing-library/intro"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Testing Library
-          </a>
-        </li>
-        <li>
-          End-to-end tests using{' '}
-          <a
-            href="https://devexpress.github.io/testcafe/documentation/getting-started/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            TestCafe
-          </a>{' '}
-          and{' '}
-          <a
-            href="https://github.com/Dbuggerx/gherkin-testcafe"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            gherkin-testcafe
-          </a>
-        </li>
-      </ul>
+      <Info />
     </div>
   </div>
 );

diff --git a/src/components/SearchForm/SearchForm.scss b/src/components/SearchForm/SearchForm.scss
@@ -34,7 +34,7 @@
       border: solid 1px get($colors, greys, 2000);
       padding: get($spaces, 500) get($spaces, 1000);
       outline: 0;
-      font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;
+      font-family: $default-font-family;
       font-size: 1em;
 
       &::placeholder {

diff --git a/src/components/SearchForm/index.tsx b/src/components/SearchForm/index.tsx
@@ -36,6 +36,8 @@ const SearchForm = (props: Props) => {
     props.search(category, genre, query);
   };
 
+  const renderDropdownItem = useCallback((item: SearchParam) => ({ id: item.id, el: item.label }), []);
+
   return (
     <div className="search-form">
       {(props.selectedCategory || props.selectedGenre || props.selectedQuery) && (
@@ -76,15 +78,15 @@ const SearchForm = (props: Props) => {
         <div className="search-form__field" data-testid="category-dropdown">
           <Dropdown<SearchParam>
             items={props.availableCategories || []}
-            renderItem={i => ({ id: i.id, el: i.label })}
+            renderItem={renderDropdownItem}
             onSelect={handleCategorySelected}
             placeholder="Category"
           />
         </div>
         <div className="search-form__field" data-testid="genre-dropdown">
           <Dropdown<SearchParam>
             items={props.availableGenres || []}
-            renderItem={i => ({ id: i.id, el: i.label })}
+            renderItem={renderDropdownItem}
             onSelect={handleGenreSelected}
             placeholder="Genre"
           />
@@ -113,4 +115,4 @@ const SearchForm = (props: Props) => {
 
 SearchForm.displayName = 'SearchForm';
 
-export default SearchForm;
+export default React.memo(SearchForm);
diff --git a/src/components/scss/_base.scss b/src/components/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'variables';
 
 body {
-  font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;
+  font-family: $default-font-family;
 }
diff --git a/src/components/scss/_variables.scss b/src/components/scss/_variables.scss
@@ -52,3 +52,5 @@ $times: (
 
   @return $map;
 }
+
+$default-font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,3 +52,5 @@ $times: (

		@return $map;
		}

		$default-font-family: 'Roboto', Arial, Verdana, Tahoma, sans-serif;