From f2a8865679c32f97f56bbc6c3405adb51849c051 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 13 Dec 2020 20:57:00 +0100
Subject: [PATCH] Added new card styles to error pages

---
 src/common/ErrorHandler.scss      |  9 ---------
 src/common/ErrorHandler.tsx       | 16 +++++++++-------
 src/common/NotFound.tsx           | 17 ++++++++++-------
 test/common/ErrorHandler.test.tsx |  7 ++++---
 test/common/NotFound.test.tsx     | 20 ++++++++++----------
 5 files changed, 33 insertions(+), 36 deletions(-)
 delete mode 100644 src/common/ErrorHandler.scss

diff --git a/src/common/ErrorHandler.scss b/src/common/ErrorHandler.scss
deleted file mode 100644
index 0c757135..00000000
--- a/src/common/ErrorHandler.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '../utils/mixins/vertical-align.scss';
-
-.error-handler {
-  @include vertical-align();
-
-  padding: 20px;
-  text-align: center;
-  width: 100%;
-}
diff --git a/src/common/ErrorHandler.tsx b/src/common/ErrorHandler.tsx
index e8333ee0..8bf828c8 100644
--- a/src/common/ErrorHandler.tsx
+++ b/src/common/ErrorHandler.tsx
@@ -1,6 +1,6 @@
 import { Component, ReactNode } from 'react';
 import { Button } from 'reactstrap';
-import './ErrorHandler.scss';
+import { SimpleCard } from '../utils/SimpleCard';
 
 interface ErrorHandlerState {
   hasError: boolean;
@@ -25,14 +25,16 @@ const ErrorHandler = (
     }
   }
 
-  public render(): ReactNode | undefined {
+  public render(): ReactNode {
     if (this.state.hasError) {
       return (
-        <div className="error-handler">
-          <h1>Oops! This is awkward :S</h1>
-          <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
-          <br />
-          <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+        <div className="home">
+          <SimpleCard className="p-4">
+            <h1>Oops! This is awkward :S</h1>
+            <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+            <br />
+            <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+          </SimpleCard>
         </div>
       );
     }
diff --git a/src/common/NotFound.tsx b/src/common/NotFound.tsx
index d9d781c4..5770fda3 100644
--- a/src/common/NotFound.tsx
+++ b/src/common/NotFound.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
+import { SimpleCard } from '../utils/SimpleCard';
 
 interface NotFoundProps {
   to?: string;
@@ -7,13 +8,15 @@ interface NotFoundProps {
 
 const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
   <div className="home">
-    <h2>Oops! We could not find requested route.</h2>
-    <p>
-      Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
-      button.
-    </p>
-    <br />
-    <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    <SimpleCard className="p-4">
+      <h2>Oops! We could not find requested route.</h2>
+      <p>
+        Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
+        button.
+      </p>
+      <br />
+      <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    </SimpleCard>
   </div>
 );
 
diff --git a/test/common/ErrorHandler.test.tsx b/test/common/ErrorHandler.test.tsx
index 13e57f4e..e3c741a0 100644
--- a/test/common/ErrorHandler.test.tsx
+++ b/test/common/ErrorHandler.test.tsx
@@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Button } from 'reactstrap';
 import { Mock } from 'ts-mockery';
 import createErrorHandler from '../../src/common/ErrorHandler';
+import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<ErrorHandler />', () => {
   const window = Mock.of<Window>({
@@ -28,10 +29,10 @@ describe('<ErrorHandler />', () => {
   it('renders error page when error has occurred', () => {
     wrapper.setState({ hasError: true });
 
-    expect(wrapper.text()).toContain('Oops! This is awkward :S');
-    expect(wrapper.text()).toContain(
+    expect(wrapper.find(SimpleCard).contains('Oops! This is awkward :S')).toEqual(true);
+    expect(wrapper.find(SimpleCard).contains(
       'It seems that something went wrong. Try refreshing the page or just click this button.',
-    );
+    )).toEqual(true);
     expect(wrapper.find(Button)).toHaveLength(1);
   });
 });
diff --git a/test/common/NotFound.test.tsx b/test/common/NotFound.test.tsx
index ecd1a487..e20a7512 100644
--- a/test/common/NotFound.test.tsx
+++ b/test/common/NotFound.test.tsx
@@ -1,34 +1,34 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Link } from 'react-router-dom';
 import NotFound from '../../src/common/NotFound';
+import { SimpleCard } from '../../src/utils/SimpleCard';
 
 describe('<NotFound />', () => {
   let wrapper: ShallowWrapper;
   const createWrapper = (props = {}) => {
-    wrapper = shallow(<NotFound {...props} />);
-    const content = wrapper.text();
+    wrapper = shallow(<NotFound {...props} />).find(SimpleCard);
 
-    return { wrapper, content };
+    return wrapper;
   };
 
   afterEach(() => wrapper?.unmount());
 
   it('shows expected error title', () => {
-    const { content } = createWrapper();
+    const wrapper = createWrapper();
 
-    expect(content).toContain('Oops! We could not find requested route.');
+    expect(wrapper.contains('Oops! We could not find requested route.')).toEqual(true);
   });
 
   it('shows expected error message', () => {
-    const { content } = createWrapper();
+    const wrapper = createWrapper();
 
-    expect(content).toContain(
+    expect(wrapper.contains(
       'Use your browser\'s back button to navigate to the page you have previously come from, or just press this button.',
-    );
+    )).toEqual(true);
   });
 
   it('shows a link to the home', () => {
-    const { wrapper } = createWrapper();
+    const wrapper = createWrapper();
     const link = wrapper.find(Link);
 
     expect(link.prop('to')).toEqual('/');
@@ -37,7 +37,7 @@ describe('<NotFound />', () => {
   });
 
   it('shows a link with provided props', () => {
-    const { wrapper } = createWrapper({ to: '/foo/bar', children: 'Hello' });
+    const wrapper = createWrapper({ to: '/foo/bar', children: 'Hello' });
     const link = wrapper.find(Link);
 
     expect(link.prop('to')).toEqual('/foo/bar');