src/App.js

@@ -1,41 +1,21 @@
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
-import Loading from "./routes/Loading";
 
-//const Home = lazy(() => import('./routes/Home'));
+const Home = lazy(() => import('./routes/Home'));
-const Home = lazy(() => {
-    return new Promise(resolve => {
-        setTimeout(() => resolve(import("./routes/Home")), 500);
-    });
-});
-const Film = lazy(() => import('./routes/Film'));
 const Anime = lazy(() => import('./routes/Anime'));
-const SerieTV = lazy(() => import('./routes/SerieTV'));
+const Notfound = lazy(() => import('./routes/notfound'));
-const Immagini = lazy(() => import('./routes/Immagini'));
-const Musica = lazy(() => import('./routes/Musica'));
-const Giochi = lazy(() => import('./routes/Giochi'));
-const Programmi = lazy(() => import('./routes/Programmi'));
-const Pannocchiacattiva = lazy(() => import('./routes/Pannocchiacattiva'))
 
-const NotFound = lazy(() => import('./routes/NotFound'));
 
 class App extends React.Component {
     render() {
         return (
             <Router>
-                <Suspense fallback={<Loading />}>
+                <Suspense fallback={<div>Loading...</div>}>
                     <Switch>
                         <Route exact path="/" component={Home}/>
-                        <Route path="/Film" component={Film}/>
                         <Route path="/Anime" component={Anime}/>
-                        <Route path="/SerieTV" component={SerieTV}/>
-                        <Route path="/Immagini" component={Immagini}/>
-                        <Route path="/Musica" component={Musica}/>
-                        <Route path="/Giochi" component={Giochi}/>
-                        <Route path="/Programmi" component={Programmi}/>
-                        <Route path="/Pannocchiacattiva" component={Pannocchiacattiva}/>
 
-                        <Route component={NotFound} />
+                        <Route component={Notfound} />
                     </Switch>
                 </Suspense>
             </Router>

src/ModalButton.css

@@ -1,4 +1,4 @@
-.VideoPlayer {
+.videoPlayer {
     width: 100%;
     height: 250px;
     background-color: black;

src/ModalButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
-import Button from 'react-bootstrap/Button';
+import Button from './Buttons';
 import Modal from 'react-bootstrap/Modal';
 import './Buttons.css';
 import './ModalButton.css';
@@ -11,17 +11,16 @@ function ModalButton() {
     
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
-
     return (
     <>
-        <Button className="btn1" onClick={handleShow} lhref="#">View</Button>
+        <Button className="btn1" name="view" onClick={handleShow} />
 
         <Modal show={show} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title>Card Title</Modal.Title>
             </Modal.Header>
             <Modal.Body>
-                <div className="VideoPlayer"></div>
+                <VideoPlayer />
                 Some quick example text to build on the card title and make up the bulk of the card's content.
             </Modal.Body>
         </Modal>
@@ -29,4 +28,12 @@ function ModalButton() {
     );
 }
 
+class VideoPlayer extends React.Component {
+    render() {
+        return (
+            <div className="videoPlayer"></div>
+        );
+    }
+}
+
 export default ModalButton;

src/Navbar.js

@@ -23,9 +23,9 @@ class Navbar extends React.Component {
                     <NavButton name="Giochi" lhref="/Giochi" />
                     <NavButton name="Programmi" lhref="/Programmi" />
                 </ul>
-                <form className="form-inline my-2 my-lg-0">
+                <form class="form-inline my-2 my-lg-0">
-                    <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-                    <button className="btn1" type="submit">Search</button>
+                    <button class="btn1" type="submit">Search</button>
                 </form>
             </div>
         </nav>

src/routes/Film.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class Film extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="FILM" />
-            </>
-        );
-    }
-}
-
-export default Film;

src/routes/Giochi.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class Giochi extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="GIOCHI" />
-            </>
-        );
-    }
-}
-
-export default Giochi;

src/routes/Immagini.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class Immagini extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="IMMAGINI" />
-            </>
-        );
-    }
-}
-
-export default Immagini;

src/routes/Loading.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.min.js';
-import "./centercontainer.css";
-import loading1 from "./loadinggifs/loading1.gif";
-import loading2 from "./loadinggifs/loading2.gif";
-import loading3 from "./loadinggifs/loading3.gif";
-import loading4 from "./loadinggifs/loading4.gif";
-
-class Loading extends React.Component {
-    render() {
-
-        let randInt = () => {
-            return Math.round(Math.random() * 4);
-        };
-
-        let randomGif = () => {
-            let images = [loading1, loading2, loading3, loading4]
-            return images[randInt()];
-        };
-
-        console.log(randomGif())
-
-        return (
-            <>
-                <Navbar brand="LOADING" />
-                <div className="centered">
-                    <div className="row">
-                        <img alt="Loading..." src={randomGif()} />
-                    </div>
-                </div>
-            </>
-        );
-    }
-}
-
-export default Loading;

src/routes/Musica.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class Musica extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="MUSICA" />
-            </>
-        );
-    }
-}
-
-export default Musica;

src/routes/NotFound.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.min.js';
-import "./centercontainer.css"
-
-class NotFound extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="404" />
-                <div className="centered">
-                    <div className="row">
-                        <img alt="Loading..." src="https://i.pinimg.com/originals/8f/c3/21/8fc32146cbf72ae17430e05ecc8b61be.gif" />
-                    </div>
-                </div>
-            </>
-        );
-    }
-}
-
-export default NotFound;

src/routes/Pannocchiacattiva.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.min.js';
-import Form from 'react-bootstrap/Form';
-import Col from 'react-bootstrap/Col';
-import '../Buttons.css';
-import Navbar from '../Navbar';
-
-class Pannocchiacattiva extends React.Component {
-    render() {
-        const shiroTexto = {
-            color: 'white'
-        }
-        return (
-            <>
-                <Navbar brand="PANNOCCHIA" />
-                <div className="centered" style={shiroTexto}>
-                    <Form>
-                        <Form.Group controlId="exampleForm.ControlInput1">
-                            <Form.Control type="text" placeholder="Titolo Anime" />
-                        </Form.Group>
-                        <Form.Group controlId="exampleForm.ControlTextarea1">
-                            <Form.Control type="text" placeholder="Trama" as="textarea" rows="3" />
-                        </Form.Group>
-                        <Form.Row>
-                            <Form.Group as={Col} controlId="formGridCity">
-                                <Form.Control type="text" placeholder="Durata" />
-                            </Form.Group>
-
-                            <Form.Group as={Col} controlId="formGridState">
-                                <Form.Control type="text" placeholder="Voto" />
-                            </Form.Group>
-
-                            <Form.Group as={Col} controlId="formGridZip">
-                                <Form.Control type="text" placeholder="Lingua" />
-                            </Form.Group>
-                        </Form.Row>
-                        <button className="btn1">Submit</button>
-                    </Form>
-                </div>
-            </>
-        );
-    }
-}
-
-export default Pannocchiacattiva;

src/routes/Programmi.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class Programmi extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="PROGRAMMI" />
-            </>
-        );
-    }
-}
-
-export default Programmi;

src/routes/SerieTV.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Navbar from '../Navbar';
-
-class SerieTV extends React.Component {
-    render() {
-        return (
-            <>
-                <Navbar brand="SERIETV" />
-            </>
-        );
-    }
-}
-
-export default SerieTV;

src/routes/centercontainer.css

@@ -1,15 +0,0 @@
-.centered {
-    height: 93vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.row {
-    width: auto;
-}
-
-img {
-    height: 30vh;
-    width: auto;
-}

src/routes/notfound.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Navbar from '../Navbar';
+
+class NotFound extends React.Component {
+    render() {
+        return (
+            <>
+                <Navbar brand="404" />
+                <div><h1>I MEME 404</h1></div>
+            </>
+        );
+    }
+}
+
+export default NotFound;