feat(404):custom 404 error page

-creation of custom error page

[Finishes #165244211]

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.3.1",
+    "dotenv": "^7.0.0",
     "i": "^0.3.6",
     "node-sass": "^4.11.0",
     "react": "^16.8.6",

src/components/404.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+
+function PageNotFound(props) {
+  const { push } = props.history;
+  return (
+    <section className="page_404">
+      <div className="container">
+        <div className="four_zero_four_bg">
+          <h1 className="text-center ">404</h1>
+        </div>
+
+        <div className="contant_box_404">
+          <h3 className="h2">Looks like you are lost</h3>
+
+          <p>We dont have the page you are looking for</p>
+          <Button
+            className="btn-one"
+            onClick={() => {
+              push('/');
+            }}
+          >
+            Go home
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+PageNotFound.propTypes = {
+ history : PropTypes.object,
+};
+
+export default PageNotFound;

src/components/Header.jsx

@@ -5,13 +5,13 @@ import { NavLink } from 'react-router-dom';
 const Header = () => (
   <Navbar expand="lg" className="navbar-custom">
     <NavLink exact to="/" className="brand">
-        Author&apos;s Haven
+      Author&apos;s Haven
     </NavLink>
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
       <Nav className="ml-auto">
         <NavLink to="/login" className="nav-link">
-            Login
+          Login
         </NavLink>
       </Nav>
     </Navbar.Collapse>

src/css/App.css

@@ -31,3 +31,114 @@ body {
   text-align: right;
   padding: 10px;
 }
+
+
+/*======================
+    404 page
+=======================*/
+
+
+.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
+}
+
+.page_404  img{ width:100%;}
+
+.four_zero_four_bg{
+
+    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+    height: 400px;
+    background-position: center;
+ }
+
+
+ .four_zero_four_bg h1{
+ font-size:80px;
+ }
+
+  .four_zero_four_bg h3{
+			 font-size:80px;
+			 }
+
+			 .link_404{			 
+	color: #fff!important;
+    padding: 10px 20px;
+    background: #39ac31;
+    margin: 20px 0;
+    display: inline-block;}
+	.contant_box_404{ 
+    margin-top:-50px;
+    text-align:center;
+  }
+
+/*Buttons*/
+.btn-one{
+  background: #792525;
+  border: none;
+  color: #fcc810;
+}
+.btn-one:hover{
+ opacity: 0.7;
+ background: #792525;
+ border: none;
+ color: #fcc810;
+  }
+  .btn-two{
+    text-align: left;
+    font-size: 16px;
+    background: #792525;
+    border: none;
+    color: #fcc810;
+  }
+  .btn-two:hover{
+  border:1px solid #000000;
+  background: transparent;
+  color: #000000;
+  }
+  .btn-three{
+    background: transparent;
+    border: 1px solid#fcc810;
+    color: #000000;
+  }
+  .btn-three:hover{
+  border:1px solid #000000;
+  background: transparent;
+  color: #000000;
+  }
+  .btn-four{
+    background: transparent;
+    border: 1px solid grey;
+    color: #000000;
+  }
+  .btn-four:hover{
+  border:1px solid #000000;
+  background: transparent;
+  color: #000000;
+  }
+
+  .btn-five{
+    background: gray;
+    border: none;
+  }
+  .btn-five:hover{
+   background: gray;
+   border: none;
+    }
+.fa-trash{
+  color: grey;
+}
+.fa-trash:hover{
+  color: grey;
+  opacity: 0.7;
+}
+.btn-one:focus, .btn-one:active, .btn-two:focus, .btn-three:focus, .btn-four:focus, .btn-five:focus{
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+  outline:none !important;
+    }
+
+.btn-one:click{
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      background: #792525;
+      border: none;
+       }

src/routes/index.jsx

@@ -1,17 +1,23 @@
 import React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import '../css/App.css';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import Home from '../components/Home';
 import Login from '../components/Login';
+import PageNotFound from '../components/404';
+
+require('dotenv').config();
 
 const Routes = () => (
   <BrowserRouter>
     <div className="App">
       <Header />
-      <Route exact path="/" component={Home} />
-      <Route path="/login" component={Login} />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/login" component={Login} />
+        <Route component={PageNotFound} />
+      </Switch>
       <Footer />
     </div>
   </BrowserRouter>

src/store/reducers/index.js

@@ -1,12 +1,11 @@
 const initialState = {
-    articles: [],
-    notifications: [],
-    followers: [],
-}
-
-function rootReducer(state = initialState, action){
-
-    return state;
+  articles: [],
+  notifications: [],
+  followers: [],
 };
 
+function rootReducer(state = initialState) {
+  return state;
+}
+
 export default rootReducer;

src/tests/__mocks__/react-router-dom.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const rrd = require('react-router-dom');
+// Just render plain div with its children
+rrd.BrowserRouter = ({children}) => <div>{children}</div>
+module.exports = rrd;

src/tests/components/pageNotFound.test.js

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+import Home from '../../components/Home';
+import PageNotFound from '../../components/404';
+import Routes from '../../routes/index';
+
+jest.mock("react-router-dom/BrowserRouter", () => {
+    return ({ children }) => <div>{children}</div>;
+  });
+
+test('invalid path should redirect to 404', () => {
+  const wrapper = mount(
+    <MemoryRouter initialEntries={[ '/hfwyrefgwefuwejhfbjew' ]}>
+      <Routes/>
+    </MemoryRouter>
+  );
+  expect(wrapper.find(PageNotFound)).toHaveLength(1);
+});
+
+test('user is redirected to homepage after clicking on the button', () => {
+  const wrapper = mount(
+    <MemoryRouter initialEntries={[ '/' ]}>
+      <Routes/>
+    </MemoryRouter>
+  );
+  const props = {
+    history : {
+      push : jest.fn()
+  }
+}
+  const component = mount(<PageNotFound {...props}/>);
+  console.log(component.props)
+  component
+    .find('button')
+    .simulate('click');
+
+
+  expect(wrapper.find(Home)).toHaveLength(1);
+});
+
+test('valid path should not redirect to 404', () => {
+  const wrapper = mount(
+    <MemoryRouter initialEntries={[ '/' ]}>
+      <Routes/>
+    </MemoryRouter>
+  );
+  expect(wrapper.find(Home)).toHaveLength(1);
+});