From 07e5183266c2991cc7af8011b296f16ab5c3dd48 Mon Sep 17 00:00:00 2001
From: lordcommander <mattia.regali@gmail.com>
Date: Sun, 12 Jan 2020 18:08:48 +0100
Subject: [PATCH] creazione routing notfound e About

---
 src/About.js    | 14 ++++++++++++++
 src/App.js      |  7 ++++++-
 src/Buttons.js  |  3 ++-
 src/Navbar.js   |  8 ++++++--
 src/notfound.js | 15 +++++++++++++++
 5 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/About.js
 create mode 100644 src/notfound.js

diff --git a/src/About.js b/src/About.js
new file mode 100644
index 0000000..37f3c25
--- /dev/null
+++ b/src/About.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Navbar from './Navbar';
+
+class About extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="LORDNABBO" />
+            </>
+        );
+    }
+}
+
+export default About;
diff --git a/src/App.js b/src/App.js
index 720aec7..a2dd8e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,9 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
 
 const Home = lazy(() => import('./Home'));
-//const About = lazy(() => import('./About'));
+const About = lazy(() => import('./About'));
+const Notfound = lazy(() => import('./notfound'));
+
 
 class App extends React.Component {
     render() {
@@ -11,6 +13,9 @@ class App extends React.Component {
                 <Suspense fallback={<div>Loading...</div>}>
                     <Switch>
                         <Route exact path="/" component={Home}/>
+                        <Route path="/About" component={About}/>
+
+                        <Route component={Notfound} />
                     </Switch>
                 </Suspense>
             </Router>
diff --git a/src/Buttons.js b/src/Buttons.js
index 3c19580..b2d120f 100644
--- a/src/Buttons.js
+++ b/src/Buttons.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import {Link} from 'react-router-dom'
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 import './Buttons.css';
@@ -16,7 +17,7 @@ export default class NavButton extends React.Component {
 export class Button extends React.Component {
     render() {
         return (
-        <button className="btn1">{this.props.name}</button>
+        <button className="btn1" type="button"><Link to="/About">{this.props.name}</Link></button>
         );
     }
 }
diff --git a/src/Navbar.js b/src/Navbar.js
index 923e7db..b18fec9 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -14,11 +14,15 @@ class Navbar extends React.Component {
             </button>
             <div className="collapse navbar-collapse flex" id="navButtons">
                 <ul className="navbar-nav nav-mod">
-                    <NavButton name="Home" />
+                    <NavButton name="Home" lhref="/" />
                     <NavButton name="Film" />
                     <NavButton name="Series" />
-                    <NavButton name="About" />
+                    <NavButton name="About" lhref="/About" />
                 </ul>
+                <form class="form-inline my-2 my-lg-0">
+                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                    <button class="btn1" type="submit">Search</button>
+                </form>
             </div>
         </nav>
         );
diff --git a/src/notfound.js b/src/notfound.js
new file mode 100644
index 0000000..6c325fd
--- /dev/null
+++ b/src/notfound.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Navbar from './Navbar';
+
+class NotFound extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="LORDNABBO" />
+                <div><h1>I MEME 404</h1></div>
+            </>
+        );
+    }
+}
+
+export default NotFound;