From 22154d195317748132d58130817930245dfc6c1e Mon Sep 17 00:00:00 2001 From: enrico <enrico@fedora.windrunner.lan> Date: Mon, 13 Jan 2020 21:48:51 +0100 Subject: [PATCH] FIX: routing, links, nav buttons, dynamic title --- public/index.html | 2 +- src/About.js | 14 -------------- src/App.js | 8 ++++---- src/Buttons.js | 16 +++++----------- src/Navbar.js | 14 +++++++++----- src/routes/Anime.js | 14 ++++++++++++++ src/{ => routes}/Home.js | 8 ++++---- src/{ => routes}/notfound.js | 4 ++-- 8 files changed, 39 insertions(+), 41 deletions(-) delete mode 100644 src/About.js create mode 100644 src/routes/Anime.js rename src/{ => routes}/Home.js (66%) rename src/{ => routes}/notfound.js (74%) diff --git a/public/index.html b/public/index.html index 7bc5891..53db64e 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1" /> - <title>LORDNABBO</title> + <title>LORD//CHANNEL</title> </head> <body style="background-color: #343a40;"> <div id="root"></div> diff --git a/src/About.js b/src/About.js deleted file mode 100644 index 37f3c25..0000000 --- a/src/About.js +++ /dev/null @@ -1,14 +0,0 @@ -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 a2dd8e8..24a3888 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,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 Notfound = lazy(() => import('./notfound')); +const Home = lazy(() => import('./routes/Home')); +const Anime = lazy(() => import('./routes/Anime')); +const Notfound = lazy(() => import('./routes/notfound')); class App extends React.Component { @@ -13,7 +13,7 @@ class App extends React.Component { <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> - <Route path="/About" component={About}/> + <Route path="/Anime" component={Anime}/> <Route component={Notfound} /> </Switch> diff --git a/src/Buttons.js b/src/Buttons.js index b2d120f..a849f61 100644 --- a/src/Buttons.js +++ b/src/Buttons.js @@ -1,23 +1,17 @@ -import React from 'react' -import {Link} from 'react-router-dom' +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'; -export default class NavButton extends React.Component { +class NavButton extends React.Component { render() { return ( <li className="nav-item"> - <Button name={this.props.name} /> + <Link to={this.props.lhref}><button className="btn1">{this.props.name}</button></Link> </li> ); } } -export class Button extends React.Component { - render() { - return ( - <button className="btn1" type="button"><Link to="/About">{this.props.name}</Link></button> - ); - } -} +export default NavButton; diff --git a/src/Navbar.js b/src/Navbar.js index b18fec9..4e89d74 100644 --- a/src/Navbar.js +++ b/src/Navbar.js @@ -1,4 +1,5 @@ import React from 'react'; +import {Link} from 'react-router-dom'; import NavButton from './Buttons'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; @@ -8,16 +9,19 @@ class Navbar extends React.Component { render() { return ( <nav className="navbar navbar-expand-lg navbar-dark bg-dark"> - <span className="navbar-brand">{this.props.brand}</span> + <Link to="/"><span className="navbar-brand">LORD//{this.props.brand}</span></Link> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navButtons" aria-controls="navButtons" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse flex" id="navButtons"> <ul className="navbar-nav nav-mod"> - <NavButton name="Home" lhref="/" /> - <NavButton name="Film" /> - <NavButton name="Series" /> - <NavButton name="About" lhref="/About" /> + <NavButton name="Film" lhref="/Film" /> + <NavButton name="Anime" lhref="/Anime" /> + <NavButton name="Serie TV" lhref="/Serietv" /> + <NavButton name="Immagini" lhref="/Immagini" /> + <NavButton name="Musica" lhref="/Musica" /> + <NavButton name="Giochi" lhref="/Giochi" /> + <NavButton name="Programmi" lhref="/Programmi" /> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> diff --git a/src/routes/Anime.js b/src/routes/Anime.js new file mode 100644 index 0000000..7b07812 --- /dev/null +++ b/src/routes/Anime.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Navbar from '../Navbar'; + +class Anime extends React.Component { + render() { + return ( + <> + <Navbar brand="ANIME" /> + </> + ); + } +} + +export default Anime; diff --git a/src/Home.js b/src/routes/Home.js similarity index 66% rename from src/Home.js rename to src/routes/Home.js index b99a5c5..674a284 100644 --- a/src/Home.js +++ b/src/routes/Home.js @@ -1,13 +1,13 @@ import React from 'react'; -import Navbar from './Navbar'; -import Parallax from './Parallax'; -import CardContainer from './CardContainer'; +import Navbar from '../Navbar'; +import Parallax from '../Parallax'; +import CardContainer from '../CardContainer'; class Home extends React.Component { render() { return ( <> - <Navbar brand="LORDNABBO" /> + <Navbar brand="CHANNEL" /> <Parallax /> <CardContainer sectionTitle="Latest Uploads" /> <CardContainer sectionTitle="Random" /> diff --git a/src/notfound.js b/src/routes/notfound.js similarity index 74% rename from src/notfound.js rename to src/routes/notfound.js index 6c325fd..b65408f 100644 --- a/src/notfound.js +++ b/src/routes/notfound.js @@ -1,11 +1,11 @@ import React from 'react'; -import Navbar from './Navbar'; +import Navbar from '../Navbar'; class NotFound extends React.Component { render() { return ( <> - <Navbar brand="LORDNABBO" /> + <Navbar brand="404" /> <div><h1>I MEME 404</h1></div> </> );