fix: Consolodate full screen loaders in to one component

client/src/client-only-routes/ShowCertification.js

@@ -18,8 +18,6 @@ import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage';
 import RedirectHome from '../components/RedirectHome';
 import { Loader } from '../components/helpers';
 
-import './show-certification.css';
-
 const propTypes = {
   cert: PropTypes.shape({
     username: PropTypes.string,
@@ -84,11 +82,7 @@ class ShowCertification extends Component {
     const { pending, complete, errored } = fetchState;
 
     if (pending) {
-      return (
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
+      return <Loader fullScreen={true} />;
     }
 
     if (!pending && errored) {

client/src/client-only-routes/ShowProfileOrFourOhFour.js

@@ -59,11 +59,7 @@ class ShowFourOhFour extends Component {
     if (showLoading) {
       // We don't know if /:maybeUser is a user or not, we will show the loader
       // until we get a response from the API
-      return (
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
+      return <Loader fullScreen={true} />;
     }
     if (isEmpty(requestedUser)) {
       // We have a response from the API, but there is nothing in the store

client/src/client-only-routes/ShowSettings.js

@@ -165,11 +165,7 @@ function ShowSettings(props) {
   } = props;
 
   if (showLoading) {
-    return (
-      <div className='loader-wrapper'>
-        <Loader />
-      </div>
-    );
+    return <Loader fullScreen={true} />;
   }
 
   if (!showLoading && !isSignedIn) {

client/src/client-only-routes/ShowUser.js

@@ -89,11 +89,7 @@ class ShowUser extends Component {
     const { username, isSignedIn, userFetchState, email } = this.props;
     const { pending, complete, errored } = userFetchState;
     if (pending && !complete) {
-      return (
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
+      return <Loader fullScreen={true} />;
     }
 
     if ((complete || errored) && !isSignedIn) {

client/src/components/helpers/Loader.js

@@ -1,10 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Spinner from 'react-spinkit';
 
-function Loader() {
-  return <Spinner name='ball-clip-rotate-multiple' />;
+import './loader.css';
+
+function Loader({ fullScreen }) {
+  return (
+    <div className={fullScreen ? 'full-screen-wrapper' : ''}>
+      <Spinner name='ball-clip-rotate-multiple' />
+    </div>
+  );
 }
 
 Loader.displayName = 'Loader';
+Loader.propTypes = {
+  fullScreen: PropTypes.bool
+};
 
 export default Loader;

client/src/components/helpers/Loader.test.js

@@ -0,0 +1,33 @@
+/* global expect */
+import React from 'react';
+import { render } from 'react-testing-library';
+import 'jest-dom/extend-expect';
+
+import Loader from './Loader';
+
+describe('<Loader />', () => {
+  it('renders to the DOM', () => {
+    const { container } = render(<Loader />);
+    expect(container).toBeTruthy();
+  });
+
+  it('adds the correct class when given a fullScreen prop', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    expect(container.firstChild).toHaveClass('full-screen-wrapper');
+  });
+
+  /**
+   * As we only wrap another library Component,
+   * there is nothing much to test except snapshots
+   */
+
+  it('matches to the default render snapshot', () => {
+    const { container } = render(<Loader />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches the fullScreen render snapshot', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

client/src/components/helpers/__snapshots__/Loader.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
+<div
+  class="full-screen-wrapper"
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;
+
+exports[`<Loader /> matches to the default render snapshot 1`] = `
+<div
+  class=""
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;

client/src/components/helpers/loader.css

@@ -1,4 +1,4 @@
-.loader-wrapper {
+.full-screen-wrapper {
   height: 100vh;
   width: 100%;
   display: flex;
@@ -6,7 +6,7 @@
   align-items: center;
 }
 
-.loader-wrapper .sk-spinner {
+.full-screen-wrapper .sk-spinner {
   transform: scale(8);
   color: #006400;
 }

client/src/pages/welcome.js

@@ -70,11 +70,7 @@ function Welcome({
   activeDonations
 }) {
   if (pending && !complete) {
-    return (
-      <div className='loader-wrapper'>
-        <Loader />
-      </div>
-    );
+    return <Loader fullScreen={true} />;
   }
 
   if (!isSignedIn) {