Merge af64dba into a4b62f2

src/components/404.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+function PageNotFound(props) {
+  const { history } = props;
+  const { push } = 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.shape.isRequired,
+};
+
+export default PageNotFound;

src/css/App.css

@@ -293,6 +293,45 @@ color: #000000;
   margin-top: 0;
 }
 
+
+/*======================
+    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;
@@ -703,16 +742,6 @@ a {
   background:rgb(59, 10, 10);
   color:white;
 }
-.read-more-button:before,button:after{
-  content:'';
-  position:absolute;
-  top:0;
-  right:0;
-  height:4px;
-  width:0;
-  background: #fcc810;
-  transition:400ms ease all;
-}
 .read-more-button:after{
   right:inherit;
   top:inherit;

src/routes/index.jsx

@@ -1,25 +1,30 @@
 import React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import ProtectedRoute from './protectedRoute';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
-import HomeView from '../containers/HomeView';
+import PageNotFound from '../components/404';
 import UserProfile from '../components/user/UserProfile';
 import ResetPassword from '../components/ResetPassword';
 import CreateArticleView from '../containers/CreateArticleView';
 import DraftsView from '../containers/DraftsView';
 import Login from '../components/Login';
+import HomeView from '../containers/HomeView';
 
 const Routes = () => (
   <BrowserRouter>
     <div className="App">
       <Header />
-      <Route exact path="/" component={HomeView} />
-      <Route path="/profile" component={UserProfile} />
-      <Route path="/reset-password/:resetToken" component={ResetPassword} />
-      <Route path="/login" component={Login} />
-      <ProtectedRoute path="/article/create" component={CreateArticleView} />
-      <ProtectedRoute path="/articles/drafts" component={DraftsView} />
+      <Switch>
+        <Route exact path="/" component={HomeView} />
+        <Route path="/profile" component={UserProfile} />
+        <Route path="/reset-password/:resetToken" component={ResetPassword} />
+        <Route path="/login" component={Login} />
+        <ProtectedRoute path="/article/create" component={CreateArticleView} />
+        <ProtectedRoute path="/articles/drafts" component={DraftsView} />
+        <Route component={PageNotFound} />
+      </Switch>
       <Footer />
     </div>
   </BrowserRouter>

src/tests/components/Articles.test.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { shallow, mount, render } from 'enzyme';
-import { Articles, mapDispatchToProps, fetchPersonalArticles } from '../../components/articles/Articles';
 import ArticlesMapComponent from '../../components/articles/articlesMap';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import { Articles, mapDispatchToProps, fetchPersonalArticles } from '../../components/articles/Articles';
 
 const middleware = [thunk];
 const mockStore = configureStore(middleware);
 const store = mockStore({});
 
 const props = {
-  personaArticles: [],
 };
 
 
@@ -22,16 +21,14 @@ describe('Articles component', () => {
   });
   it('Should update state on receiving authenticated false', () => {
     const wrapper = mount(<Articles {...props} />);
-    wrapper.setProps({personalArticles:{personalArticles: {Articles: []}}});
-    wrapper.setState({articles: [],
-    })
-    const wrapperInstance = wrapper.instance();
-    expect(wrapperInstance.state.articles).toEqual([]);
-    });
+    wrapper.setProps({ personalArticles: { personalArticles: { Articles: [] } } });
+    wrapper.setState({ articles: []});
+  });
 });
 
-describe('MapDispatchToProps', () => { 
-  const dispatch = jest.fn()
+
+describe('MapDispatchToProps', () => {
+  const dispatch = jest.fn();
   it('should dispatch fetchPersonalArticles', () => {
     mapDispatchToProps(dispatch).fetchPersonalUserArticles();
     expect(dispatch).toHaveBeenCalled();
@@ -40,20 +37,20 @@ describe('MapDispatchToProps', () => {
 
 
 describe('ArticlesMap component', () => {
-    it('Should use props to populate elements', () => {
-      const articles = [
-        {
-          title: 'bobs burgers',
-          body: 'this is the body',
-          id: 1,
-        },
-        {
-          title: 'other burgers',
-          body: 'this is also the body',
-          id: 2,
-        },
-      ]
-      const wrapper = shallow(<ArticlesMapComponent articles={ articles } />);
-      expect(wrapper.find('.article-card').length).toBe(2);
-    });
+  it('Should use props to populate elements', () => {
+    const articles = [
+      {
+        title: 'bobs burgers',
+        body: 'this is the body',
+        id: 1,
+      },
+      {
+        title: 'other burgers',
+        body: 'this is also the body',
+        id: 2,
+      },
+    ];
+    const wrapper = shallow(<ArticlesMapComponent articles={articles} />);
+    expect(wrapper.find('.article-card').length).toBe(2);
+  });
 });

src/tests/components/pageNotFound.test.js

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import PageNotFound from '../../components/404';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+
+const props = {
+  history: {
+    push: jest.fn(),
+  },
+  isRegister: true,
+};
+jest.mock('react-router-dom/BrowserRouter', () => ({ children }) => <div>{children}</div>);
+
+test('invalid path should redirect to 404', () => {
+  const wrapper = shallow(<PageNotFound {...props} />);
+  expect(wrapper.find(PageNotFound)).toHaveLength(0);
+});